Le Flat Design

Blog Applibox

Vous avez peut-être déjà entendu parlé du Flat Design mais vous ne savez peut-être pas ce que c’est ? Non ? Qu’importe, vous êtes au bon endroit 🙂

Le Flat Design, c’est la “nouvelle” tendance de design web. Littéralement, Flat Design pourrait être traduit par Design à plat. Indirectement sans le savoir, vous avez probablement déjà vu ce type de design : l’interface de Windows 8 (MetroUI) ou alors Google avec, entre autre, l’interface Google+.

Le Flat Design est le contraire du Skeuomorphisme.

 

Skeuomorphisme ?? A vos souhaits…

 

Ha oui le Skeuomorphisme. Ca peut paraître barbare comme nom mais vous allez voir que l’explication est assez simple (oui mais ça n’empêche pas que le nom est barbare je vous l’accorde…) 🙂

Le Skeuomorphisme (ou Skeuomorphic Web Design) est, je cite Wikipedia : “Définit un élément de design dont la forme n’est pas directement liée à la fonction, mais qui reproduit de manière ornementale un élément qui était nécessaire dans l’objet d’origine”…… Merci Wikipedia. Bon d’accord voyons ça par des exemples.

Exemple 1 :

Sur votre site vous voulez un effet bois en fond. Donc nous allons pour cela appliquer une texture style bois, parquet, etc. Et bien le Skeuomorphisme c’est ça, on récupère un élément de la vie courante comme le bois pour le reproduire sur votre site pour rendre un effet réaliste.

Exemple 2 :

Autre exemple pour nos amis Mac (oui !!!… pardon…) : la corbeille. Cette dernière est très réaliste et représente bien notre corbeille de tous les jours et qui occupe la même fonction que ce soit sur notre dock du Mac ou à côté de notre bureau.

Exemple 3 :

Enfin, dernier exemple pour ne pas vexer nos amis sur Windows, le bloc-notes. Les détails sont là, les spirales pour relier les feuilles etc. Même fonction, même côté réaliste.

 Voilà je pense que vous avez compris ce que c’est que le Skeuomorphisme. Maintenant vous pourrez le ressortir en soirée. Vous allez voir, ça aura son effet 😉

 

Et le Flat Design ?

 

Ha oui le Flat Design. Oui parce que c’est un peu pour ça que vous êtes ici très certainement. Cette tendance, qui est à l’opposé de notre Skeuomorphisme, consiste à créer un design web très épuré, minimaliste. On est loin de l’ancienne tendance Web 2.0 qui consistait à mettre des effets de lumière, etc. C’est ce que l‘on appelait les effets “Glossy”.

Couleurs, textures et fonts

Le Flat Design exclu toutes textures, d’effets d’ombres portées car justement c’est ce qui donne du volume à votre design. Exit les effets et les textures, place aux aplats de couleurs ! Cette tendance vous donnera une interface plus claire et lisible. Le choix des Polices de caractères et de la palette de couleurs seront importants. Pour le Flat Design, il faut utiliser des couleurs vives pour faire ressortir l’essentiel (un bouton de contact, un lien, le menu actif, etc.). Bien entendu vous pouvez mettre des couleurs un peu plus sobre comme un gris car le but n’est pas non plus de faire fuir votre internaute ou de lui piquer les yeux ! Les couleurs vives vont donner du pep’s à votre site, un côté dynamique. Pour la police de caractère, le choix est également important car votre site étant clair, c’est un élément qui va plus ressortir. Donc une police élégante qui va dans le sens de votre site est primordiale.

Responsive Design et Flat Design

Le Flat Design est idéal pour un site responsive. Il faut savoir que sur un site en responsive design, il n’y a pas vraiment de place pour les effets que l’on peut utiliser pour le Skeuomorphisme (encore lui !). La place d’affichage étant bien plus restreint que sur un écran d’ordinateur, vous devez aller à l’essentiel. J’insiste beaucoup sur ce terme « essentiel » car le plus important, c’est l’internaute qui navigue sur votre site. S’il arrive  et se retrouve perdu et noyé dans une ribambelle d’effets, votre site sera certes beau mais n’atteindra pas ses objectifs : fidéliser, voir rentabiliser si c’est aussi son but. Mais attention : ce n’est pas parce que c’est clair et minimaliste que ce n’est pas élégant et professionnel !

Enfin ce qui est important de souligner, c’est que votre newsletter peut être plus facilement adaptable aux couleurs et design de votre site . En effet, les textures en fond et effets n’étant pas vraiment compatibles avec certains logiciels de messagerie, vous pouviez avoir une newsletter assez loin de l’identité de votre site. Alors qu’avec le Flat Design, le champ d’action est plus ouvert. A noter, quand je parle de newsletter, je ne parle pas de mettre une image seule mais bien une vraie newsletter avec du texte où vous ou vos clients pourront avoir la main dessus et être autonomes 😉

La conclusion dans tout ça

Maintenant un avis personnel : Le Flat Design (qui ne semble pas non plus être né il y a une semaine) n’est pas une mode mais bien une tendance qui va être là pour longtemps. Les sites en Flat Design seront de plus en plus présents sur le Web grâce à l’élégance et le côté clair qu’il en ressort. Il est important dans un site de privilégier l’expérience utilisateur et l’ergonomie, et le Flat Design répond bien à tous ces critères en allant droit à l’essentiel (et oui encore). Mais ça ne voudra pas dire que l’on verra que des sites comme ça. Je pense sincèrement qu’il y aura autant de place pour le Flat Design que pour le Skeuomorphic Web Design. A chacun son utilité et ses besoins (responsive ou non ? clair ou chargé ?).

De géants du Web imposent déjà cette tendance dans leur interface (Google, Skype, Microsoft) directement sur leur interface logiciel et messagerie (Outlook.com par exemple). Même Twitter s’y est mis en imposant même une interface de base Flat Design dans leur outil Bootstrap bien connu par les développeurs Front-End et WebDesigner.

 

Mais vous, vous voulez un site comment ? Vous ne savez pas ? Alors venez c’est par ici nous allons en discuter 🙂

 

Stéphane

 

Metro UI - Flat Design

Skype - Flat Design

Microsoft - Flat Design

 

 

  Auteur : Stéphane
Experts réactifs à votre écoute
Amélioration continue
Agence Agile
Passez prendre un café
Applibox - Twitter Applibox - Facebook Applibox - Google Plus Applibox - Linkedin Applibox - Flux RSS
Inscrivez-vous
à notre newsletter
Si vous avez
un projet
Demander un devis
Applibox Groupe Wiphyse Lyon Agence web lyon

13, cours Verdun Gensoul

69002 Lyon

Applibox ©