Использование приглушённой цветовой палитры в веб-дизайне

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

Приглушённая цветовая палитра - отличный способ придать интерес вашему веб-сайту без ущерба для его простоты

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

Содержание статьи:

• Что такое теория цвета?
• Что такое приглушённые цвета?
• Зачем использовать приглушённые цвета?
• Приглушённая цветовая палитра вдохновляет
• Использование приглушённых цветов в дизайне пользовательского интерфейса
• Типы цветовых схем
• Подведение итогов

Что такое теория цвета?

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

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

Цветовой круг

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

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

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

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

Определения терминов

Понимание следующих терминов может помочь вам различать различные аспекты теории цвета:

• оттенок (hue)— оттенок является синонимом того, что люди обычно называют цветом. Помните, что основные оттенки или то, что мы называем основными цветами, не содержат в себе других цветов. Другими словами, оттенки - это самые простые цвета.
• ценность (value)— относительная светлота или темнота цвета является его ценностью. Следующие термины описывают цвета, которые имеют разные значения, и способы их смешивания:
  
  • затенять (shade) — Вы получаете оттенок другого цвета, когда добавляете черный к любому оттенку. Различные оттенки цвета относятся к количеству черного, которое вы добавили в смесь. Любой заданный цвет может иметь диапазон оттенков.
  • осветлять (tint) — это противоположность затенению. Вы можете получить множество оттенков, добавив к цвету белый. Любой заданный цвет может иметь ряд оттенков.
  • тон (tone) — тон сочетает цвет как с черным, так и с белым. Этот термин чаще применяется к живописи, а не к веб-дизайну.
• насыщенность (saturation) — это относительная чистота и интенсивность цвета. Чтобы увеличить насыщенность оттенка, добавьте к нему совсем немного серого и никакого белого. Чтобы уменьшить насыщенность, добавьте к цвету черный, серый и белый.

Что такое приглушённые цвета?

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

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

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

Зачем использовать приглушённые цвета?

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

Приглушенные цвета против ярких

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

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

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

Приглушённая цветовая палитра вдохновляет

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

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

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

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

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

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

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

Использование приглушённых цветов в дизайне пользовательского интерфейса

Некоторые бренды освоили использование приглушённых цветовых палитр для демонстрации своих продуктов.

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

Thinx

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

Koju Koju

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

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

Honest Honest

Honest Company предоставляет хороший пример использования цветов с одной стороны цветового круга - в данном случае теплых цветов - при одновременном внесении небольшого контраста, чтобы придать ему более игривый вид. Как показано на рисунке 9, цветовая палитра веб-сайта нейтральная и приглушенная, поэтому сайт выглядит чистым и аккуратным, что идеально подходит для бренда wellness.

Zara Home Zara Home

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

Типы цветовых схем

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

Монохроматические (Monochromatic)

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

Аналогичные (Analogous)

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

Добавочные (Complementary)

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

Разделённо-взаимодополняющие (Split-Complementary)

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

Триадные (Triadic)

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

Тетрадные (Tetradic)

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

Подведение итогов

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