Татьяна Маслакова

web-дизайн (без верстки и программинга), Figma


Порассуждаем о Tilda и ограничениях, которые она накладывает на дизайн при верстке на Zero Block

Нравится 18  11  10

Не так давно закончила свой первый проект на конструкторе Tilda. Есть у этого конструктора свои нюансы. Давайте обсудим какие ограничения накладывает Tilda на дизайн.


Есть у этого конструктора свои нюансы. Давайте обсудим какие ограничения накладывает Tilda на дизайн.

Не так давно закончила свой первый проект на этом конструкторе: https://www.octoseptol.ru
До этого проекта работала только над дизайном сайтов. Работы вела в программе Figma. И тут заказчик предложил оформить проект, ранее заказанный у меня на каком либо из конструкторов сайтов. Я остановилась на Тильде, так как уже давно хотела ее освоить. Верстку делала на зеро-блоках.

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

Собственно, цель этого поста - упорядочить у себя в голове те ограничения, которые накладывает Tilda на дизайн, чтобы окончательно понять и помочь разобраться другим, как проектировать дизайн под этот конструктор..


Размер контентной области, адаптивы и сетки

Frame 23.png

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

Речь пойдет о верстке на зеро-блоках.


В данный момент адаптивность у зеро-блоков в тильда делается при помощи прорисовки по-оддельности 5 различных состояний ширины экрана:

Мобилка 320-480
Мобилка-альбомное 480-640
Планшет 640-960
Планшет-альбомное 960-1200
ПК более 1200

При этом для каждого из этих состояний экрана тильда сама задает свою сетку.
У фигмы есть плагин grid for Tilda publishing, который умеет генерировать эти сетки. Сетки появится в виде стилей. Далее просто создаем фреймы нужных размеров и выбираем в стилях сетки нужный стиль.

Проблема тильды заключается в том, что мы не можем сделать дизайн на очень большие экраны. Делая дизайн для ПК нужно уместить контент внутри сетки 1160 пикселей, чтобы он корректно смотрелся на всех экранах свыше 1200 пикселей. Лично мне этой ширины для крупных экранов типа 1920 пикселей маловато. Но это тильда, и с этим приходится мириться. Возможно, когда-нибудь тильда добавит 6-е адаптивное разрешение для крупных экранов. А пока миримся дизайнами поуже.


Резиновость

Frame 24.png

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

Отдельные не фоновые элементы, которые стоят поверх фона можно привязывать только 3мя способами: к левому краю, к правому и по-центру. Привязок типа scale или left-right, как у фигмы, у тильды не предусмотрено.

Нужно помнить об этом, когда продумываешь продумывать поведение элементов при изменении размеров экранов.

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

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

Непропорционально можно менять размеры только шейпам, созданным внутри тильды (не загруженным извне)


Анимация

Frame 25.png

Много ограничений накладывается и на анимацию. Сделать все, что угодно не получится.

Иногда хочется заанимировать объект внутри какой-либо маски.

Но в тильде маски как таковые отсутствуют. Есть несколько обходных путей, но они не решают всех задумок.

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

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

Также нельзя задать 2 анимации на один объект (к примеру, чтобы объект по-разному срабатывал на наведение и на клик). Либо чтобы он скроллится с параллаксом и в то же время имел какую то особую анимацию появления. Можно настроить только что-то одно и не более.

Кстати нашла несколько интересных фишек по анимации у Евгения Uprock: https://www.youtube.com/watch?v=WKzdjSlgdIs - некоторые анимации появления он делает при помощи прямоугольников, которые перекрывают часть изображения, а потом плавно уезжают, открывая текст или фото. Рекомендую посмотреть видео, чтобы понимать, как это делается и потом учитывать в своих дизайнах под тильду.




А какие ограничения у Zero Block знаете вы?

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

Ну и зацените мой первый проект на Tilda: https://www.octoseptol.ru
Как вам? Как нибудь обязательно напишу отдельный пост про него.

Категория Веб разработка
Создано 2021-03-13 в 13:25
Инструменты создания
figma Tilda

Обсудим проект?