Шрифты, цвет, отступы и версия для телефона

Настройки проекта

Чтобы сайт выглядел единым, общие вещи задают один раз — в настройках сайта (проекта):

• шрифты — для заголовков и основного текста. Хватит одного шрифта в двух-трёх начертаниях или двух хорошо сочетающихся. Для русских текстов выбирайте шрифты с кириллицей, например Montserrat, Roboto, Golos Text, PT Sans;
• цвета — основной цвет текста, фона и акцентный цвет для кнопок и ссылок;
• иконка сайта (favicon) — значок во вкладке браузера.

Если поменять шрифт в настройках проекта, он обновится на всех страницах сразу.

Порядок и ритм

Что делает страницу аккуратной:

• один акцентный цвет — для кнопок и важного. Для пекарни подойдёт тёплый коричневый или карамельный. Если ярким выделено всё, ничего не выделено;
• единые отступы — одинаковое расстояние между блоками, например 90 пикселей сверху и снизу. Разные отступы выглядят как небрежность;
• чередование фона — блоки на белом и светло-бежевом помогают глазу отличать секции;
• короткие абзацы и подзаголовки — на сайте не читают, а сканируют глазами;
• выравнивание — по левому краю для длинных текстов, по центру только для коротких заголовков.

Основы визуального дизайна — сетка, типографика, цвет — подробно разобраны в курсе «UX/UI-дизайнер».

Читаемость

• Контраст: тёмный текст на светлом фоне или светлый на тёмном. Серый текст на бежевом может выглядеть изящно, но читается плохо;
• текст поверх фото: затемните фото в настройках обложки или подложите под текст полупрозрачную плашку;
• размер: основной текст на телефоне — не меньше 16 пикселей, иначе его придётся увеличивать пальцами.

Версия для телефона

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

В режиме предпросмотра переключитесь на ширину телефона — значок вверху. Что смотреть:

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

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