• 0k
  • 0
Web design \ 16 Juillet 2014

Comment utiliser le Flat Design sur votre site ?

Les amateurs de graphisme parmi vous sont probablement déjà familiers avec le terme Flat Design (en français Design plat). Cette tendance qui s’est largement imposée sur le Web ces derniers temps consiste – comme son nom l’indique – à créer un site visuellement plat ou plus précisément, basé sur une esthétique bidimensionnelle.

L’exemple suivant vous aidera à mieux visualiser le concept : sur les sites qui ne surfent pas sur cette tendance, les boutons donnent une illusion de 3D afin de permettre aux visiteurs de s’imaginer en train d’appuyer dessus – pas bête la guêpe. Les sites au design « plat » en revanche, se contenteront de formes simples et d’une mise en page plus épurée.

Bouton 3D et Flat

Quels sont les avantages du Flat Design ?

Les raisons d’opter pour le Flat Design ne manquent pas. Tout d’abord, les sites épurés d’animations lourdes et de fioritures graphiques complexes chargent plus rapidement. Autre avantage, le Flat Design peut s’adapter facilement à une large variété d’écrans. Le nombre d’internautes qui accède au Web depuis un smartphone, une tablette ou autre iChose, s’accroit de façon exponentielle. Offrir une expérience optimisée pour les surfeurs de l’internet mobile (les bien nommés mobinautes) est par conséquent un must pour tout détenteur de site.

Enfin, l’esthétique du Flat Design rend le site particulièrement intuitif pour l’utilisateur. La mise en page simple composée de blocs de couleurs et de formes géométriques classiques donne à cette tendance l’ascendant en matière d’utilisabilité sur de nombreux concepts de graphisme.

La preuve ultime du succès du design plat est le choix de nos amis d’Apple d’opter également pour cette tendance, qui va pourtant à l’encontre de leur ancien design de bataille qui tendait à imiter l’aspect d’objets réels – voir skeuomorphisme. Si même nos amis de la pomme ont admis s’être plantés, c’est que l’enjeu est considérable.

Ancien design iOs et nouveau Design iOs

Comment utiliser le Flat Design sur votre site ?

Sans transition, passons aux choses sérieuses. Si vous désirez créer un site qui respecte les conventions de cette tendance, voici quelques conseils que vous devriez prendre en considération :

  • Sélectionnez un arrière-plan simple : oubliez vos passions pour les dégradés ou les textures en briques rouges. Le Flat Design tend vers des motifs légers et vers des combinaisons de couleurs subtiles.

Sélectionnez un arrière-plan simple

  • Bannissez les effets : mettez au placard les effets 3D, les transitions animées et couleurs fluo. Cette tendance consiste à éviter tous les éléments de design donnant une impression de profondeur, de volume ou de mouvement afin de ne pas détourner le visiteur du cœur du site.

Flat design

 

  • Déployez les icônes : les icônes s’alignent parfaitement avec le concept du Flat Design. Ces visuels minimalistes sont conçus afin d’orienter l’utilisateur au sein de l’interface de la façon la plus intuitive possible. Les icônes monochromes sont dotées d’un charme particulier, ne trouvez-vous pas ? Pour découvrir les meilleures ressources en ligne d’icônes gratuites, cliquez ici.

Utilisation d'icônes dans l'éditeur Wix

  • Montrez vos formes : Les formes géométriques comptent parmi les éléments clés du Flat Design. Les polygones (ou les cercles) servent à créer une division clair au sein du contenu et les lignes permettent de séparer les différentes sections de la page. Notez que les formes géométriques sont très tendance pour créer votre logo également.

Utilisation de formes dans l'éditeur Wix

  • Optez pour des tons clairs : vos palettes de couleurs doivent être légères et lumineuses. Les tons clairs sont les plus communs sur les sites qui utilisent la tendance. Néanmoins, l’abus de couleurs est dangereux pour la santé de votre site. À consommer avec modération – pas plus de 2-3 par page.

couleurs claires

  • Simplifiez la navigation : les menus de navigation, les boutons et les liens doivent être placés en évidence et procurer des indications claires. Naturellement, les effets d’ombre ou de mise en lumière sont à proscrire. Bref, pensez minimaliste et allez à l’essentiel.

Menu vertical pour un navigation intuitive

  • Misez sur la typographie : avec le Flat Design, les textes connaissent enfin leur heure de gloire. Le style épuré encourage à mettre en valeur des typographies créatives afin d’optimiser l’impact des textes. Après tout, le but du jeu est d’informer le visiteur de façon simple et précise, et les mots demeurent les meilleurs outils pour y parvenir.

Belles typographies

  • Trouvez un template Flat : Wix vous propose de nombreux templates conçus en fonction de cette tendance. Il ne vous reste plus qu’à choisir le vôtre et à le modifier selon vos envies.

Template : Coming Soon 

Template : Language School 

Template : Mobile Marketing

Templates Wix Flat design

Voilà, vous savez tout sur le Flat Design. Comme vous pouvez le voir, il y a de quoi en faire un plat.


Recevez le
par e-mail !

Rejoignez le blog de Wix Ne manquez rien de notre actu !

Adresse courriel invalide.

l\'email existe déjà

Adresse courriel invalide.

Rejoignez-nous ! \ 

Découvrez nos conseils en web design, en marketing digital,
et suivez toute l'actu Wix ! Pas de spam. Promis.

Adresse courriel invalide.

l'email existe déjà

Adresse courriel invalide.