{"id":3909,"title":"\u041a\u043e\u0440\u043e\u0442\u043a\u043e: X5 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u043a\u0430\u043a \u043d\u0435 \u043f\u043e\u0433\u0443\u0431\u0438\u0442\u044c \u0431\u0438\u0437\u043d\u0435\u0441","url":"\/redirect?component=advertising&id=3909&url=https:\/\/vc.ru\/promo\/254716-future-night&hash=5c4a52951b25fa2265862bde478ecec7435c2210b288c7f4cb49f2cd158e2b5e","isPaidAndBannersEnabled":false}
Дизайн
Zephyr Lab

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Спасибо 😉

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

{ "author_name": "Zephyr Lab", "author_type": "self", "tags": [], "comments": 0, "likes": 0, "favorites": 20, "is_advertisement": false, "subsite_label": "design", "id": 143977, "is_wide": false, "is_ugc": true, "date": "Wed, 22 Jul 2020 12:07:54 +0300", "is_special": false }
0
0 комментариев
Популярные
По порядку
Комментарии
null