Dev log

Токены dark mode, которые не развалятся через год

Dark mode легко выпустить и неожиданно трудно удержать цельным. Вот правило пяти токенов, которое я использую в AllCars.cy: оно помогает новым экранам выглядеть как старые, даже после года небольших дополнений.

Любой UI в dark mode отлично выглядит в первой версии. К шестому месяцу кто-то добавляет экран с чуть другим серым. К девятому появляется желтоватый акцент на карточке функции и отдельный красный в предупреждении, который не совсем совпадает с красным на кнопке. К концу года у вас уже мудборд, а не продукт.

Я несколько раз перерабатывал поверхность AllCars. Каждый раз происходило одно и то же расползание. Решением стали не талант и не вкус — а ограничения.

Пять поверхностей, один акцент, и на этом все

Это вся палитра для фонов и карточек. Пять шагов — от самой страницы до самого высокого контейнера. Любой элемент, которому нужна глубина, выбирает один из пяти. Все, что не попадает в эти пять, переделывается, пока не попадет. Уже это убирает 80% визуального расползания.

Один акцент — лаймово-зеленый, который вы видите по всему сайту, — для вещей, на которые нужно обратить внимание. Один цвет предупреждения, один цвет ошибки. И все. Новые экраны не изобретают цвета. Новым разработчикам не нужно гадать. Дизайнеры перестают спорить о серых.

Почему это в блоге про автомобили

Потому что то, как выглядит AllCars, — часть доверия. Если бейдж deal score на разных экранах прыгал бы между пятью разными зелеными, вы бы подсознательно сомневались, какому из них верить. Спокойная согласованность UI позволяет настоящему содержанию — объявлениям, ценам и score — быть тем, на чем вы сосредоточены.

Дизайн на токенах не выглядит эффектно и существует давно, но это одно из немногих решений, о котором не жалеешь через год.