Не секрет, что цвет имеет большое значение в дизайне играя значительную роль. Психологически определенные цвета вызывают различные реакции или чувства у зрителя.
Когда дело доходит до разработки приложения, веб-сайта или бренда, цвет может дать четкое представление о том, что представляет собой ваш продукт, использоваться для облегчения потока пользователей и даже помочь пользователям понять, где нажимать.
Не секрет, что цвет имеет большое значение в дизайне играя значительную роль. Психологически определенные цвета вызывают различные реакции или чувства у зрителя.
Когда дело доходит до разработки приложения, веб-сайта или бренда, цвет может дать четкое представление о том, что представляет собой ваш продукт, использоваться для облегчения потока пользователей и даже помочь пользователям понять, где нажимать.
Учитывая его силу, важно не основывать выбор цвета на личных предпочтениях, а использовать его с намерением достичь своих целей.
Анализ тематического исследования для цвета
В теории цвета важно понимать концепцию цветовой гармонии, которая в основном говорит вам, какие цвета выглядят эстетически рядом друг с другом. Эти различные цветовые комбинации лучше всего иллюстрируются с помощью цветового круга.
Давайте погрузимся в некоторые основные цветовые схемы.
Аналогичные цвета
Эта цветовая схема создается с помощью цветов, расположенных рядом друг с другом на цветовом круге.
Эти цветовые схемы приятны для глаз и часто связаны с природой. Например, закаты, волны или определенные цветы имеют аналогичные цвета, которые естественным образом сочетаются друг с другом и дают зрителю ощущение легкости.
Пример: это градиентная цветная иллюстрация, созданная Захидулем
Дополнительные цвета
Цвета, которые противоположны друг другу на цветовом круге и сильно контрастируют друг с другом, называются дополнительными цветами. Они полностью противоположны монохроматическим (тона одного цвета) и аналогичным цветам. Комбинация красного и зеленого делает идеальный пример для этого типа.
Эта цветовая схема является наиболее подходящей, если вы хотите добиться высокой контрастности, пытаетесь ли вы выделить что-то или выделить особенность из всего остального. Лучший пример такой цветовой схемы - кнопки CTA.
Пример: этот веб-интерфейс, созданный Майком, использует дополнительные цвета, оранжевый и синий.
Пример: мобильный пользовательский интерфейс, созданный Dannniel [Mobile UI]
Сплит Дополнительные цвета
Эта цветовая схема использует основной цвет с двумя аналогичными цветами в дополнение. Хорошим примером будет красный и чирок, который состоит из синего и зеленого.
Разделенная дополнительная цветовая схема похожа на дополнительную цветовую схему, за исключением того, что это немного легче для глаз. Это отлично подходит для создания смелых дизайнов, которые не являются подавляющими. С этим забавно поиграть.
Пример: иллюстрация, созданная Sketchbook Baloo
Триада Цвета
Эта цветовая схема использует три цвета, которые равномерно расположены на цветовом круге. Красный, зеленый и желтый цвета составляют триаду.
Использование цветов триады - отличный способ добавить вибрации. Эта цветовая схема создает ощущение веселья и придает вашему дизайну великолепные цвета. Однако, с 3 контрастными цветами, важно контролировать и балансировать это должным образом, чтобы избежать хаоса.
Пример: это веб-страница, созданная 12dishes.com
Тетрадные цвета
Эта цветовая схема использует четыре цвета, сгруппированные в две дополнительные пары. Как вы можете видеть на колесе ниже, оранжевый - фиолетовый и желтый - синий составляют дополнительные пары.
Это самая сложная схема для баланса, так как вы применяете две дополнительные пары.
В этом случае следует обратить внимание на баланс между теплыми и прохладными цветами.
Пример: мобильный пользовательский интерфейс, созданный Сергеем Валюхом
Как улучшить ваше чувство цвета
Как дизайнер, вы будете сталкиваться с ситуациями, когда вы не уверены в выборе цвета, который вы сделали. Для таких ситуаций я перечислил несколько советов, которые помогут вам развить чувство цвета.
Попробуйте режим серого
Прежде чем принимать какие-либо решения, важно проверить удобство использования цветов для вашего дизайна. Иногда трудно увидеть кнопки или CTA, которые вы хотите подчеркнуть, особенно когда у вас много контента. Когда применяется цвет, вы можете быть поражены, если не знаете, как управлять тоном цвета. Например, использование большого количества ярких цветов на кнопках и тексте может привести к тому, что пользователь будет игнорировать кнопку, поскольку слишком много всего происходит.
Проектирование в оттенках серого сначала поможет вам проанализировать, на каких функциях вы должны сосредоточиться.
Как и в фазе каркаса, мы создаем каркас с темными цветами и сильным тоном, чтобы указать на CTA.
Режим градаций серого также даст вам представление о том, как люди с дальтонизмом видят вашу работу. Если вы не уверены в выбранных вами цветах, этот режим можно использовать для их проверки. Когда вы начнете больше заниматься дизайном, вы будете постепенно выяснять, какие компоненты должны быть выделены, чтобы сделать ваш дизайн более результативным.
Следуйте правилу 60-30-10 для цветовых пропорций
Первоначально применяемое как практическое правило для дизайна интерьера, правило 60-30-10 оказалось полезным для всех видов дизайна, включая веб- и мобильные. 60% должно быть нейтральным базовым цветом, 30% - второстепенным, а 10% - ярким ярким акцентным цветом.
Эти пропорции приводят к сбалансированному дизайну, который легок для глаз.
Захватить вдохновение из вашей повседневной жизни
В вашей среде так много вдохновения, что вам не нужно ограничивать себя собственным дизайном. Независимо от того, являетесь ли вы UX / UI дизайнером или дизайнером интерьера, вы можете позаимствовать идеи из разных областей искусства, например, традиционной живописи. Хотя мы намного опередили времена, когда наш выбор цветов был ограничен небольшой партией естественных цветов, поиск вдохновения от разнообразия природных ландшафтов вокруг нас может быть полезным. Вы также можете посмотреть на онлайн-источники, такие как Dribbble, чтобы получить вдохновение от ваших любимых дизайнеров и художников.
Полезные генераторы цветовой схемы
Существует множество инструментов, которые помогут вам создавать цветовые схемы и палитры.
Adobe Color CC - это бесплатный инструмент, с помощью которого вы можете легко импортировать любое изображение и получить анализ цвета фотографии, предоставив вам подробную информацию о цветах, которые будут наилучшим образом работать вместе.
Coolors - один из самых полных онлайн-инструментов, который прост, быстр и прост в использовании. Он имеет бесплатное расширение Chrome, которое позволяет сохранять / добавлять в закладки все ваши любимые цветовые схемы. Мобильное приложение доступно для iOS и Android. Вы также можете добавить плагин Adobe Add-on для Photoshop и иллюстратор.
Это платформа, на которой все дизайнеры и художники обсуждают последние цветовые тренды и статьи. Творческое сообщество на этой платформе также делится цветами и паллетами между собой.
Color Calculator - это креативный и удобный интерактивный инструмент цветового круга. Вы также можете поиграть и изучить другие варианты, испробовав различные формулы цветовой гармонии.
Теперь, когда вы знакомы с основами теории цвета, вы можете попрактиковаться в смешивании и подборе и создании собственных цветовых схем. Практика делает идеальным, и вам нужно будет экспериментировать с разными цветами, чтобы понять, какие из них хорошо работают вместе. Это в конечном итоге поможет вам принять лучшие решения в области цветового дизайна.