Колористика в дизайне: что нужно знать / Skillbox Media

Содержание

что нужно знать / Skillbox Media

Дизайн

#статьи

3 фев 2023
0

И как её можно использовать в дизайне.

Vkontakte Twitter Telegram Скопировать ссылку

Фото: FOTOGRAFIA INC.

/ Getty Images

Регина Аюпова

Журналист.

Если коротко ― это наука о цвете. О его природе и свойствах, воздействии на человека, а также о том, как использовать цвет ― в дизайне, искусстве и других областях, связанных с визуальным оформлением.

Цвет ― один из ключевых элементов дизайна. Это то, что пользователь считывает в первые же секунды, глядя на объект. Колористика помогает грамотно применять этот инструмент.

Да, но при объяснении не обойтись без физики. Человеческий глаз под воздействием света может различить определённый спектр электромагнитных волн. Он состоит из семи основных (так называемых спектральных) цветов: красного, оранжевого, жёлтого, зелёного, голубого, синего, фиолетового ― так наше зрение воспринимает эти волны. За пределами этого спектра остаются белый, чёрный и серый ― их называют ахроматическими.

В колористике цвета делят на первичные, или основные (красный, жёлтый, синий), вторичные ― те, что получаются при смешивании первичных (оранжевый, зелёный, фиолетовый), и третичные

― они получаются, если соединить цвета из первых двух групп.

Новые оттенки можно получить и при смешивании спектральных цветов с ахроматическими. Например, если добавить к красному белый, в результате будет розовый, а чистый зелёный в сочетании с чёрным даст тёмно-зелёный тон.

Понимаем. На помощь придёт цветовой круг Иттена. В XX веке швейцарский художник и преподаватель Баухауса Иоханнес Иттен придумал схему, которая упрощает работу с цветом и помогает подобрать гармоничные сочетания.

Иттен создал круговую схему из 12 цветов. В центре цветового круга основа ― красный, жёлтый и синий. Сверху ― вторичные цвета, которые получаются при их смешении. Внешний круг схемы включает три первичных цвета, три вторичных и шесть третичных. Оттенки на схеме расположены так, что сразу видно, с помощью каких цветов их можно получить.

Изображение: Skillbox Media

С помощью цветового круга Иттена можно подбирать интересные комбинации цветов. Подробнее о возможностях этой схемы читайте здесь.

Это ключевые параметры цвета, и они связаны в первую очередь с физическими показателями ― уровнем света, длиной волн. Каждый цвет, оттенок обладает своими свойствами:

Цветовой тон ― показатель, по которому мы определяем, к какой части спектра вообще относится цвет.
Яркость, или светлота, ― степень отличия цвета от чёрного или белого. Когда мы меняем настройки яркости в графических программах, то выбираем значение как раз в диапазоне между этими двумя цветами. Именно этот показатель может превратить спектральный цвет в ахроматический.
Насыщенность ― то, насколько интенсивен цвет относительно уровня яркости.

Вопрос, конечно, с подвохом ― нет, этого недостаточно. Понятие цвета субъективно, и в этом главная проблема. Например, заказчик может указать в ТЗ, что ему нужно оформить сайт в аквамариновом цвете. Уже в процессе или финале работы может выясниться, что дизайнер воспринимает этот оттенок ближе к голубому, а клиент ожидает скорее зелёный.

Чтобы таких несостыковок не возникало, дизайнеры используют компьютерные цветовые модели. Это системы, в которых у разных оттенков и тонов свои точные параметры/координаты. Существует несколько моделей с разным устройством и областью применения. Среди самых популярных:

RGB. В этом цветовом пространстве каждый цвет создаётся смешением красного (Red), зелёного (Green) и синего (Blue) с разной интенсивностью. То есть у каждого цвета будут свои цветовые пропорции. Например, фиолетовый в этой системе обозначается параметрами 90/0/157: первое число ― содержание красного цвета, второе ― зелёного, третье ― синего.

CMYK ― эта система основана на смешении в разных пропорциях четырёх красок: бирюзовой (Cian), пурпурной (Magenta), жёлтой (Yellow) и чёрной (Key color, black).
HSB ― цветовая модель, где каждый оттенок определяется по цветовому тону (Hue), уровню насыщенности (Saturation) и яркости (Brightness).

