Retour au blog

Blog

Qu'est-ce que le Flat Design ?

par Jean-Baptiste David le 04/12/2013 Design
5
flat_design

Le FLAT DESIGN est une ligne graphique sur laquelle nos productions récentes et futures s'inscrivent. Bien qu'il ne s'agisse plus d'un courant graphique résolument "nouveau" c'est un parti-pris que nous défendons et que nous assumons : celui de la simplicité, de la lisibilité et du multisupport. Le FLAT DESIGN recoupe justement ces trois aspects. Quelques précisions s'imposent pour ceux qui veulent en savoir d'avantage...

Le Flat Design, c'est quoi ?

Pour faire simple nous pourrions considérer que c'est l'inverse du skeuomorphisme… Ah, nous voilà bien avancés me direz-vous ?! Le skeuomorphisme est une tendance graphique qui exploite des éléments ornementaux (textures, effets) dans une interface graphique, pour donner des repères explicites à l'utilisateur… Apple (entre autres) a énormément utilisé ce principe jusqu'à récemment, notamment sur iOS (le cuir grainé pour l'agenda, l'effet métallique du micro pour enregistrer un mémo etc.)...mais la dernière version iOS 7 est clairement estampillée FLAT DESIGN.

Notre propos sera plus parlant avec cet exemple de calculatrice, du système d'exploitation Mac OSX. Grâce aux effets ombrés, le design des boutons rappelle une touche en caoutchouc d'une "vraie" calculatrice.

calculatrice-mac-iOS

 

Une calculatrice "FLAT" ressemble à cela :

calculatrice-flat-design(Crédits : http://forrst.com/posts/Calculator_Flat_Design-Gtz)

En supprimant les effets inutiles, on simplifie l'interface. On rend beaucoup plus lisibles les éléments qui la composent : boutons, menu…L'oeil se perd moins. Un bouton de calculatrice sans effets ni volume devient un aplat.

Le FLAT DESIGN doit son nom justement à ces "aplats de couleur" (aplat se traduit FLAT en anglais).

L'entreprise qui a mis le FLAT DESIGN au coeur de sa démarche multisupport, c'est Microsoft avec ses interfaces pour mobile et tablette. Le grand public a alors pu découvrir de façon récurrente les publicités pour ces interfaces FLAT, jusque là confinées dans les milieux des designers d'interfaces.

Windows8

Une interface graphique en FLAT DESIGN s'inscrit dans une logique centrée sur l'utilisateur, sur la portabilité, l'accessibilité et la simplicité.

Cette perspective d'efficacité et de sobriété est associée à une formule chère à un de nos clients (Patriarche & Co), énoncée par l'architecte allemand Mies van der Rohe : LESS IS MORE. Se concentrer sur l’essentiel : nous sommes particulièrement en phase avec cette maxime, tant il est vrai qu'un webdesign sans trop d'effets procurera bien plus de satisfaction.

Le parallèle avec l'architecture est intéressant, car au-delà de Mies van der Rohe qui a oeuvré au 20ème siècle, un autre courant artistique peut rappeler celui du FLAT DESIGN. C'est l'école Bauhaus (1919-1933), là encore au début du 20ème siècle qui mettait l'art au service de la fonctionnalité… Et des fonctionnalités dans un site web il y en a ! Comme quoi le web n'invente rien !

"Content is King" (bis)

Bill Gates a écrit cela dans un article en 1996. Cette affirmation ne s'est jamais démentie…et a souvent été reprise pour le référencement naturel (SEO) des sites web, où le contenu et sa qualité prédominent pour un bon ranking. Le contenu reste la clé de la réussite d'un projet, aussi bien pour le client final que pour le moteur de recherche qui va indexer les pages.

A l'heure actuelle, le contenu d'un site web peut être lu sur des supports aussi divers que variés, tant au point de vue des fabricants (Apple et Samsung en tête) que des systèmes d'exploitation (Android et iOS en tête).

En tant qu'agence web, notre rôle est de sublimer le contenu, c'est-à-dire de produire une interface qui valorise l'offre, les services ou les produits. C'est pourquoi nous réalisons des interfaces "FLAT", car c'est le meilleur moyen pour mettre en valeur votre contenu et le rendre lisible sur tous les supports...

Flat Design & Responsive Webdesign : l'union sacrée

Un autre atout du FLAT DESIGN est qu'il se prédestine naturellement pour un site en "Responsive Design" (site dont le contenu s'adapte à toutes les supports). Depuis deux ans, NOE interactive a fait du Responsive Design un axe différenciant de ses productions. C’est donc assez naturellement que nous sommes venus au FLAT DESIGN, car les deux approches sont complémentaires et servent l'expérience utilisateur.

Exemple d'un projet qui va sortir dans quelques semaines, l'accent est mis sur l'efficacité et la compréhension de l'action proposée :
castagniccia

Un changement nécessaire

Les habitudes ont la vie dure.. Aussi, il n'est pas toujours aisé d'accepter des designs sobres et épurés. Tout simplement parce que depuis des années, les interfaces web sont denses et chargées, et qu'elles concentrent dans des résolutions de 1024x768 énormément de contenu, que l'on croit essentiel ou important. Mais en réalité, on ne fait qu'augmenter la charge cognitive.

Sur votre site, c'est l'expérience d'utilisateur qui va déclencher un acte d'achat ou une compréhension du message que vous souhaitez faire passer. Si l'expérience est agréable et positive, les objectifs que vous vous êtes fixés seront atteints. Si au contraire l'expérience passée sur votre site web est agressive, chargée et complexe, alors vous risquez de transformer cette visite en échec...

Que penser alors de la réussite d'un site comme Cdiscount ? C'est un contre-exemple flagrant, c'est vrai ! Mais depuis son origine, Cdiscount a délibérément fait ce choix de l'abondance d'offres, de course contre la montre (compte à rebours) et d'effets visuels en tout genre. C'est un parti pris assumé par l'entreprise, c'est même une marque de fabrique du site web. Mais est-ce que ça peut s'appliquer à tous les sites ? Nous ne le croyons pas.

Notre parti-pris c'est celui de la lisibilité, de l'esthétique, des interfaces réfléchies et structurées.

Avant de découvrir dans ce blog nos futures réalisations, n'hésitez pas à prendre le temps d'observer l'interface utilisateur de l'environnement Google (Mail, Drive, Agenda, Google + etc..) ou le site des programmes d'Arte, deux beaux exemples de la nécessité du FLAT DESIGN pour rendre une interface complexe accessible à tous.

 

 

5 réponses à Qu’est-ce que le Flat Design ?

  1. Belle mise au point...qui donne envie de découvrir les prochaines réalisations de NOE interactive !

  2. There's no translation available to english(at 100%) or spanish, so it may be a lack of usability in your website.

    Thanks.

  3. author jbdavid

    @gerard marti Thank you for taking the time to make comment on our blog, we try to translate the main parts of the site, and we also would like to be able to do more, more often!

  4. Bonjour,
    très bon résumé du flat design qui explique bien pourquoi ce n'est pas qu'un nouveau phénomène de mode dans le design d'interface.

    J'en parle dans les mêmes termes sur mon blog : http://franck-grenier.fr/2013/06/25/windows-8-et-metro-ui-inspirent-la-nouvelle-tendance-flat-design/