Практический online-курс

Градиенты в веб-дизайне: как использовать?

Градиенты в веб-дизайне: как использовать?

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

Когда градиент стал популярен в веб-дизайне? Вернемся в прошлое, в 2014 год. Плоский дизайн был на пике популярности, онлайн-сервисы позволяли создать цветовую палитру для сайта, но предлагали лишь 32 тона и еще меньше цветов. Не так разнообразно, согласны?

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

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

Наиболее распространенными являются двухцветные градиенты. Цвета и оттенки выбрать очень легко. Используйте цветовой круг, чтобы выбрать наиболее понравившиеся и соответствующие цвета, а затем — ближайший оттенок. Например, красный и фиолетовый, зеленый и мятный… Градиент голубого и светло-голубого цветов хорошо известен благодаря Linkedin. Кстати, они использовали радиальный градиент, а не линейный.

Градиент vs. Плоский дизайн?

На этот вопрос нет однозначного ответа, но если вы хотите:

  • следовать трендам веб-дизайна;
  • оценивать особенности вашего продукта или сервиса;
  • пробовать что-то новое и непривычное.

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

Принципы использования градиента в дизайне

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

  • двухтоновый, реже трехтоновый градиент (обязательно);
  • графические элементы в плоском стиле (обязательно);
  • внешние или внутренние тени (по желанию).

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

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

Слева — старая иконка Instagram, справа — новая

Слева — старая иконка Instagram, справа — новая

Примеры использования градиента в дизайне от компании Merehead

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

Merehead

Темно-фиолетовый и фиолетовый идеально сочетаются с красным цветом.

Темно-фиолетовый и фиолетовый идеально сочетаются с красным цветом

Merehead использует градиенты не только в веб-дизайне, но даже в графическом дизайне и дизайне логотипов.

Merehead использует градиенты не только в веб-дизайне, но даже в графическом дизайне и дизайне логотипов.

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

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

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

Высоких вам конверсий!

По материалам: merehead.com Источник картинки: Running Wolves

17-10-2017

Продающие лендинги от отдела
дизайна LPgenerator

Используем технологии:
4U, AIDA, ХПВ, психология влияния Р. Чалдини, управление взглядом
  • 4U
  • AIDA
  • ХПВ
  • психологии влияния Р. Чалдини
  • управления взглядом
  • нейромаркетинг
Готовность от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".