Дизайнер цветов – 119 трендовых цветов для создания фантастических сайтов (на 50 живых примерах).

Содержание

Цвет в веб-дизайне: как вызвать у пользователя нужные эмоции

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

Умение использовать цвета можно прокачивать до бесконечности. Это настоящая бездна возможностей для воздействия на человека.

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

Теория цвета

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

Можно разбить теорию цвета на три части:

Контраст

У каждого оттенка есть противоположность, так сказать, его «заклятый враг», который составляет самый большой контраст с этим цветом. Чтобы найти такой цвет, вы можете использовать цветовой круг. Просто выберите цвет на противоположной стороне круга.

Цветовое колесоЦветовое колесо
Дополнение

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

Резонанс

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

Например, BBC News используют красную панель навигации, чтобы пробудить читателя, усилить его возбуждённое состояние. Учитывая специфику сайта — сенсационные новости, — красный цвет выглядит логичным решением.

BBC NewsBBC News

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

Эмоциональное восприятие цвета

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

На основе нескольких исследований — анализа, опубликованного на сайте Vandelay Design, и поста о цветах в Smash Magazine — мы объясним, как цвета влияют на эмоции и помогают создавать UX-дизайн.

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

Красный

Эмоции и ассоциации: власть, важность, молодость.

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

Например, красный цвет очень подходит сайту No Way NSA, цель которого — предупреждать о предполагаемых угрозах.

Screenshot_2

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

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

Оранжевый

Эмоции и ассоциации: дружелюбие, энергия, уникальность.

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

Сайт FantaСайт Fanta

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

Жёлтый

Эмоции и ассоциации: счастье, энтузиазм, архаичность (более тёмные тона).

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

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

Flash MediaFlash Media

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

Зелёный цвет

Эмоции и ассоциации: рост, стабильность, темы финансов, темы окружающей среды.

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

Ameritrade
Ameritrade

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

Синий цвет

Эмоции и ассоциации: спокойствие, безопасность, открытость (более светлые оттенки), надёжность (более тёмные оттенки).

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

Социальные сети вроде Twitter и Facebook используют более лёгкие и средние оттенки синего, а корпоративные сайты предпочитают более тёмные оттенки силы и надёжности.

Отличный пример — агентство событийного дизайна Van Vliet & Trap. Используя синие цветы в качестве фона, они визуально намекнули на свои знания и умения во флористике, а также создали ощущение надёжности и доверия.

Van Vliet & TrapVan Vliet & Trap

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

Фиолетовый

Эмоции и ассоциации: роскошь, романтика (светлые оттенки), мистика и тайна (тёмные оттенки).

Фиолетовый цвет исторически ассоциируется с королевским величием, намекает на роскошь. Пурпурные оттенки отражают щедрость и богатство в целом, что делает их отличным выбором для модных товаров и предметов роскоши (даже для шоколада, например, как Cadbury, который выбрал его цветом бренда).

Van Vliet & TrapCadbury

Более светлые оттенки, такие как лавандовый (фиолетовый с добавлением розового), навевают мысли о романтике, тогда как тёмные оттенки кажутся более шикарными и таинственными.

Чёрный

Эмоции и ассоциации: власть, изысканность, нервозность.

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

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

Для большинства сайтов чёрный используется, чтобы создать ощущение изысканности. От сочетания чёрного и белого в минималистичном дизайне создаётся впечатление элегантности и стиля, как на сайте Dream and Reach компании BOSE.

Dream + ReachDream + Reach
Белый

Эмоции и ассоциации: чистота, простота, добродетель.

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

Сайт с работами Клоина ТошеваСайт с работами Клоина Тошева

Кроме того, ни один цвет не позволит обратить столько внимания на остальные цвета, как белый. Например, на сайте победителя Awwwards Клоина Тошева все его работы выложены на белом фоне, что только выделяет иллюстрации и создаёт впечатление элегантной галереи.

Серый цвет

Эмоции и ассоциации: нейтральность, формальность, меланхолия.

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

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

AwwwardsAwwwards

А в сочетании с более яркими цветами в дизайне серый фон кажется современным, а не мрачным, например на Awwwards.

Бежевый

Эмоции и ассоциации: передаёт характер остальных цветов.

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

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

DishoomDishoom

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

Цвет слоновой кости

Эмоции и ассоциации: комфорт, элегантность, простота.

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

