Ср, 3/05/17 – 1:15 | One Comment

Чтобы преуспеть на рынке web-дизайна и разработки или в качестве фрилансера, нужно иметь впечатляющее портфолио. Создатели сайта-портфолио сталкиваются с задачами более сложными чем …

Читать статью »
CSS верстка

О красивом оформлении страниц с css3 и html5

Дизайн

О создании веб-дизайна с примерами сайтов

Wordpress

Самое современное для сайта на Wordpress

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

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

Свой сайт

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

Главная » Web & Тренды, Мануалы

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

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

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

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

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

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

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

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

В этой статье мы обсудим детали техник, касаемых Flat дизайна и яркой колористики современного сайта.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сайт upgrade me – классика веб-дизайна в стиле Flat. Плоские тени, расширенная гамма ярких и сочных цветов.

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

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

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

Baesman.com – пример высоких контрастов с современными плоскими цветами в дизайне бизнес сайта.

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

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

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

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

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

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

Яркий 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 великолепно использует цвет на темном бэкграунде.

яркие цвета в web дизайне

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

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

Общие цветовые ассоциации

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

Цветa нужно рассматривать как нечто большее, чем эстетику – учитывая значения и культурные ассоциации, с ними связанные

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

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

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

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

Немного забегая в будущее Web-дизайна

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

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

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

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

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

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

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

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

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

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

Melanie-f – подобная планировка становится все более популярной среди Fashion сайтов.

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

Здесь градиенты можно разглядеть в ярких прямоугольных блоках и полноэкранной навигации с гамбургер-меню (на весь экран)

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

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

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

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

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

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

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

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

Читайте также:  5 основных принципов Flat дизайна