Почему 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!)
Смешались кони, люди
Сочетание цветов и первых букв на что-то намекают? 🤔
ловите наркоманов )) бля пока не разбежались
Ни в кооооем случае :D
Комментарий недоступен
А ты пробовал framer х? Сейчас его осваиваю, по сути там это так и работает
Комментарий недоступен
Так ну если ты его освоил, зачем тебе смотреть на его порог?)
Я прям в ожидании их веб версии, там вроде всё похоже на фигму, но, надеюсь, будут и код компоненты, так что стоит расчехлять весь свой скилл, чтобы быть на волне, когда все на фреймер начнут переходить.
А какой смысл на него переходить?
Он хорош для крупных продуктов, качественные кодоориентируемые дизайн-системы и реальные прототипы получаются. Для крупных компаний самое то, не терять на исследованиях проценты конверсий. Соответственно все топовые(популярные) дизайнеры из крупных компаний начнут работать в нём и рассказывать что это такое, а за ними потянется и дизайн сообщество
Можно конкретней?
Дизайн системы бывают разные, для одних норм реакт, для приложений реакт, как и сам яваскрипт мало применим. (ну или поправьте меня, вдруг я отстал)
Тут не совсем в реакте дело. Точнее так, если компания фигачит дизайн-систему на реакте, то мы просто импортим реакт компоненты и живем(дизайнеры и исследователи) красивой жизнью, но если идёт речь про мобильный проект, там достаточно дизайн-компонентов с небольшими написаниями кода от дизайнеров и компоненты уже будут в млн раз эффективнее при исследовании: различные интерекшены, реальные данные в мокапах, прохождение реального флоу с взаимодействием (авторизация в приложении через логин и последующее использование этого логина в приложении например). Ну в общем там много чего интересного можно делать, я сейчас изучаю эту штуку, буду изредка писать о нём, сейчас, например, готовлю материал по использованию реальных данных из различных api в прототипах, подпишись в телегу, анонс закину, посмотришь на реальном примере)
я вот для себя не могу решить чем бы мне мог пригодиться фреймер. Хотя я бы его с удовольствием попробовал. Все промо выполнены прям топчик.
Но продолжаю искать аргументы, что бы перевести на фреймер небольшой проект или начать новый.
Ну я пока тоже не могу просто взять и начать переводить проекты в фреймер, в реакте пока слабоват и другие моменты. Но решил, что потихоньку буду изучать, вдруг, когда-то он понадобится. По крайней мере интересная статистика использования меня убеждает в этом – https://uxtools.co/survey-2019
framer x вышел в конце 2018. старая версия с coffee script ни в какое сравнение не идет с X
Лежу в кровате, засыпаю, но прямо щас захотелось встать и пойти переиначить все свои макеты 😂 Спасибо, парень, годный контент!
Комментарий удален модератором
Ахаха, как успехи? Переиначила?)
Вопрос из заголовка был риторическим, но если у кого-то есть на него ответ, то я буду рад послушать)
Потому что на ютубчике так учат. Я не видел ни одного туториала, где цвета были бы обозначены по цели. И ещё сказывается непопулярность Material Guildlines в России, вообще никто не читал, похоже. Прямо вот такое фи среди всех дрибломанов.
Мне кажется, начинающие дизайнеры обходят матЕриал стороной, потому что он «некрасивый», потом придёт понимание, в чём его смысл. Но будет уже поздно :D
Вопрос скорее должен стоять "почему 90% дизайнерам платят, если они не понимают базовых принципов и инструментов работы". Почему работадатель готов платить людям, которые не умеют избегать базовых ошибок? Видимо, дело в том, что 90% берут настолько дешево, что выгоднее их заставлять переделывать свои косяки, чем нанимать оставшиеся 10%.
Подобные статьи наверняка кому-то помогут стать лучшим специалистом, но вряд ли ситуация на рынке труда поменяется, пока самим заказчикам массово вдруг не потребуются достойные профессионалы.
ИМХО, конечно. Диванная аналитика и мысли вслух
Я твою диванную аналитику обычно по другому трактую: от того, что достойных профессионалов не так много и они уже устроены, работодатели берут на работу тех, что остались) Думаю надо в принципе повышать квалификацию сообщества дизайнеров в рашке, а дальше всё подтянется
Ниже написал про решение в iOS. Еще есть решения на основе design tokens. Вот один из примеров: https://www.lightningdesignsystem.com/design-tokens/
В каждом случае, зависит от продукта, насколько он большой и как масштабируется, но общий смысл, думаю понятен. И это касается не только цветов
И еще изобретают проблемы, у которых уже существуют решения.
То что описано выше, давно есть — "semantic colors" в iOS Dynamic System Colors.
Расскажи это тупеньким дизайнерам, которые до сих пор макеты в фотошопе рисуют...
Видимо, я тупой) А еще я и логотипы делаю в Фотошопе))
Комментарий удален модератором
рады за тебя. и как, там уже появились адаптивные компоненты?
Пхах, если быть честным перед собой, то там компоненты появились раньше, чем люди додумались делать скетч) Смарт объекты или типо того они называются, не помню уже :D
Ну а так, этому человеку можно только успехов пожелать, не над негативить, самое главное самому развиваться и показывать пример, я думаю
смарт-объекты и компоненты — не совсем одно и то же
Для карты лучше использовать стиль заливки, плагин будет также её красить в темную тему.
О, привет! Я пробовал делать карту через стиль заливки, но она получалась не очень похожей на оригинал. Поэтому я пошёл рисовать стиль для Гугл мапс, чтобы было похоже на Яндекс мапс. Вот такой крюк, но зато похоже получилось :D
Хотел ещё личное спасибо сказать) Плагин реально крут, ещё бы настраиваемые пресеты, чтобы можно было делать не только дэй и найт, но ещё и какой-нибудь «графит» или, я не знаю, «пинк сансет». В общем, даёшь более гибкую настройку!😃
Круто! Жаль стоя не дизайнер, тогда бы пригодилось.
Хахах, зачем тогда ты прочитал эту статью? :D
он лёжа дизайнер
Записал шутку в блокнотик)