Тильда против фронтенда: 6 главных мифов о конструкторе

Бывает так: заказчику нужен лендинг еще вчера. К фронтендеру обращаться не хочется — долго, дорого, дизайнеру не понравятся отступы, а вся задача превратится в череду долгих согласований.

Привет, меня зовут Соня! Я – UX/UI дизайнер в hh.ru. В этой статье мы разбираем популярные мифы о конструкторе сайтов и рассказываем, можно ли сделать классный сайт на Тильде и почему это доступнее, чем кажется.

У этой статьи есть видеоверсия для тех, кто захочет посмотреть на фишечки Тильды в динамике.

Миф 1. В Тильде ограниченные возможности, и вообще конструктор — несолидно

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

Миф 2. Подгонять, настраивать и переносить элементы в Тильду долго и муторно. То ли дело фронтенд!

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

Теперь можно импортировать дизайн по слоям сразу себе в код в два клика. Шрифты, картинки в SVG, кнопки и чтобы всё это было “по сеточке”, без замеров отступов между элементами. И потом не придется ловить страйки от дизайнера, мол, здесь всё поехало. 

Теперь из Фигмы можно напрямую импортировать дизайн в Тильду. Останется только доделать адаптивчик, а еще залинковать ссылки и кнопки. И всё – можно выпускать!

Копируем ссылку на конкретный фрейм в Фигме. Открываем вкладку «Импорт» в зеро-блоке, вставляем ссылку и ждем. Чем меньше исходный фрейм, тем быстрее импортируется, поэтому длинный фрейм лучше делить на части — так быстрее и надежнее.

Ваш лендинг в Тильде. Вы великолепны!

Миф 3. В Тильде всё статично, а мне нужны анимация и микро-взаимодействия

В Тильду зашито много разных анимационных эффектов от простых до довольно сложных, типа Step-by-Step Animation, параллакса по скроллу или движению мыши и разных эффектов появления элементов. 

Step-by-Step Animation позволяет гибко настраивать положение объекта при определенных условиях и активировать в зависимости от заданных параметров: появление элемента на экране при скролле, клике и наведении.

Настройка Step-by-Step Animation выглядит так: активируем анимацию, когда элемент появляется на экране. Выставляем параметры, положение, масштаб, шаги. Применяем к нужным элементам и получаем подмигивающий глаз. 

Миф 4. Конструктор не справится с Lottie-анимацией

В Тильду легко встроить и lottie-анимацию. Лайфхак года: нужно экспортировать анимацию из After Effects в JSON, добавить небольшой код в Тильду, и всё сработает. Причем lottie не тормозит и отлично работает на всех устройствах.

Создаем анимацию в After Effects через встроенные инструменты редактора. Конвертируем в формат JSON через специальное расширение Bodymovin. Открываем сайт lottie и импортируем JSON. Работает!

Теперь выставляем необходимый параметр: высоту, ширину, выключаем панель Controls. Копируем наш код и идем в Тильду. Открываем зеро-блок и вставляем этот код через специальный html-элемент. Располагаем его в нужном месте, сохраняем, публикуем и наслаждаемся анимацией.

Миф 5. Без навыков и дизайнера всё обречено

Тоже нет. В Тильде более 140 разных блоков на все случаи жизни. Причем их можно легко кастомизировать под свой брендбук — никто не поймет, что это Тильда без подглядываний в код.

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

Миф 6. Мне нужна seo-оптимизация, а еще теги и события, чтобы собрать статистику. Бездушный конструктор так не умеет

Умеет! И с этим тоже всё просто: в Тильде есть внутренняя статистика, можно подключить Google Analytics и Яндекс.Метрику. На каждую кнопку формируется своя ссылка события, которая добавляется внутрь аналитики. А с помощью тег-менеджера вашему аналитику и вовсе не нужно лезть в код сайта.

В заключение

Короче говоря, Тильда не так примитивна, как мы привыкли о ней думать. Рабочий проект реально создать за два-три дня — с дизайном, адаптивом и анимацией. А на сэкономленные деньги можно купить “плойку” или еще пару мониторов вашему фронтендеру, чтобы смотрел наш канал на Ютубе.

Читайте так же:

  • Google подтвердил нелегитимность обмена ссылкамиGoogle подтвердил нелегитимность обмена ссылками Во время последней видеовстречи для вебмастеров состоялся интересный диалог между оптимизатором и сотрудником Google Джоном Мюллером. Оптимизатор задал вопрос, касающийся стратегии обмена ссылками – является ли эта практика легальной и не противоречит ли принципам Google в том случае. […]
  • Google Ads приглашает принять участие в опросе на тему UXGoogle Ads приглашает принять участие в опросе на тему UX Исследователи пользовательского опыта Google Ads ищут рекламодателей для участия в опросе. Направленном на улучшение UX. Our user experience (UX) researchers are looking for participants of all levels to share feedback on Google Ads. If you’re interested. Turn on Market Research email […]
  • Hulu назначила дату выхода сериала про главу Theranos Элизабет ХолмсHulu назначила дату выхода сериала про главу Theranos Элизабет Холмс Пока идет судебное разбирательство с компанией Theranos, а Элизабет Холмс грозит серьезный срок за мошенничество, сериал по ее провалившемуся проекту получил дату выпуска.Компания Hulu еще в 2019 анонсировала мини-сериал The Dropout на 6-10 эпизодов, но с Кейт МакКиннон. Стало известно, […]
  • Mozilla запустила рекламу в адресной строке FirefoxMozilla запустила рекламу в адресной строке Firefox Mozilla запустила новую функцию контекстных подсказок –Firefox Suggest в адресной строке браузера версии 93.0. Она будет предлагать пользователям ссылки на релевантные сайты при вводе поискового запроса. Эти подсказки могут включать контент от рекламодателей. Firefox Suggest «показывает […]