Пт, 5/04/19 – 9:26 | 3 комментария

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

Читать статью »
Дизайн

Секреты веб-дизайна, примеры стильных сайтов

Тренды / ТОП

Топ лучших идей, новые тенденции и тренды WEB’а

Маркетинг

Статьи о маркетинге сайтов, примеры эффективности

Свой сайт

Как создать, оформить, сделать сайт лучше

Шаблоны сайтов

Обзоры шаблонов: лучшие темы для сайта

Главная » Тренды / ТОП

Цвета в Web дизайне: колор-тенденции (яркие тона)

16 августа 2015 Один комментарий

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

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

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

яркие цвета для сайта

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

Модные интернет-тенденции и современные технологии расширили цветовое пространство, открывая дорогу проявлениям креативного мышления. Отсюда – такое количество цветовых дизайн-вариаций: от полностраничных сайтов с пурпурным бэкграундом, до Kelly Green (ярко-зеленых) надписей на Web-странице в черно-белых тонах.

Далее рассматриваются детали техник, касаемых Flat дизайна и яркой колористики современного сайта.

Ориентируясь на Fashion тренды & дизайны интерьеров

Чтобы не открывать Америку заново, можно посмотреть на всю красоту мира вокруг нас (в цвете) и это окажет наиболее сильное художественное влияние при выборе цветов в WEB. Фактически, можно взять на вооружение очень много интересного из мира интерьеров и дизайна фасонов, оказывающих свое воздействие на популярные колор-тренды. Мода и тенденции способны бесконечно преображаться, распространяться по всем направлениям и проявляться во всех аспектах дизайна.

Сегодня на пике популярности:

  • Неоновые тона
  • Колоритные яркие принты и пр. броские элементы
  • Чёрно-белые решения с добавлением акцентного цвета

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

цветовые тенденции неоновые оттенки в веб-дизайне

Неоновые оттенки (так называемый стиль «вырви глаз»)

Цветовые тенденции и яркие контрасты в дизайне fashion сайтов

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

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

Цветовые тенденции реального мира и тренды в цифровых проектах необъяснимым образом пересекаются по самым различным причинам

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

Плоский дизайн и цветовые тенденции

Тенденцию к ярким UI дизайнам развивают экраны высокого разрешения и популяризация плоского стиля.

Читайте также:  57 самых красивых плоских дизайнов сайтов

Флэт расширил использование цвета, а лежащие в его основе технологии способствовали применению глубоких (насыщенных) оттенков.

Upgrade me – классика плоского дизайна с использованием длинных теней и сочных цветов.

Яркие и сочные плоские цвета в веб-дизайне

Wonderfully wild использует «более монохромные» цвета – ближе к ретро-стилю.

цветовое решение для плоского сайта

Бизнес сайт baesman.com – пример высоких контрастов.

пример бизнес сайта: плоские цвета с высоким контрастом

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

Яркий и привлекательный веб-дизайн с использованием плоских цветов

Track Maven – быстро развивающийся стартап вдохновляет клиентов хорошо подобранными цветами и эффективностью своего сайта. Его компактность ориентирует пользователя на легкое ознакомление. Чистый дизайн с отсутствием чего либо «спрятанного» позволяет быстро составить полную картину о компании.

Вкладки с контурными иконками, интерактивные подсказки без авто-скрытия, активные точки (hotspot) и контрастные кнопки с эффектами затемнения / заливки

Learn Biofuels – образовательный веб-ресурс с плоским дизайном. Нескучная типографика из шрифтов разных категорий: брусковый с массивными засечками и рубленые, пропорциональные и нет, различающиеся весом (толщиной линий) и контрастностью.

Читайте также:  15 тенденций типографики 2020-х: сайты и трендовые идеи

Яркий flat сайт с контрастными шрифтами

В основе цветовой схемы – хорошая сочетаемость цвета (зеленый) с остальными, что особенно важно:

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

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

Современные экраны (от монитора до айфона) способны передать любые колориты дизайнерских решений и это дает возможность выделиться из толпы

Например, креативные проекты бразильских 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 нужно рассматривать как нечто большее, чем эстетику – учитывая значения и культурные ассоциации, с ними связанные

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

Психология цвета и цветовые ассоциации веб-дизайна

Читайте также:  Психология влияния цвета на конверсию сайта

Вот некоторые из наиболее распространенных ассоциаций, возникающих в результате психологического влияния цветов сайта на его пользователей:

  • Розовый: романтика, юность, уверенность, чувствительность
  • Красный: созидание, любовь, лидерство, страсть, опасность, настойчивость
  • Желтый: удовольствие, радость, оптимизм, предостережение (желтый свет, желтая карточка). По свойству – контрастирующий цвет
  • Оранжевый: сила и энергия, теплота, коммуникабельность, креативность, энтузиазм, честолюбие. Выражает завышенную самооценку, по свойству – бодрящий цвет
  • Зеленый: натуральность, рост, стабильность, щедрость, удача (материальная выгода). Чисто-зеленый выражает требовательность, по свойству – освежающий цвет
  • Синий: гармония, безмятежность, доверие, честь, надежность (цвет бизнеса)
  • Фиолетовый: благосостояние, власть, превосходство, спокойствие, духовность, творчество

Что дальше?

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

веб-дизайн тренд яркие цвета сайтов

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

ЯРКИЕ ЦВЕТА — ПРИМЕРЫ ДАЛЬНЕЙШЕГО РАЗВИТИЯ ТРЕНДА:

Сайт Impossible Bureau – попытка продемонстрировать дальнейшее развитие тенденции к использованию броских цветовых оттенков.

Структура сайта позволяет сочетать темный, минималистичный стиль с возможностью (по состоянию hover) менять оттенки цветов: от ярко-фиолетовых до розовых и оранжевых градиентов

VO2 – новый сайт с оригинальным нетипичным дизайном.

Современные тенденции веб дизайна - яркий сайт международной компании

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

Symodd – яркие градиенты на цветном фоне во весь экран.

Яркие цвета в веб дизайне - модный сайт французского креативного агентства

Более утонченные градиенты из двух не сильно отличающихся друг от друга оттенков, меньше утомляют глаза

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

Яркие цвета уже утверждают себя в качестве доминантной основы визуального развития WEB:

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

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

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

Читайте также:  Психология влияния цвета на конверсию сайта