{"id":14189,"url":"\/distributions\/14189\/click?bit=1&hash=147ff0d5ac0f8c07ad1a391b0e132691bcf1d8d392194cece93eed2312f6b819","title":"\u0410\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430 \u2014 \u043a\u043b\u044e\u0447 \u043a \u0443\u0441\u043f\u0435\u0445\u0443 \u043d\u0430 \u043c\u0430\u0440\u043a\u0435\u0442\u043f\u043b\u0435\u0439\u0441\u0430\u0445","buttonText":"","imageUuid":""}

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

Пиксель-addicted руководитель направления дизайна ZephyrLab Дима Уколов сделал подборку о цветах и градиентах. Откуда они к нам такие пришли, удобные инструменты для работы и много вдохновляющих примеров.

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

Скфеморфизм и флэт

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

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

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

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

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

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

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

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

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

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

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

В наших проектах мы ещё в 2016 году начали использовать градиенты и яркие акцентные цвета и сочетания.

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

Спасибо 😉

P.S. если у вас есть классные примеры использования градиентов, то делитесь в комментариях✌

0
Комментарии
-3 комментариев
Раскрывать всегда
null