Тёмная тема - это не вопрос вкуса, а вопрос того, сколько текста и цифр человек должен прочитать на вашем сайте: до 2 экранов связного текста тёмный фон обычно помогает, после 4-5 экранов начинает утомлять. По нашей практике из 6 типичных ниш тёмный дизайн уверенно выигрывает в двух-трёх, а в остальных выбирается ради картинки и потом тихо мешает.
Ниже - где тёмная тема даёт вес бренду, где она режет читаемость, какие правила контраста нельзя нарушать и что происходит с формой заявки. Позиция у нас простая: сайт, из которого не видно, откуда пойдут обращения, мы не сдаём - хоть светлый, хоть тёмный.
I. Когда тёмная тема работает
Тёмный фон делает три вещи. Он убирает всё лишнее из поля зрения, поэтому фотография, видео или один короткий заголовок начинают звучать громче. Он даёт ощущение веса и сдержанности - контент как будто в галерее, а не на распродаже. И он хорошо смотрится на телефоне вечером, когда значительная часть визитов в услугах и происходит. В редизайне сайта SkyFarm - агротех, системы выращивания на искусственном интеллекте - мы строили страницу ровно на этом: крупные фото продукта, первый экран с контейнерной фермой и горизонтальная карусель продуктов с боковой прокруткой держат внимание без длинных описаний.
- Мало текста, много визуала. Портфолио, витрина, шоурил, работы мастеров - тёмный фон здесь работает как паспарту.
- Премиальное позиционирование. Когда чек выше среднего по нише и важно не выглядеть как сайт с горящими скидками.
- Вечерний мобильный трафик. Если люди листают вас с телефона после работы, тёмный экран воспринимается мягче.
- Есть фирменный акцентный цвет. На тёмном один яркий цвет читается как система, на светлом - часто как кислота.
II. Шесть ниш и их результат
| Ниша | Тёмная тема | Почему |
|---|---|---|
| Студия красоты, барбершоп | подходит | Много фото работ, короткие тексты, вечерний трафик |
| Премиальная витрина товаров | подходит | Карточки и видео выигрывают на тёмном фоне |
| Digital и ORM-услуги | подходит | Технологичный тон, мало длинных описаний |
| Строительство и ремонт | спорно | Нужны сметы, таблицы и длинные объяснения |
| Медицина и клиники | обычно нет | Доверие и читаемость важнее настроения |
| Юридические и бухгалтерские услуги | обычно нет | Много текста, документов, возрастная аудитория |
Это не закон, а ориентир. Встречаются тёмные сайты клиник, которые работают, - но там за читаемость заплачено отдельной работой: увеличенный размер шрифта, светлые карточки поверх тёмного фона, отдельная светлая зона для прайса. Тёмная тема почти никогда не бывает бесплатной по трудозатратам.
Ещё один аргумент в пользу тёмной темы - однородность фотографий. Если снимки сделаны в разное время, разными людьми и с разным светом, на светлом фоне эта разница бросается в глаза: одна карточка тёплая, соседняя холодная, третья пересвеченная. Тёмный фон частично прячет расхождение, потому что границы кадров растворяются, и галерея выглядит собраннее, чем есть на самом деле. Это не повод не переснимать фотографии, но это рабочая временная мера, пока нормальной съёмки нет.
III. Где тёмный фон мешает
Главная проблема тёмного дизайна - длинный текст. Светлые буквы на тёмном фоне слегка расплываются, глаз быстрее устаёт, и человек пролистывает то, что вы старательно писали. Если у вас на странице 5-6 экранов объяснений, условий и сравнений, тёмная тема отнимает часть этой информации у читателя.
- Таблицы и цифры. Прайсы, сметы, характеристики на тёмном фоне читаются заметно хуже - строки сливаются.
- Документы и скриншоты. Белые изображения на тёмном фоне выглядят как дыры в макете и требуют отдельной рамки.
- Печать страницы. Клиент, который печатает коммерческое предложение с сайта, получит либо чёрный лист, либо ломаную вёрстку.
- Возрастная аудитория. После 45-50 лет чувствительность к низкому контрасту выше, и тёмная тема часто читается тяжелее.
- Яркий солнечный свет. На улице тёмный экран телефона бликует сильнее светлого.
Худший вариант - тёмный фон и серый текст «для мягкости». Такая пара выглядит аккуратно в макете и почти не читается на дешёвом телефоне со сниженной яркостью. Если хочется приглушить текст - приглушайте второстепенные подписи, но не основной текст и никогда не цену.
IV. Правила контраста и читаемости
- Не чистый чёрный. Фон около #0C0C0C-#141414 мягче для глаза, чем абсолютный чёрный, и на нём лучше видны границы блоков.
- Не чистый белый текст. Слегка приглушённый светлый тон снижает эффект «свечения» букв на длинных абзацах.
- Один акцентный цвет. Два-три ярких цвета на тёмном фоне превращают страницу в вывеску. Градиент - максимум из двух цветов.
- Размер шрифта на 1-2 пункта больше, чем вы взяли бы для светлой темы, и увеличенный межстрочный интервал.
- Светлые островки под смысл. Прайс, таблицу, форму и отзывы имеет смысл выносить на светлую карточку поверх тёмного фона.
Проверка простая: откройте страницу на телефоне при яркости 30-40 процентов и попробуйте прочитать абзац целиком, не прищуриваясь. Если приходится напрягаться, тёмная тема у вас пока не сделана, а просто включена.
V. Форма заявки на тёмном фоне
Тёмная тема чаще всего теряет обращения не на текстах, а на форме. Поля ввода на тёмном фоне легко сделать настолько незаметными, что человек не понимает, куда нажимать: рамка тонкая, подпись серая, введённый текст почти сливается с фоном. Ошибку заполнения красным на тёмном фоне тоже видно хуже, чем кажется автору макета.
- Поля ввода делайте светлее фона, а не темнее - человек должен видеть, где именно строка.
- Введённый текст - самым контрастным элементом формы, ярче подписей и подсказок.
- Кнопка отправки - акцентным цветом, без прозрачности и без тонкой обводки вместо заливки.
- Сообщение об успешной отправке - отдельным заметным блоком, иначе человек отправит заявку трижды.
- Ошибки подсвечивайте не только цветом, но и текстом рядом с полем.
Прототип главной страницы мы делаем бесплатно. До договора и без предоплаты вы смотрите, как будет выглядеть ваш сайт в выбранной теме: первый экран, блоки, их порядок и логика заявки. Тёмный вариант удобнее всего оценивать именно так - на прототипе сразу видно, читается ли он на телефоне. Нравится - работаем дальше, не нравится - расходимся, вы ничего не должны. Бесплатен прототип главной, а не весь дизайн.
Отдельная история - шапка сайта при прокрутке. На тёмных страницах её часто делают полупрозрачной, и в момент, когда под ней проезжает светлая фотография, номер телефона и кнопка пропадают на пару секунд. Человек в этот момент как раз решает написать вам. Прозрачную шапку на тёмном сайте всегда проверяют прокруткой через все блоки, а не на одном первом экране.
VI. Как выбрать тему для своего сайта
Ответьте на три вопроса. Сколько связного текста человек должен прочитать, чтобы решиться на обращение? Есть ли у вас достаточно качественных фотографий или видео, чтобы тёмный фон было чем заполнять? Кто ваша аудитория по возрасту и с какого устройства она приходит? Если текста много, фотографий мало, а аудитория старше сорока - тёмная тема, скорее всего, будет работать против вас.
Компромисс, который мы используем чаще всего: тёмный первый экран и разделы с визуалом, светлые блоки под прайс, условия, отзывы и форму. Так сохраняется настроение и не теряется читаемость. Пример живого тёмного решения - Monkey Market, премиальная витрина магазина кроссовок с каталогом, трендами, видео и заказом в Telegram: там тёмный фон оправдан товаром. А navsegda-event.ru, сайт агентства корпоративных мероприятий с услугами, кейсами, этапами работы и расчётом мероприятия, показывает обратную логику - там важнее спокойная читаемость длинных описаний.
По деньгам и срокам тёмная тема ничего не меняет: сайт на React у нас стоит от 80 000 ₽ и занимает 1-2 недели с момента, когда собраны материалы, перенос с конструктора - тоже от 80 000 ₽. Подробнее о работе - на странице разработка сайтов и SEO. Отдельно считается контент: SEO-статья от 500 ₽, 200 статей в месяц - 100 000 ₽, прокачка блога от 75 000 ₽ в месяц. Позиции, трафик и количество обращений мы не гарантируем.
VII. Короткий итог
Тёмная тема хорошо работает там, где мало текста и много визуала: витрины, портфолио, премиальные услуги, технологичные ниши. Она мешает там, где нужно читать таблицы, сметы, условия и документы, и там, где аудитория старше. Если выбираете тёмный вариант - закладывайте на 1-2 пункта больший шрифт, светлые островки под прайс и форму и отдельную проверку на телефоне при низкой яркости. Тему выбирайте последней, а маршрут к заявке - первым: качество входящих обращений потом всё равно оценивать по понятной методике, а не по красоте фона.
Наши работы
Сайты, которые студия уже запустила
Четыре проекта N3MIROFF, которые можно открыть прямо сейчас и посмотреть, как они работают.
Агротех с ИИ
SkyFarm ↗
Редизайн сайта систем выращивания: первый экран с контейнерной фермой, схема работы из трёх шагов, карусель продуктов и экран приложения.
Сайт салона
ayvazzovsky.com ↗
Салон сложного окрашивания в Москве: онлайн-запись, видео работ, портфолио и команда. Переехал с Тильды на свой хостинг.
Онлайн-академия
ayvazzovsky.academy ↗
Видеоуроки колористики: каталог, посадочные страницы уроков, личный кабинет и промокоды.
Event-агентство
navsegda-event.ru ↗
НАВСЕГДА: корпоративы и конференции - услуги, кейсы, этапы работы и расчёт мероприятия.
Витрина магазина
Monkey Market ↗
Премиальная витрина магазина кроссовок с заказом в Telegram.
Посмотрите свой сайт в тёмной теме до договора
Соберём бесплатный прототип главной страницы и покажем, как она читается на телефоне. Не понравится - разойдёмся без обязательств.
Частые вопросы
Тёмная тема снижает конверсию сайта?
Сама по себе нет - снижает низкий контраст и незаметная форма. Если текст читается на телефоне при яркости 30-40 процентов, а поля ввода светлее фона, тёмный сайт работает не хуже светлого.
Каким нишам тёмный сайт подходит лучше всего?
Из 6 типичных ниш уверенно подходит трём: студии красоты и барбершопы, премиальные витрины товаров, digital-услуги. Спорно для строительства, обычно не подходит клиникам и юридическим услугам из-за объёма текста.
Нужно ли делать переключатель светлой и тёмной темы?
Для сайта услуг обычно нет: переключатель добавляет работы на проверку двух вариантов, а пользуются им единицы. Полезен он в личных кабинетах и сервисах, где человек проводит десятки минут подряд.
Тёмный сайт дороже в разработке?
Цена та же: сайт на React от 80 000 ₽ и 1-2 недели от материалов. Дороже обходится не тема, а нехватка контента - тёмный фон требует хороших фотографий и видео, иначе страница выглядит пустой.
Можно ли переделать существующий светлый сайт в тёмный?
Можно, но это не смена цвета фона: придётся пересобрать контраст, изображения, таблицы и форму. Часто это сопоставимо по объёму с новым сайтом, и мы честно об этом говорим до начала работы.
Обсудим, какая тема подходит вашей нише
Оставьте заявку - разберём вашу аудиторию, контент и то, где на странице будет маршрут к обращению.
Получить целевые заявки → Telegram