Нельзя не заметить, что градиенты возвращаются в веб-дизайн. Появляется все больше сайтов, где градиент является одним из главных элементов дизайна и некоторые из этих сайтов выглядят потрясающе. Но эти градиенты совсем не такие, какими они были во времена веб 2.0, они более изящные и утонченные и прекрасно сочетаются с флэт-элементами и красивыми векторными иллюстрациями. Очень часто градиент накладывается поверх фотографии, делая ее более эффектной, также можно заметить тренд на использование градиента в качестве фонового изображения.

Градиент позволяет разнообразить цветовую гамму сайта, придать дизайну глубину, его можно использовать для создания самых разных эффектов. Плавные цветовые переходы позволяют использовать различные оттенки и их комбинации для того, чтобы привлечь внимание пользователя. И неважно, каким будет градиент, линейным или радиальным – если использовать его с умом, результат будет впечатляющим. Представляем вам небольшую подборку из 20 сайтов, в дизайне которых задействован градиент. В некоторых примерах он доминирует, а иногда будет едва заметен. Это говорит о том, что дизайнеры ищут новые подходы использования старого приема и у них это получается.

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


Градиент, наложенный поверх фотографии, помогает создать нужное настроение. В дизайне сайта NYC Pride в качестве фона использовалась черно-белая фотография, что делало его слишком уж мрачным. Плавный линейный градиент от розового к фиолетовому сделал сайт ярким и привлекательным. Несмотря на прозрачность, градиент достаточно плотный, что позволило выделить текстовый контент на первом плане.


В дизайне сайта Just Actions градиент используется очень дозированно – его можно заметить в логотипе и в футере. Однако он завуалированно присутствует и в других элементах дизайна. Изображения затонированы различными оттенками розового и фиолетового, что создает эффект игры красок, несмотря на то, что плавного перехода нет. Отличный пример работы с цветом и умного использования цветовых переходов. Иногда дизайнеру просто требуется удержаться от соблазна и не использовать градиент везде, где это возможно. Это как раз такой случай.


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


В дизайне сайта Snipcart использовался мягкий еле заметный градиент от темно-серого к светло-серому. Неплохой пример грамотного использования плавного перехода. Фон создает спокойное, деловое настроение и никак не препятствует считыванию контента. Простой, но вместе с тем очень стильный градиент в данном случае выглядит гораздо лучше, чем просто серый фон.

Сайт Колмана Смита уже несколько раз попадал в различные подборки самых лучших примеров веб-дизайна. Это один из самых известных сайтов с большим фоновым изображением, но в наш список он попал благодаря очень тонкому и еле заметному градиенту. Трудно сказать, естественный ли это градиент или над ним поработал дизайнер, но результат впечатляющий. Здесь мы видим использование сразу двух градиентов: от темного к светлому снизу вверх и от светлого к темному слева направо. Очень необычный дизайн, хотя глядя на сайт, вряд ли кто-то об этом задумается. Хороший дизайн незаметен, и данный сайт является прекрасным подтверждением этого правила.


Градиент не обязательно должен быть плавным, в чем можно убедиться при посещении сайта Join Drift. В дизайне можно увидеть достаточно резкие переходы, граница между различными оттенками очень заметно. При этом дизайн выглядит легким и свежим благодаря эффекту акварели. Фон выглядит умиротворяюще и создает нужное настроение. Зеленая гамма была выбрана не случайно – сайт предлагает выбор альтернативных источников энергии, а тема экологии всегда ассоциируется у пользователей с зеленым цветом.


Пока в данной подборке были представлены сайты, где градиент так или иначе был связан с фоном. Но вовсе не обязательно так ограничивать себя – градиент может быть использован и по-другому, как, например, в дизайне сообщества любителей словесности Lines Conference. Здесь мы видим, как насыщенный градиент помог выделить логотип сайта, который является главным элементом первого экрана. На белом фоне крупные буквы с градиентом от фиолетового к розовому выглядят очень ярко и резко контрастируют с небольшой черно-белой фотографией, расположенной на втором плане.


Дизайн сайта Sceleton крайне лаконичен. При этом сам сайт оставляет положительное впечатление благодаря грамотному использованию градиента. Фон сайта ярко розовый, с еле заметными цветовыми переходами. Внизу экрана цвет более насыщенный, но становится немного светлее в верхней части. Цвет достаточно глубокий, поэтому текст легко считывается. Неплохой пример умелого использования градиента, он добавил сайту глубины, в результате чего


В дизайне сайта Premise Health градиент присутствует, но его практически не видно. Дизайнер просто взял удачную фотографию с естественными цветовыми переходами и немного затонировал изображение. Полупрозрачная сине-серая тонировка смягчает фоновое изображение и не отвлекает от чтения. Такой прием позволил выделить кнопку действия, расположенную в центре экрана.


