5 мифов о разработке сайтов на конструкторе Tilda. Кейсы Uplab

В статье мы хотим поделиться мифами о разработке сайтов на платформе Tilda Publishing, которую мы успешно используем с 2014 года.

В этой статье мы хотим обсудить мифы о разработке сайтов на платформе Tilda Publishing, которую мы успешно используем с 2014 года. Часть этих утверждений когда-то была правдой. Но теперь рынок разработки сильно изменился, а no-code инструменты заметно эволюционировали: в частности, Tilda заметно расширила свои возможности. В этой статье расскажем, какие из её «детских болезней» действительно стали лишь мифами, но не умолчим и о том, где остаются реальные ограничения. И, конечно, сделаем вывод, как бизнесу правильно использовать этот инструмент.

04

05

Прежде чем перейти к первому мифу из нашего списка, зафиксируем: Tilda — это не универсальное решение, а инструмент под конкретные задачи, в том числе рутинные. Она не закрывает 100% потребностей бизнеса, но всё же достаточно универсальна.

Задачи, где Tilda справляется очень хорошо:

Задачи, где популярные конструкторы сайтов не дотягивают, и лучше заказать кастомную разработку:

Главная ошибка — не в выборе Tilda, а в выборе её не под те задачи. Подробнее о возможностях платформы, её преимуществах и недостатках мы рассказывали в отдельной статье блога. А здесь поговорим о конкретных ограничениях платформы, реальных или мнимых.

Сайты на конструкторе заказывает не только малый бизнес, но и крупные организации. Например, это может быть лендинг под определенные задачи: продажа услуги, проект для отдельной целевой аудитории, событие, сайт для нового подразделения компании.

Сайт компании «СТТ» — пример оригинального дизайна в сочетании с интересной историей разработки, которую можно превратить в определенный подход.

О проекте

Сайт предназначен для клиентов ГК «Современные транспортные технологии» — эксклюзивного дистрибьютора «Группы ГАЗ». В контенте и дизайне — упор на технологичность и современность. Было важно подробно рассказать о доступных сервисах и позиционировать «СТТ» как компанию, которая сопровождает клиента на всех этапах жизненного цикла владения коммерческим транспортом и помогает развивать бизнес.

Реализация

Почему была выбрана Тильда? Ранее мы уже делали для заказчика мини-сайт «Вакансии» для поиска сотрудников. Разработали его буквально за 2 дня на Тильде, он всем очень понравился.

Поэтому, когда клиент обратился за разработкой полноценного сайта компании «СТТ» и объявил, что «нужно еще вчера», мы сразу предложили использовать Тильду. На основе видения генерального директора подготовили контент и предложили дизайн. Согласования проходили в несколько этапов и достаточно долго по времени. К счастью, мы уже давно работаем с этим клиентом и у нас накопилось много материалов. Сайт «СТТ» объединил по наполнению и смысловой нагрузке несколько ранее реализованных проектов.

Удобство — в том, что уже существующие страницы можно легко сделать частью нового сайта. Если вы пока не знаете, из каких страниц будет состоять сайт, разработайте одну под выполнение конкретной функции: продажу товара, найм сотрудников, презентацию компании. Потом сможете добавить её в общую структуру. В случае с «СТТ» страница «Вакансии» хорошо вписалась в новый сайт. Она расположена на поддомене, но в том же аккаунте Тильды, и ее так же легко администрировать.

Особенности

На этом проекте дизайнеры потрудились над каждым блоком сайта отдельно. Наброски сначала подготовили в Figma. Потом все перенесли и доработали в Тильде.

Мы использовали элементы дизайна из предыдущих проектов, которые делали для заказчика. Например, 3D-модели автомобилей на главном экране. Создали с ними интересное решение в виде step-by-step (пошаговой) анимации — это когда элементы страницы выполняют последовательные шаги и изображение трансформируется.