Существует и система стандартизации цветов Pantone Matching System (PMS), в которой каждому цвету присваивается специальный код. Палитры используют в текстильной промышленности, дизайне, полиграфии, и при их разработке учитываются разные способы печати и особенности красок.

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

Более детально о цветовых пространствах и их применении мы рассказывали здесь.

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

Например, генератор Coolors позволяет создать палитру, перебирая разные цветовые комбинации, или найти подходящий образец в публичной библиотеке. А если у вас уже есть референс в виде картинки, вы можете загрузить её на сервис colr.org и создать на её основе цветовую схему.

Подробнее узнать о сервисах для создания цветовых палитр можно здесь.

Это ещё один важный аспект колористики. Речь о том, что цвет может вызывать у человека определённые эмоции и образы. Например, красный ассоциируется с энергией, страстью, синий ― с водой и свежестью, розовый ― с нежностью. Эти ассоциации формируются под влиянием культуры (в разных сообществах один и тот же цвет может трактоваться по‑разному) и реальных объектов (например, жёлтый будто вызывает ощущение тепла, потому что он напоминает о солнце).

В дизайне психологию цвета можно использовать как способ коммуникации с пользователем ― или даже как средство манипуляции. Скажем, при оформлении интерьера дизайнеры учитывают, какие чувства должно вызывать помещение: успокаивать, настраивать на активную работу или даже провоцировать чувство голода.

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

Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!

Читайте также:

Vkontakte Twitter Telegram Скопировать ссылку Научитесь:

Профессия Графический дизайнер Узнать больше

Кампания The Drop Store показала, как будут выглядеть продукты в будущем с дефицитом воды 29 мар 2023

Pepsi представила новую айдентику впервые за 15 лет 29 мар 2023

Магазин оптики сделал рекламную кампанию с огромными глазами, нарисованными Midjourney 29 мар 2023

Понравилась статья?

Да

Колористика в дизайне

28/10/2013

Цвет является неотъемлемой частью предметно-пространственной среды, которая окружает каждого человека. Цвет обладает огромными выразительными возможностями, способствующими выработке определенных эмоций и зрительных ощущений, что делает его отличным инструментом в руках профессиональных дизайнеров, архитекторов и художников. Такая наука, как колористика, изучает природу и основные характеристики цвета, психофизиологические и культурные особенности его восприятия, а также цветовые контрасты, предпочтения и цветовую гармонию. Именно цвет и разнообразные цветовые сочетания помогают дизайнерам передать определенный эмоционально-смысловой подтекст, либо вызвать у человека нужные эмоции.

Психологические особенности восприятия цвета

Под цветом мы имеем в виду свойства светового потока вызывать у нас некоторое зрительное ощущение в соответствии со спектральным составом излучения. К видимой человеческому глазу части спектра принято относить излучения с длиной волны от 380 до 780 нанометров, хотя в определенных ситуациях наши глаза способны различать световые лучи и в более широких пределах. Это является свидетельством того, какими высокими адаптивными возможностями обладают наши органы зрения.

Известно, что человеческий глаз по-разному воспринимает световые волны различной длины. Например, наибольшей видимостью для человека обладают зеленые лучи с длиной волны 555 нанометров. В зависимости от характеристик освещения (времени суток) и психофизиологического состояния человека восприятие цветов и оттенков заметно меняется.

Почему цвет так важен в дизайне, рекламе, графике и во многих других областях деятельности человека? По сути, первым, кто обратил внимание на два возможных аспекта цветов – художественный и физический, был Леонардо да Винчи. Именно он первым определил стройную систему цветов и выделил шесть простых цветов (зеленый, желтый, белый, черный, синий и красный). Художественные возможности цвета действительно очень сильные, ведь цвет оказывает воздействие на психологическое состояние человека и даже на отдельные физиологические процессы.

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

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

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

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

– Синий/голубой цвет: уменьшает чувство тревоги у человека и настраивает на спокойствие, ассоциируется со стабильностью, гармонией, доверием и безопасностью. С помощью голубого или синего цвета можно вызывать большее доверие к определенному продукту.

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

– Желтый: цвет положительного настроения, объединяющий свойства красного и зеленого цветов. Это яркий цвет светового спектра, который ассоциируется у человека с оптимизмом, надеждой, солнечным светом и счастьем. Желтый цвет расширяет горизонты восприятия и стимулирует мозг, способствуя решению любых задач.

