Бывает так: заказчику нужен лендинг еще вчера. К фронтендеру обращаться не хочется — долго, дорого, дизайнеру не понравятся отступы, а вся задача превратится в череду долгих согласований.
Привет, меня зовут Соня! Я – 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 и Яндекс.Метрику. На каждую кнопку формируется своя ссылка события, которая добавляется внутрь аналитики. А с помощью тег-менеджера вашему аналитику и вовсе не нужно лезть в код сайта.
В заключение
Короче говоря, Тильда не так примитивна, как мы привыкли о ней думать. Рабочий проект реально создать за два-три дня — с дизайном, адаптивом и анимацией. А на сэкономленные деньги можно купить “плойку” или еще пару мониторов вашему фронтендеру, чтобы смотрел наш канал на Ютубе.