Мы собираемся проанализировать текущие тенденции диджитал-дизайна. В первую очередь — это градиенты, одна из наиболее обсуждаемых тем по результатам нашего исследования тенденций, проведенного благодаря сотрудничеству пользователей Awwwards и жюри. Ознакомьтесь с полным перечнем результатов опроса в нашей книге прямо СЕЙЧАС. Современный ландшафт для цифровых мыслителей.
Градиенты уже были когда-то в моде. Сейчас они опять вернулись в веб-дизайн, где их используют в фонах и изображениях. Spotify снова сделал их популярными, применив двухцветные градиенты к фотографиям в своих кампаниях и на микросайтах как характерный элемент бренда. Здесь вы можете ознакомиться с небольшим уроком о том, как создавать градиенты в Photoshop.
В этом году мы видели различные разноцветные градиенты с яркими цветовыми палитрами и неправильными формами с эффектами размытия и искажения. В настоящее время градиенты используются в различных ситуациях, но наиболее характерной особенностью с точки зрения тенденций является распространение их использования на вторичные элементы композиции, такие как наведение, заголовки, трехмерные элементы, иконки и многое другое.
Каждая новая модель iPhone X представляет собой парадигму трендов. На своих лендингах, в рекламе и во многих элементах рекламных кампаний градиенты различных тонов используются над заголовками, текстами или даже в изотипе. Тем не менее, на заднем плане и особенно на заставке главного экрана iPhone X градиенты НЕ однообразны как традиционные линейные или радиальные градиенты, а многоцветны с нерегулярным смешиванием.
Градиенты в 3D? Цвет вершин и стиль цветовой карты
Кажется очевидным говорить о градиентах в 3D, поскольку освещение сцены создает градацию света на поверхности объекта. Но что присуще этой тенденции, так это именно использование градиентов в качестве текстуры объекта, иногда имитирующей методы цвета вершин и градиента цветовой карты. Оба метода служат не только для воплощения декоративной функции, но и используются для представления данных или отображения трехмерных объектов.
Типы градиентов
Мы можем смешивать цвета несколькими способами, наиболее распространенными из которых являются линейные или радиальные градиенты с различными параметрами, такими как радиус, ориентация, непрозрачность и цветовые точки. Что сейчас модно, как мы видели в случае с iPhoneX, так это использование неоднородных смесей, в которых применяются градиентные сетки или другие методы. С помощью градиентной сетки мы искажаем поверхность градиента, чтобы создать произвольную форму. Существует множество типов градиентов, таких как монотонные, двухтонные, многоцветные, градиентные скаты и т.д., как это показано на следующем рисунке.
Полезные инструменты для CSS градиентов
Для воссоздания этих эффектов в CSS доступно множество инструментов, которые позволяют создавать их с помощью визуальных редакторов, просто копируя и вставляя код CSS: Webgradients, Khroma AI, Color Space, UI Gradients, Grabient, Coolhue, Easing Gradients in CSS.
Khroma
Webgradients
Color Space
Cool Hue
Easing Gradients
UI Gradients
Скачайте исходный файл с градиентами!
Начните работать с градиентами, скачайте исходный файл бесплатно в векторном формате .ai или pdf, чтобы самостоятельно поэкспериментировать с градиентами.
Коллекция градиентов от Awwwards
Как всегда, мы создали подборку сайтов дня и номинантов, в которой вы можете увидеть все эти эффекты в использовании. Мы надеемся, что вы найдете вдохновение в коллекциях Awwwards или в нашей книге СЕЙЧАС. Современный пейзаж для цифровых мыслителей, в котором обсуждаются основные тенденции года в веб-дизайне.
