Почему не стоит бояться делать дизайн сайта на Тильде: приемы, которые оживят даже стандартные блоки

И у дизайнеров, и у клиентов есть предубеждение — сайты на Тильде выходят однотипными. Это так, если взять готовый шаблон и просто заменить в нём текст. Но UI-дизайнер maryco Оля работает по-другому. Она рассказывает, как сделать сайт визуально интересным, делится подборкой трендовых блоков и чек-листом для проверки работы сайта.

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

При этом возможности дизайна открываются довольно широкие. В Тильде есть два варианта работы: в стандартном блоке с готовой вёрсткой и в zero-блоке, где можно свободно компоновать элементы.

Чаще всего мы работаем в стандартных блоках — они удобнее для клиентов: cотрудники компаний могут в дальнейшем сами заменять картинки и тексты, для этого не нужно специальных знаний. И это совсем не отменяет уникальность дизайна: в конструкторе доступно более 500 шаблонов, и их можно кастомизировать. А для сложных задач выручает zero-блок.

Что будет в статье:

1. Какие приемы можно использовать, чтобы сделать визуальный контент не шаблонным

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

3. Какие есть способы работы с анимацией

4. Какие есть возможности для адаптации сайта и на что обратить внимание

5. Подборка интересных блоков на Тильде

6. Полезный чек-лист, чтобы проверить работу сайта

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

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

Вот пример того, что получилось.

В Тильде есть блоки, где сетка включает много картинок — они расположены как по клеточкам. Если там разместить только фотографии, это будет смотреться однообразно. В таком случае мы чередуем их с векторной графикой. Для Garage Tesla мы заранее подготовили иллюстрации в Figma: нарисовали графические элементы и вставили в них фрагменты фото.

Помимо этого мы оформили в Figma обложки для видео в единой стилистике — с затемнением и размытием. Их можно наложить на ролик в видеохостинге или же использовать только для превью на Тильде.

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

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

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

Ещё одно решение в рамках стандартных блоков Тильды мы придумали для онлайн-магазина FMCG-товаров AVA. Чтобы адаптировать карточки товара под требования клиента, мы предварительно наложили на них необходимую инфографику: цвет, размер, количество и объём. А чтобы удобно организовать внушительный список товаров, мы добавили рубрики с иконками, которые тоже отрисовали в Figma.

Загрузка внешнего шрифта

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

Главное — соблюдать авторское право. Бесплатные шрифты рекомендуем поискать на:

Если вы готовы купить шрифт для сайта, вот ещё несколько ресурсов:

Возможности экранного редактора

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

Так мы сверстали раздел с контактной информацией на сайте Garage Tesla. Это один текстовый блок, внутри которого текст отформатирован по-разному: меняется цвет и жирность, есть ссылки на соцсети.

Леттеринг

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

Анимация в стандартных блоках

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

В стандартных блоках есть раздел меню «Анимация». А в нём — список эффектов, которые можно добавить к некоторым элементам на экране: кнопкам, заголовкам, карточкам. Но мы этим функционалом обычно не пользуемся — эффекты там довольно грубые и навязчивые. Зато во многих шаблонах уже заложено интерактивное движение, которое смотрится аккуратно.

Мы использовали такую анимацию для Garage Tesla. Например, при наведении курсора в разделе образовательных программ картинки слегка увеличиваются.

Step-by-Step animation в zero-блоках

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

А в одной из статей мы добавили анимацию для графиков.

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

Первая — заменить отдельные стандартные блоки на zero и настраивать их видимость для конкретных разрешений экранов. Вторая — выбрать другой стандартный блок с более подходящей для конкретного разрешения версткой.

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

Например, сайт Garage Tesla сделан из стандартных блоков, и на его первом экране расположена узкая горизонтальная картинка. Возникает проблема: для мобильного экрана Тильда автоматически обрезает изображение, и девочка не видна. Поэтому этот стандартный блок в мобильной версии мы заменили на zero. И там вручную сделали вёрстку, подходящую для вертикального формата.

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

Для Itsy-Bitsy сделали так, чтобы сайт растягивался по всей ширине только на мобильных устройствах — с помощью резиновой вёрстки в zero-блоке.

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

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

Мы разобрали основные настройки дизайна. Но для корректной работы сайта нужно учесть ещё много технических нюансов — их собрали для вас в отдельном чек-листе.

Для удобства прикладываем его и в таком формате.