Nous allons disséquer les tendances actuelles en matière de design numérique, en commençant par les dégradés, l’un des thèmes les plus mentionnés dans les résultats de notre enquête sur les tendances, réalisée grâce à la collaboration des utilisateurs et du jury des Awwwards. Consultez les résultats complets de l’enquête dans notre livre NOW. Un paysage contemporain pour les penseurs numériques.

Les dégradés sont à la mode depuis un moment, ils ont d’abord fait leur retour de manière conventionnelle dans les arrière-plans et les images. Spotify les a rendus à nouveau populaires en appliquant des dégradés duotone sur des photos comme élément caractéristique de la marque dans ses campagnes et microsites. Vous pouvez trouver un petit tutoriel ici sur la façon de créer des dégradés duotone dans photoshop.

Cette année, nous avons vu divers dégradés multicolores avec des palettes de couleurs vibrantes et des formes irrégulières avec des effets de flou et de distorsion. Les dégradés sont actuellement utilisés de nombreuses manières, mais la plus caractéristique, en termes de tendances, est l’extension de leur utilisation à des éléments secondaires dans la composition, tels que les survols, les titres, les éléments 3D, les icônes et plus encore.

• 

L’iPhone X représente le paradigme des tendances de 2018. Dans sa landing page, ses publicités et de nombreux éléments de ses campagnes promotionnelles, des dégradés de différentes tonalités sont utilisés au-dessus des titres, des textes ou même de l’isotype. Cependant, dans les arrière-plans et surtout dans le design de l’écran d’accueil de l’iPhone X, les dégradés ne sont PAS uniformes comme les dégradés linéaires ou radiaux traditionnels, mais multicolores avec des mélanges irréguliers.

Des dégradés en 3D ? Vertex color et colormap style

Il semble évident de parler de dégradés en 3D, puisque l’illumination de la scène génère un dégradé de lumière sur la surface de l’objet, mais ce qui est inhérent à cette tendance, c’est justement l’utilisation des dégradés comme texture de l’objet, imitant parfois les techniques de vertex color et colormap gradient. Ces deux techniques servent plus qu’une fonction purement décorative, car elles sont utilisées pour représenter des données ou cartographier des objets 3D.

Types de dégradés

Nous pouvons mélanger les couleurs de multiples façons, les plus courantes étant les dégradés linéaires ou radiaux avec différents paramètres comme le rayon, l’orientation, l’opacité ou les points de couleur. Ce qui est à la mode en ce moment, comme nous l’avons vu dans le cas de l’iPhoneX, c’est l’utilisation de mélanges non uniformes qui utilisent des mailles de gradient ou d’autres techniques. Avec le maillage de gradient, nous déformons la surface du gradient pour générer une forme libre. Nous pouvons trouver de nombreux types de dégradés comme le monotone, le duotone, le multicolore, les rampes de dégradés, etc, comme le démontre le graphique suivant.

Useful Tools for CSS gradients

Pour recréer ces effets en CSS, il existe des tas d’outils qui permettent de les créer à travers des éditeurs visuels, simplement en copiant et collant le code CSS, comme vous pouvez le voir ici : Webgradients, Khroma AI, Color Space, UI Gradients, Grabient, Coolhue, Easing Gradients in CSS.

• Khroma

  

• Webgradients

  

• Color Space

  

• Coolhue. Hue

  

• Gradients d’effacement

  

• Gradients d’interface utilisateur

  

Téléchargez le fichier source des dégradés !

Partez à l’assaut des dégradés, téléchargez gratuitement le fichier source au format vectoriel .ai ou pdf pour faire vos propres expériences de design avec les dégradés de l’affiche.

DOWNLOAD ICI

Awwwards Gradients Collection

Comme toujours, nous avons fait une sélection de SOTD et de nominés pour que vous puissiez voir ces effets en utilisation, nous espérons que vous pourrez trouver de l’inspiration dans les Awwwards Collections ou dans notre livre, NOW. Un paysage contemporain pour les penseurs numériques qui traite des principales tendances du design web de l’année.

• 
• 
• Modèle 3D en WebGL
• 

.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• Accueil en Parallaxe