Il est étonnant de voir comment les tendances évoluent vite en web design, et comment les modèles autrefois adulés se voient décrier du jour au lendemain. Avant, c’était la mode du skeuomorphisme choisie par Apple, aujourd’hui le monde du web ne parle que du flat design, cette esthétique démocratisée par Google, que beaucoup présentent comme la tendance majeure de 2013. On le sait, une tendance est par définition éphémère, pourtant il semblerait que le flat pose les bases d’un graphisme qui est là pour durer. Certainement grâce à sa plus grande force, sa simplicité, alors, le flat, durable ou éphémère ?

Rappel : définition du flat design

Le flat design est un style graphique associé au design de sites internet, c’est un sous-genre du courant minimaliste. Il se caractérise par des formes simples, sans textures, ni effets de volumes. Les couleurs, souvent vives sont utilisées en aplats. Certains éléments récurrents sont caractéristiques à cette tendance comme les icônes dessinées sous forme synthétique et l’utilisation de polices de caractères non standards, notamment dans les titrages, qui peuvent être de taille importante. Si le style flat fait beaucoup parler de lui en ce moment, il n’en reste pas moins que le graphisme épuré et minimaliste en web design n’est pas nouveau, dans ce cas pourquoi une telle popularité actuellement ?

Layervault Myspace

Le rejet du skeuomorphisme d’Apple

Pendant longtemps, en terme de design informatique, Apple a fait figure de leader. Le design de ses produits, de son système d’exploitation et de ses logiciels étaient considérés par beaucoup comme des exemples à suivre. Le style Apple, on peut le résumer par des lignes épurées associées à des interfaces très intuitives et user friendly. Pour Apple, user friendly signifie représenter des interfaces rassurantes qui imitent la matérialité des objets réels. Ça donne des fonds simulant la texture du cuir, de la moquette ou du bois, des boutons qui ressemblent à des interrupteurs, des sons qui évoquent le décollage d’un avion à réaction lorsque l’on envoie des e-mails. Cette façon d’aborder le design a un nom, c’est le skeuomorphisme.

Le skeuomorphisme d'Apple

Le skeuomorphisme caractérise un élément de design d’une technologie nouvelle qui s’inspire d’un élément d’une technologie plus ancienne. Le design d’Apple est donc skeuomorphiste. En tant qu’entreprise très observée par les designers, on peut penser qu’Apple a inspiré l’esthétique du web pendant des années. Les design présentés sur des sites comme Dribbble en sont une bonne représentation. Mais aujourd’hui le skeuomorphisme d’Apple n’est plus le modèle à suivre. Et on peut au moins trouver deux raisons à cela. L’essor des sites adaptatifs (le responsive web design) et les refontes 2012 de Google et Windows.

Le responsive web design

Le responsive web design ou site adaptatif, qui permet d’adapter un site à la taille d’un écran, rentre de plus en plus dans les habitudes de conception web. Beaucoup de designers intègrent même cette fonctionnalité par défaut dans tout leur site, considérant, à raison, qu’il s’agit d’un devoir d’accessibilité. Les contraintes du responsive imposent des éléments graphiques permettant une certaine souplesse d’utilisation, pour pouvoir facilement les modifier selon la taille de l’écran, sans alourdir le site. Ce qui veut dire que les composants vectoriels sont préférés aux images bitmap, plus rigides. Et pour ce genre d’image, le flat design est très approprié. Le flat a l’air donc bien parti pour s’attirer les faveurs des développeurs allergiques aux images complexes, issues des esprits torturées des designers ! Un bon exemple qui montre que design et développement peuvent faire bon ménage !

Windows 8 et le redesign de Google

En 2012, Google présenta la nouvelle interface de ses services en ligne, qui fut plutôt bien accueilli par les internautes. Puis ce fut au tour de Microsoft d’innover en lançant une toute nouvelle interface pour la version 2012 de son système d’exploitation : Windows 8. Le point commun de ces deux refontes est qu’elles posaient les bases de ce qu’on appelle aujourd’hui le flat design. Le choix des designers de ces sociétés étaient clairement centré sur le contenu, le graphisme se voulait très épuré et en retrait. Grâce à leur envergure, les deux mastodontes du web répandirent leur nouveau design sur des centaines de millions d’utilisateurs, en à peine quelques mois. Il n’a pas fallu longtemps pour que le flat devienne la nouvelle norme esthétique des sites internet. Mais comment savoir si cette tendance ne va disparaître aussi vite qu’elle est apparue ? D’abord un cours rappel sur ce qu’on appelle une tendance.

Wndows 8 Google redesign

La tendance est toujours éphémère

