Почему градиенты вернулись в 2018?

Градиент — это вспышка ярких цветов для привлечения внимания.

Это утверждение могло быть правдой в 1995 году, когда веб-дизайнеры использовали градиенты для расширения цветовой палитры, добавляя уникальные элементы на свои веб-сайты. Вспомните старые добрые 90-е годы, когда мы даже пользовались «Word-art», чтобы добавить немного профессионализма в наши школьные презентации — а теперь мы называем это плохой идеей! Уф !! Но знаете что? Может быть, мы двигались в правильном направлении.

В настоящее время градиенты используются для создания смелых утверждений и передачи пользовательских эмоций, помогая аудитории понимать продукт или идею. В 2017 году мир был заинтригован переходом одного оттенка в другой, и эта тенденция не прекратиться в ближайшее время, если только кто-то не нарушит эту тенденцию, как это сделал Instagram с их ребрендингом в 2016 году, используя градиенты так и в таком масштабе. Но … мы не можем просто говорить о градиенте и не упомянуть Spotify, который передал двухцветными градиентами эмоции в плейлистах.

Как все началось?

Мы должны вернуться в 2014 год, когда все помешались на плоском дизайне. Google представил свой Material-дизайн, а Windows — Metro. Это выглядело круто и свежо по сравнению с захламеленным скеоморфическим дизайном, который уже выглядел устаревшим в то время. Новые парадигмы отлично подходили для мобильных устройств с низким разрешением, где дизайн выглядел чистым, но, увы, нас ограничивали в использовании различных цветов и с появлением мобильных устройств с более высоким разрешением они уже не оказывают такого же эстетического воздействия.

Можете ли вы назвать более 20 “плоских” цветов?

Готов поспорить, что не можете. Выбор плоских цветов ограничен.

Тренды мобильного UI-дизайна в 2018

Градиенты позволяют дизайнерам создавать что-то выглядящее новым, просто смешивая цвета. Цвет, который не существовал до того, как вы его смешали, цвет, который выглядит уникальным, современным и свежим. Вы видите градиенты повсюду в природе: каждый плод, каждый лист, который вы видите, имеет градиент от светлого цвета к более темному оттенку в тени. Небо всегда имеет градиент от ненасыщенного оттенка до более плотного цвета по мере того, как вы переходите от зенита к горизонту. Градиенты стали очевидным способом выразить эмоции после плоских цветов — начиная с мягких градиентов в 2015 году, давших ощущение глубины, до тотальных экзотических и насыщенных оттенков в 2017 году.

Итак, что за суета о возрождении градиентов в 2018 году?

Градиенты в 2018

Сообщество на Behance их уже называет Gradient 2.0. Вы должны выйти из своей зоны комфорта. Пришло время принимать рискованные решения, быть храбрыми, отказаться от синего цвета, с помощью которого вы все это время внушали благоговение вашим клиентам. Каждый цвет теперь имеет значение — просто взгляните на Dropbox с их крутым новым брендингом, где они представили множество цветов, не переделывая свой логотип.

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

Вот несколько примеров, которые подтверждают это убеждение:

Pantone Color Institute предсказывает глобальные тенденции в цветах и консультирует компании в вопросах создания брендов. Неудивительно, что в  этом году они выбрали загадочные фиолетовые оттенки цветом года.

Ультрафиолет стал цветом 2018 года: что он значит?

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

И если вы еще не убедились, посмотрите на приведенную ниже иллюстрацию. Использование градиентов добавило глубину к ночному очарованию города.

Последний пример, который мы покажем вам, прежде чем двигаться дальше. Посмотрите на смелые цветовые утверждения, которые сделал Sphynx.

Советы по созданию превосходных градиентов

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

Не выбирайте цвета случайно

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

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

Более легкое решение – выбрать цвета, которые ближе друг к другу на цветовом колесе. Но что, если ваш бренд или команда маркетинга не хотят идти по цветовому колесу, тогда что?

Представляем трехточечный градиент

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

Еще один совет — и обратите особое внимание на него, потому что не многие люди обращают на это внимание. Когда вы создаете градиент от сплошного цвета до прозрачного (эффект затухания цвета), убедитесь, что обе точки имеют одинаковый цвет, как показано на рисунке ниже. Разные цвета в середине создадут «цвет фазы перехода» с 50% непрозрачностью вместо визуально гладкого эффекта.

На третьей точке все не заканчивается, вы можете создать множество переходных этапов в градиенте, чтобы получить больше контроля над переходами — если у вас есть Adobe Illustrator, попробуйте инструмент Mesh для более точного контроля не только цвета, но даже направлений и многого другого.

С чего начать?

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

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

Вот некоторые из иллюстраций, которые я сделал, вдохновляясь от природы:

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

Вот несколько инструментов, если вам нужна помощь, чтобы узнать больше о градиентах:

• Paletton
• Webgradients
• Grabient
• CoolHue
• ColorSpace

Надеюсь, вам помогут эти ссылки.