Говорят, размер — не главное… но это ложь для веб-дизайна

Почему размер в интерфейсе имеет значение? Потому что в веб-дизайне, как и в жизни, все зависит от правильных пропорций.

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

Ниже пример плохого веб-дизайна, где размер работает против пользователя:

Такие решения мешают пользователю ориентироваться на сайте и доверять продукту.

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

Она задаёт маршрут. Пользователь не разбирается в макете — он идёт туда, куда его ведёт глаз. Визуальная иерархия помогает:

Выделить главное и второстепенное;
Упростить восприятие;
Избежать хаоса на странице.

Размер. Чем больше элемент, тем выше приоритет.
Цвет. Яркое привлекает, бледное отходит на фон.
Контраст. Жирный заголовок и лёгкий текст делают смысл заметнее.
Отступы. Что ближе, то связано. Что дальше — уже другое.

Когда иерархия есть, навигация становится простой. Человек сразу понимает, куда смотреть и куда кликнуть. Без иерархии пользователь теряется.

Я расскажу о том, какие размеры использовать при работе в ZeroBlock, где нет нет строгой сетки и всё решает чувство масштаба. Вот рекомендации, на которые можно опереться:

Это якорь страницы. Она должна быть простой и понятной.

Высота шапки: 80–110px
Логотип: 40–70px
Шрифт в меню: 16–18px
Кнопка в шапке (если есть): 44–60px
Hero-блок (первый экран): 600–800px по высоте

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

Текст — это содержание. Его должно быть удобно читать.

Заголовки на десктопе: 48–56px
На мобильном: 26–32px
Оптимальная длина: до 8–10 слов
Один заголовок в блоке. Не два подряд
Основной текст на десктопе: 16–18px
На мобильном: 14–16px

Лучше писать короткими абзацами. 3–4 строки — оптимально. Длинные тексты никто не читает.
Арина Плеханова

Белое пространство помогает глазу отдохнуть. Оно создаёт воздух и убирает шум.

Между блоками: 80–120px
Между элементами внутри блока: 20–60px
От заголовка до текста: 40px

Кнопка — главный призыв. Она должна быть заметной и кликабельной.

Высота: 48–56px
Ширина: от 120px, зависит от текста
Шрифт: 16–18px
Расстояние от других элементов: не менее 24px

Не пихайте в кнопку весь смысл. 1 глагол + 1 действие — идеально.

Например: «Купить», «Скачать», «Читать».

Упрощают восприятие и структурируют повторяющийся контент.

Важный контент — 2–3 карточки в ряд, второстепенный — до 6.
Размеры: 2 в ряд — 560×400px; 3 в ряд — 360×260px; 4 в ряд — 260×185px.
Не больше 3 строк текста в одной карточке.
Главное — вверху. Смысл лучше разделять визуально.

Делайте количество карточек кратным 12 — так проще адаптировать под сетку.

На Тильде контейнер ограничен — 1200px, и это диктует компактность.

В коде — весь экран в распоряжении, поэтому базовая ширина контейнера — 1920px (или адаптивно от 1440 до 1920).

Исследования показывают, что наиболее распространенное разрешение экрана 1920x1080px

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