Si on prend la définition dans la mode, la tendance est par définition éphémère puisqu’elle correspond aux goûts associés à une époque. La tendance obéit à des cycles qui se succèdent sans cesse. Il est donc inévitable que le flat se démode un jour, comme le skeuomorphisme. Néanmoins, là où le flat se distingue, c’est que cette esthétique particulière est en phase avec des perspectives d’évolution du web, d’ordre technique et stratégiques.

Des sites plus légers

Les bonnes pratiques du web ont toujours préconisé des sites légers pour un affichage rapide des pages. Et l’on peut être au moins sûr d’une chose dans l’avenir, c’est que les gens ne deviendront pas plus patients, surtout pas sur internet. Le dépouillement graphique du flat design lui donne donc un avantage puisqu’il permet de faire des sites moins lourds. Un atout qui lui donne un avantage spécialement sur mobile ou le débit est moindre.

La fin du design bitmap

Un autre point qui tend à faire penser que le flat est là pour durer, ce sont les discours qui annoncent la fin progressive de la création du design sur des logiciels comme Photoshop au profit de la création directement dans le navigateur. Selon ces thèses, nous délaisserions la logique du pixel pour celle de la proposition. Vraiment finie le bitmap ? En tout cas le flat design, permet de réaliser beaucoup d’éléments directement en code, ce qui est pratique quand on veut limiter les images bitmap. De ce fait le flat serait tout a fait adapté a cette évolution possible du webdesign.

Un design simple est intemporel

Une des raisons pour laquelle l’Helvetica est le caractère typographique le plus utilisé dans le monde, après 60 ans d’existence, c’est sa simplicité. C’est ce qui lui donne la capacité de pouvoir s’adapter à un grand nombre de contexte différents et de dépasser les époques. On peut penser que la sobriété du flat lui permettra de se démoder moins vite que la normale, dans une industrie où un site internet se renouvelle en moyenne tous les 2 ans.

Une exécution plus rapide

Ce que je vais dire maintenant va en faire hurler plus d’un. Pourtant, par bien des aspects, il est plus rapide d’exécuter des design en flat qu’en skeuomorphisme. De fait, créer un bouton qui ressemble a un rectangle rose est plus rapide à faire qu’un bouton photoréaliste qui ressemble à un interrupteur lumineux.

skeu-flat

Mais que les choses soit bien claires, exécuter un design ce n’est pas la même chose que de le concevoir. La conception prend du temps, tout particulièrement quand on doit rendre les choses simples. Cependant, lorsque l’on aborde un projet alors que la direction artistique est déterminée, la réalisation en flat peut aller vite. La répartition du travail en équipe s’en trouve alors simplifiée dans les agences où la direction artistique et les déclinaisons des pages ne sont pas faites par la même personne. En effet nul besoin d’être la seule personne de la boîte capable de maîtriser les retouches high level du DA pour s’en sortir !

Conclusion

Ce qu’on appelle aujourd’hui, la tendance du flat design, n’est pas l’apparition d’un genre nouveau mais l’adoption et l’appropriation par un groupe majoritaire, d’une esthétique qui existait depuis longtemps et qui a fini par devenir une norme grâce à l’influence de plusieurs facteurs simultanés. Il se pourrait que cette tendance soit durable pour les raisons évoquées plus haut. Néanmoins, l’attirance du flat pourrait amener à une utilisation outrancière et gratuite. Nous pourrions alors retomber dans un phénomène de lassitude à l’égard du flat, à force de voir des sites qui se ressemblent trop. D’autres formes de web design pourraient alors apparaître. Parmi celles-ci on pourra faire l’hypothèses que le flat design évoluera vers de nouvelles sous-catégories, car la force du flat est dans sa rapide assimilation qui permet à chacun de créer son propre flat design. Dans tous les cas une tendance ne s’éteint jamais totalement. Elle retombe juste dans l’ombre. Ce qui veut dire que la prochaine tendance en web design est déjà là, quelque part, certains designer la développe sans le savoir. Elle n’a juste pas encore attiré l’attention. Il suffit qu’un jour arrive le facteur déterminant qui la fera exploser au grand jour. Et alors un nouveau cycle recommencera.

