обзор самых востребованных
дизайн-профессий в 2024 году

Как сделать лендинг на Tilda

Как сделать лендинг на Tilda
7 ноября, 2023
10 мин

Лендинг — это одностраничный сайт, который призывает пользователя что-то сделать, например, купить товар или приобрести услугу. Такие страницы нужны как крупным IT-компаниям, так и малому бизнесу. Веб-дизайнер Хельга Моренко рассказала, как сделать эстетичный и эффективный лендинг с помощью конструктора Tilda.

Что такое Tilda

Tilda (Тильда) — это конструктор, который позволяет создать собственный сайт без специальных знаний и навыков. Он популярен, потому что это один из немногих российских ресурсов, а еще у него много функций, количество которых постоянно растет.

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

Из каких блоков состоит лендинг

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

В качестве примера могу рассказать о своей работе для компании по ландшафтному дизайну.

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

    Обложка — это визитная карточка лендинга. На этом экране мы кратко описываем продукт, иногда добавляем «call to action» — кнопку для покупки, форму регистрации или окошко, в котором можно оставить контакты. Это самый важный блок, и если он не сработает, то пользователь может сразу закрыть страницу.
первый экран лендинга на Tilda
Первый экран проекта лендинга Leaf.
  • Информация о продукте. Например, список услуг дизайнерской компании, ассортимент товаров в интернет-магазине или перечень учебных модулей в онлайн-курсе. В таких блоках часто используются пары «текст-картинка».
блок наши услуги на лендинге
Блок «Наши услуги» — включает заголовки, описания, изображения и ссылки. Источник
  • Преимущества. Список с причинами выбрать именно нас, а не конкурентов.
преимущества на лендинге
Блок с преимуществами: заголовки и небольшие описания
  • Этапы работы. В этом блоке с нумерацией можно пошагово описать, что ждет пользователя, если он совершит нужное нам действие.
блок этапы работы на лендинге
Разбивка по шагам сразу закрывает возможные вопросы клиента по тому, как будет проходить выполнение заказа.
  • Call to action. В конце еще раз предлагаем пользователю совершить нужное нам действие — даем ссылку на скачивание программы или форму для регистрации или контактов.
заполнить форму на лендинге
Призыв к действию также можно продублировать на обложке и между другими блоками, если страница получается длинной

Что еще можно добавить на лендинг:

  • Отзывы. Обычно этот блок включает серию кратких цитат клиентов с их фотографиями.
  • Цены. Информация о стоимости продукта и тарифах.
  • Целевая аудитория. Блок, отвечающий на вопрос «кому подойдет этот продукт».
  • Кейсы. Примеры выполненных работ — особенно актуально для компаний, чьи результаты можно представить в виде изображений. Например, для студий дизайна или архитектурных бюро.

Как добавлять и изменять блоки

Чтобы создать сайт на Tilda, нужно пройти регистрацию и кликнуть по ссылке «Создать новый сайт». После этого нажмите на кнопку «Создать новую страницу» и выберите «Пустая страница». Откроется рабочая область лендинга, на которую можно добавлять блоки.

Чтобы добавить первый элемент, выберите его в «Библиотеке блоков» — варианты разделены по категориям.

создание лендинга на тильде
Многие варианты доступны в бесплатной версии конструктора. Источник

У большинства блоков есть два варианта редактирования — «Контент» и «Настройки». Обе кнопки находятся в левом верхнем углу блока.

обложка лендинга на Tilda
Одна из стандартных обложек содержит надзаголовок, заголовок и подзаголовок, а также изображение на фоне

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

меню контента лендинга на тильде
Все контентные составляющие можно заменить на свои.

В меню «Настройки» можно изменить дизайн экрана: установить ширину колонок, отредактировать отступы, заменить шрифты в блоке или добавить простую анимацию. 

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

шахмотный порядок блоков на лендинге Tilda
Шахматный порядок на лендинге парфюмерных мастер-классов Perfume Project. Источник

Что такое Zero Block и в каких ситуациях он нужен

Zero Block — это встроенный редактор внутри Tilda. В нем можно создавать свои блоки вместо тех, что уже есть в библиотеке. Чтобы это сделать, пролистайте «Библиотеку блоков» до конца и выберите «Нулевой блок».

редактор zero block на лендинге Tilda
Так выглядит редактор Zero Block.

Zero Block поможет сделать что-то необычное. Например, сложную анимацию или градиентный переход между элементами, чтобы блоки плавно перетекали друг в друга.

лендинг, сделанный на Tilda
Сайт винных дегустаций «Нарочито просто» с пошаговой анимацией, сделанной в Zero Block. Источник

