36
7 мин
Попросите человека быстро найти на странице три вещи: цену, срок и условие возврата. Если он приближает экран, перечитывает строку или принимает подпись за кнопку, проблема не в его внимательности. Сайт не выстроил визуальный порядок.
Сетка и типографика звучат как внутренняя кухня дизайнера. Для бизнеса это способ управлять чтением: что посетитель заметит первым, где остановится, какие элементы свяжет между собой и не перепутает ли основное условие с примечанием.
Разбор одного экрана услуги
Представим блок с заголовком, коротким объяснением, ценой «от 35 000 ₽», четырьмя преимуществами и кнопкой. На ноутбуке всё помещается в две колонки. На телефоне элементы становятся одной лентой. Если просто уменьшить исходный макет, цена уедет ниже списка, строки растянутся от края до края, а кнопка потеряет связь с предложением.
Мы меняем порядок: сначала смысл услуги, затем цена и важное ограничение, после — действие, и только потом подробности. Это уже не «верстальная мелочь», а редакционное решение. В лендинге порядок чтения зачастую важнее количества декоративных элементов.
Пять признаков, которые видны без линейки
- Глаз теряет начало следующей строки. Обычно абзац слишком широкий или межстрочный интервал тесный.
- Заголовок и текст выглядят почти одинаково. Читателю приходится самому угадывать структуру.
- Подписи и сноски можно прочитать только после увеличения экрана.
- Цена, срок и кнопка стоят близко к чужому блоку и воспринимаются как разные предложения.
- После переноса на телефон короткая фраза занимает пять–шесть строк и отталкивает следующий важный элемент.
Мы не требуем одного размера шрифта для всех сайтов. Фирменный шрифт, возраст аудитории, язык, длина слов и плотность данных меняют решение. Но текст должен выдерживать увеличение и узкий экран без горизонтальной прокрутки и потери функций. Это согласуется с требованиями доступности: страница должна перестраиваться, а интерактивные элементы — оставаться различимыми.
Почему отступ — это смысл
Два пункта, стоящие рядом, мозг воспринимает как группу. Поэтому одинаковый отступ между заголовком, пояснением и следующим разделом стирает границы. Мы используем больше воздуха между разными мыслями и меньше — внутри одной. Так человек понимает структуру даже при беглом просмотре.
Если убрать все линии и цветные подложки, смысловые группы всё равно должны читаться. Отступы — это пунктуация интерфейса.
В кейсе редизайна сайта отеля «Мандариновый Остров» задача была не в замене шрифта ради моды. Мы сохранили характер бренда, заменили шрифт с неподходящей лицензией, разделили контакты отеля и ресторана и сделали самостоятельное обновление меню. Типографика там работала вместе с содержанием и дальнейшей поддержкой сайта.
Как дать полезное замечание дизайнеру
| Не помогает | Помогает |
|---|---|
| Сделайте текст красивее | На телефоне условие под ценой выглядит частью соседнего тарифа |
| Шрифт мелкий | Подпись поля не читается без увеличения на экране шириной 360 px |
| Мало воздуха | Преимущества сливаются с условиями оплаты; нужно визуально разделить группы |
| Всё слишком длинно | Первый абзац повторяет заголовок и отодвигает цену ниже экрана |
У замечания есть устройство, место и последствие. Тогда подрядчик может предложить решение и показать его, а не бесконечно менять размер на один пункт.
Небольшой тест перед приёмкой
- Откройте страницу на широком ноутбуке и на телефоне, не ориентируясь только на макет.
- Увеличьте текст средствами браузера и проверьте, не перекрылись ли кнопки и подписи.
- Дайте коллеге 15 секунд на поиск цены, срока и контакта; не подсказывайте.
- Проверьте длинное название услуги и реальный номер телефона, а не короткие заглушки.
- Посмотрите форму после ошибки: сообщения не должны ломать ритм и прятать кнопку.
Для отраслей с большим количеством характеристик — оборудования, стройматериалов, сложных услуг — такая проверка особенно важна. Мы учитываем это в сайтах для промышленных компаний, где пользователь сравнивает значения, а не просто читает рекламный текст.
Дополнительные мобильные сценарии собраны в практическом чек-листе. Но главный критерий остаётся человеческим: нужную информацию можно найти, прочитать и правильно связать с действием. Если это выполнено, сетка делает свою работу — даже если посетитель никогда не узнает её название.