На первом экране сайта реализовано преображение машин из контурных рисунков в рисунки реальных автомобилей. Анимация создает ассоциацию с технологичностью, современными решениями. Образ поддерживает платформа, на которой появляются автомобили.

Еще один любопытный анимированный элемент — колесо в блоке «Готовый комплекс решений для бизнеса». Здесь была задача объединить все виды сервисов в один. Мы придумали такой анимированный круг, который при переходе от блока к блоку меняет иконки.

В Tilda действительно доступно много шаблонов, которые позволяют быстро собирать типовые проекты силами дизайнеров и редакторов. Такие проекты похожи друг на друга и отличаются только визуалом. Но если привлечь разработчиков и использовать расширенный функционал, можно реализовать сложные и уникальные проекты. Например, на Tilda можно делать многостраничные сайты, блоги, а также сайты с уникальной анимацией и интеграциями: для этого используют функцию Zero Block и помощь разработчиков, которые дорабатывают стандартный код.

О проекте

Telepark.TV предоставляет пользователям простой и быстрый способ смотреть телевидение на русском языке в Европе. Под один из тарифов сервиса был нужен продающий сайт. Клиент попросил сделать лендинг понятным, простым и одновременно красивым, чтобы он вызывал доверие и мотивировал пользователя подключить услугу.

Реализация

Сначала мы собрали требования, провели аналитику, разработали структуру и тексты для сайта. Для проекта была выбрана Тильда, так как клиент хотел сам менять местами и редактировать блоки, а также «отключать» тот или иной функционал в случае необходимости. Кроме того, сайт нужно было запустить достаточно быстро. Тильда в таком случае — оптимальное решение.

Когда сайт для первого тарифа был закончен, клиент обратился за разработкой лендинга для второго тарифа. Новая страница была идентична первой, поменялся только текст и некоторый контент. Поэтому сделать этот лендинг получилось всего за 8 часов, что сильно сэкономило бюджет на разработку. Можно сказать, клиент получил 2 сайта по цене одного.

Особенности

Telepark.TV — наш первый зарубежный клиент по разработке на Тильде, а еще первый среди тех, кто не пользуется сторонними сервисами для приема оплат на сайте. Tilda интегрирована с более чем 35 платежными системами для приема оплат в онлайн-магазинах, включая популярные в России и СНГ сервисы: ЮKassa, Cloudpayments, Robokassa, Т-Банк (Тинькофф), Альфа-Банк, Prodamus, PayAnyWay, ЮMoney, а также международные Stripe, PayPal, 2Checkout.

Но клиент не работает с предложенными платежными сервисами, а напрямую принимает оплату через свой банк, который подключен к системе управления на стороне клиента. Тильда не дает напрямую связать сайт и «самописную» систему.
Для создания этой интеграции мы подключили программиста. Теперь пользователи сервиса легко совершают оплаты, а клиент доволен.

Еще одна важная особенность проекта — реализация так называемого геолендинга. Компания не работает в ряде стран: Латвии, Литве, Украине, Эстонии и России. Поэтому мы сделали так, чтобы пользователь, заходящий на сайт из этих стран, видел поп-ап: «Услуга не предоставляется в … (название страны)».

Доработали счетчик обратного отсчета. В Тильде по умолчанию можно поставить счетчик и кнопку только последовательно. Мы скомпоновали эти элементы в одном блоке.

Другая доработка — это блок с тарифами. По умолчанию Тильда не позволяет при клике на кнопку разворачивать одновременно и табы, и блоки, которые к ним привязаны. Чтобы пользователь мог посмотреть подробные данные, например, о тарифах, ему нужно сделать два клика — на кнопку и затем на таб. Мы решили избавить посетителя сайта от лишних действий и подключили front-end разработчика, чтобы доработать функционал.

О проекте