Еще один удачный пример использования едва заметного градиента – это сайт CoLofts. Также как и на предыдущем сайте, здесь в качестве фона используется фотография, которая занимает 10% экрана. Однако в данном случае дизайнер немного размыл картинку и затонировал фотографию. Цвет тона очень плотный, однако здание на фотографии хорошо различимо. Сама тонировка монохромная, без плавного цветового перехода, однако она подчеркивает естественный градиент, который изначально присутствовал на фотографии.


Сайт небольшой ювелирной компании Leen Heyne отличается лаконичным дизайном. В основном здесь доминируют различные оттенки серого, что позволяет сосредоточить внимание пользователя на продукции бренда. Объединение геометрических фигур и градиентов создает эффект объема, своеобразный псевдо 3D-эффект. Градиенты плавне и мягкие, с хорошим контрастом. Сайт очень приятно смотрится, в первую очередь за счет ненавязчивых цветовых переходов.


Еще один сайт с фоновой фотографией, где имеется естественный градиент. Дизайнер, выбравший данную картинку, сумел создать на сайте по-настоящему волшебную атмосферу.


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


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


Градиент и полигоны отлично смотрятся вместе! В данном случае использовалась смешанная методика: к изображениям был применен градиентный фильтр, также градиент присутствует в фоновых полигонах. Не сказать, чтобы дизайн сильно впечатлял, но градиент позволил добавить сайту глубины и объема.


Утонченный пурпурно-красный градиент выглядит очень приятно и создает нужную атмосферу на сайте. Это сайт креативного агентства, так что использование стильных цветовых переходов здесь вполне оправдано.


Неплохой пример того, как градиент может использоваться в векторных иллюстрациях. Здесь он представлен в двух видах: линейный градиент на волнах и резкий переход от темного к светлому в самой иллюстрации. Сайт выглядит очень интересно, градиент создает объем и перспективу.

В данном примере градиент выглядит очень легким и немного размытым. Правильный выбор оттенков фона создает дружественную атмосферу, тонированная фотография не отвлекает и позволяет сосредоточиться на чтении.

Градиенты и иллюстрации – прекрасное сочетание. Перед нами сайт гуманитарного проекта Hunger Crunch. Градиенты здесь повсюду, они создают ощущение объема и направляют взгляд пользователя к важной информации.

На этом все, спасибо за внимание!

Цвета – это один из самых важных и сильных элементов дизайна. Поскольку дизайн – это эволюция, наше восприятие цветов (и то, как мы их применяем) постоянно меняется.

Я заметил, что в дизайне появилась новая тенденция, которая заключается в использовании градиентов для UI, брэндинга, иллюстраций, типографии и т.д. Кажется, что нам надоели все существующие цвета, и мы начали создавать новые способы их применения.

Градиент - это вид заливки в компьютерной графике, которая по заданным параметрам цвета в ключевых точках рассчитывает промежуточные цвета остальных точек. При этом создаются плавные переходы из одного цвета в другой. Обычно в градиенте можно использовать более двух цветов и дополнительно указывать настройки прозрачности и смещения границы цветов. -wikipedia

Градиенты позволяют дизайнерам создавать нечто, похожее на новый цвет. Оттенок, не существовавший до этого момента, что-то, что кажется уникальным, современным, и свежим.


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

Почему градиенты такие трендовые?

1. Градиенты хорошо запоминаются

Мы не часто видим градиенты. Наши глаза воспринимают их как что-то новое, а запоминаемость – это то, что нужно вашему дизайну или бренду. Мы помним эти необычные эффекты, поскольку еще не привыкли к ним. Нас окружает очень ограниченное количество обычных цветов, все мы знаем их с пеленок, и способны мгновенно отличить.

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


2. Градиенты уникальны

Давайте по-честному, в мире не хватит цветов для создания уникальных идентичностей каждого существующего бренда. По-моему, существует примерно 20 простых цветов, которые мы в состоянии назвать и распознать, при этом, есть сотни тысяч брендов, пытающихся создать свою уникальную личность. Нельзя выбрать синий, потому, что его уже занял Facebook. Вы пробуете другой оттенок синего, и понимаете, что он уже используется в Twitter. На всех не хватает.

Вот где градиенты меняют правила игры. Их использование предоставляет дизайнерам намного большее количество «оттенков».

3. Градиенты кажутся реалистичными

Я заметил, что в реальном мире, где существует шар, но не круг, мы видим больше градиентов, чем простых цветов. В каждом лимоне есть половинка, которая чуть темнее или чуть зеленее. Так же и с цветами, небом, различными материалами, и т.п. Они все окрашены градиентами. Возможно, нашим глазам будет привычней видеть градиенты и на экранах?