Можно использовать цвет слоновой кости вместо белого, чтобы смягчить контраст между ним и более тёмными цветами. Например, на сайте Art in My Coffee коричнево-оранжевые элементы размещены на фоне цвета слоновой кости (который выглядит сероватым), что сохраняет ощущение теплоты.

Art in my coffeeArt in My Coffee

Цветовая гамма

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

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

Триада (тройная гармония, треугольник)
ТриадаТриада

Триада — основная и самая сбалансированная система из трёх цветов. В ней используется резонанс и дополнение цветов, но нет сложного контраста, из-за чего триада является самой надёжной гаммой.

На цветовом круге из 12 цветов выберите любые три, расположенные в 120 градусах друг от друга: один цвет для основного фона и два для контента и панели навигации.

Двойная комплиментарная система
Двойная комплиментарная системаДвойная комплиментарная система

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

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

FlourishFlourish
Аналоги (последовательная система)
АналогиАналоги

Гамма аналогичных цветов использует в основном дополняющие друг друга оттенки. Это позволяет особенно ярко подчеркнуть какие-то качества и вызвать определённые эмоции.

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

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

BlinksaleBlinksale

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

Инструменты-помощники для выбора цвета

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

  1. Adobe Color CC, ранее известный как Adobe Kuler. Это один из самых надёжных инструментов в выборе цвета.
  2. Paletton. Если вам нужен простой инструмент для максимально быстрого выбора цвета, Paletton отлично подойдёт.
  3. Flat UI Color Picker. Прекрасный инструмент для выбора цвета пользовательского интерфейса.

А если эти инструменты вам не подходят, вот ещё 28 сайтов с палитрами и разными инструментами для выбора цвета.

Прямая зависимость между цветом и эмоциями

Помните: пользователи редко замечают и оценивают цвет фона, панели навигации, отдельных деталей, но это не значит, что цвет при этом не воздействует на них. Просто это происходит подсознательно.

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

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

Цвет в дизайне / ua-hosting.company corporate blog / Habr

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

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

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

Правила соответствия цветов

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

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

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

Аналогичные цвета любые три цвета, которые находятся рядом с другом. Например, оранжевый, желто-оранжевый и желтый.

Триада образовывается из трех цветов, равномерно удаленных друг от друга. Схема триады создает контраст, где один цвет доминурует, а два других — расставляют акценты.

Две пары используют четыре цвета вместе в форме двух наборов дополнительных цветов.

Полезные веб-сайты

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

СOLOURlovers

www.colourlovers.com/palettes/most-views/all-time/meta

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

Color Safe

colorsafe.co

Веб-сайт с красивыми и доступными цветовыми палитрами, основанными на рекомендациях WCAG Guidelines.

COLORS

clrs.cc

Простая палитра цветов для веб-разработки.

UiGradients

uigradients.com/#PinotNoir

Большая коллекция уже готовых цветных градиентов.

Couleurs

couleursapp.com

Удобное приложение для того, чтобы «выхватывать» и сохранять цвета, которые отображаются на экране.

Web Colour Data

webcolourdata.com

Делает разбивку любого сайта по цветовой гамме (по номерам и образцам).

Material Palette

www.materialpalette.com

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

Material Colors

materialcolors.com

Подборка цветовых образцов из Google’s Material Design Guidelines.

Material Design Colors

www.designskilz.com/colors

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

Material Design Palette

codepen.io/addyosmani/full/jlvoC

Цветовая палитра на 500 диапазонов оттенков для Android, веб и iOS.

Colours

colours.neilorangepeel.com

Цвет по номерам и расположению на палитре.

Rrggbb

rrgg.bb

Образцы цвета с номерами для программ.

Fifty Shades Of Grey For Web Designers

www.mynameisq.com/web-lab/fifty_shades_of_grey

Оттенки и образцы серого для веб-дизайна.

Fifty Shades Of Grey For Web Designers

hex.colorrrs.com

Сайт, подбирающий цвет.

Material UI Colors

www.materialui.co/colors

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

Adobe Color CC

color.adobe.com/ru/create/color-wheel

Выхватывает цвета и оттенки из внешней среды — достаточно навести камеру телефона на что-то красочное.

Coolors

coolors.co/app/f2ee7a-7c6582-6252aa-f1ffc9-cdc5bb

Быстрый генератор цветовой схемы для дизайнеров.

