Введение в теорию цвета: как задать настроение дизайну
Перевод статьи Харшиты Ароры An Intro to Color Theory: How to combine colors and set the mood of your designs. Автор — 16-летняя девушка из Индии, разработчик и дизайнер, создатель приложения для отслеживания цен на криптовалюты Crypto Price Tracker.
Мы различаем цвета из-за врожденной способности сетчатки глаза дифференцировать частоты световых волн. Определенные цвета и оттенки вызывают у людей разные ощущения. В этой статье я хочу кратко рассказать о цвете: его восприятии, способах подбирать сочетания и инструментах для работы с ним, которые помогут улучшить ваши проекты.
Цвета задают определенное настроение и помогают добиваться разных целей:
- Красный обычно ассоциируется с любовью, энергией, активностью и силой. В рекламе автомобилей всегда используют его оттенки, как и в роликах о том, что связано с отношениями.
- Желтый выбирают, чтобы передать радость, внимание, ассоциировать продукт с интеллектом. Это невероятно привлекательный цвет, но не лучший для фона приложения или основного интерфейса — он может утомлять. Тем не менее желтый — хороший вариант для иконок и иллюстраций.
- Зеленый ассоциируют со свежестью, безопасностью и развитием. Поэтому вы часто видите, как компании, которые связаны с природой и здоровым питанием, используют зеленый в фирменном стиле.
- Синий — стабильность, доверие, спокойствие. Неудивительно, что фейсбук и твиттер синего цвета.
Чтобы увидеть эту теорию в действии, попробуйте проанализировать рекламные объявления. Вы убедитесь, что реклама — продуманный инструмент убеждения и манипулирования. Попробуйте понять, как с помощью дизайна ее делают привлекательной и какие эмоции пытаются вызвать.
Выбор цветовой палитры в проекте — это не только о продвижении и привлечении внимания. Это о том, как продукт будет продаваться, к каким инстинктам и желаниям людей будет обращаться. Поэтому при разработке приложения или сайта сперва подумайте, какие эмоции хотите вызывать и какие идеи доносите пользователю. В соответствии с этим выберите цветовую палитру.
Прочитайте статью Ника Бабича «Создание эмоций в интерфейсе с помощью цвета», чтобы узнать больше.
Как сочетать цвета и создавать цветовые палитры
Надеюсь, теперь вы не будете использовать один цвет во всем приложении. Вам понадобятся гармоничные палитры. Чтобы их подобрать, художники и дизайнеры используют цветовой круг:
Вот несколько способов использовать цветовую теорию для проектов:
Аналоговые цвета (Analogous). Это соседние цвета на круге. Сочетайте их, чтобы создать простой и гармоничный дизайн:
Комплементарные цвета (Complementary). Для этой комбинации выберите два цвета, которые расположены напротив друг друга, как красный и зеленый:
Комплементарные цвета в дизайне чересчур привлекают внимание и не слишком подходят для основного интерфейса и бэкграунда в приложении. Но зато вы можете использовать их для иконок и иллюстраций.
Расщепленные цвета (Split) — выберите один цвет, а затем еще два, которые расположены напротив основного:
Такое сочетание не только привлекает внимание, но и приятно смотрится.
Триады (Triadic). Выберите цвет и нарисуйте в круге равносторонний треугольник. Получится палитра, которая придаст дизайну сбалансированности:
Триаду часто использовали в конце прошлого века, поэтому такое сочетание выглядит устаревшим. У многих сетей быстрого питания из 90-х логотип оформлен в триадной цветовой гамме.
Монохроматические, или однотонные цвета (Monochromatic). Монохромный дизайн красиво смотрится на экранах смартфонов. Чтобы создавать монохроматические тона, просто выберите один цвет и сочетайте его с оттенками белого или черного. Экспериментируйте с пропорциями, чтобы получить нужный контраст. Такие цветовые палитры отлично работают в современном диджитал-дизайне.
Варианты оттенков синего цвета
Советую посмотреть эти статьи:
Инструменты для работы с цветом
Мы рассмотрели немного теории о том, как сочетать цвета, чтобы они радовали глаз и работали на определенные ощущения.
Перейдем к практике. В интернете есть множество инструментов для поиска цветовых сочетаний или создания своих. Вот те, что я рекомендую использовать:
- Color Hunt. Сервис, куда профессиональные дизайнеры выкладывают любимые цветовые палитры. Они разделены на категории «Новые», «Тренды», «Популярные», «Рандомные» — среди множества вариантов вы подберете что-то для своего проекта.
- Flat UI Colors. На сайте — 20 цветовых палитр, созданных для эффективной работы на iOS. Разработчики Android используют палитры с сайта Material Palette.
- ColorZilla. Крутое расширение для браузера Chrome, которое определяет код любого цвета на сайте в формате HEX.
Пользуясь этими инструментами, понимая цветовую теорию, смешивая и сравнивая цвета, вы получите цветовую палитру, которая подходит вашему проекту — приложению или сайту. Это поможет сделать продукт более привлекательным и передать определенную идею или настроение пользователю.
Понравилась статья? Посмотрите другие инструменты для работы с цветом:
Pictaculous — сайт, который анализирует и определяет цвета PNG, JPG и GIF
BrandColors — фирменные цвета знаменитых брендов
Перевод статьи Харшиты Ароры An Intro to Color Theory: How to combine colors and set the mood of your designs. Автор — 16-летняя девушка из Индии, разработчик и дизайнер, создатель приложения для отслеживания цен на криптовалюты Crypto Price Tracker.
Мы различаем цвета из-за врожденной способности сетчатки глаза дифференцировать частоты световых волн. Определенные цвета и оттенки вызывают у людей разные ощущения. В этой статье я хочу кратко рассказать о цвете: его восприятии, способах подбирать сочетания и инструментах для работы с ним, которые помогут улучшить ваши проекты.
Цвета задают определенное настроение и помогают добиваться разных целей:
- Красный обычно ассоциируется с любовью, энергией, активностью и силой. В рекламе автомобилей всегда используют его оттенки, как и в роликах о том, что связано с отношениями.
- Желтый выбирают, чтобы передать радость, внимание, ассоциировать продукт с интеллектом. Это невероятно привлекательный цвет, но не лучший для фона приложения или основного интерфейса — он может утомлять. Тем не менее желтый — хороший вариант для иконок и иллюстраций.
- Зеленый ассоциируют со свежестью, безопасностью и развитием. Поэтому вы часто видите, как компании, которые связаны с природой и здоровым питанием, используют зеленый в фирменном стиле.
- Синий — стабильность, доверие, спокойствие. Неудивительно, что фейсбук и твиттер синего цвета.
Чтобы увидеть эту теорию в действии, попробуйте проанализировать рекламные объявления. Вы убедитесь, что реклама — продуманный инструмент убеждения и манипулирования. Попробуйте понять, как с помощью дизайна ее делают привлекательной и какие эмоции пытаются вызвать.
Выбор цветовой палитры в проекте — это не только о продвижении и привлечении внимания. Это о том, как продукт будет продаваться, к каким инстинктам и желаниям людей будет обращаться. Поэтому при разработке приложения или сайта сперва подумайте, какие эмоции хотите вызывать и какие идеи доносите пользователю. В соответствии с этим выберите цветовую палитру.
Прочитайте статью Ника Бабича «Создание эмоций в интерфейсе с помощью цвета», чтобы узнать больше.
Как сочетать цвета и создавать цветовые палитры
Надеюсь, теперь вы не будете использовать один цвет во всем приложении. Вам понадобятся гармоничные палитры. Чтобы их подобрать, художники и дизайнеры используют цветовой круг:
Вот несколько способов использовать цветовую теорию для проектов:
Аналоговые цвета (Analogous). Это соседние цвета на круге. Сочетайте их, чтобы создать простой и гармоничный дизайн:
Комплементарные цвета (Complementary). Для этой комбинации выберите два цвета, которые расположены напротив друг друга, как красный и зеленый:
Комплементарные цвета в дизайне чересчур привлекают внимание и не слишком подходят для основного интерфейса и бэкграунда в приложении. Но зато вы можете использовать их для иконок и иллюстраций.
Расщепленные цвета (Split) — выберите один цвет, а затем еще два, которые расположены напротив основного:
Такое сочетание не только привлекает внимание, но и приятно смотрится.
Триады (Triadic). Выберите цвет и нарисуйте в круге равносторонний треугольник. Получится палитра, которая придаст дизайну сбалансированности:
Триаду часто использовали в конце прошлого века, поэтому такое сочетание выглядит устаревшим. У многих сетей быстрого питания из 90-х логотип оформлен в триадной цветовой гамме.
Монохроматические, или однотонные цвета (Monochromatic). Монохромный дизайн красиво смотрится на экранах смартфонов. Чтобы создавать монохроматические тона, просто выберите один цвет и сочетайте его с оттенками белого или черного. Экспериментируйте с пропорциями, чтобы получить нужный контраст. Такие цветовые палитры отлично работают в современном диджитал-дизайне.
Варианты оттенков синего цвета
Советую посмотреть эти статьи:
Инструменты для работы с цветом
Мы рассмотрели немного теории о том, как сочетать цвета, чтобы они радовали глаз и работали на определенные ощущения.
Перейдем к практике. В интернете есть множество инструментов для поиска цветовых сочетаний или создания своих. Вот те, что я рекомендую использовать:
- Color Hunt. Сервис, куда профессиональные дизайнеры выкладывают любимые цветовые палитры. Они разделены на категории «Новые», «Тренды», «Популярные», «Рандомные» — среди множества вариантов вы подберете что-то для своего проекта.
- Flat UI Colors. На сайте — 20 цветовых палитр, созданных для эффективной работы на iOS. Разработчики Android используют палитры с сайта Material Palette.
- ColorZilla. Крутое расширение для браузера Chrome, которое определяет код любого цвета на сайте в формате HEX.
Пользуясь этими инструментами, понимая цветовую теорию, смешивая и сравнивая цвета, вы получите цветовую палитру, которая подходит вашему проекту — приложению или сайту. Это поможет сделать продукт более привлекательным и передать определенную идею или настроение пользователю.
Понравилась статья? Посмотрите другие инструменты для работы с цветом:
Pictaculous — сайт, который анализирует и определяет цвета PNG, JPG и GIF
BrandColors — фирменные цвета знаменитых брендов
Источник
Эмоциональный фон
Психологи говорят, что каждый человек, независимо от культурного бэкграунда, испытывает пять основных эмоций: радость, грусть, гнев, страх и отвращение. Остальные чувства — оттенки тех базовых, но разной степени интенсивности.
Жанровые рамки в иллюстрации формируются этими пятью базовыми эмоциями. Даже беглого взгляда хватит, чтобы понять: вот это изображение — страшное, а это — радостное. Мы посмотрели, какие приемы используют в иллюстрации, чтобы создать нужный вайб, — и делимся некоторыми из них.
Радость
Радость — единственная безусловно положительная эмоция среди базовых. Ее диапазон огромный: от покоя — до экстаза. В иллюстрации она проявляется тоже по-разному: от пасторальных изображений — до эмоционально заряженных, почти аффективных. Но универсальные приемы, которыми можно передать радостное настроение, все же есть.
Симметрия. Человеческий мозг получает удовольствие от гармоничных и довольно симметричных изображений. В процессе эволюции именно так он научился определять самое ценное: потенциального партнера или добычу. Лица и тела людей и животных симметричны. И если видишь что-то естественно симметричное, тревога снижается — значит, это «что-то», скорее всего, безопасное.
Насыщенность. Эстетика детской кондитерской с вырвиглазными пончиками и яркой карамелью — конфетти, цветы, искренние принты — выглядит беззаботно. И, конечно, радостно. Но с интенсивностью лучше не перебарщивать, чтобы изображение не выглядело агрессивно.
Плоские, сочные пятна. Этот ключ к радостному изображению открыли в начале ХХ века фовисты. Например, цвет у Матисса не должен совпадать с цветом реальных объектов — за ним закрепилась одна простая задача: передавать настроение. Плоские пятна чистого цвета справлялись с этой задачей лучше всего.
На этих трех приемах миланский иллюстратор Олимпия Загноли построила свой авторский стиль. Она рисует обложки для The New York Times и The New Yorker, оформляет витрины для Uniqlo и разрабатывает принты для коллекции Prada. Good vibes only — одна из ее последних работ для The New York Times.
Грусть
За грустным настроением закрепился целый набор визуальных приемов: синий цвет, вытянутые фигуры, дождь или тусклый свет в темной комнате. Но диапазон таких переживаний огромный: от скуки и меланхолии — до горя и отчаяния. И чтобы передать все эти состояния, одного дождя маловато.
Разлом. Грусть, отчаяние, разочарование — это разрушительные состояния. И чтобы визуализировать внутренний надлом, часто используют визуальный сдвиг в композиции. Разорванные линии, расколотые фигуры, деформированные силуэты — все это работает на ощущение, что «что-то пошло не так».
Иллюстрации к стихотворению Agony: A Poem of Genocide военного корреспондента Марка Хабанда художница Анна Стейнберг собирала буквально из кусочков. Она прокрашивала лист бумаги, резала его на кусочки, складывала из них изображения, а потом все это сканировала. Эта ее работа попала в лонглист премии World Illustration Awards 2021.
Трагическая метафора. Необъяснимая тоска, глубокое отчаяние или болезненная грусть не обязательно должны считываться с мимики персонажа. Эти чувства сами могут стать героями. Персонифицировать эмоцию, сделать ее большой, неподъемной, давящей, даже жуткой — и вписать в сюжет.
Иллюстратор Хенн Ким говорит, что ее личная грусть стала артом. Тревожный подростковый возраст Ким переживала так сложно, что перестала говорить на два года — и тогда начала рисовать. Она создает сюрреалистичные иллюстрации о сотнях оттенков грусти, используя визуальные метафоры. Любовь как болезнь, отношения как тяжесть и взаимные раны Ким рисует буквально.
Не только ч/б. Например, чистый желтый цвет воспринимается как радостный и искренний, а грязно- или зеленовато-желтый — как тревожный и болезненный.
В начале ХХ века немецкие экспрессионисты «открыли» электрический желтый: Берлин перед Первой мировой был самым освещенным городом Европы — и даже целый его квартал назвали в честь электрического гиганта Siemens. Но освещенность не всегда транслировала позитивные эмоции. На картинах Кирхнера и Нольде «берлинский электрический желтый» прочно закрепился за ощущением безысходности и предвоенной тревоги.
Художница Инь Синь Хэ использовала экспрессионистский желтый для иллюстраций к книге Германа Гессе «Степной волк». Она ставила перед собой цель передать не исторические события, а состояния главного героя — наполненные не светом, а болью и тревогой.
Страх
На поле страха можно играть в открытую: насилие, кровь, кишки. Но к таким страшилкам у зрителя иногда формируется хоррор-устойчивость, или хоррор-слепота — и по-настоящему он не испугается. Даже если в целом картинка выглядит пасторально, есть способы добавить в нее саспенса и ощущение ужаса.
Взгляд снизу вверх. Высокая линия горизонта создает у зрителя ощущение, что он прячется — залег в овраг, затаился в засаде. А откуда-то сверху в любой момент может вылезти что-то ужасное. Самого кошмара на картинке может и не быть: воображение само «достроит» то, чего зритель боится больше всего.
Шведский иллюстратор и автор Саймон Столенхаг создает ретрофутуристические миры, которые пугают и восхищают. Он автор четырех книг. По одной из них на Amazon Video в 2020 вышел сериал «Рассказы из петли». В каждой истории Столенхага есть изображение, в котором от внешне спокойной сцены веет таким ужасом, что пробирает до костей. И все из-за точки обзора.
Когнитивный диссонанс. Есть набор характеристик, по которым человек опознает предмет или существо не задумываясь. Но когда в привычной картине мира появляется баг, мозг напрягается — чувствует опасность. Например, мы привыкли представлять восстание роботов как атаку сверхумных, сверхмощных машин. И если увидим технологичных роботов, наделенных чертами полудиких древних людей, уже не будем знать, чего от них ожидать.
В книге Столенхага «Вещи из потопа» — целая галерея образов, построенных на этом пугающем диссонансе. Потасканные роботы в диких лесах и на необжитых берегах ведут себя, как бродяги и древние шаманы: одеваются в шкуры и перья, носят ритуальные маски и копья.
Техно-кьяроскуро. В XVI веке термином «кьяроскуро» называли один из видов гравюры на дереве: печать в несколько оттисков позволяла создавать объем на контрасте света и тени. Потом так стали называть живопись Караваджо и Рембрандта, тоже построенную на резких светотеневых контрастах. В век технологий у кьяроскуро — новая реинкарнация. Теперь в игре света и тени участвуют гаджеты: голубоватый свет смартфона трансформирует лица в маски. И выглядит это зловеще.
Художник Даниэль Зендер специализируется на редакционной иллюстрации: работает с The New Yorker, The New York Times и Business Week. И лучше всего ему удаются изображения на тему опасностей и проблем современного мира: от диджитализации и хакерских атак — до полицейского произвола и рабства.
Источник