– Оранжевый цвет: это динамичный, молодежный цвет, который создает чувство благополучия и способствует большей работоспособности человека. Оранжевый цвет вызывает энтузиазм, также он ассоциируется с теплом или энергией.

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

– Коричневый: создает чувство стабильности, долговечности, комфорта и надежности. Ассоциируется с землей, домашним очагом, домом и удобством. Коричневый цвет предпочитают консервативные люди, которые не хотят ничего менять.

– Серый цвет также нравится консерваторам и традиционалистам. Он ассоциируется с интеллектом, чистотой, надежностью, практичностью, скромностью и чувством собственного достоинства.

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

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

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

Колористическая теория в дизайне

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

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

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

Нужно отметить, что при оформлении интерьеров и разработке продукции различного назначения принимаются в расчет еще и этнокультурные цветовые предпочтения людей. К примеру, в Китае красный цвет ассоциируется с удачей, в западных странах – со страстью, в Японии – с жизнью, а в Южной Африке красный цвет означает траур. В свою очередь, голубой цвет на востоке говорит о бессмертии, в европейский странах символизирует спокойствие, во многих других культурах – это цвет безопасности и защиты. Таким образом, каждый регион или даже нация характеризуется своими культурными предпочтениями и особенностями в области восприятия цветов. Причем эти цветовые предпочтения могут меняться с течением времени, изучением этого явления также занимается колористика.

Кстати, проведенные исследования показывают, что собственные цветовые предпочтения имеются и у россиян. Синий цвет у россиян ассоциируется с доверием, надежностью и прохладой, розовый цвет связан с питанием, сладостями и мягкостью, черный в глазах российских потребителей подчеркивает изящность, соблазнительность и тайну, а фиолетовый – духовность и достоинство.

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

Источник: Фотокомок. ру – тесты и обзоры фотоаппаратов (при цитировании или копировании активная ссылка обязательна)

Что такое теория цвета? Значение и основы

Иллюстрация Ран Лю

Цвет — один из самых мощных инструментов визуальной коммуникации. Это может влиять на наши эмоции, наше настроение и наше поведение. Вот почему дизайнерам продуктов так важно тщательно подбирать цвета.

В этой статье мы рассмотрим основы теории цвета для дизайнеров и предоставим информацию, которая поможет вам разработать эффективные и визуально интересные цветовые схемы.

Что такое теория цвета?

Цвет является неотъемлемой частью взаимодействия человека с компьютером, и, как и в случае с другими элементами, такими как типографика, дизайнеры должны тщательно подбирать цвета. Цветовая схема – это термин, который дизайнеры используют для описания цветовых комбинаций, используемых в дизайне графического пользовательского интерфейса . Поскольку существует бесконечное количество цветовых комбинаций, может быть трудно решить, какая цветовая схема лучше всего подойдет для вашего продукта. К счастью, у нас есть теория цвета, дисциплина, которая помогает нам выбирать сбалансированные и эффективные цветовые комбинации.

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

Ограничение общего количества цветов

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

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

Пример цветовой схемы, созданной только с одним красным цветом. Изображение предоставлено Adobe.

Используйте цветовой круг для выбора цветов

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

Цветовой круг с 12 спицами. Изображение предоставлено Сакурамбо. Первичные, вторичные, третичные и четвертичные цвета. Кредит изображения KetanNaik.

Вот три популярных типа цветовых схем, которые можно создать с помощью цветового круга:

Монохроматический. Монохроматические схемы используют один цвет, но с различными оттенками, оттенками и тонами цвета. Эта схема очень приятна для глаз; поскольку цвета естественным образом хорошо сочетаются друг с другом, они создают успокаивающий эффект.

Пример монохромной цветовой схемы. Изображение предоставлено Adobe.

Аналог. В аналоговых цветовых схемах используется несколько родственных цветов: один цвет является доминирующим, а другие поддерживают его. Поддерживающие цвета обогащают схему и делают ее более визуально привлекательной.

Пример аналогичной схемы, созданной из трех цветов, близких друг к другу на цветовом круге. Изображение предоставлено Adobe.

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

Пример дополнительной цветовой схемы. Изображение предоставлено Adobe.

