Цвет в дизайне.
Недавно в процессе создания интерфейса, столкнулось с проблемой цвета, поэтому решила подтянуть себя по этой теме. Всякие там значения цветов и как их сочетать я и так знаю, так что углубимся в значение цвета применимо к дизайну.
Цвет имеет значение. В конце 50-х годов прошлого столетия, Pepsi уступила часть рынка Coca Cola в юго-восточной Азии из-за смены цвета своих автоматов с “царственно” синего на “ледяной” синий. Когда компания UPS заходила на рынок Германии в 1976, это вызвало сопротивление у местных потребителей. Возникла необходимость заменить цвет униформы с коричневого на зеленый. Пассажиры были в замешательстве, когда персонал United Airlines приветствовал их белыми гвоздиками на первых рейсах из Гонконга. Авиакомпания быстро заменила их на красные цветы.
В некоторых частях Азии, светлые оттенки синего ассоциируется с печалью. Коричневая униформа напомнила немцам об CC, военизированное крыло нацистской партии, носившими название “коричневые рубашки”. А многие пассажиры авиакомпании United Airlines думали о смерти, когда видели белые цветы.
Немного терминологии
Оттенок, цвет (Hue) – это один из самых основных терминов, который обозначает цвет объекта. Когда мы произносим «синий», «зеленый» или «красный», мы говорим как раз об этом термине.
Цветность (Chroma) – это степень чистоты цвета без каких-либо примесей. Цвет с высокой цветностью не имеет примеси черного, белого или серого цветов. Цветность можно сравнить с яркостью оттенка относительно белого.
Приминение: старайтесь не использовать оттенки, которые очень схожи по своей цветности. Лучше пользоваться одинаковыми оттенками, или воспользоваться непохожим по цветности оттенком.).
Насыщенность (Saturation) – отображение оттенка при конкретных условиях освещения. Можно ассоциировать этот термин с соотношением слабый/сильный или бледный/яркий.
Если вы когда-то красили комнату цветной краской, вы поймете, о чем идет речь. Стены выглядят по-разному, в зависимости от степени освещения. При плохом освещении, бледно серый цвет выглядит намного темнее, в то время, как при хорошем освещении он почти белый.
Приминение: цвета с похожим уровнем насыщенности создают эффект некоторой сплоченности в дизайне. Как и в аспекте цветности, оттенки с похожим, уровнем насыщенности могут немного раздражать посетителей.
Значение (Value) – этот термин также можно называть «яркость». Он отвечает за то, насколько оттенок светлый или темный. Светлые оттенки имеют более высокое значение. Например, оранжевый имеет большее значение яркости, нежели темно-синий или темно-фиолетовый. У черного цвета самый низкий уровень яркости, а у белого – высокий.
Приминение: обычно дизайнеры пользуются оттенками с различными уровнями яркости, особенно теми, у которых высокий уровень цветности. Высокий контраст обычно привлекает внимание.
Тональность (Tones) - тон создается тогда, когда Вы смешиваете серый с каким-нибудь другим отдельным цветом. Тона более тусклые и выглядят более мягкими, нежели отдельные чистые цвета.
Приминение: порой тона бывает легче применить в дизайне. Тона с большим коэффициентом серого могут способствовать приданию некоторого винтажного вида всему веб-сайту. В зависимости от оттенка, они также могут способствовать более элегантному и утонченному эффекту.
Тени (Shades) – создаются посредством добавления черного оттенка в цвет, что делает его темнее. Часто этот термин неправильно используют, обозначая осветление или тональность, потому что тени, в свою очередь, лишь делают цвет темнее за счет смешивания с черным.
Приминение: очень темные тени обычно используют вместо черного, и они также охотливо служат в роли нейтрального цвета. Комбинация теней с осветлением считается наилучшим способом, чтобы избежать слишком темного и тяжелого внешнего вида.
Осветление (Tints) – подразумевает под собой процесс, когда в оттенок примешивают белый цвет, что подсвечивает его. Очень светлые оттенки обычно называют пастельными, но если добавлено всего немного белого, то обычно этот оттенок называют просто осветленным.
Приминение: обычно такой способ окраски используют для создания светлых и более женственных дизайнов. Они также хорошо применимы в веб-сайтах с винтажным дизайном, или направленных на молодые семьи с маленькими детьми.
Приминение: обычно дизайнеры пользуются оттенками с различными уровнями яркости, особенно теми, у которых высокий уровень цветности. Высокий контраст обычно привлекает внимание.
Тональность (Tones) - тон создается тогда, когда Вы смешиваете серый с каким-нибудь другим отдельным цветом. Тона более тусклые и выглядят более мягкими, нежели отдельные чистые цвета.
Приминение: порой тона бывает легче применить в дизайне. Тона с большим коэффициентом серого могут способствовать приданию некоторого винтажного вида всему веб-сайту. В зависимости от оттенка, они также могут способствовать более элегантному и утонченному эффекту.
Тени (Shades) – создаются посредством добавления черного оттенка в цвет, что делает его темнее. Часто этот термин неправильно используют, обозначая осветление или тональность, потому что тени, в свою очередь, лишь делают цвет темнее за счет смешивания с черным.
Приминение: очень темные тени обычно используют вместо черного, и они также охотливо служат в роли нейтрального цвета. Комбинация теней с осветлением считается наилучшим способом, чтобы избежать слишком темного и тяжелого внешнего вида.
Осветление (Tints) – подразумевает под собой процесс, когда в оттенок примешивают белый цвет, что подсвечивает его. Очень светлые оттенки обычно называют пастельными, но если добавлено всего немного белого, то обычно этот оттенок называют просто осветленным.
Приминение: обычно такой способ окраски используют для создания светлых и более женственных дизайнов. Они также хорошо применимы в веб-сайтах с винтажным дизайном, или направленных на молодые семьи с маленькими детьми.
Создание собственной цветовой схемы
Собственные цветовые схемы являются наиболее сложными относительно создания. В отличие от стандартных заготовок (монохромные, комплиментарные и т.д.), собственные схемы не основаны на каких-либо формальных правилах. При создании такого типа цветовых схем, не забывайте про уровни цветности, значения и насыщенность.
Из таких схем, первый цвет, по большей части, будет использоваться для заголовков. Второй для окраски текста документа. А третий чаще всего используется как цвет фона (иногда как цвет текста документа, если цвет под номером 2 уже используется в качестве фонового). И последние два цвета обычно используются для создания нечто вроде эффектов и акцентов.
Цвета, используемые на этом примере, имеют схожий уровень цветности и насыщенности.
Опять же, используются цвета со схожим уровнем цветности и насыщенности. Такой метод очень эффективен и создает чувство сплоченности внутри цветовой схемы.
Используя один цвет с высоким уровнем цветности вместе с остальными с более низким уровнем – это еще один эффективный метод (цвета с более высоким уровнем цветности могут служить акцентами).
Много ли нужно цветов?
Большинство веб-сайтов используют всего три цвета в дизайне. Некоторые используют вообще два. Но в то же время существуют сайты, на которых задействовано 8-10 цветов (что гораздо сложнее реализовать). Экспериментируйте и старайтесь использовать как можно больше или как можно меньше цветов, которые конкретно необходимы для реализации Вашей идеи дизайна. Вероятно, Вы захотите начать с палитрой из 5 цветов, а затем добавлять по мере необходимости дополнительные оттенки.
Самый простой способ – это если Вы начнете с одной традиционной схемы и будете постепенно от нее отходить. Это, как минимум, даст Вам направляющую на последующие цвета.
Самый простой способ – это если Вы начнете с одной традиционной схемы и будете постепенно от нее отходить. Это, как минимум, даст Вам направляющую на последующие цвета.
Инструменты
Чтобы упростить себе задачу, я приведу несколько лучших инструментов для выбора цветовых палитр. Они сэкономят массу вашего времени.
Coolors.co
Бесспорно, мой любимый инструмент для выбора цветов. Вы можете просто выбрать один цвет и сгенерировать палитру, нажав пробел. Coolors дает возможность загрузить изображение и создать палитру из него. Вы не ограничены одним результатом — селектор позволяет изменять исходный ориентир.
Kuler
Этот инструмент от Adobe уже долгое время выручает дизайнеров. Он работает в браузере, также есть десктопная версия. Если пользуетесь десктопной версией, вы можете экспортировать цветовую схему в Photoshop.
Paletton
Он похож на Kuler, отличие в том, что вы не ограничены 5 оттенками. Отлично подходит, если у вас есть основные цвета, и хочется поиграться с дополнительными оттенками.
Designspiration.net
Представьте, что у вас есть идея для цветовой палитры, но нужно наглядно сравнить разные варианты. Designispiration идеально подходит под эти цели. Вы выбираете до 5 цветов, ищите изображения, подходящие вашим оттенкам. Сервис не только удачно ищет изображения в заданной палитре, но и помогает подобрать нужную графику для интеграции в дизайн.
Shutterstock Lab Spectrum
Вы спросите — а что, если я хочу поискать фото в выбранном цвете? В Shutterstock есть инструмент под названием Spectrum, в котором вы можете найти фото конкретного оттенка. Для этого не нужна даже подписка, потому что превью изображений с водяным знаком будет вполне достаточно для генерации палитры.
Tineye Multicolr
Но если нужно найти фото по нескольким заданным цветам или даже задать конкретное количество каждого оттенка, тогда воспользуйтесь Tineye. Этот сайт использует базу из 10 миллионов изображений Creative Commons из Flickr.
Цвет — очень непростой для освоения ресурс, особенно в эру цифрового дизайна. Советы, которые я привела в этом посте, упростят поиск нужных оттенков. Лучше всего учиться создавать потрясающие цветовые схемы — это практика, поэтому вперед!
