Почему светлый дизайн вызывает больше доверия

Сразу оговорка: «светлый» не значит «белый и пустой», а «тёмный» не значит «плохой». Тёмная тема отлично работает у барбершопов, баров, студий звукозаписи — там, где полумрак и есть часть услуги. Но по умолчанию для малого бизнеса светлая страница выигрывает, и вот почему.

Контраст: читается или нет

У доступности есть измеримый порог: контраст обычного текста к фону должен быть не ниже 4,5 : 1, крупного — не ниже 3 : 1. Это не вкусовщина, а стандарт WCAG, по которому проверяют сайты, и он совпадает с житейским опытом: светло-серый текст на белом не читает никто.

Самая частая беда — «изящный» серый #999 на белом. Его контраст около 2,8 : 1: на мониторе дизайнера при хорошем свете он выглядит утончённо, на телефоне под солнцем исчезает.

• Основной текст — почти чёрный, а не серый
• Подписи и второстепенное — темнее, чем хочется
• Белый текст на фотографии — только с затемнением под ним
• Проверка простая: выйдите с телефоном на улицу

Почему тёмная тема сложнее

На тёмном фоне светлый текст «растекается»: буквы кажутся толще, строки сливаются. Поэтому в хорошей тёмной теме кегль чуть больше, межстрочный интервал шире, а насыщенные цвета приглушены. Это лишняя работа, которую на быстром сайте обычно никто не делает.

Второе — фотографии. На светлой странице почти любой снимок выглядит нормально. На тёмной кадр со светлым фоном превращается в яркое пятно, и приходится обрабатывать каждую фотографию.

Воздух вместо рамок

Второй признак сайта, которому верят, — расстояния. Блоки разделяют не линиями и не тенями, а пустым местом. Это дешевле всего и надёжнее всего: рамка внутри рамки внутри карточки выглядит как интерфейс из 2011 года, а воздух не стареет.

• Между смысловыми блоками — 64–96 px на компьютере и 40–56 на телефоне.
• Внутри карточки — одинаковые отступы со всех сторон.
• Заголовок ближе к своему тексту, чем к предыдущему блоку: расстояние показывает, что к чему относится.
• Одна страница — одна колонка; на телефоне всё равно всё выстроится в одну.

Типографика: три решения из всех

Шрифтов достаточно одного, начертаний — двух-трёх. Дальше важны три вещи.

1. 1Размер основного текста — 17–19 px. Мельче читать тяжело, крупнее — распадается на слова.
2. 2Длина строки — 65–75 знаков. На широком экране это значит колонку, а не текст во всю ширину монитора.
3. 3Межстрочный интервал — примерно 1,6 от кегля. Плотнее — строки слипаются.

Как это связано с заявками

Прямее, чем кажется. Человек не думает «какой приятный контраст» — он просто дочитывает до блока с ценами или не дочитывает. Каждое место, где нужно всмотреться, стоит вам части аудитории, и на телефоне под солнцем эта часть больше всего.

В шаблонах Брайтли светлая палитра стоит по умолчанию, а тёмные варианты — там, где они уместны по смыслу: бары, барбершопы, вечерние услуги. Это не запрет, а отправная точка: тёмную тему всегда можно выбрать осознанно — главное, чтобы это было решение, а не случайность.