Flat design vs skeumorphisme: Le match !

Flat design contre Skeumorphisme: de quel bord êtes-vous ?

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 un petit sondage :

• Laquelle de ces icônes de « Vidéos » préférez-vous ?
test-icon-video-ios-vs-google

• Laquelle de ces icônes de « Agenda » préférez-vous ?
test-icon-agenda-ios-vs-google

• Laquelle de ces icônes de « Photo » préférez-vous ?
test-icon-photo-ios-vs-google

Réponses

1 – Micorsoft Windows 8.
2 – Apple iOS 7.
3 – Apple iOS 6
4 – Google

Skeumor-quoi ?

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. 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 !

Flat design

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.

Le cas google

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 :

Le cas Apple

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à !

ios7-vs-ios6-icons

Le cas Microsoft

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 !

flat-designwindows-8.1

L’innovation de rupture

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.

Flat design: Les raisons du succès ?

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.

Les 3 influences du Flat-design !

Voici trois influences dont le Flat-design est issu :

Un design moderniste

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 !

Un design international

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 !

Le design du mouvement

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 !

Flat-design: Effet de mode ?

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 ?

21 Commentaires

  1. Jean-Baptiste Bouchet
    24 juin 2013 à 8:06 ·

    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…

  2. chOof
    24 juin 2013 à 2:25 ·

    « 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.

  3. 24 juin 2013 à 6:14 ·

    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 !!

  4. 24 juin 2013 à 9:44 ·

    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 :)

  5. 24 juin 2013 à 10:38 ·

    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.
    :-)

  6. chOof
    24 juin 2013 à 10:47 ·

    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

  7. 27 juin 2013 à 11:26 ·

    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!

  8. Rétrolien: Flat-design contre Skeumorphisme | web2Partner

  9. Clément
    3 juillet 2013 à 2:21 ·

    « 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…).

  10. Rétrolien: Le flat design, en veux tu en voilà !

  11. 8 juillet 2013 à 8:31 ·

    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.

  12. Jesse
    16 juillet 2013 à 5:10 ·

    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

  13. Rétrolien: Flat design | Padhead's Blog

  14. Rétrolien: |_þ T’es flat ou t’es pas flat ? | On Prend Un Café ? Agence de Réputation en ligne et de community management - Part 1

  15. Rétrolien: Tendance Flat Design | Campfire

  16. Delwiche
    9 octobre 2013 à 1:08 ·

    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.

  17. Trasca
    21 octobre 2013 à 10:36 ·

    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

  18. 4 décembre 2013 à 1:17 ·

    Excellent article, très instructif et très bien documenté. Bravo.

  19. DDZ
    8 avril 2014 à 2:00 ·

    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 ?

  20. Merlin
    27 mai 2014 à 1:27 ·

    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.

  21. Rétrolien: Création de site internet, les tendances en 2014

Laisser un Commentaire

L’agence Graphéine c’est :

Une agence de conseil en communication spécialisée en Image de Marque, en création d’identités visuelles et de projets de communication

Notre agence est répartie en deux studios de graphisme qui travaillent de concert. Une agence à Paris, et une agence à Lyon.

Notre agence édite un blog sur le graphisme, les identités visuelles, la typographie, et la communication en général.

Graphéine Lyon
3 rue Abbé Rozier
69001Lyon
T : 09 72 26 62 31


Graphéine Paris
3 rue des montibœufs
75020Paris

T : 09 72 31 15 95