Цвет

Новый подход к применению теории цвета на практике.

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

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

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

У нас амбициозная задача — мы расскажем, как делать
классно всегда.

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

Основные

Три «чистых» цвета. Все остальные цвета получаются путем сложения двух основных.

Холодные

Все оттенки цветов сине-зеленого спектра.

Теплые

Все оттенки цветов желто-красного спектра.

Аналогичные

Цвета, расположенные на круге рядом друг с другом.

Комплементарные

Противоположные цвета. На круге расположены друг против друга.

Разбитые комплиментарные

Цвет плюс два соседних цвета его комплементарного цвета.

Триада цветов

Три цвета, распределенные на круге равномерно.

Двойные комплементарные

Четыре комплементарных цвета.

Можно продолжить разбираться с теорией, прочитать книгу Йоханнеса Иттена «Искусство цвета». Книга, кстати, хорошая, рекомендуем изучить. Иттен — крупнейший исследователь теории цвета XX века.

Эти знания не лишние, они создают необходимый фундамент. Другой вопрос — как извлечь из этого полезность? Вы веб-дизайнер, вам не нужно как художнику смешивать краски, чтобы получить подходящий оттенок, перед вами уже готовые 16 миллионов вариантов. Что делать?

Йоханнес Иттен «Искусство цвета»

Книга содержит опыт исследований, лекций и практики в области цвета.

стратегия

Работа с цветом, в зависимости от цели проекта

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

Поэтому, чтобы разобраться как работать с цветом, первое, что вам нужно сделать — понять что у вас за проект, какая у него цель.

«Я самый крутой»

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

Поэтому вам нужно нужно выглядеть уверенно. Вы должны показать, что вы «крутой».

«Я самый веселый»

Второй случай, когда вы сообщаете «я самый веселый» или «у нас клево». Страница фестиваля, вечеринки, концерта, марафона, — то, где важна атмосфера и настроение.

В этом случае вы не доказываете свои профессиональные качества, а создаете сообщение, что человек получит удовольствие.

«Я крутой и веселый»

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

90% проектов, над которыми работает дизайнер, относятся к типу «я самый крутой».

Те проекты, которые занимают промежуточное положение, все же тяготеют к тому, что важнее сообщить: «мы эксперты в своем деле», и только затем показать, что еще и веселые.

1

Стратегия «я крутой». Правило бутика

Когда нужно донести до пользователя, что вы «крутой», нужно использовать один цвет, который занимает 80-90% и еще один-два дополнительных цвета в качестве акцента.

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

Использование красного цвета в качестве акцента.

Желтый мгновенно ловит внимание, но не спорит с общим серо-черным тоном.

«Правило бутика» не означает, что все должно быть черно-белым. Черный цвет приходит на ум первым, но, на самом деле, доминантный цвет может быть любым — синий, желтый, желтый, даже розовый. Делаете желтую обложку, пишете заголовок черным — классно! Смысл не в том, чтобы сделать все серым, сделать нужно стильно.

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

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

Пример: редизайн фирменного стиля лаборатории Wonderfull

Лаборатория Wondefull оказывает услуги инновационного консалтинга: оценка, запуск и сопровождение разработок в компании.

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

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

2

Стратегия «я веселый»

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

Яркий пример — постеры джазовых фестивалей.

На изображениях ниже образцы сайтов, подходящих под категорию «я самый веселый».

spotify.com — сервис для прослушивания музыки онлайн, loop.ableton.com — саммит людей, занятых в музыкальной индустрии, stldesignweek.com — страница St. Louis Design Week.

Тренд веб-дизайна

Особенный оттенок

Сейчас модно подбирать очень тонкие оттенки цвета. Как это делать объяснить и научить невозможно. Нужно стараться прочувствовать свой бренд и понять оттенок.

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

Пример из классики: «голубой» цвет Tiffany&Co, который даже удалось зарегистровать как торговую марку. Голубой в кавычках, потому что это цвет, который сложно назвать, но он абсолютно узнаваем и когда мы видим «голубую» коробочку, то точно знаем что внутри.

Другой пример — «оранжевый» цвет Tilda Publishing. Это уникальный, пойманный оттенок, который очень классно работает.

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

ресурсы

Использование готовых палитр

Если вы не очень уверены в выборе цвета, используйте палитры, составленные профессиональными дизайнерами.

Главное не увлечься и не начать использовать все подряд. Не забываем про правило: 90% один цвет, 10% другой, в качестве акцента.

google.com/design

Гайдлайн для дизайнеров по использованию цветов.

materialpalette.com

Выбор двух цветов: основного и дополнительного.

flatuicolorpicker.com

Палитра цветов для «плоского дизайна».

colorzilla.com

Расширение для браузера, которое определяет цвет.

tips & tricks

Улучшение читаемости с помощью цвета

Цвет создает стиль, настроение, воздействует на эмоции. Но кроме этого, цвет можно использовать в утилитарных целях.

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

79% дизайнеров не задумываются о правилах и делают как получится. 19% следуют правилам и делают отличные проекты. Но есть еще 2% дизайнеров, которые знают правила, но умеют их нарушать так, чтобы получился классный проект.

Введение

Задача и идея

Дизайн-исследование и фокусировка

Оcновы графического дизайна

Прототипирование

Контент

Дизайн