En matière de design graphique, et particulièrement dans le domaine du design d'icône, il existe deux grandes tendances qui occupent les discussions depuis plusieurs mois : "Flat design" vs "Skeumorphisme" !
On observe ce débat à travers les 3 grands acteurs que sont Apple, Google et Microsoft.
Commençons donc cet article à travers une petite question : Laquelle de ces séries d'icônes préférez-vous ? 1, 2, 3 ou 4 ?
Pour informations, les voici d'où proviennent ces icônes...
1 - Micorsoft Windows 8.
2 - Apple iOS 7.
3 - Apple iOS 6
4 - Google
Le skeuomorphisme est un mot formé par la racine grecque skeuos qui signifie l'équipement militaire, mais aussi le costume, l'ornement, la décoration (Wikipédia) En matière de design, il décrit un élément visuel 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, par exemple, des éléments d'interface reproduisant des objets physiques (cf : les textures de cuir, de papier, de bois...). Les exemples les plus connus sont les icônes d'IOS 6 comme pour la plateforme de jeux Game Center, le calepin Notes ou encore la Boussole2.
Il apparaît évident que le skeuomorphisme répond à un besoin de continuité et de familiarité. Déjà à l'époque de nos grands-mères, la plupart de leurs appareils électriques reprenaient la forme de leurs équivalents manuels. Il s'agit là de l'affordance, c'est-à-dire la capacité d'un produit à suggérer sa propre utilisation.
Dans un souci de simplicité, et subjectivité assumée, il est de mon devoir de vous informer que le "skeumorphisme" n'est pas mon ami. Il sera allègrement mis dans le même panier que les effets Web 1.0, 2.0, 3.0...
Maintenant, essayons de comprendre pourquoi l'arrivée du Flat design réjouit tous les designers !
Le Flat design, à l'opposé du Skeumorphisme, prend le parti pris du minimalisme. Le Flat design exclut tout effet de profondeur, d'ombre portée, de reflets. Il privilégie les grands aplats de couleurs, sans bordures, sans chichi... Les défenseurs du "design-plat" affirment que les interfaces graphiques ne doivent pas chercher à imiter "visuellement" les fonctionnalités existantes, mais se concentrer l'essentiel, trouver le plus court chemin pour transmettre une information afin de faciliter la navigation et optimiser la lisibilité. Less is more prends tout son sens avec le Flat design.
Avant d'aller plus loin dans l'analyse de ces deux courants, on peut se pencher sur nos trois cas d'école, Apple, Google et Mircosoft.
En 2011, Larry Page, PDG de Google lance le chantier de la refonte de l'identité visuelle des produits et services de la firme de Mountain View. À partir de début 2012, commencent à apparaître les premières réalisations de l'équipe Chris Wiggins, le directeur de création en charge de cette refonte. Chris Wiggins a commencé à faire ses preuves quelques années auparavant en travaillant sur la conception de la fameuse barre de navigation noire que la société avait commencé à déployer en même temps que Google+.
Récemment, la charte graphique qui regroupe ce travail a été publiée. Il s'agit d'une véritable leçon de design, où le moindre pixel n'est jamais envisagé à la légère. Quand on connait l'histoire de Google, et comment ils ont su s'imposer grâce à une page de recherche toute blanche (no-design) face à la bavarde page de Yahoo, cette charte graphique minimaliste n'étonnera personne. La voici en détail :
Apple a une longue histoire avec le skeumorphisme. En travaillant sur leur première interface graphique, au début des années 80, et en introduisant le concept de "bureau" avec des icônes en forme de "dossier et de feuilles de papier", Steve Jobs et son acolyte ont durablement influencé le design d'interface. C'est d'ailleurs, en partie grâce à ce skeumorphisme qu'Apple est devenu l'un des leaders mondiaux 30 ans plus tard. Il faut rappeler qu'aux débuts de l'informatique, le concept d'interface graphique était totalement nouveau, et ces métaphores visuelles avec des objets anciens ont facilité la vie de millions de personnes !
Trente ans plus tard, force est de constater que les gens ont moins en moins besoin de repères visuels pour comprendre la fonction d'une icône. Apple semble s'en rendre compte et initie une timide transition avec sa nouvelle interface iOS 7. Probablement ont-ils raison de ne pas renoncer radicalement au "skeumorphisme" au risque de créer un effet de rupture avec leurs utilisateurs... L'exemple de Microsoft (cf : ci-dessous) est passé par là !
Si l'intérêt pour le design semble assez récent chez Microsoft, on peut leur attribuer le mérite d'avoir rapidement rattrapé leur retard. Pendant longtemps, la firme de Redmond a privilégié la technologie au détriment du design. Les interfaces sont devenues complexes, et ont oublié les utilisateurs. À partir de 2010, l'heure du changement avait sonné. La refonte de Windows phone fut le premier chantier ouvert. Aujourd'hui, Microsoft propose une expérience utilisateur harmonisée entre ses différents produits, de Windows 8 à la Xbox, en passant par la suite Office. Le Flat design a envahi les interfaces de Microsoft, et malgré cette apparente simplicité, ces dernières ont largement été saluées comme une réussite exemplaire en matière de design.
Seul bémol, et pas des moindres, en créant une telle rupture, ils semblent avoir commis une erreur stratégique. En effet, presque 8 mois après un lancement en grande pompe, les ventes ne décollent pas. L'une des raisons avancées est que la nouvelle l'interface rebuterait bon nombre d'utilisateurs. Exemple de rupture symptomatique, le bouton "démarrer" (qui sert en fait à éteindre !) avait légitimement disparu dans Windows 8. Mais, sous la pression des utilisateurs, il va se voir ressusciter à l'occasion de la prochaine mise à jour !
Il est probable que Microsoft ai fourni un bel exemple d'innovation de rupture raté. L’avenir nous le dira !
Petite digression autour de cette notion d'innovation de rupture. C'est une notion que l'on oppose à l'innovation classique dite incrémentale. En gros, quand l'innovation incrémentale se déploie dans un contexte connu en améliorant un produit ou service existant (ex : l'invention de l'ABS dans le secteur automobile), l'innovation de rupture aime s'aventurer en terrain vierge.
L'aventure d'Apple en matière de téléphonie illustre bien le concept d'innovation de rupture. Steve Jobs avait développé l'iPad, un projet qui devait lui permettre de lancer un nouveau type d'écran. Mais les premiers prototypes étaient décevants. Il confia alors son problème à un ergonome qui lui proposa la fonction de scrolling, permettant de faire défiler verticalement une page web avec son doigt. La navigation internet sur un petit écran devenait possible. Ce qui nous semble d'une évidente banalité, était à l'époque un élément de rupture majeure, tant est si bien qu'au lieu de lancer l'iPad, Apple a lancé l'iPhone, avec le succès qu'on leur connait. La rupture a créé un nouveau marché pour Apple. Là où l'objet "iPhone" est une rupture, son interface l'est beaucoup moins visuellement. Le skeumorphisme remplit alors complètement son rôle de doudou visuel : il rassure l'utilisateur !
La rupture impose un renversement des habitudes, qui n’est accepté que si certaines conditions sont réunies.
On parle généralement de trois piliers en matière d'innovation : La créativité (génération de nouveauté), la valeur ( d'estime, d'usage, d'échange) et la socialisation (maitrise de la conduite du changement).
Dans l'exemple de "Windows 8", la conduite du changement semble avoir été oubliée.
Outre que les utilisateurs d'écrans sont devenus suffisamment matures pour ne plus avoir besoin de "doudou" visuel, le succès actuel du Flat design peut probablement s'expliquer par un aspect plus technique.
La multiplication des formats d'écrans a donné naissance au Design Responssive. Vous savez, quand un même site s'adapte automatiquement à toutes les formes d'écrans. Dès lors, les éléments visuels doivent faire preuve de flexibilité. Exit les dégradés et les textures de fonds !
L'arrivée des web-fonts a également changé la donne. Jusqu'au début des années 2010, on était limité aux typographies système. Tout autre choix typographique passait par des images. Aujourd'hui exit les images, et vive les web-fonts !
Le Flat design s'inscrit dans cette tendance.
Voici trois influences dont le Flat design est issu :
Si le terme "Flat design" s'est démocratisé depuis les dernières années, c'est pourtant un concept qui prend ses sources au cœur des années 30, avec l'école du Bauhaus. "Ne pas ajouter de détails superflus, se concentrer sur l'essence même de la fonction" voila le premier des commandements modernistes.
Merci le HTML5, sans qui l'influence de Le Corbusier ne pourrait pas se faire sentir aujourd'hui !
Le style international (ou "style suisse") est la deuxième influence du Flat design. Particulièrement en matière de typographie, c'est un style qui met l'accent sur la lisibilité et l'objectivité. L'espace se divise en grille, la couleur s'utilise en aplat, la typographie est d'influence géométrique... Priorité au contenu et à la hiérarchisation des informations. C'est un style qui s'exprime à merveille dans les signalétiques aéroportuaires du monde entier (environnements denses en informations). C'est donc logiquement une approche qui fonctionne très bien avec les interfaces numériques, très denses en informations par nature.
Merci le CSS3, sans qui l'influence du Muller Brockmann ne pourrait pas se faire sentir aujourd'hui !
Dans les années 60-70, des motions-designers comme Saul Bass ont rajouté une troisième dimension aux deux précédents concepts du design (cf : Modernisme et Style International). N'allez pas croire qu'il s'agit là d'un vulgaire effet de volume !
En travaillant avec le temps et le mouvement, Saul Bass anime les principes du design moderniste et du design international. Par animer, il faut entendre "donner la vie" ! D'un design qui peut être jugé froid et neutre, l'animation va introduit de la narration... et donc de l'émotion.
Cette troisième influence est d'ailleurs celle qui semble la moins utilisée. Ce sera assurément un axe de développement important pour nos futures interfaces graphiques.
Merci le Jquery, sans qui l'influence de Saul Bass ne pourrait pas se faire sentir aujourd'hui !
Si l'approche du "Less is more" va évidement séduire la plupart de nos contemporains designers, il semble malgré tout évident qu'il s'agit aujourd'hui en partie d'un effet de mode. En 2008, en pleine apogée de l'effet "Web 2.0", nous écrivions "Laisse c'est mort", un article qui traitait des cycles de modes en matière de design. C'est un propos qui prend ici tout son sens, le voici :
"En matière de graphisme, comme en architecture, on oscille depuis des siècles entre deux voies… le purisme ou la surcharge (cf : Le Flat design ou le Skeumorphisme !). Si ces routes semblent imprévisibles, une seule constante : la voie de la surcharge est longue et progressive, tandis que la voie « minimaliste » est bien plus rapide et brutale !
Tout laisse à penser qu’au fur et à mesure du temps les choses se « chargent » de souvenirs, elles accumulent les couches de maquillages jusqu’à en devenir pompeuse, juste avant de revenir brusquement au minimalisme.
N’est-on pas passé du style gothique primitif, au gothique classique, puis flamboyant avant de passer brusquement au style renaissance en reprenant le dépouillement des canons antiques ?… puis l’histoire de continuer, le style renaissance de s’empâter peu à peu pour tendre vers le baroque… et pire encore le Rococo… avant de passer soudainement au style Classique (qui au regard du Rococo semble nu comme un ver ! )… architecture néoclassique [ ...] victorienne, Art nouveau… puis nouvelle rupture avec le mouvement Moderne dans les années 20-30 ! …
Bref, en typographie l’histoire doit être à peu près la même… Les capitales Grecques, puis les onciales Romaines, les minuscules Carolines, puis les gothiques enluminées… rupture soudaine avec les humanistes Italiennes… Garamond… Baskerville… Didot… Walbaum… et nouvelle rupture avec le Futura de P. Renner vers 1927…"
C’est peut-être simpliste comme raisonnement… mais force est de constater qu'en l'espace de deux ans, tous les plus grands acteurs se sont convertis au minimalisme. Une rupture rapide est brutale (pour Micorsoft !).
En suivant cette analyse, on peut être sûr, au cours de la prochaine décennie, de revoir les "ombres portées" pointer leur nez... sur la pointe des pieds !
Et vous ? comment-vous voyez l'avenir ?
@Ema : Merci de vos remarques. C’est rectifié.
Un site de graphiste/graphisme qui ne met pas une espace avant deux points, ça ne fait pas très pro ni très sérieux…
« Google » sans majuscule.
Et vous citez Wikipédia sans le mentionner. C’est classe.
(Si je faisais de même avec votre travail cela vous ferait-il plaisir ?)
« Le style international (ou « style suisse ») est la deuxième influence du Flat-design. Particulièrement en matière de typographie, c’est un style qui met l’accent sur la lisibilité et l’objectivité. L’espace se divise en grille, la couleur s’utilise en aplat, la typographie est d’influence géométrique… Priorité au contenu et à la hiérarchisation des informations. C’est un style qui s’exprime à merveille dans les signalétiques aéroportuaires du monde entier (environnements denses en informations). C’est donc logiquement une approche qui fonctionne très bien avec les interfaces numériques, très denses en informations par nature. »
Effectivement. Les sites web flat design procurent d’ailleurs habituellement la même émotion esthétique que des panneaux de signalisation.
Pour ma part, j’ai la faiblesse d’attendre autre chose des designs de sites web.
Merci pour cet article stimulant.
A mon avis, flat ou skeuomorphism, ce qu’il faut garder en tête, c’est que le monde est en perpetuel changement et tant mieux, car inértie est synonime de mort, ceci est valable dans tous les domaines. Ceux qui sauront en tirer les meilleures parties sont ceux qui savent observer avec calme et humilité le fruit de l’évolution, qu’il soit bon ou mauvais, en tentant toujours compte du contexte. Sortir du fanatisme, et se concentrer sur l’éssentiel à nos besoins, apprécier et valoriser la force de chacune de ses tendances pour vraiment évoluer.
Article très intéressant.
Aucun des deux mouvements ne rassemble toutes les qualités. Mais en terme d’utilisabilité et d’accessibilité le Flat design me semble un peu plus indiqué. Ces questions ne valent rien sans avoir défini le contexte. On sort d’une époque ou les sites internet en grande majorité ne respectaient pas les bases de l’ergonomie. Le design prenait une place importante puisqu’il était directement décliné du print.
Les 12 règles d’ergonomie d’Amélie Boucher, les règles d’accessibilité du W3C alliés au flat design renvoient à l’objectif premier des sites internet : faire correspondre un objectif clair à une interface optimisée pour l’utilisateur. Séduire est moins important que convertir. Une fois que les méthodologies de conception seront bien en place et que les missions essentielles des sites seront validées, il sera temps de redécouvrir des styles différents.
Merci pour cet article que je viens de découvrir et qui a le mérite de vouloir expliquer ce changement de mise en forme. Personnellement, je trouve que le style plat est comme son nom l’indique et à l’image du monde actuel : plat, pâle, fade, dépourvu de nuance et sans profondeur, se contentant du minimum… bref, ce n’est pas brillant !
Cela a été mis au goût du jour également sous GNU-Linux, particulièrement depuis l’arrivée de GTK 3. Heureusement qu’il y a le thème « Zukiwi » (http://www.deviantart.com/art/Zukiwi-313347909), merci à son auteur.
Quant à l’explication « se concentrer sur l’essentiel, trouver le plus court chemin pour transmettre une information afin de faciliter la navigation et d’utiliser au mieux la lisibilité » : à ce que je sache, le skeuomorphisme ne nous a jamais empêché de comprendre à quoi pouvait servir tel élément d’une interface graphique ni mis en difficulté lors de l’utilisation d’un logiciel ou d’un site.
Ce phénomène de mode me fait penser à un autre : le pédantisme pseudo-moderne à employer des anglicismes au lieu d’utiliser, correctement qui plus est, sa langue maternelle. Non seulement ces emprunts sont inutiles mais ils engendrent la confusion en livrant des faux-amis et des contre-sens. En conséquence, il n’y a plus de précision, plus de variété, plus de nuance. Tout cela, je pense, est lié mais à chacun sa vision du monde, n’est-ce pas ?
Excellent article, très instructif et très bien documenté. Bravo.
flat design = horrible, nul, moche, fiasco, raté, ânerie, bagatelle, ballot, bête, bêtise, broutilles, caducité, cancre, cancrerie, défaut, déficience, faiblesse, futilité, idiotie, ignorance, imbécillité, incapable, incapacité, incompétence, ineptie, inexistence, inintelligence, insuffisance, invalidité, manque, moins que rien, néantise, non-valeur, nul, nullard, pénurie, rien, ringard, sottise, stupidité, vide, zéro
Chouette article,
Pour ma part, j’aurais tendance à synthétiser les 2 approches et a établir un parallèle entre flat design et art abstrait et skeuomorphisme et hyper réalisme, si le flat s’apprivoise relativement bien en print web et hall de gare il l’est beaucoup moins en matière d’écrans réduit sur nos smartphones. Et si l’on s’extasie devant la finesse de cette typo et l’esthétique de cette icône tellement pur, ces situations prises isolément semblent convaincantes or dans l’expérience utilisateur globale, elle me parait franchement moins convaincante, ainsi sur les retina display de nos iphones, tout background un tant soit peu plus riche (autant dire toute photo) rend la lecture et la perceptions des icônes plus difficile que dans l’ancienne proposition graphique d’Apple, et pour peu que vous soyez un peu myope, là vous ne pouvez plus vous fier qu’aux intitulés des groupes icônes, le minimalisme prôner par Apple ce coup-ci ne me semble pas mûr, une tentative de rejoindre un effet de mode et non pas d’innover. Par ailleurs l’iconographie de ces milliers d’applications à peu prêt similaire dans une catégorie de fonctionnalités relèvera du casse-tête lorsqu’il faudra visuellement les différenciées et sortir du lot. Nous nous retrouverons avec tellement de synonyme visuels qu’il sera difficile pour l’utilisateur lamdba de se souvenir d’une application dans ce fatra de minimalisme tellement similaire. Je vous avoue ma déception pour ce flat design sur les smartphones, en rappelant que l’être humain appréhende le monde par ses yeux d’abord et son intellect ensuite, la reférence au réel simplifie la perception de l’intellect, favorise la mémorisation et l’efficacité pour retrouver ce que l’on cherche rapidement. L’abstraction dans ce cas-ci amène à une interprétation de l’intellect trop longue pour une recherche mobile qui se doit d’être la plus rapide possible. Sans doute tel le pendule qui oscille à travers le temps et les éternels retours, gageons que les prochaines prochaines version de flat design (qui ne s’appellera peut-être plus flat…) proposera un heureux mariage entre les extrêmes.
Très Très bon article! Qu’on le veuille ou non Flat design ou alors le style minimale gagne de plus en plus le terrain
Très bon article,
En effet les ombres portées sur le flat design comment à apparaître par-ci et là. Personnellement je trouve le genre très joli. Même si c’est un effet de mode, je pense que cette dernière peut durer très longtemps. En tout cas, suffisamment pour s’y intéresser de plus près sur nos projets de création graphique.
« En suivant cette analyse, on peut être sûr, au cours de la prochaine décennie, de revoir les « ombres portées » pointer leur nez… sur la pointe des pieds ! »
… pas besoin d’attendre une décennie : http://www.webdesignerdepot.com/2013/07/flat-design-casts-a-long-shadow/
=D
Merci pour l’article complet, qui met l’accent sur les vraies racines du ‘flat design’ (nombre d’articles et de commentaires qui pensent que ça sort de nul part…).
Whaou, c’était ma lecture de la matinée et j’ai trouvé ta réflexion très intéressante, pour ma part je pense que le flat est une évolution et non une tendance ou une mode. Certes on voit partout et tout le monde intégrer du flat dans des projets web, mais je pense aussi que c’est dû aux contraintes d’aujourd’hui: légereté, rapidité d’éxécution, cross browsing, responsive first.. Sur http://www.flatdezain.com je répertorie les meilleurs exemple de sites web en flat ou alors des ressources gratuites pour nos projets web. Si ça vous intéresse. EN tout cas très chouette article que je retweet!
Rien à voir avec Microsoft (j’ai moi même un Mac) mais je trouve juste dommage que les gens reprennent cette information erronée à tour de bras. Et pour rebondir sur votre pic depuis 2006 et le passage à Intel les Mac aussi peuvent-être considérés comme des PC ;P
Merci de vos commentaires.
@chOof : Désolé de véhiculer des poncifs erronés sur Microsoft.
Promis on achète un PC en 2014.
@Manoz: Bravo pour votre article aussi. Votre point de vue se défend. Dans tous les cas, il n’y a jamais une solution unique en matière de design. Pour chaque sujet, le contexte et les problématiques étant différents, il n’y a évidemment pas de solution préconçue à proposer ! …
Et puis tant que le BTP aimera les ombres portées, on continuera d’avoir des immeubles hideux en France.
:-)
Très bon article dans l’ensemble effectivement. Toutefois, j’ai pu relever quelques pétouilles. La plus grosse étant la suivante : « Maintenant, essayons de comprendre pourquoi l’arrivée du Flat-design réjouit tous les designers ! ».
Non, non et non. Le Flat ne réjouit pas TOUS les designers. Bien au contraire. J’ai publié il y a quelques jours un article similaire au votre sur le Flat. Je suis également passé par les points Microsoft, Google et Apple. J’ai eu plusieurs retours dont beaucoup de retours de designers professionnels qui eux, m’ont bien fait comprendre qu’ils n’aimaient pas cette mode du flat.
Pourquoi ? Parce que globalement, le flat est plus prise de tête qu’on pourrait le croire.
Premièrement car il faut penser à beaucoup plus de choses lors de la construction du design. « Est-ce que cet élément est un bouton ou une simple image ? Est-ce que si je clique ici il se passera quelque chose ? ». Vient ensuite la notion de « volumes » et de « niveaux ». « Comment faire pour rendre ce menu déroulant attractif ? » C’est toujours très difficile à rendre lorsqu’on parle de flat.
Deuxièmement, le flat est prise de tête car il y a, selon moi, la première de notions à prendre en compte : la cible. Est-ce que les internautes seront assez habitués au flat ? Peut-on vraiment faire un site corporate entièrement flat dans une cible plus industrielle ? Sur le site d’une entreprise de BTP ?
Je m’égare un peu mais encore une fois, selon moi, le flat est plutôt une plaie pour beaucoup de designers ne serait-ce que pour les points que j’ai cité ci-dessus.
Comprenez-moi bien. Je suis fan du flat et du skeuominimalism. J’adore ça et si ça ne tenait qu’à moi, j’en proposerais à tous mes clients / prospects. Mais non, on ne peut malheureusement pas. Je compte énormément sur Microsoft et son interface flat pour habituer les internautes afin qu’ils puissent mieux s’y retrouver sur un site. Vraiment. Prenez par exemple le site corporate de Microsoft. C’est flat, c’est propre, ergonomique, compréhensible et adapté du pékin moyen au geek le plus acharné.
Voilà. En tout cas on ne m’enlèvera pas que malgré ces quelques points, cet article est bien construit et très intéressant :)
L’article est superbe ! Merci pour ces définitions, explications et démonstrations par l’exemple ! Pour répondre à jean baptiste il est possible que ça reste quelques années !!
« le bouton « démarrer » ( qui sert en fait à éteindre !) » Cette information est reprise partout alors qu’au final 1. le bouton « démarrer » n’a plus de nom depuis Windows Vista (il reste le tooltip), 2. Ce bouton ne sert pas du tout à éteindre l’ordinateur mais il est un point d’entrée unique pour accéder aux ressources de l’ordinateur (dont l’option de l’éteindre). Peut-être que la traduction française n’était pas la meilleur mais s’il vous plait arrêtez de propager de tels propos.
Très bon article, plaisant à lire. L’ histoire nous dira si le flat design est juste un effet de mode ou réellement un mouvement graphique. A suivre…