Почему 90% дизайнеров юзают Color Styles неправильно

Многие дизайнеры (и далеко не новички) используют Color Styles просто как палитру для хранения цветов, а потом тратят кучу времени на правки, если какой-то отдельный цвет не нравится заказчику. Особенно остро встаёт проблема, когда появляется задача перекрасить интерфейс в новомодную тёмную тему.

Дисклеймер. Это статья не про тёмную тему и то, как её делать, а про систему цветов в дизайне интерфейсов. Но если тебе интересно, в конце статьи я уделю немного времени этой теме.

Как обычно это происходит?

Пришла идея, что нужно сделать приложение только в тёмной теме, а ты уже нарисовал в светлой. Думаешь, ну ладно, сейчас поменяем белый на чёрный, а чёрный на белый — и готово.

Вот какая тёмная тема получилась в «Яндекс.Такси»:

И ты такой смотришь, вроде бы всё хорошо, но есть маленькие артефакты:

А в примере всего один экран приложения, что будет, если их десятки или сотни? Небольшими дефектами дело не обойдётся...

Окей, а как правильно тогда?

Если ты настроил систему цветов правильно, можно сгененировать вот такую тёмную тему с помощью плагина буквально за секунды. Карту, правда, пришлось отдельно менять, потому что я её скриншотом вставил :D

Сейчас всё расскажу, только покажу ещё одну проблему палитры

Допустим, ты дизайнер в «Яндекс.Такси» (мало ли), вот вы ещё на стадии отрисовки макетов приложения, где-то на 70% позади. Тут приходит к тебе аналитик, показывает итоги исследования и говорит: «Пользователи не считывают этот элемент»

Что делать будешь?
Тень добавлю, да пожирнее.
Перекрашу стиль, будет красиво.
Создам отдельный стиль, могу себе позволить.
Показать результаты
Переголосовать
Проголосовать

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

Теперь всё читается, но это уже не «Яндекс.Такси», а «Морковь.Такси»...

В общем, эта проблемка происходит из-за того, что мы разделяем цвета по оттенкам. Если нам нужен белый, то мы создаём в стилях #FFF цвет, называем его White и переиспользуем его везде, где можно и нельзя.

А как тогда делать-то?

Чтобы избежать этих проблем, нужно использовать систему цветов, которую описал гугл в гайде по material. Здесь я покажу её упрощённую версию, с которой будет легче начать.

Основной принцип этой системы — стиль описывает не носимый им цвет, а его роль в интерфейсе.

В примере выше чёрный цвет используется на Primary-элементах, поэтому мы делаем стиль OnPrimary и задаём ему значение #000.Теперь, если тебе нужно изменить чёрный цвет надписи на кнопках, ты изменяешь не чёрный стиль, а конкретный OnPrimary, и не важно какого цвета он будет или был до этого, другие чёрные текста, например OnSurface, останутся чёрными.

То есть в идеальном мире у вас не должно остаться стилей с названиями цветов (blue, white, black и так далее), а только параметры вроде:

  • Background.
  • Surface.
  • OnSurface.
  • Error.
  • Primary.
  • И прочие.

Ты быстро начнёшь жонглировать этими понятиями, главное немного попрактиковаться.

Это сколько же одинаковых чёрных стилей мне создавать?

Итоговое количество стилей будет на ≈30% больше обычного. Да, там будут повторяющиеся HEX-значения, но создание «одинаковых» стилей стоит сэкономленных нервов и времени в процессе работы.

​Сравнение палитры с системой

Не бойся создавать дополнительные стили (если они нужны), так твои макеты станут более гибкими. В одном из последних проектов у меня получилось вот такое количество стилей:

Ах, да. Тёмная тема

Благодаря тому, что у нас понятная логика использования цветов, мы можем сделать каждому стилю свою цветовую пару, которую будем использовать в тёмной теме. Просто делаешь рядом копию артборда и перекрашиваешь все свои цветные квадратики или кружочки, не знаю, что у тебя там, в нужные цвета.

