Дизайн блоков для библиотеки Тильды

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

Я занималась дизайном некоторых блоков библиотеки:
• подбором референcов и составлением идей
• утверждением вариантов
• подбором контента и написанием текста для блоков
• версткой макетов десктопной и мобильной версии
• продумывала сценарии настроек блока
• передавала макеты разработчиком и общалась с ними по ходу работы
• перед запуском блока участвовала в тестировании блоков и помогала отделу маркетинга во время запуска анонса блоков

Моя роль

О библиотеке блоков

Исследования, разработка макетов, подбор контента, сценарии пользовательских настроек блоков

Разбор одного из блоков категории Преимущества

Преимущества в виде галереи FR601

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

Идея

Возможности

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

Положение текста внутри карточки можно настроить в зависимости от контента или общей стилистики сайта.

А еще галерею можно сделать в 12 колонок сетки или 100% по ширине окна и настроить отступы внутри между карточками.

Галерея сделана с помощью «Карточной механики». Так плитки можно легко перетаскивать и менять их положение относительно друг друга.

Их можно продублировать или временно скрыть, если они не нужны в данный момент.

Еще это помогает легко задать всем или только некоторым карточкам кнопку, например для перехода на новую страницу

Настройки

Заголовок выравнивается:
По левому краю
По центру
По правому краю

Ширина галереи может быть:
Ширина 100% по умолчанию
100% с отступами в 40px по краям
12 колонок

Отступы между изображениями:
0px / 10px / 20px / 40px

Еще пример блока в разных состояниях с кратким описанием настроек

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

А при увеличении количества текста на ней «растет» наверх. Нижний край карточки всегда зафиксирован. Ширину карточки тоже можно настроить. Это может иногда помочь сделать более удачное дизайн решение.