Компания «Профэнергосервис» предлагает несколько продуктов, которые помогают вернуть бизнесу переплату за электроэнергию и уменьшить стоимость платы в будущем. Сайт был создан, чтобы рассказать о продукте и компании понятным и доступным языком и убедить потенциальных клиентов, что они ничем не рискуют, а только выигрывают, обращаясь за помощью к специалистам «Профэнергосервиса».

Реализация

Мы создали дизайн, написали тексты, продумали анимацию и инфографику. В оформлении были использованы лаконичные цвета, сделан упор на технологии и современность.

Сайт должен приводить клиентов, поэтому на нем подробно описали услуги компании и рассказали, каким образом «Профэнергосервис» помогает экономить на энергоресурсах. На сайте есть и готовые кейсы, и отзывы, и благодарности.

Особенности

Блок с калькулятором доработали, подключив front-end специалиста.

Стандартный функционал Тильды предусматривает возможность создания калькулятора, но достаточно простого — с выводом одного значения. Однако нам нужно было вывести сразу две итоговые цифры: сумму возможной экономии на оплате энергоресурсов за месяц и за год. Поэтому мы пошли другим путём. Через Zero Block реализовали дизайн и с помощью программиста добавили на страницу скрипт, который позволил выводить в калькуляторе два итоговых значения. Разработка вышла экономичной — нам потребовалось не более 10-ти человеко-часов.

Найти похожие решения, реализованные с помощью популярного конструктора, действительно можно. Но сегодня проблема уже не в функционале сервиса. Tilda не ограничивает дизайн, ведь в ней есть инструменты для воплощения идей практически без границ. Так, с помощью Zero Block дизайн полностью кастомизируется: можно управлять сеткой, типографикой, анимацией; реализовать сложные визуальные концепции. Возможности ограничивает только опыт команды. Если у исполнителя недостаточно квалификации для того, чтобы использовать «продвинутые» функции Tilda, такие как Zero Block и анимацию, готовый продукт действительно будет лишен индивидуальности.

Готовые блоки мы используем лишь изредка, если это важно с технической точки зрения. Например, сюда относится блок с карточками новостей или формы обратной связи. В 90% случаев разрабатываем уникальные с точки зрения дизайна блоки.

О проекте

Центр технологий роботизации «Некст» занимается автоматизацией бизнес-процессов с помощью технологии RPA (роботизированная автоматизация процессов). Технология подразумевает создание «цифровых сотрудников» или программных роботов, которые имитируют действия человека, взаимодействующего с различными IT-системами. Дизайн сайта создан на основе элементов фирменного стиля компании, который тоже разработали в Uplab.

Реализация

В этом проекте оформление практически каждого блока с нуля придумано дизайнерами. У клиента не было никакого визуального контента, поэтому мы полностью отвечали за наполнение, рисовали иллюстрации, подбирали изображения.

На сайте много пошаговой анимации и микроанимации. Такой подход был выбран для того, чтобы вызвать у посетителя ассоциации с технологиями, роботизацией, будущим, с чем связана деятельность компании-заказчика. Сложные элементы выделяют сайт на фоне других, созданных на конструкторе.

Особенности

Микроанимации

Это короткие функциональные анимации, которые помогают пользователю ориентироваться, визуально откликаясь на его действия. Например, появление надписей по скроллу, фактоидов.

Из нетрадиционных эффектов на сайте использован круг, который вращается сам по себе, привлекая внимание.

Нестандартный для Тильды эффект в виде соединяющихся линий реализован на кнопках.

В разделе «‎Какие задачи решает RPA»‎ в оформлении блока с раскрывающимся списком используется hover-эффект — анимация элемента при наведении курсора, которая побуждает пользователя получить дополнительную информацию по ссылке. При наведении курсора фон закрашивается градиентом, цифра сдвигается и меняет цвет. Таким образом каждый пункт привлекает больше внимания пользователя. Подобные стандартные блоки Тильды не предусматривают такой эффект.

