Характер сайта в первую секунду создают цвета и шрифты. Но главный вопрос в дизайне — не «красиво ли?», а «читается ли и правильно ли ведёт пользователя?». Эти правила — основа сайта, который и красив, и удобен.
Цвет: мало и с целью
- Начните с цвета бренда. Цвета логотипа и брендбука — основа и для сайта (см. Что такое брендбук).
- Правило 60–30–10. Примерно 60% — основной фон (чаще белый или светлый), 30% — дополнительный цвет (блоки, заголовки), 10% — акцентный (кнопки, важные элементы).
- Берегите акцентный цвет. Пусть цвет главной кнопки редко встречается в других местах — тогда глаз сразу находит кнопку.
- Значение цвета. Зелёный воспринимается как «успех/подтверждение», красный — как «ошибка/предупреждение»; не используйте их для декора.
Контраст: условие читаемости
Светло-серый текст на светло-сером фоне изящно смотрится на экране дизайнера, но на телефоне под солнцем не читается. Международный стандарт доступности (WCAG) рекомендует контраст между текстом и фоном не менее 4,5:1 для обычного текста и 3:1 для крупных заголовков. Инструменты разработчика в браузере и бесплатные онлайн-проверки контраста измеряют это за секунду.
Шрифт: двух достаточно
- Не больше двух семейств шрифтов — одно для заголовков, одно для текста. Или разные начертания одного семейства.
- Размер текста. На телефоне основной текст не должен быть меньше 16 пикселей; межстрочный интервал примерно в 1,5 раза больше размера облегчает чтение.
- Длина строки. На широком экране удобно читается 60–80 символов в строке; строки во всю ширину экрана утомляют.
- Декоративные шрифты — только для логотипа и крупных заголовков; в тексте они не читаются.
Азербайджанские буквы: самая забываемая проверка
Не каждый шрифт поддерживает буквы ə, ğ, ı, ö, ü, ç, ş. Если поддержки нет, браузер показывает эти буквы другим шрифтом, и посреди текста появляются выбивающиеся, как «заплатки», буквы. Особенно часто во многих шрифтах нет буквы «ə». Выбирая шрифт, напишите тестовую фразу вроде «Ədəbiyyat, ğ, ı, ş, ç» и посмотрите.
Скорость — тоже часть дизайна
Каждый дополнительный шрифт и начертание добавляют странице файлы. Загружайте только используемые начертания; текст не должен оставаться невидимым, пока грузится шрифт. Подробнее: Core Web Vitals простыми словами.
Тёмный режим
Часть пользователей включает на телефоне тёмный режим. Если сайт его поддерживает, цвета нужно подбирать отдельно: простое «инвертирование» часто даёт утомительный контраст, а для логотипа понадобится версия для тёмного фона.
Короткий чек-лист
- Главная кнопка сразу выделяется на странице;
- Контраст текста не ниже 4,5:1;
- На телефоне текст не меньше 16 пикселей;
- Используется не больше двух семейств шрифтов;
- Все азербайджанские буквы отображаются одним шрифтом.
Если хотите обновить дизайн сайта или заказать UI/UX-дизайн, посмотрите наши услуги по дизайну.
