Читаемость — важнее эстетики
Сайт услуг — не журнал и не портфолио дизайнера. Задача — донести смысл до клиента, а не восхитить типографикой. Всё, что мешает чтению, — снижает конверсию.
Что важно проверить в первую очередь:
- Контраст текста и фона — тёмный текст на светлом или наоборот;
- Размер шрифта основного текста — минимум 16 пикселей, идеально 17–19;
- Межстрочный интервал — 1,4–1,6, а не «впритык»;
- Ширина колонки текста — 600–800 пикселей, не «на всю ширину экрана»;
- Отсутствие мерцающего фонового изображения под текстом.
Шрифты — не больше двух
Правило: один шрифт для заголовков, один для текста. Максимум три (можно добавить моноширинный для акцентов). Больше — визуальный хаос.
Что работает:
- Для заголовков — sans-serif с чётким контуром: Manrope, Inter, Onest, Golos Text. Читаются и крупно, и мелко;
- Для основного текста — тот же sans-serif или гуманистический: Inter, Golos Text, Roboto. Не декоративный, не с засечками (в вебе засечки читаются хуже на экранах);
- Русская типографика — используйте кавычки-ёлочки «...», длинное тире, правильные апострофы. Мелочи, которые заметны.
Что не работает: рукописные шрифты для основного текста, ультратонкие начертания на мелких размерах, декоративные шрифты в основной вёрстке.
Цветовая палитра — 3–5 цветов
Хорошая палитра работающего сайта:
- Основной цвет фона — обычно белый или очень светлый оттенок серого;
- Основной цвет текста — тёмно-серый или почти чёрный (не чистый чёрный — он контрастнее, чем нужно);
- Акцентный цвет — для кнопок, заголовков, важных элементов. Один. Яркий, но не кислотный;
- Поддерживающий цвет — для мягких акцентов, фонов блоков, границ;
- Дополнительный тон — если нужен, для второстепенных элементов.
Выбор акцентного цвета: должен быть заметным на белом фоне и контрастным с текстом. Классика — тёмно-синий, тёмно-зелёный, ярко-жёлтый с тёмным текстом, красный. Пастельные тона в кнопках плохо работают — они «мимо».
Не работает: 10 цветов на странице, серый цвет на сером, «модный» тёмно-серый фон с тёмно-серым текстом.
Кнопки: заметность важнее красоты
Главная кнопка должна выделяться. Основные правила:
- Цвет — контрастный к фону и тексту. Кнопка того же цвета, что фон, — визуально теряется;
- Размер — от 44 пикселей высоты на мобильном (стандарт удобства нажатия);
- Текст — конкретное действие, не «Отправить». «Получить расчёт», «Записаться на замер»;
- Одна главная кнопка на экран. Три равнозначных — клиент не понимает, что делать;
- На форме — кнопка яркая и крупная. Иначе клиенты пропускают её.
Второстепенные кнопки — с обводкой или менее ярким цветом. Так глаз выделяет главное действие.
Пять типовых ошибок дизайна
- Серый текст на белом фоне. «Стильно», но нечитаемо. Нужен высокий контраст.
- Тонкие шрифты в мелком размере. «Дизайнерски», но глазам больно.
- Всё крупно и заметно. Когда всё кричит — не слышно ничего.
- Кнопки без контраста. «Стиль минимализм», но клиент их не видит.
- 10 разных цветов. Радуга без иерархии — глаз не понимает, куда смотреть.
Проверка своего сайта: покажите его человеку, не связанному с проектом, попросите за 3 секунды сказать, где главная кнопка. Если задумывается — визуальная иерархия сломана.
Хотите применить это к своему сайту?
Напишите, чем занимается ваш бизнес. Разберу задачу, посмотрю текущую упаковку и подскажу, как усилить сайт под заявки, рекламу и аналитику.