Adobe Color — отличный инструмент для создания цветовых схем, поскольку он дает вам свободу изменять существующие схемы. Каждый цвет в палитре можно индивидуально изменить несколькими простыми щелчками мыши.

Пример создания монохромной схемы с помощью Adobe Color. Изображение предоставлено Adobe Color.

Понимание психологии цвета

Сосредоточение внимания на психологических аспектах цвета является важной частью понимания теории цвета. Когда вы выбираете цветовую палитру UX для своего продукта, вы обычно думаете о том, как все будет выглядеть выглядят, , но не менее важно думать о том, как они себя чувствуют, тоже. Цвет оказывает сильное психологическое влияние на человеческий мозг, поскольку каждый цвет представляет разные значения и эмоции для ваших пользователей.

Хотя общепризнанных значений нет, вот некоторые общие чувства, которые цвета вызывают у большинства людей:

Красный : опасность, важность, любовь. Красный известен как цвет энергии — простой взгляд на него может увеличить пульс, частоту сердечных сокращений и обмен веществ. Это отличный цвет для привлечения внимания посетителя; попробуйте использовать его, чтобы выделить наиболее важные элементы на вашей странице.
Оранжевый : энергия, оптимизм, веселье. Оранжевый обладает положительной энергетической атмосферой. Он также ассоциируется с недорогими продуктами, что делает его хорошим цветом для интернет-магазинов, если вы хотите выделить лучшую цену.
Желтый : счастье, внимание, тепло. Желтый означает солнечный нрав; в сочетании с черным он быстро привлечет внимание. (Вспомните, например, желтые такси в Нью-Йорке.)
Зеленый : рост, успех, природа. Зеленый отлично подходит для продуктов, близких к природе. Это также популярный цвет для использования в пользовательских интерфейсах, который дает пользователям сигнал об успешном завершении операции.
Синий : доверие, комфорт, спокойствие. Синий олицетворяет расслабление и комфорт. Бренды любят этот цвет, потому что он создает у клиентов впечатление внутренней безопасности.
Фиолетовый : роскошь, творчество, мудрость. Фиолетовый обычно ассоциируется с королевской семьей, а также с предметами роскоши.
Черный : сила, изысканность, тайна. Большинство брендов ограничивают черный текст текстом и акцентами. В качестве основного цвета черный может быть заметен на модных сайтах, чтобы передать ощущение роскоши.
Белый: чистота, здоровье, невинность. Белый обычно заставляет нас думать о здоровье и чистоте. Дизайнеры обычно выбирают этот цвет, чтобы показать безопасность продукта, особенно для медицинского оборудования и высокотехнологичных продуктов.

Пол и цвет кожи

Влияет ли пол на цветовые предпочтения? В одном исследовании исследователь Джо Хэллок действительно обнаружил некоторые большие различия.

Результаты исследования наиболее и наименее любимых цветов мужчин и женщин. Кредит изображения Smart Insights.

Ниже приводится краткий обзор исследования:

Синий — самый популярный цвет как у мужчин, так и у женщин.
Несмотря на распространенное мнение, розовый цвет не является любимым цветом женщин.
Оранжевый, коричневый и желтый — самые непопулярные цвета как у мужчин, так и у женщин.
Мужчины обычно предпочитают яркие контрастные цвета, а женщины предпочитают более мягкие цвета.

Возраст и цвет кожи

Возраст также играет роль в цветовых предпочтениях. Фабер Биррен, автор книги «Психология цвета и цветовая терапия», обнаружил, что молодые люди склонны отдавать предпочтение цветам с большей длиной волны (например, красному и оранжевому), в то время как пожилым людям нравятся цвета с более короткой длиной волны (например, синий). То же исследование Джо Хэллока, посвященное гендерным и цветовым предпочтениям, подтвердило выводы Биррена, но также показало, что многие возрастные группы предпочитают фиолетовый цвет.

График любимых цветов по возрастным группам; исследования показывают, что молодые люди предпочитают цвета с большей длиной волны (например, красный и оранжевый), а пожилые люди предпочитают цвета с более короткой длиной волны (например, синий).

Изображение предоставлено Джо Хэллоком.

Практические советы по использованию цвета

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

Используйте доски настроения, чтобы найти правильные цвета

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

Пример мудборда. Кредит изображения Designmodo.

Создание фокусных точек с помощью цвета

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