BADA55.Io

bada55.io

Сайт предлагает наиболее агрессивные названия для цветов CSS.

Paletton

paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

Цветовая схема для дизайнеров.

Colourcode

colourco.de

Выбор цвета, основанные на hsl. Схема включает разные комбинации цвета.

Color Palette Generator

www.degraeve.com/color-palette

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

Color Palettes Color Schemes

www.color-hex.com/color-palettes

ColorSchemer

www.colorschemer.com/online.html

Он-лайн схема, генерирующая цвет.

Colllor

colllor.com

Генератор цветовой палитры.

Contrast-A

www.dasplankton.de/ContrastA

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

Color Hex

www.colorhexa.com

Сайт предоставления информации о любом цвете. Достаточно ввести любые цветовые значения в поле поиска и Color Hex выдаст подробное описание, автоматически преобразовывая в RGB, CMYK, HSL, HSV, CIE-Lab, Хантер-Lab, CIE-Luv, CIE-LCH, XYZ и XYY.

СolorExplorer

www.colorexplorer.com

Полезный сайт, предоставляющий целый набор она-лайн инструментов для работы с цветовой палитры.

ColorLuck

7act.ru/colorluck.php

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

Дизайн в цвете. Цвет — это мощная сила в руках дизайнера

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

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

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

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

Выбор цветовой палитры

цветовые палитры

Шаблон для палитры

Иногда цветовая палитра – это результат случайного вдохновения. Но в большинстве случаев это итог системного подхода.

Определите цель

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

Спросите себя следующее:

  • Какой посыл вы хотите передать через дизайн?
  • Какова цель вашего дизайна? Быть информативным? Убеждать?
  • Какие эмоции вы хотите рождать своим дизайном у пользователей?

Цель дизайна должна служить как руководство в выборе палитры цветов.

Определите свою аудиторию

Определите свою аудиторию

Кто ваша аудитория, и как это влияет на дизайн?

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

В то время, как некоторые цвета имеют одинаковое, универсальное значение для разных аудиторий, другие нет. Зеленый универсально представляет природу, так как это цвет растительности. Цвет вроде красного по-разному интерпретируется в разных культурах. На западе красный ассоциируется с огнем, насилием, войной. Он также ассоциируется с любовью и страстью. Тем не менее, страны вроде Китая связывают его с процветанием и счастьем.

Красный конверт в Китае

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

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

Изучите теорию цвета

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

Хороший материал для старта – Теория цвета от Design School и Цветовая теория 101 от Hubspot. Прочитайте об интересном применении теории цвета в посте Почему Facebook синий? Наука за цветами в маркетинге.

Поиск вдохновения

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

Обычным источником вдохновения для цветовых палитр являются сайты вроде Dribbble и Behance. Если вы хотите вдохновиться для конкретного стиля дизайна, например, material design, можете использовать сайт вроде MaterialUI. Эквивалент в плоском дизайне – FlatUIColors.

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

Дизайн интерьеров

Дизайн интерьеров оживляет пространство с помощью цвета.

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

Корейские клипы отлично вдохновляют

Корейские клипы отлично вдохновляют

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

Вдохновение повсюду, включая вашу повседневную жизнь.

Вдохновение повсюду, включая вашу повседневную жизнь.

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

Задайте дизайн-систему

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

В качестве примера дизайн-системы посмотрите на систему Salesforce. Больше примеров найдете в 50 дотошных руководствах по стилю, которые должен увидеть каждый стартап перед запуском.

Дизайн-система MashCreative

Дизайн-система MashCreative

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

При выборе палитры для дизайна лучше следовать принципу KISS (Keep it simple, stupid – Делай проще, дурачок!). Чем меньше цветов, тем лучше. Для большинства систем дизайна такая структура отлично подойдет для старта:

  • Фон
  • Главный тон
  • Вспомогательный тон
  • Цвет ошибки
  • Цвет успешной операции

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

Главный цвет

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

Состояния дизайна

Состояния дизайна

Выбор цветовой палитры

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

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

Выбор цветовой палитры

Это время вложить все свое вдохновение цветами в палитру. Чем больше, тем лучше. Не бойтесь экспериментировать с цветами.

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

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

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

invision index page color

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

палитрf цветов Invision

Геометрическое представление может выглядеть примерно так.

Геометрическое представление может выглядеть примерно так

Применение цветовых палитр