4. Градиенты просто более красочны и игривы

Людям нравятся цвета. Они привлекают нас еще с тех пор, как нам приходилось добывать фрукты и цветы своими руками. В конце концов, сама природа, чтобы привлечь нас и других животных, создала их такими яркими. Это еще одна победа градиентов, ведь они более яркие, игривые, и привлекательные, чем простые цвета.

Перевод статьи Гала Шира

Из красочных градиентов выходят весьма необычные и яркие логотипы. С помощью градиента обычно создаются логотипы для веб-компаний и приложений.

Вообще, понятие градиента в графическом дизайне представляет собой плавный переход от одного цвета к другому. Такой способ позволяет сделать бренд более ярким и оригинальным, а логотип – более стильным.

Например, это дизайн упаковки лечебной продукции по уходу за телом. Яркие градиентные надписи на чисто-белом фоне выглядят эффектно. Этикетка не выглядит кричащей, как обычно выглядят другие средства для тела. Но и не выглядит как лекарство, то есть скучно и настораживающе. Это прекрасный образец эффектной упаковки продукции.

А это этикетка для винной продукции. Градиентные переходы здесь неспроста: все эти оттенки имеет готовая винная продукция. От ярких и эффектных к более темным и землистым – этот спектр отображает цвета всех вин, которые производит Circuit.

Канадская благотворительная организация по вопросам психического здоровья была создана, чтобы оказывать помощь и информировать общественность о проблемах психического здоровья.

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

Дизайн-студия Artentiko создала упаковку для проекта Нуа-Джойнт, лекарственного средства на основе гиалуроновой кислоты для лечения суставов (остеоартрита). Упаковка белая, нейтральная. Прохладная цветовая палитра логотипа успокаивает, а его форма (расходящиеся два круга) мягко расслабляет.

И еще несколько красочных примеров:

Брендинг массажного салона.

Пожалуй, самый авторитетный ресурс о логотипах LogoLounge опубликовал ежегодный обзор отраслевых трендов. Команда проекта под руководством основателя Билла Гарднера (Bill Gardner) отсмотрела около 25000 работ, загруженных на ресурс дизайнерами из сотни стран, и выделила приемы, которые набирают популярность сегодня.

Гарднер подчеркивает, что подборки LogoLounge не стоит воспринимать как руководство к действию: мода меняется, некоторые решения выходят в тираж (например, корпоративные «чипсы» , 2012), некоторые оказываются на обочине мейнстрима (как градиентные лого , 2011). Тренды всего лишь фиксируют пульс индустрии, эволюцию дизайн-культуры, технологий и репрезентации бизнеса.

WTP присмотрелся к 15 заявленным трендам и разобрался, как и почему они работают.

Точки на конце линий

Довольно примитивный графический прием позволяет создать легко считываемую ассоциацию с технической и социальной кибернетикой, что импонирует компаниям, связанным с современными технологиями. Гарднер отмечает, что мнимая простота в действительности требует визуальной дисциплины, поскольку геометрия быстро становится слишком запутанной и нелогичной. Дизайнер, выбравший этот путь, часто напоминает продавца обувного магазина, силящегося зашнуровать кроссовку с большим количеством дырок.

Контуры и объем

Допустимое отступление от табу на градиенты — знаки, в которых игра света и тени происходит в контексте четкой формы, придавая ей тактильный объем. Геометрия остается узнаваемой даже в небольшом масштабе, а там, где логотипу дается полноценное пространство, он цепляет зрителя иллюстративной глубиной.

В качестве примера LogoLounge приводит работу барнаульского дизайнера Ивана Боброва , настоящего мастера этого жанра.

Беговые трассы

Звезды

Наив

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

Азбука Морзе

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

Хроматические горки

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

Детализированность

Внимание к деталям, въедливая проработка мелочей сигнализирует потребителю об основательном подходе компании к качеству. Плюс детализированный лого — «вместительнее» любого другого, и благодаря возможности вшить в него сразу несколько перворядных ассоциаций или стилистических «маячков», легче считывается даже ненасмотренной аудиторией. Безусловно, использование паттерна в логотипе может создать проблемы в небольшом масштабе, зато он, как конструктор, легко разбирается для использования на самых разных носителях.

Тени

Тени, дающие четкий геометричный объем, переживают мощное возращение, теперь официально зафиксированное и в лого-дизайне. Они придают дополнительную устойчивость и «вес» ключевому элементу знака, а в сочетании с винтажной типографикой создают херитейдж-эффект, который так популярен среди крафтовых американских производств.

Иллюстрация на превью: