Découverte du Flat Webdesign par l’exemple + psd gratuit

Vous l’avez certainement déjà vu mais peut être n’avez-vous pas encore posé de nom dessus. Le flat webdesign est un courant du design dit minimaliste. Ce style se caractérise tout particulièrement par des formes simples (terminer les coins arrondis) et des couleurs vives voir acidulées utilisées exclusivement en aplats.

Exemple de flat design (à voir sur dribbble) :

A quoi peut on comparer le flat design ?

Bien évidemment le flat design, comme dit ci-dessus, s’apparente aux styles minimalistes existant depuis quelques années sur Internet. Il se compare plus facilement au skeuomorphisme autre tendance du webdesign plus qu’appréciée d’Apple. L’un complexifie le graphisme pour aider l’utilisateur à comprendre la fonction d’un élément, l’autre simplifie au maximum le graphisme pour rendre l’expérience de l’utilisateur plus facile. Ces deux styles cherchent quasiment le même objectif.

On parle d’Apple et son skeuomorphisme sur iPhone, dans cet article on parle de Windows et son Windows phone. En effet, le flat design est largement repris dans Windows phone, tant au niveau de l’OS que des applications développées autour de son univers. Mais Windows n’est pas le seul poids lourd à vous imposer ce design Google et Facebook le faisait déjà avant !

Voici un Exemple qui montre bien la différence :

Mais pourquoi utiliser le flat design dans l’internet d’un site web ?
Le flat design à une foule d’avantages. L’allégement des pages est un argument de poids (et c’est le cas de le dire). En effet, un Template désigné en flat design ne nécessite que peu d’images, d’où l’accélération conséquente du temps de chargement de celui-ci. Autre chose, la simplification de l’interface permet d’alléger le processus d’adaptabilité du Template pour le responsive design. Enfin le flat design permet de mettre l’information à l’honneur et permet de faciliter la lecture des contenus des pages.

Plus facile à concevoir ?

Le flat design pourra pour certains, être une tendance permettant de simplifier le processus créatif. Sur ce point je n’en suis pas convaincu. Il est clair que vous passerez moins de temps à réaliser vos illustrations sur une interface en flat (car il n’y en a pas) mais le temps gagné d’un côté sera très certainement utilisé pour une réflexion sur l’ergonomique, le choix colorimétrique.

Si vous souhaitez en savoir plus sur le flat design, je vous propose cet article publié par Laurent Assouad.

Maintenant que vous connaissez le flat design, rentrons dans le vif du sujet avec des Exemples à voir et d’autres à télécharger.

Commençons par dix Exemples de flat design sur des interfaces (mobile ou web) publiés par des webdesigners sur Dribbble. Vous trouverez ensuite 5 Exemples de flat design sur des icones. Pour finir, je vous propose cinq kits complets d’interfaces en flat design à télécharger gratuitement. Vous pourrez décortiquer tout cela sous Photoshop afin de tenter de réaliser le votre !

Exemple 1

Plus de détails

Exemple 2

Plus de détails

Exemple 3

Plus de détails

Exemple 4

Plus de détails

Exemple 5

Plus de détails

Exemple 6

Plus de détails

Exemple 7

Plus de détails

Exemple 8

Plus de détails

Exemple 9

Plus de détails

Exemple 10

Plus de détails

Puis cinq Exemples d’icones :