{"id":14285,"url":"\/distributions\/14285\/click?bit=1&hash=346f3dd5dee2d88930b559bfe049bf63f032c3f6597a81b363a99361cc92d37d","title":"\u0421\u0442\u0438\u043f\u0435\u043d\u0434\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043d\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u043f\u0443\u0442\u0435\u0448\u0435\u0441\u0442\u0432\u0438\u044f","buttonText":"","imageUuid":""}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0
1 комментарий
Катя Панова

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

Ответить
Развернуть ветку
-2 комментариев
Раскрывать всегда