Tendance du webdesign : le dégradé reprend du pouvoir !

Des dégradés en webdesign ? Rien de neuf me direz-vous… et pourtant ! Souvenez-vous, ils étaient déjà employés et sur-employés à l’époque du webdesign 2.0. Rassurez-vous, le revival du dégradé est aujourd’hui employé de manière bien différente…

Annonce

Comment expliquer ce renouveau ?

Petit à petit, la tendance du flat design évolue et dévoile de nouveaux aspects au fil des mois. Les aplats de couleurs laissent désormais place à de subtils dégradés, dans plus en plus de webdesigns récents. Sans vouloir investiguer en profondeur sur la naissance d’une tendance graphique employée depuis bien longtemps, je pense que le renouveau des dégradés est lié à plusieurs facteurs : 

1. Primo, nous ne pouvons pas nier l’influence du design d’iOS7, qui a imposé très rapidement ses effets de dégradés dans ses applications. On aime où on n’aime pas, mais en conclusion, le résultat est clairement présent sur le web.

2. Secondo : le support de la propriété CSS3 « linear-gradient » permet aujourd’hui d’utiliser d’intéressants spectres de couleurs directement dans le code. Elle représente un avantage énorme par rapport à un dégradé généré sous Photoshop par exemple. En effet grâce au CSS, votre effet peut s’adapter correctement à votre design, quelque soit votre résolution d’écran.

3. Tertio : sans se voiler la face, l’effet fonctionne bien pour le moment et est clairement à la mode…

Utiliser des dégradés permet d’employer des couleurs vives / vibrantes qui donnent ainsi de la puissance à vos visuels. Attention tout de même à bien choisir les teintes utilisées : une association de couleurs mal gérée risque très fortement de faire fuir l’utilisateur.

Quelques exemples réussis :

Utilisés sur des photographies, en background ou encore en simple header, le dégradés sont partout. Vous avez sûrement déjà pu apercevoir quelques sites du genre des les récentes sélections des incontournables, mais l’essentiel est ici :

Gifn

gradient-webdesign-inspiration

Bacae

gradient-webdesign-inspiration

Atom

gradient-webdesign-inspiration

Final

gradient-webdesign-inspiration

Pushh

gradient-webdesign-inspiration

Electric Mainline

gradient-webdesign-inspiration

3 Minutes Inc

gradient-webdesign-inspiration

Qcards

gradient-webdesign-inspiration

Symodd

gradient-webdesign-inspiration

Table Hero

gradient-webdesign-inspiration

MapBox

gradient-webdesign-inspiration

 

Bono Peppers

gradient-webdesign-inspiration-15

Impossible Hero

gradient-webdesign-inspiration

Loubsol

gradient-webdesign-inspiration

One Johnst

gradient-webdesign-inspiration

Bonus #troll :

gradientsmotherfucker.com

Adhérez-vous au #gradientpower ?

13 commentaires

Laisser un commentaire :

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.