Цвета в Web дизайне: колор-тенденции (яркие тона)
Текущее десятилетие принесло в мир Web-дизайна моду на яркие цвета. В период становления тренда, дизайнеры сайтов этого периода, определенно отдают предпочтение сочным цветам. Использование красного, оранжевого, розового цветов или ярко-зеленого, голубого и пурпурного, является ключевым отличием многих современных сайтов, самых различных тематик.
Сейчас дизайнерские проекты совмещают сразу по несколько ярких цветов – что было практически табу в веб-дизайне прежде
При подборе нужного цвета для бизнес-дизайнов, стало даже возможным отходить от диктуемой компанией брендколористики.
Результат – мощная радуга ярких, энергичных и веселых цветов для сайта. Их правильное использование, добавляет дизайну эмоций и визуально подчеркивает на экранах тексты и графику. Такие, смелые цветовые схемы не для каждого случая, но тренд многогранен и возможность извлечь максимум выгод от использования сочных цветов, есть у каждого дизайнера.
Модные интернет-тенденции и современные технологии расширили цветовое пространство, открывая дорогу проявлениям креативного мышления. Отсюда – такое количество цветовых дизайн-вариаций: от полностраничных сайтов с пурпурным бэкграундом, до Kelly Green (ярко-зеленых) надписей на Web-странице в черно-белых тонах.
Далее рассматриваются детали техник, касаемых Flat дизайна и яркой колористики современного сайта.
Ориентируясь на Fashion тренды & дизайны интерьеров
Чтобы не открывать Америку заново, можно посмотреть на всю красоту мира вокруг нас (в цвете) и это окажет наиболее сильное художественное влияние при выборе цветов в WEB. Фактически, можно взять на вооружение очень много интересного из мира интерьеров и дизайна фасонов, оказывающих свое воздействие на популярные колор-тренды. Мода и тенденции способны бесконечно преображаться, распространяться по всем направлениям и проявляться во всех аспектах дизайна.
Сегодня на пике популярности:
- Неоновые тона
- Колоритные яркие принты и пр. броские элементы
- Чёрно-белые решения с добавлением акцентного цвета
Если вы следите за тем, что становится новым словом в мировом дизайне, то наверно имеете ясные представления о происходящем вокруг, видя как ведущие fashion-журналы демонстрируют новые цвета буквально во всем.
Неоновые оттенки (так называемый стиль «вырви глаз»)
От юбок до сумок, от рубашек-поло до (даже!) наращивания волос, со всевозможными вариантами сочетаний контрастных по цвету частей гардероба (с парой ярких оттенков) – все это может отлично гармонировать друг с другом и вашем видом. Такие тренды заваевывают практически всеобщее признание.
Когда дело касается интерьера, то смелые шаги в выборе цветов сегодня также популярны. Применительно к web-дизайну, должно быть общей целью: установить связь с пользователем и добиваться еще больших возможностей в координации эмоциональной связи с ним.
Цветовые тенденции реального мира и тренды в цифровых проектах необъяснимым образом пересекаются по самым различным причинам
Пока мировой тренд сохраняет популярность, он послужит и дизайнерам сайтов.
Плоский дизайн и цветовые тенденции
Тенденцию к ярким UI дизайнам развивают экраны высокого разрешения и популяризация плоского стиля.
Флэт расширил использование цвета, а лежащие в его основе технологии способствовали применению глубоких (насыщенных) оттенков.
Upgrade me – классика плоского дизайна с использованием длинных теней и сочных цветов.
Wonderfully wild использует «более монохромные» цвета – ближе к ретро-стилю.
Бизнес сайт baesman.com – пример высоких контрастов.
Начиная с прелоадера загрузки сайт веб-агентства incore.com использует легкие эффекты и характерные для flat-стиля призрачные кнопки, а также привлекательную гамму плоских цветов.
Track Maven – быстро развивающийся стартап вдохновляет клиентов хорошо подобранными цветами и эффективностью своего сайта. Его компактность ориентирует пользователя на легкое ознакомление. Чистый дизайн с отсутствием чего либо «спрятанного» позволяет быстро составить полную картину о компании.
Вкладки с контурными иконками, интерактивные подсказки без авто-скрытия, активные точки (hotspot) и контрастные кнопки с эффектами затемнения / заливки
Learn Biofuels – образовательный веб-ресурс с плоским дизайном. Нескучная типографика из шрифтов разных категорий: брусковый с массивными засечками и рубленые, пропорциональные и нет, различающиеся весом (толщиной линий) и контрастностью.
В основе цветовой схемы – хорошая сочетаемость цвета (зеленый) с остальными, что особенно важно:
- При многоцветной гамме, включающей в себя по несколько тонов одновременно
- С добавлением ярких иллюстраций
- При цветокоррекции, ретуши фотографий или изменении оттенка наложением текстуры
Количеством пикселей можно создавать продвинутую цифровую радугу, а в угоду созревающей эстетики пользователя поменять и саму конструкцию сайта.
Современные экраны (от монитора до айфона) способны передать любые колориты дизайнерских решений и это дает возможность выделиться из толпы
Например, креативные проекты бразильских web-дизайнеров отличаются изобилием броских цветов — это просто особенность латино-американского стиля
Weecom.com.br ярко демонстрирует не менее интересные и красочные работы – пример 1, пример 2, пример 3.
Выведенные математически 216 безопасных цветов корректно передаются на различных устройствах. Это дает уверенность: на экранах пользователей творчество дизайнера не отличается от того, что он намеревался выразить.
Сегодня концепция «web safe палитры» мертва и согласно W3Schools исследованиям – у 98% пользователей, устройства способны передавать миллионы цветов
Примерно в одно время:
- HD Retina с другими дисплеями высокого разрешения (High Definition) завоевывают популярность
- Крепнет и развивается направление плоского дизайна
Flat применим не в каждом контексте, но есть тенденция – повышать эмоциональность дизайна цветовыми оттенками
В процессе эволюции, страсти по плоским цветам несколько поутихли – по мере их адаптации к разнообразию проектов. Сейчас палитры ярких дизайнов обычно содержат от одного до трех насыщенных оттенков, вместо расширенных палитр, ассоциирующихся с Flat дизайном. Либо броские цвета включают для создания цветового акцента, контрастного элемента или в качестве катализатора применения технологии.
Монотонные цветовые схемы
Одним из излюбленных дизайнерами способов использования сочного цвета является монотонная цветовая палитра: используется один цвет с добавлением тонов и оттенков, что делает цельный визуальный дизайн более гибким.
Например, можно добиться баланса дизайна при помощи тональностей или придать ему изысканный и неординарный вид. Мода на яркие однотонные сайты позволила веб-дизайнерам применять броские и возможно нестандартные цвета, не пытаясь даже согласовывать их с другими.
Line Quality – лимонно-зеленый цвет (Lime Green) не так-то просто сочетать с другими. Но благодаря иконке Muppet (в той же тональности) получен чрезвычайно интересный визуальный эффект.
С минимумом цветовых контрастов белоснежную надпись, лого, навигацию и призрачную CTA-кнопку – найти не составит труда
Монотонные цветовые схемы, это наиболее легкий и эффективный способ использования множества цветов, без риска попасть в ловушку дизайн-принципов или создать хаотично выглядящий дизайн (обычная проблема колоритных многоцветных веб-интерфейсов)
Компании смогут использовать на сайте цвета, которые не будут зависеть от традиционного брендинга, при этом не беспокоясь относительно их сочетаемости или проблем с читабельностью.
Цвета с высоким контрастом
Яркие насыщенные цвета, это также основа общей тенденции к минималистичному дизайну. Контраст цветов, максимально акцентирующий к себе внимание, выполняет роль «индикатора» страниц и различных секций сайта. Необычайно важен там, где иным способом такой эффект достигнут быть не может.
Высокий контраст может задаваться любым цветом, достаточно отличающимся от бэкграунда. В минималистичном контексте современного сайта, вероятнее всего встретить любую форму цвета на черном, белом, сером фоне canvas’а. Резкие отличия (контрастность создается не только цветом) становятся визуальным центром в дизайне. Фактическое указание куда смотреть и что делать дальше актуально для целевых страниц. Опять же, прием хорошо работает «на грани» – когда в любом ином случае, дизайн выглядел бы чересчур упрощенным.
В дизайне Hega цвет использован только для кнопок сайта.
Контрастность черного изображения и белого фона способствует правильному восприятию псевдо-кнопки «Case Studies», четко доводя ее призыв до сознания клиента, без какого-либо побуждения к клику
Минималистичная структура поможет направить пользовательское внимание куда нужно
More Sleep великолепно сочетает цвет и темные бэкграунды.
За красивыми (легко читающимися) кораллово-красными заголовками следуют связанные с ними изображения. Красная линия по низу первого экрана создает визуальный баланс, что важно для этого цвета, отождествляющего страсть и даже насилие
Смелые цветосочетания работают хорошо, когда являются абсолютной противоположностью аскетизму минималистичного сайта. Но и тут, подбор цвета может оказаться непростой задачей: если вы перестараетесь, ваши усилия отрицательно скажутся в дизайне на эмоциональном уровне.
Общие цветовые ассоциации
Хорошо подобранные цвета признак того, что владелец сайта определился, кем он хочет быть в своей нише и знает, чем интересен целевой аудитории.
Цветa нужно рассматривать как нечто большее, чем эстетику – учитывая значения и культурные ассоциации, с ними связанные
Подбор каждого цвета должен стать частью целостной стратегии, учитывающей его эмоциональное восприятие. Однако, до сих пор, общее мнение относительно применимости цветовой символики не сформировано окончательным образом.
Вот некоторые из наиболее распространенных ассоциаций, возникающих в результате психологического влияния цветов сайта на его пользователей:
- Розовый: романтика, юность, уверенность, чувствительность
- Красный: созидание, любовь, лидерство, страсть, опасность, настойчивость
- Желтый: удовольствие, радость, оптимизм, предостережение (желтый свет, желтая карточка). По свойству – контрастирующий цвет
- Оранжевый: сила и энергия, теплота, коммуникабельность, креативность, энтузиазм, честолюбие. Выражает завышенную самооценку, по свойству – бодрящий цвет
- Зеленый: натуральность, рост, стабильность, щедрость, удача (материальная выгода). Чисто-зеленый выражает требовательность, по свойству – освежающий цвет
- Синий: гармония, безмятежность, доверие, честь, надежность (цвет бизнеса)
- Фиолетовый: благосостояние, власть, превосходство, спокойствие, духовность, творчество
Что дальше?
Когда идеи веб-трендов начнут принимать очертания менее плоского дизайна, цвета последуют за ними.
- Яркие броские цвета задержатся в дизайне немного дольше, опираясь на свои собственные достоинства в большей степени, чем на поддержку иных трендов
- Дизайнеры вернутся к применению техник, добрая практика которых вышла из моды (например градиенты) и сделают их опять привлекательными и популярными, не без помощи использования ярких цветов
ЯРКИЕ ЦВЕТА — ПРИМЕРЫ ДАЛЬНЕЙШЕГО РАЗВИТИЯ ТРЕНДА:
Сайт Impossible Bureau – попытка продемонстрировать дальнейшее развитие тенденции к использованию броских цветовых оттенков.
Структура сайта позволяет сочетать темный, минималистичный стиль с возможностью (по состоянию hover) менять оттенки цветов: от ярко-фиолетовых до розовых и оранжевых градиентов
VO2 – новый сайт с оригинальным нетипичным дизайном.
Яркие геометричные элементы бэкграунда с легким градиентом гарантировано вызовут визуальный интерес к изображению на переднем плане и к web-странице в целом. Цветовая индикация заголовков, секций на странице и постов раздела LAB — элемент стиля и практически полезное решение.
Symodd – яркие градиенты на цветном фоне во весь экран.
Более утонченные градиенты из двух не сильно отличающихся друг от друга оттенков, меньше утомляют глаза
Поскольку новизна является движущей силой веб-дизайна, в будущем нужно ожидать еще больше дизайнерских экспериментов. Возможно мы увидим применение ярких градиентов в пользовательском интерфейсе, в паттернах бэкграунда и т.д.
Яркие цвета уже утверждают себя в качестве доминантной основы визуального развития WEB:
От сочетаний крупной типографики с броскими цветами, можно получать настоящее визуальное удовольствие. Совместная работа этих двух веб-элементов усиливает эстетическое впечатление
Подобного эффекта не добиться иллюстрациями, изображениями и прочей графикой.
Технологии использования ярких цветов станут долгосрочной стратегией для многих стилей и направлений веб-дизайна. Ведь помимо привлечения внимания, сочные оттенки способны добавить нотку особого (современного) вкуса, почти в любой по стилю дизайн.
В отношении WEB белый — самый яркий цвет, черный по отношению к нему — наиболее контрастный, и красный обеспечивает акцент и отлично сочетается с обоими.