Посмотрите на Airbnb, чтобы иметь представление, как цвета применяются в системах дизайна. Главный цвет в Airbnb – Rausch, который назван в честь улицы, на которой расположена сама компания. Kazan служит вспомогательным цветом, а два серых оттенка используются в качестве фоновых.

Цвета бренда Airbnb

Цвета бренда Airbnb

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

Airbnb

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

Airbnb оттенеки цветов

Для сообщений об ошибках в Airbnb используется светло-красный, с натяжкой оттенок цвета rausch. Красный вместе с восклицательным знаком тут же привлекает взгляд и уведомляет о состоянии системы.

Airbnb login form

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

Начните без цветов, а затем медленно их добавляйте

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

Заключение

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

Я бы хотел знать, как вы работаете с цветами. Каков ваш процесс? Делитесь в комментариях.

Выбор правильного сочетания для вашего сайта / Habr

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

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

Итак, приступим к знакомству с магией цвета…

Цветовая теория: основные принципы. Умение сочетать цвета

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

Рассмотрим цветовой круг.

Немного истории: цветовой круг изобрел Исаак Ньютон. Обосновав теорию света и цветов в 1666г. Именно она легла в основу становления и развития современной оптики, малой и составной частью которой является web-дизайн. Ньютон при помощи трёхгранной стеклянной призмы разложил белый свет на семь цветов (в спектр), тем самым доказав его сложность (явление дисперсии), открыл хроматическую аберрацию.

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

