Разговор про эффективный веб-дизайн обычно сводится к вкусу: нравится или не нравится. В работе это плохой критерий — заказчик и дизайнер могут спорить о цвете кнопки неделю, а сайт всё это время не отвечает на вопросы посетителя. Мы оцениваем дизайн по тому, помогает ли он человеку сделать то, за чем он пришёл, и по нескольким проверяемым признакам. Разбираем эти признаки по порядку.
Дизайн начинается со структуры, а не с макета
До первого экрана в графическом редакторе полезно ответить на три вопроса: кто приходит на сайт, с каким вопросом и что должно произойти дальше. Ответы определяют, какие разделы нужны, что показывать на первом экране и какие действия делать заметными.
Практический признак продуманной структуры: посетитель на любой странице понимает, где он находится, что здесь можно сделать и куда идти дальше. Проверяется просто — откройте внутреннюю страницу в новом окне и посмотрите, ясно ли это без прокрутки.
Типичная ошибка на этом этапе — меню, отражающее устройство компании, а не задачи клиента. Раздел «Наша деятельность» понятен внутри организации и бесполезен снаружи.
Первый экран
За несколько секунд посетитель решает, туда ли он попал. Помогают этому решению конкретные вещи, а не крупная фотография.
- Понятное описание того, что здесь предлагают, обычными словами.
- Признак масштаба и специализации: чем вы отличаетесь от соседей по выдаче.
- Одно основное действие, заметно оформленное.
- Способ связаться, не прокручивая страницу до низа.
- Отсутствие перекрывающих окон в первые секунды.
Слоганы вида «решения для вашего бизнеса» не проходят проверку: они подходят любой компании и потому не сообщают ничего.
Типографика и читаемость
Основную часть сайта человек читает, поэтому текст важнее декора.
| Параметр | Ориентир | Что происходит при нарушении |
|---|---|---|
| Размер основного текста | Не меньше 16 пикселей на мобильном | Читают с увеличением или не читают вовсе |
| Длина строки | Примерно 60-80 знаков | Глаз теряет начало следующей строки |
| Межстрочное расстояние | Около полуторного | Текст выглядит плотной массой |
| Контраст текста к фону | Не ниже 4,5:1, для крупного 3:1 | Не читается на солнце и на дешёвых экранах |
| Число начертаний | Два-три на весь сайт | Страница выглядит собранной из разных мест |
| Выравнивание текста | По левому краю | По ширине появляются рваные пробелы |
Отдельно про светло-серый текст на белом. Он выглядит аккуратно в макете на хорошем мониторе и почти исчезает на телефоне при дневном свете. Это самая частая правка, которую мы вносим при аудите.
Иерархия и внимание
Дизайн управляет вниманием: то, что важнее, должно выглядеть заметнее. Инструментов немного — размер, вес шрифта, цвет, пустое пространство, положение на экране.
Главное правило: акцент работает, пока он один. Если на экране пять ярких кнопок, ни одна не выделяется, и человек выбирает наугад или не выбирает вовсе. Второстепенные действия оформляются сдержаннее — контурной кнопкой или ссылкой.
Пустое пространство не является потерей места. Оно разделяет блоки и позволяет глазу понять, что к чему относится, без рамок и линий. Плотная вёрстка без воздуха читается медленнее, даже когда весь текст помещается на экран.
Адаптивность и скорость
Большая часть посетителей приходит с телефона, поэтому мобильный вариант — не уменьшенная копия, а основной сценарий.
- Кликабельные элементы достаточного размера, чтобы попадать пальцем без промаха.
- Таблицы либо прокручиваются внутри контейнера, либо перестраиваются в карточки. Сжимать колонки до нечитаемости нельзя.
- Формы с правильными типами полей: числовая клавиатура для телефона, почтовая для адреса.
- Ничего важного не спрятано за наведением мыши — на телефоне наведения нет.
- Горизонтальной прокрутки страницы нет ни на одной ширине экрана.
Скорость — часть дизайна, а не отдельная техническая тема. Тяжёлые изображения, десяток шрифтовых начертаний и сторонние виджеты складываются в несколько секунд ожидания. Практический минимум: изображения в современных форматах и нужного размера, шрифты в двух-трёх начертаниях, отложенная загрузка того, что ниже первого экрана.
Формы и обратная связь
Форма — место, где дизайн превращается в результат, и одновременно место, где чаще всего теряют обращения.
- Полей столько, сколько действительно нужно для первого контакта. Каждое лишнее уменьшает число отправок.
- Подписи над полями, а не только подсказки внутри: подсказка исчезает при вводе, и человек забывает, что заполнял.
- Ошибки объясняются словами и показываются рядом с полем, а не общим сообщением сверху.
- Кнопка отправки не пропадает и не блокируется молча.
- После отправки есть явное подтверждение, а не возврат на ту же страницу.
- Согласие на обработку данных — непредустановленный чекбокс.
Полезная привычка: время от времени отправлять заявку с телефона самому и смотреть, что приходит на почту. Сломанные формы обнаруживаются именно так, а не в отчётах.
Доступность
Требования доступности выглядят как забота о меньшинстве, но большинство из них улучшают сайт для всех.
- Достаточный контраст помогает не только людям с ослабленным зрением, но и всем, кто смотрит на улице.
- Работа с клавиатуры нужна тем, кто быстро заполняет формы.
- Текстовые подписи к иконкам снимают догадки: значок редко однозначен.
- Цвет не должен быть единственным носителем смысла — около восьми процентов мужчин хуже различают красный и зелёный.
- Осмысленные атрибуты изображений помогают и поисковым системам.
Как проверить дизайн до запуска
- Открыть главную на телефоне и попробовать найти цену и способ связи.
- Пройти путь до заявки, не пользуясь мышью.
- Посмотреть страницу при медленном соединении: что видно в первые две секунды.
- Показать сайт человеку не из проекта и попросить вслух рассказать, что здесь предлагают.
- Проверить контраст текста и подписей.
- Заполнить форму с ошибками и посмотреть, понятно ли, что исправлять.
Шестой пункт обычно приносит больше правок, чем первые пять вместе.
Если сайт пора приводить в порядок целиком или собирать заново, мы делаем это от структуры до вёрстки: создание сайтов. Обычно начинаем с разбора текущих страниц и сценариев посетителей, а не с макетов.