Чем больше мы хотим, чтобы что-то выделялось, тем больше мы должны полагаться на цветовой контраст для достижения этой цели. Mailchimp, например, использует контрастные цвета, чтобы привлечь внимание к кнопке призыва к действию. Кредит изображения Mailchimp.

Решите, когда и как использовать яркие и мягкие цвета.

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

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

Яркая домашняя страница, окрашенная в розовый и синий цвета, создает энергичную атмосферу.

Изображение предоставлено Vredestein New Horizons.

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

Страницы коллекции товаров, выполненные в мягких пастельных и естественных тонах. Кредит изображения Коллагери.

В конечном счете, вы должны основывать свой выбор цвета на том, что вы хотите, чтобы ваши клиенты чувствовали, взаимодействуя с вашим продуктом.

Не забывайте о доступности

Дизайн — это не только эстетика; это также касается функциональности и удобства использования. При разработке пользовательского интерфейса он должен быть доступен для людей с различными способностями. Одной из особых проблем, с которой сталкиваются дизайнеры при работе с цветами, является рассмотрение того, как люди с дальтонизмом или дефицитом цветового зрения (ССЗ) будут взаимодействовать с продуктом.

Эти цветовые круги показывают, как выглядит цвет для людей с нормальным зрением (крайний слева), и те же цвета, которые видят люди с нарушением красно-зеленого цвета (в центре и справа). Изображение адаптировано из Сакурамбо.

При проектировании с использованием цвета следует помнить две вещи:

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

Некоторые слабовидящие пользователи не видят красные и зеленые символы, поэтому не используйте только эти цвета для передачи информации. Кредит изображения WebAIM.

Избегайте низкоконтрастного текста. Размещение двух цветов с низкой контрастностью рядом друг с другом может сделать ваш текст очень трудным для чтения. Руководство по доступности веб-контента (WCAG) рекомендует, чтобы коэффициент контрастности фона и текста составлял не менее 4,5:1. Имейте это в виду, когда вы разрабатываете текст, а также функциональные элементы, такие как кнопки.

Низкоконтрастный текст может быть трудночитаемым, что может ухудшить работу пользователя. Изображение предоставлено Ником Бабичем.

Что касается специальных возможностей, мы рекомендуем использовать Color Contrast Checker и симулятор зрения NoCoffee для Chrome. Первый инструмент поможет вам проверить ваши цветовые комбинации в соответствии с рекомендациями WCAG, а второй инструмент позволит вам испытать дальтонизм во время проектирования.

Использование такого инструмента, как NoCoffee, показывает, как пользователи с протанопией — те, кто не может различать красный и зеленый цвета — видят разные веб-сайты. Изображение адаптировано из CNN.

Заключение

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

Words by
Will Fanguy

Will Fanguy — дизайнер контента в компании, занимающейся корпоративными технологиями. Он живет в Остине, штат Техас, со своей женой, двумя маленькими собаками и полным оптимизма. Он ценит хороший GIF, отличную чашку кофе и правильное использование оксфордской запятой.

Теория цвета в графическом дизайне: Краткое руководство для недизайнеров

В дизайне есть несколько вещей, которые важнее цвета. Цвет может вызывать реакцию, эмоции или даже действие без использования слов. Так как же узнать, какие цвета хорошо смотрятся вместе? Ответ — теория цвета в графическом дизайне! Теория цвета описывает использование цвета в графическом дизайне. Иначе известные как цветовые палитры графического дизайна. Однако это не только для художников, поскольку люди используют теорию цвета и в повседневной жизни! Будь то выбор наряда или составление приглашения на вечеринку на день рождения членов семьи, теория цвета поможет вам выбрать красочный графический дизайн!

1.

Понимание теории цвета в графическом дизайне

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

Теория цвета в графическом дизайне: красный

Красный относится к семейству «теплых» цветов и вызывает чувство страсти, любви и ненависти! Доказано тем фактом, что красный цвет используется как в изображениях Купидона, ангела любви, так и в демонах.

Так как он также ассоциируется с силой и образами огня, насилия и войны, мы склонны использовать красный цвет как предупреждение об опасности или даже для выговора кому-то, например, помечая что-то неправильно большим красным знаком «X». Тем не менее, красный цвет также можно рассматривать как символ статуса, например, когда он используется на красных дорожках, или он может заставить кого-то подумать о красных рубинах.