Tilda – конструктор одностраничников с богатыми возможностями для работы с дизайном. У него интересные шаблоны, хороший набор готовых блоков, из которых легко собирать страницы, есть продвинутый редактор Zero Block. Tilda выбирают, когда нужно сделать красивый сайт с интерактивными элементами, не прибегая к услугам веб-разработчиков. Сервис с этой задачей чаще всего справляется.
Для работы с Tilda не требуются навыки разработки. Но очень желательно иметь хороший художественный вкус или хотя бы понимание того, каким должен быть дизайн современного сайта. Шаблоны Tilda сразу бросаются в глаза. Но если потратить достаточно времени на кастомизацию, то результат будет отличным.
Мы собрали примеры сайтов, сделанных на Tilda. Изучите их, чтобы оценить возможности конструктора. Возможно, некоторые решения разработчиков станут для вас вдохновением. Особое внимание обратите на ошибки — чаще всего их можно исправить стандартными инструментами конструктора.
1. Портфолио веб-дизайнера
Пример использования Tilda для демонстрации своих работ. По сути, это одностраничник со стандартной структурой: знакомство, портфолио, преимущества, услуги, этапы работы, отзывы, контакты. Для каждого из трёх примеров сделана отдельная страница с описанием.
С точки зрения дизайна этот сайт вообще никак не раскрывает возможности Tilda. Собрать такую страницу можно за несколько часов — для этого даже не нужно быть дизайнером. При этом примеры работ показывают, что у автора очень неплохие навыки вёрстки на Tilda — в том числе с использованием Zero Block и сложной пошаговой анимации.
Здесь же — максимальная шаблонность, неконтрастные цвета фона и текста. Вместо виджета с лентой Инстаграма — дыра в вёрстке. Складывается ощущение недоделанности, как будто на шаблон накидали контент, но так и не добрались до нормального оформления сайта.
Общее впечатление — от портфолио веб-дизайнера на Tilda ждёшь немного большего. Здесь же минимализм приближается к примитивизму. Если бы не примеры работ (и правда неплохие), то смотреть было бы вообще не на что. Примеры работ как раз отлично показывают, на что способна Tilda в руках дизайнера. Сайт-портфолио самого дизайнера не впечатляет.
2. Студия дизайна и архитектуры
Сайт студии дизайна и архитектуры — хороший пример того, как на Tilda можно делать сложные, многостраничные проекты. Технически это не очень удобно, потому что каждую страницу приходится собирать с нуля. Спасением станет создание и дублирование шаблона, на основе которого будут формироваться все разделы сайта.
Здесь мы видим большой сайт, практически полностью созданный в Zero Block. В десктопной версии много пошаговой анимации. В мобильной версии её почти нет — разве что указатели на то, как полистать галерею.
На этом примере можно посмотреть, как работает блог на Tilda. Для публикации новостей используется недавно добавленная функция «Потоки». Это удобный инструмент для ежедневных публикаций. Администратор может планировать выпуск постов и гибко управлять их отображением на странице.
В разделе с блогом размещена лента Instagram, которая обновляется автоматически. Под ней — блок с видеофоном, рекламирующий канал на YouTube. Здесь же размещена кнопка воспроизведения, при клике на которую появляется плеер с выбранным видео с канала.
Общее впечатление — большой проект, который хорошо демонстрирует возможности Tilda для профессионального создания сайтов для бизнеса.
3. Московская адвокатская палата
Удивительно неудачный лендинг с технической точки зрения. Оптимизация отсутствует вообще. Страница грузится медленнее, чем улитка ползает, да ещё и не отображает контент в некоторых фреймах. При использовании мобильной версии на ПК всё ещё хуже – вообще ничего не загружается, кроме баннера с QR-кодом и телефоном юридической конторы. Да и то после минуты ожидания – бесконечная анимация троеточия загрузки. Это необычно, ведь сайты на Tilda практически всегда работают нормально. Непонятно, что разработчики начудили в данном конкретном случае, но с десктопных браузеров пользоваться сайтом очень некомфортно. Примечательно, что со смартфонов на iOS/Android всё работает хорошо. Десктопные Chrome/Opera/Yandex не могут его нормально загрузить. С ПК и Интернетом всё в порядке, с остальными страницами проблем не было.
Так-то с точки зрения дизайна и структуры лендинг вполне приличный, грамотный. Сине-белая цветовая гамма – проверенное годами цветовое решение для бизнес-сайтов. Безотказное. На мобильнике страница выглядит интересно, профессионально. Здесь и выпадающие списки, и анимации, и кастомные графические элементы, и грамотные описания услуги и остального, и читаемые, приятные шрифты, симпатичные цветовые акценты на важных элементах. Подключены мессенджеры для обратной связи – WhatsApp и Telegram, есть форма для сбора обращений клиентов. Не придраться.
В общем, десктопная версия страницы – это треш, к ней вышеперечисленное не относится. Вёрстка, если всё же дождаться загрузки, тоже смотрится похуже мобильной, хотя и не на много. Сайт предназначен для просмотра только с мобильных устройств. Вряд ли так и было задумано. Хорошо сделанный, но, по сути, полурабочий лендинг.
4. Сайт кофейни
Сайт питерского кафе «Книги и кофе» для любителей почитать в уютной обстановке за чашкой ароматного напитка, послушать приглашённых гостей богемной сферы или самим выступить перед аудиторией. В общем, кружок по литературным интересам.
По формату является лендингом. С точки зрения дизайна страница опрятная, вполне обычная. Используется своеобразная цветовая схема из кофейного, болотного и коричневого оттенков. Смотрится немного маргинально, нестандартно, что, в принципе, нормально сочетается с профилем кафе.
Практически вся информация подана в файлах PDF, которые периодически обновляются, хоть и с опозданием – в июне афиша мероприятий за апрель выглядит слегка неактуальной. Чего не скажешь про меню еды, чая и других напитков. На них, вероятно, можно положиться.
Важный блок контактов оформлен нормально, информации достаточно. То, что не указано на странице, можно подсмотреть в аккаунтах групп популярных соцсетей.
Футер – это изображение с QR-кодом, а также информацией о принадлежности кафе к единому объединению предпринимателей Питера. Конечно, такие вещи лучше верстать из отдельных элементов. Картинка размытая, шрифты плохо читаются, двоясь в глазах. Также из футера не убрали рекламу Тильды. Зачем оставили – непонятно, её ведь можно отключить в настройках.
В общем, неплохая работа, сойдёт. Явно делал новичок, это не дизайнерский проект. Сайт, скорее всего, решает поставленные задачи, но восхищения не вызывает. То же самое с помощью Tilda можно подать гораздо более качественно, интересно.
5. VOGUE лекции
Российское представительство известного модного журнала Vogue запустило курс лекций, посвященных вопросам стиля. С помощью онлайн-уроков пользователи смогут научиться самостоятельно составлять различные виды гардеробов.
Одностраничник выполнен в строгих черно-белых тонах, дизайн незамысловатый, но стильный. Шапка содержит лишь кнопку входа в личный кабинет, меню отсутствует. Первый экран излагает суть проекта, ниже представлены спикеры. Следующий блок содержит видео, которое доступно только после входа в аккаунт, поэтому не совсем понятен смысл его размещения на промо-сайте. Также на странице можно ознакомиться с содержимым и стоимостью лекций, посмотреть бесплатную лекцию. Внизу лендинга размещена форма обратной связи, которая автоматически открывает почту mail.ru. В подвале указан адрес издательства.
Возможность приобретения лекций и получения доступа в личный кабинет в автоматическом режиме отсутствует, как и альтернативные способы связи, кроме email. Не указан даже номер телефона.
Общее впечатление – неплохая бизнес-идея, но отвратительная реализация. Отсутствие элементарных маркетинговых инструментов, неграмотно выстроенная структура и навигация вряд ли обеспечат сайту высокую конверсию.
6. Клуб Путешествий
Сайт принадлежит популярной сети магазинов спортивного инвентаря и одежды Спортмастер и размещен на поддомене основного сайта компании. Он создан с целью рекламы туристических туров по России от партнеров компании, а также реализации сопутствующего снаряжения для походов.
Из расположенного в шапке меню можно перейти к выбору направления путешествия, вида отдыха и, непосредственно, в интернет-магазин. Соответствующие блоки с ссылками на разделы сайта также размещены на главной странице. Посетители могут ознакомиться с бонусной программой и анонсами статей, размещенных в блоге на основном сайте компании. В подвале находятся ссылки на соцсети, информационные и служебные страницы основного сайта.
Грамотно оформлен раздел выбора тура. Он имеет фильтры по различным критериям и сортировку результатов. Для оформления заявки на приобретение тура пользователя перебрасывает на сайт туроператора.
Общее впечатление – сайт имеет приятный дизайн, простую и удобную навигацию. Несмотря на минимализм в оформлении и функционале, он отлично справляется с поставленными задачами – рекламой туристических туров и увеличением продаж своих товаров.
7. Корпорация «Синергия»
Корпорация реализует модель непрерывного обучения на базе более 15 образовательных организаций. В ее состав входят университеты, коммуникационное и экспортное агентства, школа бизнеса и пр. Сайт корпорации имеет русскую и английскую локализации.
В шапке расположено меню и ссылка на блок с контактами. Аналогичная ссылка, расположенная на первом экране оказалась нерабочей. Блоки сайта содержат информацию о компании, ее руководстве, проектах, структуре. Внизу страницы выведена новостная лента имеющегося блога. В подвале продублировано меню, размещены контактные данные и график работы.
Основная смысловая нагрузка сайта (продвижение своих образовательных проектов) заложена в пункте меню Проекты. Страница содержит перечень курсов и проектов с ссылками на pdf-презентации по каждому из них.
Общее впечатление – неплохое оформление сайта, но немного нелогичное меню и навигация. Сайт заслуживает твердую четверку по пятибалльной системе.
8. Проект Ozon Ballon
E-commerce платформа Ozon проводит конкурсы для талантливых художников, желающих принять участие в оформлении пунктов выдачи сети своих магазинов. Данному проекту и посвящен сайт Ballon.ozon.ru.
На главной станице установлено два вида меню – верхнее с ссылками на контакты и общую информацию и фиксированное нижнее для взаимодействия с проектом. На первом экране и в одном из блоков размещены ссылки на детальную информацию для художников и партнеров с точками выдачи, желающих принять участие в проекте. Также на главной странице можно увидеть уже принятые работы и новостную ленту проекта. Связаться с организаторами можно только по email, номера телефонов и другие контактные данные отсутствуют.
Отдельного внимания заслуживает галерея работ. На первом экране размещены ссылки на разделы с различными техниками исполнения и небольшой встроенный видеоролик творческого процесса. Ниже можно посмотреть блоки с перечисленными стилями работ или перейти в общую галерею.
Общее впечатление — сайт имеет крутой дизайн с яркими изображениями в фирменной цветовой гамме компании и анимацией. Чувствуется рука профессионала. К структуре и наполнению также претензий нет, все четко и по делу.
9. Студия 3 Арт Медиа
III ART MEDIA — креативный видеопродакшн полного цикла в Алматы. Студия занимается производством роликов с нуля от разработки сценария до постпроизводства.
Первый экран занимает беззвучный промо-ролик с ссылкой на портфолио, полную версию которого можно посмотреть ниже на странице. В шапке спрятано меню гамбургер-меню и ссылки на соцсети. После небольшого описания компании размещен опрос для расчета стоимости ролика, результаты которого озвучит менеджер по указанному номеру телефона. Также на главной странице описаны преимущества сотрудничества с видеостудией, приведены примеры работ и логотипы известных клиентов. С помощью формы обратной связи можно оставить заявку на создание ролика. Внизу сайта подробное описание услуг компании и условий сотрудничества, контактные данные и ссылки на соцсети.
Общее впечатление – сайт неплохой, но для креативной студии дизайн мог быть интересней, тем более возможности конструктора позволяют это сделать.
Выводы
Tilda предоставляет много инструментов для настройки дизайна — надо только правильно ими пользоваться. В том же редакторе Zero Block можно с нуля собрать практически любой блок и отрисовать крутую пошаговую анимацию, которая будет привлекать внимание посетителей. Главное не увлекаться и помнить, что сайт должен быть не только красивым, но ещё и удобным для пользователей.
У Tilda всё хорошо не только с дизайном, но и с функциональностью. В приведённых примерах нет сложных проектов, в основном визитки, портфолио и лендинги, но при желании на конструкторе можно разработать небольшой интернет-магазин.
С адаптивностью тоже всё в порядке. Все шаблоны и блоки умеют подстраиваться под разные устройства плюс Tilda позволяет скрывать отдельные секции в зависимости от разрешения экрана. Единственная сложность — настройка адаптивности в Zero Block. Но и там всё делается вручную. Надо лишь потратить время на тестирование блока на разных экранах.
