Трендовые цвета для дизайнеров 2021 — Дизайн на vc.ru
Цвет играет ключевую роль в дизайне, он добавляет красок в композицию, передает эмоции и настроение. Он влияет на то как будет восприниматься продукт, насколько будет узнаваем бренд и с чем его будут ассоциировать. Поэтому, в этой статье я расскажу вам о цветах, которые дизайнеры будут использовать в 2021 году чаще всего. Погнали!
17 773 просмотров
По традиции, поддерживайте видео просмотром и лайком!
01. Серый и желтый
Начнем с цветов, которые Pantone представил как цвета 2021 года. Они и вправду очень хорошо сочетаются и контрастируют на фоне друг друга. Желтый цвет передает позитивное настроение и не остается в стороне из-за своей яркости. Серый же придает строгости и настроение стабильности и монохромность.
Сочетание абсолютно серого с ярким желтым цветом выражает послание позитива, подкрепленное силой духа. Практичный и твердый, но в то же время согревающий и оптимистичный, это сочетание цветов, которое дает нам стойкость и надежду.
Мы должны чувствовать себя воодушевленными, это важно для человеческого духа. Леатрис Эйсман, Исполнительный директор Института цвета Pantone
02. Комфортные цвета
Пандемия повлияла на все сферы жизни, в том числе на дизайн интерьера. Мы были вынуждены столько времени проводить дома, что стали по-новому смотреть на жилое пространство и значительно повысили свои требования к уровню комфорта. И это отражается на цветовых трендах в дизайне.
Если хотите создать трендовый дизайн — обратите внимание на медитативные и успокаивающие оттенки. Нас окружает так много информации, что иногда спокойные и приглушенные цвета могут привлечь намного больше внимания, чем кричащие.
03. Золотой
Это безумно популярный цвет последние несколько лет. Он ассоциируется с блеском и роскошью и теплом солнца, возможно, из-за этого так сильно полюбился дизайнерами и пользователями. Золотым цветом оформляют многие графические материалы: фон, текстуры, логотипы, текст и т.
Таким цветом можно показать люксовые продукты, выделить их на фоне других, более дешевых. Золотой цвет универсален и может использоваться многими графическими материалами, поэтому он еще долго будет оставаться в тренде.
04. Цвет драгоценных камней
Поскольку дизайнеры ищут вдохновения в мире природы, драгоценные камни выделяются разнообразием цветовых форм и текстур, которые у них есть.
Можно использовать не только цвет янтаря или лазурита, поскольку они яркие, но и их текстуру. Поскольку она имеет интересный окрас, некоторые камни переливаются, блестят и создают эффект загадочности.
05. Теплые цвета
Теплые оттенки — отличный способ привлечь чье-то внимание, поэтому вы можете использовать один цвет, чтобы выделить определенный элемент в своем дизайне. Такие цвета могут передавать сигнал к действию, либо заряжать на что-то. Вспомните, в какие цвета чаще всего красят спорткары, многие имеет ярко желтые, оранжевые и красные цвета.
Теплые оттенки передают определенную энергию, жар, из-за чего, с помощью них можно зацепить пользователя своей яркостью. Также эти цвета у людей ассоциируются с едой, поскольку, крупные бренды, такие как McDonald’s, Coca Cola и другие используют теплые цвета в своей айдентике.
06. Земляные цвета
В этом году сохранят свои позиции мягкие природные оттенки. Например, песочный бежевый, серый, коричневый и оттенки желтого, которые позволяют почувствовать себя ближе к природе и создают ощущение натуральности и органичности.
По мнению колористов, теплый и сбалансированный землистый оттенок создает ощущение стабильности и спокойствия, дает ощущение прочной основы для творчества и креатива. Именно поэтому, многие бренды будут использовать эти оттенки в своей цветовой палитре.
07. Охлаждающий цвет
Зеленые и синие цвета распространяются в последнее время все больше. Сюда входят темно-синий, лазурный, индиго, сапфировый и голубой, темно-зеленый и лайм.
Зеленый обладает успокаивающими свойствами, которые обычно приписываются синему и обычно ассоциируется с богатством, обновлением и природой.
В 2021 году вы можете сосредоточиться на холодных цветах или использовать их вместе с теплыми цветами, чтобы добавить в свою работу дополнительные контрастные элементы. Так что можете смело экспериментировать с этими цветами, так как они будут актуальны.
На этом все, обязательно распространяйте эту статью своим друзьям и знакомым, думаю, что им будет интересно!
❤ Если тебе понравилась статья то поддержи ее лайком, а я продолжу делиться полезным о дизайне 🙂
👉🏻Найти меня можно здесь Телеграм Intagram YouTube
Делаем палитру цветов для дизайн-системы — Дизайн на vc.ru
Привет! Я занимаюсь развитием и поддержкой дизайн-системы, и я хотел бы поделиться своим опытом и поговорить об одной её неотъемлемой части — палитра цветов. Много раз ломал голову и наступал на грабли, когда придумывал разные подходы, комбинации и сочетания при создании или рефакторинге дизайн-системы.
1683 просмотров
Казалось бы, зачем нужна палитра цветов и почему вам это может быть нужно именно сейчас? Может быть, у компании уже есть какая-то палитра, но её делали не вы, а качество работы оставляет вопросы.
Когда у нас в компании обновился брендбук, мы незамедлительно решили пересмотреть текущую палитру цветов в дизайн-системе, чтобы новая палитра была основана на новом визуальном стиле бренда, удобна в использовании и масштабируема. Также нам нужно было обеспечить безболезненный переход и обновление цветов на новые в продуктах, где дизайн-система уже использовалась.
Сегодня я расскажу, на что стоит обращать внимание при создании палитры для вашей дизайн-системы. Погнали!
Базовые цвета
Для начала вам нужно посмотреть на брендбук компании (если он есть) или на цвета логотипа и бренд-материалов (печатка, визитки, листовки, что угодно). В хорошем брендбуке будут указаны пара-тройка основных базовых цветов — они-то нам и нужны.
Скорее всего, эти цвета будут указаны по шкале CMYK или Pantone, но эти значения цветов многим не подойдут, так как они не предназначены для цифровых носителей. Для начала нужно будет перевести эти цвета в шкалу RBG. В интернете есть много конвертеров, и вы с лёгкостью получите нужный вам цифровой цвет. Но это не всё. Вам придётся немного подкрутить яркость или контрастность цвета, который получился.
Когда мы выбирали оттенок красного, мы сравнивали уже имеющиеся на рынке красные цвета бренда и их цифровые UI цвета, ведь наш бренд тоже красный. Было большим удивлением, что некоторые компании используют один и тот же оттенок красного в UI и в печати.
При работе над UI какого-нибудь продукта вы чаще всего будете использовать основные цвета, они как раз и получатся из цветов вашего брендбука. На изображении ниже представлены цвета из брендбука АТОЛ и цвета, которые мы подкорректировали для цифровых экранов.
Чёрного цвета не существует
Важно отметить, что в природе не существует чёрного цвета (#000000) и серых цветов из градации от чёрного к белому которые нам предлагает шкала RGB.
Касательно белого цвета, его тоже не существует в природе, но на практике многие оставляют этот цвет как есть со значением HEX #FFFFFF. Но если его подкрутить как и чёрный, то ничего страшного не случиться. Главное — делайте это осознанно и проверяйте на практике.
Дополнительные цвета
Дополним базовые цвета их оттенками. Есть множество инструментов для раскладки цветов. Мне понравился https://palettte.
app/. Достаточно задать крайние оттенки вашего цвета и получить раскладку из 10 оттенков одного цвета, а ещё можно подкрутить оттенки, если генератор не удовлетворил ваши ожидания.
Дополнительные цвета вам точно пригодятся для управления вниманием в дизайне интерфейса. Это могут быть подписи к тексту, бейджи, подсказки или алерты и многое другое.
Понятные названия цветов
Есть много разных техник названий для цветов. Локальный нейминг был придуман давно и применялся у программистов, когда те называли свои переменные в коде. Мы же просто позаимствуем и не будем изобретать велосипед. Важно, чтобы цвет был понятен по названию всей команде: дизайнерам и разработчикам. Ну, это, вы потом проверите «кодирорными» исследованиями. Например, можно произнести название вслух и спросить, какой цвет люди представляют, пусть даже покажут на палитре. Это будет отличной проверкой вашего нейминга.
Из распространённых техник: kebab case, camel case, snake case.
Ознакомиться с примерами можете на Википедии.
Каждая команда придумывает свои названия, основываясь на каких-либо принципах и ценностях компании. У «жёлтого банка» это города (London), а у нас — драгоценные камни (палитру назвали Gemstones). Таким образом, чтобы обозначить жёлтый цвет мы назвали его Topaz, а чтобы понять его насыщенность используем нумерацию от 25 до 900. Так мы поймём, что цвет Topaz 100 будет означать светло-жёлтый, а если нам нужен такой же зелёный оттенок, мы просто обратимся к цвету Emerald 100.
Если переведём всё на язык переменных с техникой наименования
Семантика цветов
Базовый набор брендовых цветов можно дополнить ещё и акцентными цветами. Их ещё называют семантическими, которые что-то логически обозначают.
Например, если у вас действия отличные от брендового цвета (в нашем случае это был синий). Это те цвета, которыми вы будете обозначать ошибки, успешные действия или акценты внимания. У всех дизайн-систем почти то же самое, только оттенки разные. Ошибки — красные, успешный результат — зелёный, а текст для привлечения внимания — жёлтый.
Токены
Последние годы набирает популярность этот термин. Если проецировать токены на палитру цветов, то это выглядит как специально заданные переменные в коде и в стилях UI Kit. Например, возьмём красный цвет ruby-600 — это один цвет по HEX (#FF0000). Он может означать несколько семантических и логических цветов: и цвет опасности, и цвет бренда, и цвет ошибки, и даже цвет контура (border) у промо-блока. В токенах так и запишем: color-dangerous, color-primary-brand, color-text-error. Токенов может получиться нескончаемое количество, и тут важно не переиграть. В идеале название стиля в Figma должно полностью соответствовать переменной в коде у разработчиков, в которой указан ваш цвет.
Для оптимизации процессов дизайн-команды синхронизиру.т Figma c кодом и к этому нужно стремиться всем. Рекомендую попробовать плагин Tokens.Studio, который поможет вам организовать все стили и токены цветов. О методологии, как удобно называть токены рассказывает Lukas Oppermann.
Доступность
Accessibility, A11y, доступность — это всё то, что позволяет понимать и отличать ваши цвета людям с ограниченными возможностями. Например, люди с разной степенью дальтонизма (да, тут есть, что изучить) могут не увидеть, где у вас красный цвет и где зеленый, особенно если эти цвета что-то семантически значат. Люди просто могут не обратить внимание на красную ошибку, а зелёное успешное действие может показаться им опасным.
Есть онлайн-инструменты, которые помогут определить доступность вашего цвета в сочетании в другими цветами. Например, вам нужно убедиться, что текст на вашей кнопке будет всем виден и читаем. С этим поможет WCAG Color Contrast Checker.
Конечно, вы можете взять любую готовую палитру из открытых дизайн-систем и адаптировать её под себя при необходимости.
Из них подойдут палитры от Google Material Design или Ant Design Colors.
Проверяйте, проверяйте, проверяйте…
Попробуйте применить вашу палитру из базовых цветов к экранам интерфейса, а потом и дополнительные цвета. Соберите фокус-группу и покажите несколько вариантов разных цветовых оттенков. Результаты исследования используйте как доработку палитры или задокументируйте готовую палитру в гайдах, если всё прошло успешно.
Если цветов не хватает
Может случиться ситуация, когда готовой палитры вам не хватает для реализации продуктовых задач. Я столкнулся с этой проблемой, когда нам нужно было показать очень много разных статусов (компонент badge). Мы уперлись в ограничение наших цветов по спектру и решили, что можем расширить палитру. Стоит обратить внимание на соответствие насыщенности (Saturation) и светлоте (Lightness) в уже имеющихся цветах, то есть в нашем случае цвет Ametyst-600 должен быть в одном ряду с Topaz-600, а Ametyst-100 в ряду с Topaz-100.
Какие могут быть проблемы
Из нашего опыта скажу, что мы столкнулись с проблемой выбора основного (Primary) цвета для кнопок и элементов интерфейса. Как я уже упомянул, бренд АТОЛ — красный, а красный — цвет опасности. И нам очень не хотелось, чтобы главная кнопка на экране вызывала ощущение опасности и повышенного внимания (ещё и пульс поднимается, да-да). Мы провели несколько исследований внутри команд и поняли, что синяя кнопка отлично работает в интерфейсе, и не в убыток брендовому красному. Конечно, мы сделали исключение для частных случаев и оставили красный как дополнительный цвет для тех же кнопок. Подробнее о находках и своём опыте я пишу в Телеграм-канале о дизайн-системах.
В итоге цветом Primary может быть и красный и синий цвет. Всё зависит от контекста и пользовательского сценария. В некоторых случаях допустимо использовать брендовый красный цвет, например, в форме авторизации АТОЛ ID с одной основной кнопкой входа. А внутри личного кабинета, при выполнении регулярных задач пользователями, красные кнопки будут сбивать с толку и показывать излишнее внимание (и даже опасность).
В таких случаях приходит на помощь альтернативный цвет Primary — синий.
В нашем случае появилось правило: нельзя смешивать красный и синий цвет для primary-действий на одном экране или в одном сценарии.
Что в итоге
В заключение хочу сказать, что тема эта совсем непростая, так как от разработанной палитры будет зависеть общее впечатление о компании и её продуктах. Ведь, как говорят дизайнеры, «встречают по визуалу UI, а дальше могут не пойти».
Это был исключительно наш опыт и он не заканчивается. А какие вы испытали проблемы с палитрой?
Flower Design — Etsy Turkey
Etsy больше не поддерживает старые версии вашего веб-браузера, чтобы обеспечить безопасность пользовательских данных. Пожалуйста, обновите до последней версии.
Воспользуйтесь всеми преимуществами нашего сайта, включив JavaScript.
Найдите что-нибудь памятное, присоединяйтесь к сообществу, делающему добро.
(
1000+ релевантных результатов,
с рекламой
Продавцы, желающие расширить свой бизнес и привлечь больше заинтересованных покупателей, могут использовать рекламную платформу Etsy для продвижения своих товаров. Вы увидите результаты объявлений, основанные на таких факторах, как релевантность и сумма, которую продавцы платят за клик. Узнать больше.
)Flower Designs — Etsy Turkey
Etsy больше не поддерживает старые версии вашего веб-браузера, чтобы обеспечить безопасность пользовательских данных.