Градиенты уже долгое время являются неуходящим трендом, начиная от веба и заканчивая упаковкой. В чем их фишка и как ее применить? Давайте разбираться)
Техническая часть или база
Функциональный пакет Adob, как и Figma позволяет создать нужный градиент: линейный двухтоновый, многоцветный и нелинейный, сложный и объемный, любой, достаточно выбрать подходящие цвета. Если же возникают сложности в сочетании оттенков, помимо референсов и наглядных примеров, тренирующих насмотренность, есть плагины Figma: Noisy Gradients, Gradient Morph, Mesh Gradient и многие др.
Сами названия градиентов очень говорящие: сложные состоят из нескольких цветов (больше 3), сетчатые (mesh gradient) строятся по принципу сетки и т.д.
Их можно применять в зависимости от цели и задач, например, если использовать линейный цветовой переход без сильно контраста по оттенкам, то получится мягкий градиент. Подобный прием встречается на обложках плейлистов Яндекс Музыки и ассоциируется с балансом, выглядит гармонично и целостно.
Если же есть цель добавить динамики, то отличну подойдут резкие градиенты, в которых цвета не плавно переходят друг в друга. Например, визуальная метафора призмы лежит в основе бренда SEEN, а яркая графика с контрастными градиентами-лучами подчеркивает механику процесса и результат.
Одна из неприятных особенностей цветовых переходов может быть в промежуточных оттенках, которые создают «грязь». Это происходит потому что комплиментарные цвета, а именно те, которые находятся на противоположных сторонах цветового круга Иттена, при смешивании дают серость или зеленистость. Примерами комплементарных цветов будут: красный и зелёный; фиолетовый и жёлтый; синий и оранжевый.
Чтобы избежать этого, достаточно добавить переходный цвет между оттенками как на примере ниже. Чем сложнее градиент, тем больше переходных оттенков может быть.
Что? Куда? Зачем?
Если относиться к градиенту не только как к украшательству, он может стать отличным инструментом для решения таких задач, как например:
1. Привлечение внимания. Градиентом можно выделить заголовок, акцентный текст, дизайн-элементы, иконки, кнопки и т.д. Его часто применяют в качестве фона или обводки, которая демонстрирует активность элемента. Выбор цвета тоже имеет значение, если градиент недостаточно контрастный по сравнению с фоном, мы получим нечитаемый заголовок или «потерянную в воздухе кнопку».
2. Увеличение контраста. Градиенты могут использоваться между фоном и текстом, делая его более читабельным, четким. Это помогает улучшить восприятие информации. Часто этот прием можно встретить в вебе на карточках товаров, различных сайтах и т.д.
3. Создание объема. Градиенты отлично воссоздают глубину и объём за счет контрастно подобранных цветов. Например, при изображении куба или цилиндра. Это помогает создать иллюзию пространства и формы, а также придать дизайну реалистичности и детализации. Такие трёхмерные элементы создают определенный вайб и футуристическую атмосферу.
4. Манипулирование взглядом. За счет своей яркости цветовые переходы могут не просто привлекать внимание, но и управлять взглядом смотрящего. Как это работает на практике: плавный градиент на сайте мягко ведет по странице, погружая пользователя в свою атмосферу.
Якоб Нильсен в своих исследованиях выяснил, что пользователь изучает страницу сайта по траектории, схожей с буквой F. Градиент может действовать по такому же принципу, управляя вниманием клиента от светлого оттенка к темному.
5. Обращение к эмоциям. Градиенты могут создавать различные визуальные эффекты, нести в себе символическое значение, ассоциируясь с природными явлениями, идеями и чувствами. Например, сочетание оранжевого, синего и фиолетового оттенка используются для передачи атмосферы заката, а голубые и синие градиенты похожи на морскую гладь.
Они отлично передают нужное настроение, так например, Elfbar, бренд одноразовых электронных сигарет, использует упаковку, в которой цветовые переходы символизируют вкусы продукта.
Web примерчики
Нет конкретных правил использования градиентов, все зависит от цели и ее реализации. Можно было бы сказать, что цветовой переход применяют для дизайна главного экрана, но есть примеры, где градиент становится основой целого сайта, его изюминкой. Можно было бы сказать, что не стоит использовать грязные градиенты, но и такого правила нет. Сайт photopills.ru вобрал в себя все эти «можно было бы», на выходе получился яркий и запоминающийся продукт, имитирующий старую фотопленку. Для курса фотографии отличная визуальная метафора, которая считывается пользователем.
Другой пример, где градиент деликатно дополняет футуристичную атмосферу сайта за счет как раз таки сетчатых градиентов (mesh gradient). Мы можем их различить по нелинейной структуре и плавным линиям. Такой яркий и контрастный цветовой переход заменяет полноценную иллюстрацию.
Что же на счет откровенно плохих примеров? Любой продукт существует не в вакууме и дизайн один из факторов влияющих на успех. Откровенно плохой дизайн — это не рабочий дизайн, когда блоки не прогружаются, сайт висит, а покупка не совершается. Градиент не повысит конверсию, но может создать необходимое настроение, которое повлияет на клиента и он совершит покупку, оплатит услугу и т.д.
Упаковочные примерчики
Градиенты делают упаковку более интересной и привлекательной, добавляют глубину. Существует ряд исследований (например, «Влияние окружения на поведение покупателей: критический обзор» от Shun Yin Lam, «Выгода от использования цвета» от Color Marketing Group, «Психология цвета в маркетинге» от June Campbell), которые показывают, что цвет является основным фактором, влияющим на решение людей о покупке определённого товара. В наш цифровой век покупок на маркетплейсах внешний вид товара играет огромную роль в принятии решения о покупке.
Градиентом можно разбавить уже существующую линейку продукта, как это делают бренды Darling или Kristall Minerals cosmetics, добавляя привычному минималистичному дизайну упаковки цветовой акцент.
Японский бренд косметики Biore используют сине-голубой цветовой переход для упаковки солнцезащитного средства. Какие у вас возникают эмоции от такого продукта? Чувствуется летнее, отпускное настроение, может быть морской бриз или свежесть? Существует экологическая теория цветовых предпочтений от Стивена Палмера и Карен Шлосс, которые утверждают в своих исследованиях, что синий цвет ассоциируется с благоприятными экологическими условиями. Такой цвет нравится многим людям и вызывает приятные эмоции: цвет безоблачного неба, горного озера, чистой воды и т.д.
В дизайне продукта не бывает случайных цветов, нужно учитывать множество факторов: пол, возраст, целевой рынок, уже существующие продукты и т.д. Так например, с возрастом восприятие цвета меняется из-за физиологических изменений. Люди почетного возраста с трудом различают такие смешанные цвета как сине-зеленый, желто-зеленый, фиолетовый и почти все темные оттенки. Поэтому не стоит ругать дизайнера за то, что в аптеке все коробочки аспирина зеленые))
Брендинговые примерчики
Бренды создаются не на день, а на года, поэтому важно чтобы логотип не терял актуальности со временем. Поэтому градиенты в брендинге встречаются нечасто. На ум сразу приходит логотип инстаграма, не нуждающийся в представлении. Метафора яркой жизни воплощается в цветовом переходе, который буквально наполняет логотип. Пёстрый и узнаваемый градиент стал частью визуального кода бренда, однако есть не менее интересные графические метафоры.
Музыкальный факультет Монреальского университета использует градиенты в своей фирменной графике, чтобы отстроиться от логотипа университета. Дизайнеры разработали гибкую, масштабируемую систему сеток с цветовыми переходами, отражая разнообразие подходов к музыкальным композициям, их кажущуюся бесконечность. Тот случай, когда графика способна вдохнуть жизнь в строгий фирменный стиль университета.
Интереснная метафора у провайдера цифровых услуг из Северной Осетии M2_Connect. Идея заключается в том, что «технологии сближают людей и меняют жизнь к лучшему. Идея связи человека и технологий — простая, но важная мысль, которая стала основной метафорой в айдентике нового бренда». Меняясь в зависимости от формата, градиентная линия становится главным стилеобразующим объектом для любых носителей фирменного стиля, от деловых бланков до сувенирной продукции и оформления упаковок цифровой техники.
Хороший пример того как яркий фирменный стиль не уходит в «попугайство», бренд транслирует чувство уверенности и остается сдержанным. Градиент не стремится заполнить собой пространство, он дополняет и становится эдакой вишенкой на торте)
Художественные примерчики
Искусство влияет на дизайн, служит вдохновением и дает пищу для размышлений.
Герман Эрмич в своих работах применяет опыт из графического дизайна и дизайна интерьеров, воплощает смелые, концептуальные идеи. Он использует цвет и световые эффекты, чтобы получить эмоциональный отклик в самый первый миг, как мы видим предмет. Художник изучает как дизайн влияет на взаимодействие людей с окружающим миром.
«Мне всегда задают этот вопрос, но у меня никогда нет ответа. Я не играю в метафоры, не пытаюсь никого копировать или что-то воссоздавать. Просто выражаю конкретное чувство в конкретный момент. Палитра, которая всплывает в моем воображении и захватывает дух, стоит того, чтобы материализоваться в предмете».
Визуальные образы в дизайне всегда несут в себе смыслы и анализ, переосмысленный опыт. Есть множество примеров, когда дизайнеры вдохновляются абстрактным искусством, в том числе супрематизмом.
В супрематизме цвет становится основополагающим, он теряет связь с природными формами. Отголоски этого течения мы и сейчас можем видеть. Истинное искусство как и творчество безгранично, а свежее прочтение одного и того же рождает новые смыслы.
Выводы
Градиенты состоят из цветов, поэтому лучше подробнее изучить теорию цвета, чтобы грамотно применять ее на практике. Любой графический прием может быть инструментом в руках творца. Я не верю в табу и запрещенные приёмы, использовать можно все, важно понимать зачем и для чего.