29 réponses

  1. Hello,

    merci pour l’article intéressant. Tendance ou mode, le « flat » design n’est simplement que l’application (réussi ou pas) des principes graphique élaborés il y a un petit moment déjà par le style international, sur le « web ». Au delà du « flat » design, je pense que ce qu’il y a retenir de ça, c’est, que la grille modulaire (flexible maintenant), la typographie, les formes géométriques de base ainsi qu’une bonne hiérarchie de l’informations restent nécessaires à toutes créations (que ça soit sur écran ou papier).
    Le « flat » met donc simplement en exergue ces principes fondamentaux, qui eux, persistent dans le temps.

  2. J’ai envie de dire « trop de flat tue le flat ». Il ne faut pas faire du flat parce que c’est tendance, mais parce que ça colle à l’image du projet, à ses contraintes techniques, etc… mais pas pour aller plus vite, car oui, ça va plus vite à développer.

    La tendance actuelle est surtout de copier sur le voisin, chose que Google ou Microsoft n’a pas fait et cela se ressent : du flat, mais du flat bien à eux.

    Bref, le skeuomorphisme (qui n’est pas à Apple hein ;-)) n’est pas mort, comme aucune tendance d’ailleurs, au contraire, avec le recul, on peut en réutiliser les fondamentaux en les rafraichissant. Le flat design est vraiment super adapté à l’évolution du web, mais il est important, je pense, de jouer avec quitte à reperdre du temps en design et en développement :-p.

    1. Entièrement d’accord. C’est pour ça que je pense que l’un des avantages du flat c’est aussi de montrer que simple ne signifie pas impersonnel. En fait le flat c’est un terme générique qui disparaitra pour laisser la place à des personnalités graphiques très diverses.

  3. Merci pour cet article ! Enfin un article français qui lance le début sur ce sujet. Pour moi, ce n’est pas une mode passagère, mais comme tu le dis si bien dans ta conclusion, cela va permettre de base pour une évolution dans le futur.

  4. Super article ! Comme tu le dis, le Flat Design répond tout à fait aux contraintes du Web mobile, et ne devrait donc pas « passer de mode » de sitôt !

  5. Merci pour cet article.
    Il repond a beaucoup de mes interrogations.
    Webdesigner de metier je suis confronté a ce sujet quotidiennement, car webdesign rime aussi avec integration. Et lorsqu’on gere une plateforme tres complexe de par son agencement, ses fonctionnalites, ses specifications, il est difficile pour un seul homme de coordonner tout ca avec une palette de developpeurs qui doivent jongler avec mes creas (je ne suis pas l’integrateur) ou mes centaines de bitmaps.
    Le flat ou almost flat repond donc a nos attentes de par sa realisation rapide et efficace en CSS sur beaucoup de points. Nous testons en ce moment ce courant graphique et il semble faire l’unanimite.
    Reste a tout remettre a plat (si je puis dire) pour passer notre plateforme dans ce design.

  6. Je suis presque entièrement d’accord avec cette analyse très bien renseignée. Cela dit, comme précisé dans un point, je pense qu’à force de faire du flat, tout les sites vont finir pas se ressembler. La différence se fera sur les couleurs et on va vite finir par se retrouver dans une impasse où il sera difficile de renouveler le design. Ce qui convient particulièrement bien pour le responsive design, ne sera peut-être plus le cas quand la navigation s’affranchira de la taille d’un écran (Holo-projection, 3D, que sais-je…) et on verra sans doute revenir le détail des textures et de nouvelles portes s’ouvrir à nous en terme de design. Heureusement, j’ai envie de dire. 😉

    1. Kaigen / I might put in more tusks just to survive aggro decks and remove huntmaster from my mix. Yeah I also considered putting kessig lands but, it can be far fetched. I'd rather focus it simply as remove almost all early threats until its time for desecration or vraska later. Two bonfires can be just fine. Question is, what can this deck pull up if later in a game, vraska and desecration can't help you? Stuck with lots of mana with no creatures. I don't want to rely on top decked bonfire. What can you say guys?

    2. "Muslim world's definition of victim as someone who tries, but fails to kill you." This is so true, but the west are the enablers, it takes 2 to tango and I can say that Israel is no better than the west because it is built on the same principles. Very astute analysis, amazing, kol ha kavod!

  7. Hello this is kind of of off topic but I was wondering if blogs
    use WYSIWYG editors or if you have to manually code with HTML.
    I’m starting a blog soon but have no coding skills so I wanted to get advice from someone with experience. Any help would be greatly appreciated!

  8. Bonjour.
    Je pense que ton article, bien que comportant bien des considérations intéressantes, que je partage (en gros, les rapports entre le flat design et contraintes du web multi-devices) établit une distinction dépassée entre skeuomorphic design et flat design.

    Tu opposes ainsi un skeuomorphic design “lourd”, fastidieux à créer et à modifier, peu ou pas adaptable à de multiples tailles d’écrans et résolutions constitué d’éléments graphiques réalisés avec des logiciels de traitement d’images et un flat design léger, basé sur des grilles de mise en page, rapide à créer et à modifier, adaptable à de multiples tailles et résolutions d’écrans réalisé en CSS.

    Or, des effets skeuomorphiques, en nombre toujours croissant, sont réalisables exclusivement en CSS : arrondis (pour certains, border-radius, c’est déjà du skeuomorphisme, si, si) effets de relief et de reflet, biseautages, ombres voire motifs complexes (voir la “CSS3 Patterns Gallery” de Lea Verou : http://lea.verou.me/css3patterns/).

    Il est donc possible, et toujours davantage, de réaliser des designs comportant de nombreux éléments skeuomorphiques tout aussi légers, basés sur des grilles de mis en page, rapides à créer et à modifier et adaptables à de multiples tailles et résolutions d’écrans que des flat designs.

    Donc, pour moi, le flat design relève tout autant de la mode (et de l’intégrisme) que de contraintes techniques.
    Autre chose, ton image avec boutons “Senden” en skeuomorphic design et en flat design me semble caricaturale (effet de cuir avec couture et boutons à la police peu lisible) et résulter d’un parti-pris anti-skeuomorphisme. Il est en effet possible de faire beaucoup mieux en skeuomorphic design en pur CSS.
    Par ailleurs, les boutons en flat design ne valent pas mieux que les autres en raison d’un contraste insuffisant entre le texte et le fond.

    Enfin, avec la suppression de certains effets skeuomorphiques utiles (effets de relief et de reflet, ombres) réalisables en pur CSS, le repérage et l’identification des éléments réactifs des pages web est moins immédiat, l’internaute n’a plus que la taille, la position et la couleur de ces éléments ou leur (seul) intitulé pour les identifier.

    Si je considère les exemples de design skeuomorphique et non skeuomorphique de l’image illustrant l’article “Skeuomorphisme: une application Calendrier, c’est mieux quand elle ressemble à un calendrier”, le design skeuomorphique (applications Calculatrice d’un iPhone, et de Windows Phone), la version skeuomorphique m’apparaît autrement plus affordante “L’affordance est la capacité d’un système ou d’un produit à suggérer sa propre utilisation” (http://fr.wikipedia.org/wiki/Affordance).

    @Spir : “Ce qu’on appel le flat design n’est rien d’autre qu’un design minimaliste bien conçu”. Si je comprends bien ton affirmation, un design minimaliste mal conçu n’est plus un flat design ? Donc, le mauvais flat design n’existe pas, il n’y a que du bon flat design. Difficile de critiquer le flat design dans ce cas :-p

    1. Que l’ont soit dans du skeuomorphisme ou du flat, je pense que l’important est bien sûr d’atteindre l’objectif que l’on s’est fixé. Après tout on peut très bien faire un design skeuomorphique très peu affordant et un design flat avec de très bons contrastes. Le flat est une tendance qui passera (d’ailleurs Google essaye déjà de le reléguer aux oubliettes avec son material design https://www.google.com/design/spec/material-design/introduction.html), l’avenir verra le retour à la matière dans le web design quand on aura digéré les nouvelles contraintes liées à « l’élasticité » du web design d’aujourd’hui.

      1. Très, très bon référentiel. Un cran supérieur au flat design, ou plutôt une application concrète de cette «tendance».
        Google renchérit encore lorsque Apple s’aligne.

  9. Ce billet date, mais je suis tombé dessus par hasard et la question est intéressante. Car il y a quelques années on disait que le flat design mourrait comme les autres tendances du web.
    Petit aparté, google n’a pas en aucun cas démocratisé le flat design au passage. Google avait déjà sa ligne directrice dans son interface en 2013 qui était dans la même démarche que twitter au niveau design de l’époque mais en un peu plus épuré.
    Le Flat design dont l’appellation notamment est né petit à petit de concept de maquette de designer diverse ainsi que la nécessité de créer des design esthétiques et facilement maintenable pour l’approche responsive et mobile.
    Notamment Microsoft avait pondu son interface style metro (modern ui) en plus flat que flat, mais une idée ingénieuse (oui microsoft en est capable aussi).
    Notamment avec la recherche de theme plus facilement maintenable et esthétique plusieurs designer on convergé vers un design Flat des aplats de couleurs sans trop de fioritures et bye bye le style glossy hérité du web 2.0.
    Même avec la tendance windows vista on restait dans le glossy avec de légers dégradés en surface.
    Avec l’évolution technologique et la surcharge de travaille à aborder, nous avons du entrevoir de nouvelles approchent plus facilement maintenable tout en restant esthétique.
    Ce n’est que tardivement et progressivement que google s’est orienté lui aussi vers le Flat design et plus communément le « Matérial Design » qui a suivit lolipop. Dont microsoft avait déjà tracé les lignes de leurs nouvelles interface metro bien avant lolipop.
    Pour le coup Apple était arrivé bien à la traine côté interface jusqu’à attendre le style yosemite combinant une interface Flat Design avec du windows Aero transparency (d’ailleurs ils ont eu raison car le style Aero vista plaira toujours, je parle juste de la transparence je précise ! lool).

    Ce design va rester un bon moment avec nos technologies environnantes, ainsi que la structuration des applications ou site web. L’identité visuel hélas aura un côté similaire pour beaucoup de sites, mais c’est un investissement de bon sens lorsque l’on sait le coût que peut engendrer la maintenabilité des applications.

Laisser un commentaire

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