Step-by-step анимация (пошаговая анимация)

На главной странице реализована пошаговая анимация, изображающая соединение рук человека и робота. Вдохновением для нас послужила картина Микеланджело «Сотворение Адама». Этой композицией мы передали посыл, что технологии и человек становятся ближе, понятнее и доступнее друг другу.

На странице «О компании» в step-by-step анимации использован образ процессора как главного мозга компьютера. Внутри процессора и существуют программные роботы, которых создает компания.

Посмотрите, как работает этот эффект и читайте, как мы создаем дизайн-решения для имиджевых сайтов в статье: «Тильда в дизайне сайтов: примитивный конструктор или удобная кисть в руках художника?».

В рамках одного проекта (сайта) на Tilda можно создать максимум 1000 страниц. Это ограничение действует для платных тарифов, при этом существует лимит на создание — не более 100 новых страниц в день. Но что делать, если вы планируете размещать много новостей или статей, а тратить страницы сайта не хочется?

Есть несколько способов:

02

Использовать модуль «Потоки» (Tilda Feeds). Это позволит сэкономить на разработке и предоставить редакционной команде удобные инструменты для реализации идей. При разработке сайта «Городская среда» мы пошли по этому пути.

Использовать Тильду только для верстки, а затем интегрировать сверстанные страницы в соответствующие разделы сайта на другой платформе.

01

О проекте

Сайт о комфортной городской среде и ЖКХ был создан при поддержке Минстроя России, на нем транслируются лучшие практики благоустройства городов, регулярно выходят новости на эту тему.

Реализация

У компании уже был сайт на 1С-Битрикс, но эту платформу специалисты знали плохо, и им было сложно администрировать сайт. Клиенту постоянно приходилось обращаться к нам даже для размещения новых материалов. Поэтому было принято решение создать новый интернет-ресурс. Тильда отлично подошла: она достаточно проста в управлении и на ней можно реализовать все, что было на старом сайте.

Мы немного изменили дизайн в соответствии с новым брендбуком и логотипом клиента, подобрали новые фотографии, а структуру оставили прежней. Разработка заняла чуть больше месяца.

Особенности

«Потоки» — это встроенный модуль Тильды со своим редактором публикаций, в котором можно быстро верстать статьи. В редакторе текста есть все базовые инструменты для оформления: возможность добавления картинки, видео, цитаты, разделителя, разные стили лида и заголовков.

В один клик в едином интерфейсе можно управлять выходом публикаций: настраивать дату выпуска, автоматическое исчезновение неактуальных постов. Статья добавляется во все нужные разделы сайта тоже автоматически. Для каждого поста создается уникальная страница, которая индексируется в поисковых системах.

Постов можно создавать бесконечно много. Есть техническое ограничение — 5 000 постов на 1 поток. Но на одном сайте может быть несколько потоков, например, лента новостей и афиша мероприятий.

Клиенту очень понравились «Потоки», сейчас они сами могут размещать все, что нужно. В день выходит несколько постов без нашего участия.

Наш опыт показывает, что продвижение сайтов на Тильде может быть вполне успешным. Несмотря на то, что на платформе остаётся ряд ограничений (например, нельзя править ядро CMS, ускорять загрузку сайта за счет кеширования или удалять «мусорный» код из HTML), здесь есть все базовые инструменты для SEO: метатеги и заголовки, микроразметка и адаптивность под мобильные устройства.

Но для грамотного продвижения сайта вам еще понадобится профессиональная и знающая команда, которая пройдет все этапы разработки проекта вместе с вами. Проведет аналитику, подготовит контент и дизайн, поможет выбрать наилучшие решения.

В Uplab разработка любого сайта основана на комплексном подходе, где все этапы взаимосвязаны, а к работам привлекаются профильные специалисты из соответствующих отделов агентства.

Хотите получить больше кейсов и примеров? Подпишитесь на нашу рассылку.