В догонку к этим цветовым парам: на днях мне скинули статью, где автор рассказывает о своём новом плагине, который может заменять заготовленные цветовые пары друг между другом, получился супербыстрый генератор тёмной темы. Потестил, огонь, спасибо тебе, Alex Dyakov!

Напомню, как это быстро​

Спасибо, что дочитал, вот материалы из статьи:

  • Figma-файл, в котором ты можешь потрогать систему цветов.
  • Удобный плагин для переключения на тёмную тему от Alex.
  • И мой ламповый Telegram--канал, где я делюсь и другими мыслями по дизайн-системам.

А если остались вопросы, пиши в комментарии или в личку telegram, bye!)

0
37 комментариев
Написать комментарий...
Alexander Matveev

Смешались кони, люди

Ответить
Развернуть ветку
Nikita Malyshev

Сочетание цветов и первых букв на что-то намекают? 🤔

Ответить
Развернуть ветку
Александр Пакшин
Ответить
Развернуть ветку
pit chernoff

ловите наркоманов )) бля пока не разбежались

Ответить
Развернуть ветку
Женя Иванов
Автор

Ни в кооооем случае :D

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Женя Иванов
Автор

А ты пробовал framer х? Сейчас его осваиваю, по сути там это так и работает

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Женя Иванов
Автор

Так ну если ты его освоил, зачем тебе смотреть на его порог?)

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

Ответить
Развернуть ветку
Wassily Korablikov

А какой смысл на него переходить? 

Ответить
Развернуть ветку
Женя Иванов
Автор

Он хорош для крупных продуктов, качественные кодоориентируемые дизайн-системы и реальные прототипы получаются. Для крупных компаний самое то, не терять на исследованиях проценты конверсий. Соответственно все топовые(популярные) дизайнеры из крупных компаний начнут работать в нём и рассказывать что это такое, а за ними потянется и дизайн сообщество

Ответить
Развернуть ветку
Wassily Korablikov

Можно конкретней? 
Дизайн системы бывают разные, для одних норм реакт, для приложений реакт, как и сам яваскрипт мало применим. (ну или поправьте меня, вдруг я отстал)

Ответить
Развернуть ветку
Женя Иванов
Автор

Тут не совсем в реакте дело. Точнее так, если компания фигачит дизайн-систему на реакте, то мы просто импортим реакт компоненты и живем(дизайнеры и исследователи) красивой жизнью, но если идёт речь про мобильный проект, там достаточно дизайн-компонентов с небольшими написаниями кода от дизайнеров и компоненты уже будут в млн раз эффективнее при исследовании: различные интерекшены, реальные данные в мокапах, прохождение реального флоу с взаимодействием (авторизация в приложении через логин и последующее использование этого логина в приложении например). Ну в общем там много чего интересного можно делать, я сейчас изучаю эту штуку, буду изредка писать о нём, сейчас, например, готовлю материал по использованию реальных данных из различных api в прототипах, подпишись в телегу, анонс закину, посмотришь на реальном примере)

Ответить
Развернуть ветку
Wassily Korablikov

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

Ответить
Развернуть ветку
Женя Иванов
Автор

Ну я пока тоже не могу просто взять и начать переводить проекты в фреймер, в реакте пока слабоват и другие моменты. Но решил, что потихоньку буду изучать, вдруг, когда-то он понадобится. По крайней мере интересная статистика использования меня убеждает в этом – https://uxtools.co/survey-2019

Ответить
Развернуть ветку
Mark Rapida Gromov

framer x вышел в конце 2018. старая версия с coffee script ни в какое сравнение не идет с X

Ответить
Развернуть ветку
Илона Кравченко

Лежу в кровате, засыпаю, но прямо щас захотелось встать и пойти переиначить все свои макеты 😂 Спасибо, парень, годный контент!

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Женя Иванов
Автор

Ахаха, как успехи? Переиначила?)

Ответить
Развернуть ветку
Женя Иванов
Автор

Вопрос из заголовка был риторическим, но если у кого-то есть на него ответ, то я буду рад послушать)

Ответить
Развернуть ветку
Anton Smets

Потому что на ютубчике так учат. Я не видел ни одного туториала, где цвета были бы обозначены по цели. И ещё сказывается непопулярность Material Guildlines в России, вообще никто не читал, похоже. Прямо вот такое фи среди всех дрибломанов.