Если лендинг не требует сложного дизайна, Zero Block лучше не использовать. Вот несколько причин почему:

  • Визуальная уникальность нужна сайту гораздо меньше, чем его способность представлять продукт — а с этим справятся и стандартные блоки.
  • Иногда уникальность все усложняет — проверенные стандартные блоки могут помочь достичь более высокой конверсии, чем что-то необычное.
  • Если заказчику понадобится изменить текст или картинку в Zero Block без помощи дизайнера, он может все сломать.
  • Стандартные блоки автоматически адаптируются под компьютеры, планшеты и смартфоны — в Zero Block придется настраивать элементы для каждого экрана вручную.

Где брать иллюстрации для лендинга

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

Если клиент не предоставил изображения, можно использовать бесплатные стоки, например, Unsplash и Freepik. У этого способа есть свои сложности:

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

Часто заказчики делятся своими подборками с Pinterest и просят использовать их в дизайне, но так лучше не делать, чтобы не нарушать авторские права.

Еще один инструмент, который я использую при создании изображений — это Figma. Она поддерживает много плагинов, с помощью которых можно создавать объекты для декорирования сайтов на Tilda. Например, 3D-фигуры или эффекты для оформления заголовка. Все это можно сохранить в формате PNG и добавить на сайт.

На лендинг можно добавить 3D объект
3D-объект в Figma

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

рекомендуемое разрешение изображений указывается прямо в Tilda
Рекомендуемое разрешение изображений указывается в меню «Контент» у каждого стандартного блока.

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

Где брать тексты для лендингов

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

На лендинге не должно быть огромных полотен текста, его нужно делить на небольшие части. Обычно человек легко читает только три-четыре строчки. Также важно поддерживать консистентность — если у нас есть несколько пунктов в одном блоке, то в них должно быть примерно равное количество текста.

Лучше всего, если заказчик предлагает дизайнеру составить ТЗ для копирайтера — тогда текст не придется адаптировать под дизайн страницы. Бывает и так, что заказ для дизайнера включает копирайтинг, но тогда нужно выбирать: либо отказаться, либо попросить больше денег. Можно потратить на текст больше часов, чем на дизайн, при этом стоимость проекта останется той же. 

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

Что такое шрифтовая пара и как ее составлять

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

Я советую брать два шрифта и не больше трех-четырех вариантов различных их начертаний: для заголовков, подзаголовков, основного текста и, может, крупной надписи на обложке.

Шрифты бывают двух видов:

  • антиква — с засечками;
  • гротеск — без засечек.

К первым относятся, например, Times New Roman, Georgia, Adobe Garamond. Ко вторым — Helvetica, Roboto, Open Sans.

Оптимальное сочетание — это антиква в заголовке и гротеск в основном тексте. Декоративная антиква пришла из печати и выглядит выразительно, но при этом утомляет при чтении длинных текстов на экране. Гротеск же наоборот — прост, ясен и легко читается даже мелким кеглем.

Оптимальное сочетание шрифтов на сайте Tilda
Пример оптимального сочетания: заголовок антиквой Cinzel и текст, набранный гротескным Lato. Источник

Что взять на заметку, чтобы быть в тренде

Тренды в дизайнерской сфере отличаются от того, что просят заказчики. Представления о передовом дизайне у клиентов традиционно отстают от мировых тенденций на год-полтора.

Например, у заказчиков востребован минимализм — правда, после всех дополнений клиента он часто пресыщается деталями и становится «псевдоминимализмом».

лендинг на Tilda в стиле минимализм
Пример удачного лендинга в стиле минимализм. Источник

Также часто встречаются заказы на проекты в стиле «глассморфизм» — дизайн с эффектом матового стекла.

лендинг в стиле глассморфизм
Страница с элементами в стиле глассморфизм. Источник

Если говорить о трендах для дизайнеров, то в моде «кислотная» графика и «жидкое стекло» — дизайн с отражениями и характерными цветами, как в лужах после кислотного дождя.

Кислотная графика на лендинге Tilda
Пример кислотной графики. Источник

Также сохраняется тренд на крупную типографику с гротескными шрифтами.

крупный шрифт на сайте Tilda
Крупные и нарочито неправильно расположенные надписи — прием прошлого года, который еще в тренде. Источник

Уходит тренд на табличность в верстке — разделение страницы на поля, очерченные линиями.

Табличный дизайн сайте на Tilda
Пример табличного дизайна. Источник

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

Медиа Contented

Ваш адрес email не будет опубликован. Обязательные поля помечены *

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

Подпишитесь сейчас на нашу рассылку

Мы присылаем отличные материалы и никогда не спамим. Отписаться можно в любой момент