Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
  1. Главная >
  2. Блог >
  3. Дизайн и брендинг >
  4. Градиенты в веб-дизайне: как использовать?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Merehead

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

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

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

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

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

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

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

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

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

blog comments powered by Disqus
Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
copyright © 2011–2024 Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "Феникс-Маркетинг". ИНН:7725812838, КПП:772501001, ОГРН: 513774619323915280, Москва, ул. Ленинская слобода, д. 19, стр. 1, этаж/пом 3/25

ООО «Феникс-Маркетинг» — IT-компания с многолетним опытом работы, разрабатывающая инновационные решения для управления процессом лидогенерации (пост-клик маркетинг). Разработанное нами технологическое программное решение LPGENERATOR позволяет создавать целевые страницы в визуальном редакторе и управлять заявками (лидами) в CRM-системе в целях проведения эффективных, высококонверсионных рекламных кампаний