Ответить
Развернуть ветку
Женя Иванов
Автор

Мне кажется, начинающие дизайнеры обходят матЕриал стороной, потому что он «некрасивый», потом придёт понимание, в чём его смысл. Но будет уже поздно :D

Ответить
Развернуть ветку
Tymonr

Вопрос скорее должен стоять "почему 90% дизайнерам платят, если они не понимают базовых принципов и инструментов работы". Почему работадатель готов платить людям, которые не умеют избегать базовых ошибок? Видимо, дело в том, что 90% берут настолько дешево, что выгоднее их заставлять переделывать свои косяки, чем нанимать оставшиеся 10%.

Подобные статьи наверняка кому-то помогут стать лучшим специалистом, но вряд ли ситуация на рынке труда поменяется, пока самим заказчикам массово вдруг не потребуются достойные профессионалы.

ИМХО, конечно. Диванная аналитика и мысли вслух

Ответить
Развернуть ветку
Женя Иванов
Автор

Я твою диванную аналитику обычно по другому трактую: от того, что достойных профессионалов не так много и они уже устроены, работодатели берут на работу тех, что остались) Думаю надо в принципе повышать квалификацию сообщества дизайнеров в рашке, а дальше всё подтянется

Ответить
Развернуть ветку
Yury

Ниже написал про решение в iOS. Еще есть решения на основе design tokens. Вот один из примеров:  https://www.lightningdesignsystem.com/design-tokens/
В каждом случае, зависит от продукта, насколько он большой и как масштабируется, но общий смысл, думаю понятен. И это касается не только цветов

Ответить
Развернуть ветку
Yury
Почему 90% дизайнеров юзают Color Styles неправильно

И еще изобретают проблемы,  у которых уже существуют решения. 
То что описано выше, давно есть — "semantic colors" в iOS Dynamic System Colors. 

Ответить
Развернуть ветку
Пластиковое Окно

Расскажи это тупеньким дизайнерам, которые до сих пор макеты в фотошопе рисуют...

Ответить
Развернуть ветку
Артем Унегов

Видимо, я тупой) А еще я и логотипы делаю в Фотошопе)) 

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Mark Rapida Gromov

рады за тебя. и как, там уже появились адаптивные компоненты?

Ответить
Развернуть ветку
Женя Иванов
Автор

Пхах, если быть честным перед собой, то там компоненты появились раньше, чем люди додумались делать скетч) Смарт объекты или типо того они называются, не помню уже :D
Ну а так, этому человеку можно только успехов пожелать, не над негативить, самое главное самому развиваться и показывать пример, я думаю

Ответить
Развернуть ветку
Mark Rapida Gromov

смарт-объекты и компоненты — не совсем одно и то же

Ответить
Развернуть ветку
Alex Dyakov

Для карты лучше использовать стиль заливки, плагин будет также её красить в темную тему.

Ответить
Развернуть ветку
Женя Иванов
Автор

О, привет! Я пробовал делать карту через стиль заливки, но она получалась не очень похожей на оригинал. Поэтому я пошёл рисовать стиль для Гугл мапс, чтобы было похоже на Яндекс мапс. Вот такой крюк, но зато похоже получилось :D

Ответить
Развернуть ветку
Женя Иванов
Автор

Хотел ещё личное спасибо сказать) Плагин реально крут, ещё бы настраиваемые пресеты, чтобы можно было делать не только дэй и найт, но ещё и какой-нибудь «графит» или, я не знаю, «пинк сансет». В общем, даёшь более гибкую настройку!😃

Ответить
Развернуть ветку
Leha Shum

Круто! Жаль стоя не дизайнер, тогда бы пригодилось.

Ответить
Развернуть ветку
Женя Иванов
Автор

Хахах, зачем тогда ты прочитал эту статью? :D

Ответить
Развернуть ветку
pit chernoff

он лёжа дизайнер

Ответить
Развернуть ветку
Женя Иванов
Автор

Записал шутку в блокнотик)

Ответить
Развернуть ветку
34 комментария
Раскрывать всегда