Дизайн
Zephyr Lab
401

Работа с цветами и градиентами: инструменты и примеры

Дмитрий Уколов head of design Zephyrlab рассказывает про цвета и градиенты. Откуда они к нам такие пришли, дам удобные инструменты для работы и покажу яркие примеры.

В закладки

С самого начала плоские приглушенные цвета вызывали неоднозначные эмоции. Просто, спокойно и современно, но всё время оставалось чувство недосказанности. Плоский стиль вообще пришёл в режиме «это временно, просто переходный период, потерпи».

И действительно, этот тренд был объективной необходимостью перед обновлением стилистики, можно сказать, революции в сфере web-дизайна, которая происходила на фоне всё больших возможностей вёрстки и кодинга.

Кстати, градиент в эпоху «до флэта» использовался в основном в натуральных скевоморфичных текстурах, где он особо не бросался в глаза. Чистые градиентные переливы старались не использовать — считалось дурным тоном. Во времена повального увлечения плоским дизайном про градиенты забыли вовсе.

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

Как быстро подобрать идеальное сочетание цветов для градиента?

Для поиска вдохновения и цветовых сочетаний можно воспользоваться сервисом webgradients.com — этоболее 200 вариаций и сочетаний.

webgradients.com — отличный сервис для поиска идеальных сочетаний цветов

materialui.co — удобный сервис с готовыми наборами. Не нужно наугад тыкать указателем в 17 млн. цветов с надеждой попасть с первого раза. Открываете сайт, кликаете на нужный цвет и копируете данные.

От теории к практике

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

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

Чистые яркие цвета и контрастные сочетания пришли, наверное, из документации Гугл по материал-дизайну. Всё больше применяют дизайнеры подобные сочетания – зачастую проект только выигрывает от этого.

Старайтесь пробовать, экспериментировать и обсуждать совместно решения и вы увидите, как качественно будет меняться ваш уровень. ,

{ "author_name": "Zephyr Lab", "author_type": "self", "tags": [], "comments": 1, "likes": 0, "favorites": 25, "is_advertisement": false, "subsite_label": "design", "id": 122234, "is_wide": false, "is_ugc": true, "date": "Wed, 29 Apr 2020 11:44:51 +0300", "is_special": false }
Объявление на vc.ru
0
1 комментарий
Популярные
По порядку
1

Классно! Спасибо за статью!)

Ответить

Прямой эфир