Основные цвета
Есть три основных цвета: красный (# ff0000 в HTML или # F00 в CSS), желтый (# FFFF00 в HTML или # ff0 в CSS) и голубой (# 0000FF в HTML или # 00f в CSS). Нельзя их получить путем смешивания других цветов. Дополнительные цвета могут быть сформированы путем объединения этих трех цветов.

Составные цвета
Есть также три основных: оранжевый (# ff9900 в HTML или # F90 в CSS), зеленый (# 00FF00 в HTML или # 0f0 в CSS) и фиолетовый (# FF00FF в HTML или # f0f в CSS). Вы можете получить их путем смешивания красного и желтого(оранжевого), желтого и синего (зеленый) и синего и красного (фиолетовый).

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

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

Аналогичные цвета
Эти цвета расположены рядом друг с другом на цветовом круге. Они обычно смотрят очень хорошо вместе. Использование таких цветовых сочетаний вызывает чувство комфортa у посетителей Вашего сайта.

Цвета в разных культурах: символизм

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

  • Китай: цвет невесты, удачи, торжества
  • Индия: чистота
  • Южная Африка: траурные цвета
  • Восток: радость (в сочетании с белым)
  • Запад: возбуждение, любовь, страсть
  • США: рождество (с зеленым), день святого Валентина (с белым)
  • Иврит: жертва, грех
  • Япония: жизнь
  • Христианство: жертва, страсть, любовь
  • Фэн-шуй: Янь, огонь, удача, уважение, защита, живучесть, деньги, признание

Голубой

  • Европа: успокоение
  • Иран: траур, цвет неба и духовность
  • Китай: бессмертие
  • Индуизм: цвет Кришны
  • Иудаизм: святость
  • Христианство: цвет Христа
  • Католицизм: цвета одежды Марии
  • Ближний Восток: защита
  • В мире: цвет безопасности
  • Фэн-шуй: Инь, вода, спокойствие, любовь, исцеление, релаксация, доверие, приключения
  • Запад: печаль, депрессия

Желтый

  • Европа: счастье, надежда, радость, трусость в опасностях, слабость
  • Азия: цвет имперского
  • Египет: траур
  • Япония: мужество
  • Индия: торговцы
  • Буддизм: мудрость
  • Фэн-шуй: Янь, Земля, благоприятный, солнечные лучи, тепло, движение

Оранжевый

  • Европа: осень, урожай, творчество
  • Ирландия: протестанты (религиозные)
  • США: Хэллоуин (с черным), дешевые товары
  • Индуизм: шафран (персиковый оранжевый) священный цвет
  • Фэн-шуй: Янь, Земля, цели, усиливает концентрацию

Коричневый

  • Колумбия: препятствие продажам
  • Австралийские аборигены: цвета земли, торжественное охра
  • Фэн-шуй: Янь, Земля, промышленность

Зеленый

  • Япония: жизнь
  • Ислам: надежда, добродетель
  • Ирландия: символ всей страны
  • Европа / США: весна, новое рождение, День Святого Патрика, Рождество (с красным)
  • США: деньги
  • Индия: Ислам
  • Фэн-шуй: Инь, дерево, исцеление, здоровье, успокаивающее

Фиолетовый

  • Таиланд: траур (вдовы)
  • Католицизм: смерть, траур, распятие
  • Фэн-шуй: Инь, цвет физического и психического исцеления

Белый

  • Европа: брак, ангелы, врачи, больница, мир
  • Япония: траур, белая гвоздика символизирует смерть
  • Китай: траур, смерть,
  • Индия: несчастья
  • Восток: похороны
  • Фэн-шуй: Янь, металл, смерть, призраки, траур, равновесие, уверенность

Черный

  • Европа: траур, похороны, смерть, бунт, спокойствие
  • Таиланд: несчастье, зло
  • Иудаизм: несчастье, зло
  • Австралийские аборигены: цвет людей
  • Фэн-шуй: Инь, вода, деньги, успех в карьере, доход, стабильность, эмоциональная защита, сила

Значение цветов

Давайте посмотрим, какие чувства может вызвать каждый цвет и посмотрим на некоторые готовые решения.
Красный

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

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

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

Бодрость и творчество. Ассоциируется с дружелюбием, уверенностью, игривостью, мужеством, стойкостью.
Фиолетовый

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

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

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

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

Выражает нежность, романтичность, женственность, пассивность, привязанность, воспитание, слабость.
Черный

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

Белый связан с чистотой, простотой, свежестью, добротой, невинностью.
Заключение

Существуют некоторые полезные советы, которые помогут Вам в выборе правильной цветовой схемы для вашего сайта. Эти маленькие советы широко используют профессиональные web-дизайнеры.
  1. Если вы хотите, чтобы текстовое содержимое, было легко читаемым, выбирайте контрастные цвета.
  2. Оптимальное количество цветов. Не делайте из Вашего сайта цирк.
  3. Используйте необходимое количество цветов. Минимальное количество цветов, может способствовать серости Вашего сайта.
  4. Если вам нужно привлечь посетителя, применяйте интенсивные цвета.
  5. Вы можете найти дополнительные цветовые схемы приобщаясь чаще к природе.

Полезные ссылки по теме:

Источник: Colors in Web Design: Choosing a right combination for your Website

Сервисы подбора цвета для веб-дизайна

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

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

Я не буду рассказывать про теорию цвета (это слишком объемная информация), а просто опубликую здесь сервисы, которые есть у меня в закладках и которыми я пользуюсь .

Сервисы подбора цвета для веб-дизайна

colorscheme.ru

С этим инструментом я дружу уже много лет. Наиболее удобный инструмент для подбора цветов (на мой взгляд). У него много дополнительных возможностей. Например можно посмотреть пример светлой и темной страницы с выбранными цветами.

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

Сервисы подбора цвета для веб-дизайна

 

color.adobe.com

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

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

Сервисы подбора цвета для веб-дизайна

 

paletton.com

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

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

Сервисы подбора цвета для веб-дизайна

 

Следующие два сайта генерируют палитру из выбранного вами изображения.  It is magic 🙂

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

Color Palette Generator

На этом сайте необходимо указать ссылку на изображение.

degraeve

 

palettegenerator.com

На этот сайт нужно загрузить картинку со своего компьютера.

palettegenerator

 

palettable.io

Очень удобный инструмент для подбора цвета. Основан на принципе «Нравится — Не нравится».

palettable.io

 

flatcolors.net

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

http://flatcolors.net/palettes.php

 

materialpalette.com

Еще один модный тренд —  материал дизайн. Данный сайт помогает подобрать сочетания цветов для UI (user interface). Дополнительно на сайте есть большой набор иконок.

Сервисы подбора цвета для веб-дизайна

 

getuicolors.com

И напоследок снова user interface.  Здесь просто набор цветов для UI дизайна. Нажав на любой цвет, можно посмотреть как на определенном фоне будет читаться белый текст.

getuicolors

Вот такие инструменты есть у меня в закладках.

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

Нужен сайт с правильными цветами? Пишите, сделаем 🙂

Нашли ошибку? Выделите фрагмент текста и нажмите CTRL+ENTER

Секреты поиска цветовых палитр ‹ Виртуальная школа графического дизайна

Цвет! До чего богатый и таинственный язык, язык снов!

Поль Гоген

Привет всем читателям!

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

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

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

Правда, задача художника и дизайнера от этого легче не стала. Напротив, при таком многообразии цветов, выбор подходящей палитры для проекта порой превращается в муку. Например, в интернет-сообществе Colourlovers представлено почти 8 миллионов цветов и свыше 16 миллионов возможных шестнадцатеричных цветовых сочетаний!

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


1. Ищите вдохновение в окружающем мире

Фотографируйте красивые цветовые композиции, а потом просто использует их в качестве шаблонов при работе в Photoshop или Illustrator. Источником вдохновения может служить все что угодно: фрагменты природы, фрукты и ивощи, предметы, животные…

Итак, если у вас есть фотография, на которой запечатлена привлекательная цветовая композиция. Используйте её для создания палитры. Этот метод становится еще проще с такими инструментами, как Photocopa и Adobe Color. Просто загрузите фотографию в программу, изучите её цветовую схему, а потом соберите палитру.


2. Используйте цветовой круг

Когда художник Марк Шагал работал с цветовыми палитрами, он придерживался простого правила: «Цвета дружат со своими соседями и любят противоположности».

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


Синди Кинаш (Cindy Kinash), дизайнер из Cultivated Mind, считает, что при создании акварельных цветов тени следует наносить аналоговым цветом.

4
В этом проекте Синди Кинаш светло-синий соседствует с темно-синим и пурпурным, этот прием помогает добиться глубины.

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

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


3. Заимствуйте цвета из интерьера

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

И здесь может оказаться полезным правило, которым я часто пользуюсь. Оно применимо как в дизайне интерьера, так и в графическом дизайне: 60% доминирующего цвета, 30% вторичного цвета, 10% акцентного цвета. Если вам хочется ввести четвертый и больше цветов, сделайте это за счет вторичного цвета (или доминирующего). Только ни в коем случае не трогайте акцентный.

interior

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


4. Сохраняйте цвета, которые вам нравятся

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

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

colors colection

Ищите вдохновение повсюду: в современных дизайнах и исторических полотнах, в Интернете и на бумаге.

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

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

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

colors colection


5. Доверьтесь цветовому справочнику Pantone

Иногда цифрового круга просто не хватает. Тогда лучше отвернуться от экрана и прибегнуть к более традиционному способу — к палитрам Pantone.

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

colors colection

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


6. Ищите цвета в природе

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

Цветовые палитры

Отличные подборки природных цветовых коллекций вы можете найти на Design Seeds.


7. Используйте не более 3-4 цветов

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


8. Сопоставьте цвет с настроением своего проекта

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

Для начала определитесь с цветовой гаммой и лишь потом переходите к деталям. «Например: «Мне нужен романтичный пурпурный» или «Я хочу очаровательный розовый». 

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

Подбор цветов для дизайна

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


9. Используйте Pinterest для поиска тематических палитр

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

Вот как выглядят результаты запроса по «Летним цветовым палитрам» в Pinterest. «Фишка» здесь в том, что вы получаете вдохновение из самых разных сфер: интерьер, мода, графика и даже оформление праздников.

Подбор цветов для дизайна


10. Посещайте тематические сайты

Colourlovers – это творческое сообщество, где люди со всего мира создают и выкладывают цвета, палитры и шаблоны. Зарегистрируйтесь, и вы получите доступ к более чем 3,7 миллионам цветовых палитр.

Подбор цветов для дизайна


Теперь ваша очередь

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

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

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

Уважаемый/ая коллега!

Если вы хотите основательно изучить эту тему и получить практические навыки по созданию удачных цветовых сочетаний, приглашаю вас принять участие в моем онлайн-воркшопе «Колористика для дизайнера-самоучки», который стартует 20.09.2016.

Информация и регистрация здесь.


Выбери свой путь

Поделиться в соц. сетях:

Топ-8 эффектных бутиков флористики со всего света

«Гуапа», Эдуард Еремчук, Ростов-на-Дону

Флористические магазины (фото 1)
Фото: 
Инна Каблукова

Цветочный магазин «Гуапа» разместился в историческом здании в стиле конструктивизм 1928 года постройки по проекту Михаила Кондратьева. Перед дизайнером из Ростова-на-Дону Эдуардом Еремчуком стояла задача уйти от всех клишированных ассоциаций с типичным флористическим бутиком. Никаких деревянных полок, огромного количества ваз, обильного декора и приглушенного света.

Флористические магазины (фото 3)
Фото: 
Инна Каблукова

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

Флористические магазины (фото 5)
Фото: 
Инна Каблукова

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

Адрес: Ростов-на-Дону, ул. Суворова, 19.

Флористические магазины (фото 8.1)
Фото: 
Инна Каблукова
Флористические магазины (фото 8.2)
Фото: 
Инна Каблукова


«Атмосфера», Макс Лангуев, Санкт-Петербург

Флористические магазины (фото 10)
Фото: 
АЛЕКСЕЙ ЛОПОТОВ

«Идея была открыть салон цветов, где можно также купить предметы интерьера — вазы, светильники, необычную мебель, — рассказывает дизайнер Макс Лангуев. — Помещение искали очень долго, с учетом того, что в будущем оно будет многофункциональным. Например, чтобы можно было проводить мастер-классы. В итоге нашли помещение на Петроградке. Общая площадь — 90 кв. метров. Основное пространство отдано под магазин, рядом расположился офис».

Флористические магазины (фото 12)
Фото: 
АЛЕКСЕЙ ЛОПОТОВ

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

Подробнее о проекте магазина «Атмосфера» читайте в отдельном материале по ссылке.

Адрес: Санкт-Петербург, пр. Большой, 64.

Флористические магазины (фото 14)
Фото: 
АЛЕКСЕЙ ЛОПОТОВ


Maria Luisa Rocchi Flowers, Рим

Топ-7 эффектных бутиков флористики со всего света (фото 16)

Смысловым центром цветочного магазина по проекту Марты и Марко Бевилаква (Bevilacqua Architects) стала латунная глянцевая стена. Архитектурный элемент проходит через весь интерьер, соединяя два входа. Авторы проекта хотели размыть границы между внутренним пространством и городским ландшафтом. Серый гексагональный пол из базальта передает атмосферу улицы, приближая бутик к традиционной лавочке на городском рынке.


Blush, Окленд, Новая Зеландия

Флористические магазины (фото 1)

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

Адрес: 76 Gladstone Road, Parnell, Auckland, New Zealand.

Флористические магазины (фото 2.1)Флористические магазины (фото 2.2)


Nous, Дунгуань, Китай

Флористические магазины (фото 1)

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

Флористические магазины (фото 2.1)Флористические магазины (фото 22.2)

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

Адрес: Shijing Branch Rd, Dongguan, Guangdong, China.

Флористические магазины (фото 3)


Gigi Verdе, Хиого, Япония

Флористические магазины (фото 5)

Концептуальным центром пространства бутика Gigi Verde от студии Sides Core стала черная металлическая арка. Конструкция не только зонирует магазин, но и играет роль оригинальной витрины — флористы закрепляют на ней замысловатые композиции.

Флористические магазины (фото 28)

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

Адрес: Fujimoto Bldg. 1F 2-4-12 Nakayamatedori, Chuo-ku, Kobe-shi, Hyogo, Japan.

Флористические магазины (фото 7)


July’s Flower, Шанхай, Китай

Флористические магазины (фото 32)

Дизайнер Альберто Кайола (Alberto Caiola) разбивает стереотипы о пространстве цветочных магазинов в проекте July’s Flower. Интерьер включает широкий спектр различных материалов от матового металла до терраццо. Большие зеркала не только увеличивают пространство, но и подчеркивают представленные растения, которые бесконечно отражаются в глянцевых поверхностях.

Флористические магазины (фото 33)Флористические магазины (фото 10.1)Флористические магазины (фото 10.2)


Tableau, Копенгаген, Дания

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

Флористические магазины (фото 2)

Потолки и стены очистили от старой краски, оставив грубыми, бетонными и сохранив естественную неровную фактуру. Салон находится в здании ХIX века. Стойки для Таblеаu помогал проектировать скульптор Поуль Избак (Рoul Isbаk).

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

Адрес: Store Kongensgade 50, 1264 Copenhagen, Denmark.

Топ-7 эффектных бутиков флористики со всего света (фото 40)

Elle Decoration

Хёрст Шкулёв Паблишинг

Москва, ул. Шаболовка, дом 31б, 6-й подъезд (вход с Конного переулка)