Le Flat Design, plus qu’une mode ?


Depuis de nombreuses années il est amusant d’observer la valse des tendances dans le Design digital.  Comme les modes, les tendances se suivent et obéissent à des cycles qui se succèdent sans cesse.
Avec l’avènement de l’iPhone en 2007,  nous avions tous adoptés la mode du “Skeuomorphisme”. C’est désormais le “Flat design” qui est devenu incontournable sur les écrans web et smartphones. Mais s’agit-il d’une nouvelle tendance éphémère ou d’un style qui va pouvoir évoluer et s’inscrire dans la durée ?

La définition de ce qu’est le Flat Design au regard du skeuomorphisme et l’analyse du nouveau design iOS7 par Apple, peut nous permettre de mettre en perspective cette tendance et de bien envisager sa probable évolution.

FLAT DESIGN ? SKEUOQUOI ? 

Le Flat Design n’est pas une tendance récente dans le graphisme. Son retour récent correspond à l’arrivée de Window 8 et du style graphique dit “Modern UI”. Mais avant cela et pour bien comprendre son origine, il est intéressant de faire un parallèle avec le mouvement artistique allemand né avec l’école de Bauhaus (1920-1960).

A cette époque et dans un contexte de reconstruction,  le mouvement des Bauhaus développe un style graphique qui permet de créer pour tous, ce qui sous-entend créer en quantité industrielle et à bas coût. L’objectif était de faire beaucoup avec peu et d’aller à contre courant de mouvements artistiques élitistes du XIX siècles qui s’acharnaient, notamment en peinture, à reproduire le réel à la perfection.

Bauhaus

Exemple design style « Bauhaus » par Josef Albers  (1888-1976)

 

L’influence du style “Bauhaus” a été déterminante dans l’évolution du design moderne car il a développé l’idée qu’un produit pouvait être à la fois simple, esthétique, fonctionnel et accessible au plus grand nombre.

Le parallèle avec le design digital actuel est édifiant. A l’opposé du skeumorphisme imposé par l’iPhone et Apple, qui consiste à reproduire fidèlement des objets physiques ou matériaux à l’apparence réelle (ex: la boussole iPhone designé comme une vraie boussole), le Flat Design se caractérise par une volonté de faire simple et fonctionnel, en évitant les effets de volume, les reliefs et autres textures.

Skeuo-vs-flat
Application boussole iPhone : Skeuomorphisme vs “Flat Design”type i0s7

Désormais le Flat Design privilégie des mises en pages épurées, utilisant des formes facilement identifiables, des aplats de couleurs (souvent vives), et des typographies non standard et souvent de taille imposante.

Plus que jamais, le Flat Design trouve sa place dans le design digital, notamment sur les écrans tactiles où l’ergonomie et les principes de navigation se veulent plus clair, plus simple et plus accessible.

 

flat-design-app

Exemple de Flat Design sur Smartphone

 

flat

Exemple de Flat Design by OCTO

 

Et demain me direz-vous ? Tout porte à croire que ce style va évoluer et être réinterpreté. A l’image de l’effet “Long Shadow” qui permet d’apporter de la profondeur au Flat design, les idées  et les challenges ne manquent pas, c’est d’ailleurs ce qui fait le charme de nos métiers de designers.

 

Effet "long Shadow" sur des icones Flat design

Effet « long Shadow » sur des icones Flat design

 

LES ATOUTS ET LIMITES DU FLAT DESIGN

Les Avantages

- Moins d’éléments perturbateurs pour le cerveau de l’utilisateur (texture, reflet et effet volume …)

Plus de souplesse dans l’évolution d’une charte graphique

Style parfaitement en phase avec les perspectives d’évolution du web et notamment du responsive design.

 

Les Limites

- Comme toute tendance, on va voir de plus en plus d’interfaces Flat Design, mais le risque est que beaucoup d’entre elles deviennent impersonnelles

Simplicité ne veut pas dire simpliste. Comme le note Apple, « la simplicité est assez compliquée » et l’erreur serait de penser que tout le monde peut réaliser une belle interface Flat Design.

- Attention à ne pas tomber dans le piège du minimalisme. Il ne faut pas privilégier des choix esthétiques et faire des interfaces trop dépouillées, au détriment des besoins utilisateurs.

Trop de flat Design peut finir par lasser. Pour s’inscrire dans la durée cette tendance doit pouvoir évoluer et être réintéprétée par les designers.
Le plus compliqué sera désormais de concevoir des interfaces Flat design tout en conservant une forte identité de marque… c’est justement le challenge qu’a relevé Apple avec l’iOS7.

 

LE SKEUOMORPHISME EST MORT, VIVE LE FLAT DESIGN « À LA MODE » APPLE ! 

Comme souvent avec Apple, il est difficile de ne pas avoir entendu parlé de l’arrivée du nouvel iOS7 et de la métamorphose du design d’interface des iPhone.

Cette petite révolution reçoit un accueil très mitigé et beaucoup de fans ou de détracteurs critiquent ce nouveau look car trop semblable à celui d’Android ou de Windows Phone. Apple a annoncé que “l’iOS7 est le plus grand changement dans l’iOS depuis l’iPhone “ mais dire que Johnatan Ive, Senior Vice President of Design chez Apple et ses équipes n’ont fait que copier les autres est une « insulte » au design.

Le Skeuomorphisme a marqué son époque et ce fut une stratégie gagnante pour Apple, qui a su familiariser tout en douceur les utilisateurs à l’usage du tactile, en calquant le réel et leur donnant ainsi des repères concrets.

Apple était rendu au bout d’un cycle avec son style d’origine et a su prendre un virage dans sa stratégie de création, plus en phase avec les attentes du marché et les récentes évolutions techniques des systèmes d’exploitation.

Désormais, la simplicité est le maître mot du design de l’iOs7, mais Apple n’a pas fait du flat design “à la android”, ni du Modern UI “à la windows”.

Apple a su s’approprier le style “Flat design” en le réinterprétant et en proposant un design original. Le nouveau style graphique joue toujours sur l’affordance, c’est à dire la capacité d’un objet à suggérer sa fonction, mais d’une manière plus suggestive et plus raffinée.

Désormais, les 3 grands principes de conception pour iOs7 recommandés par Apple sont “déférence”, “Clarté” et “profondeur” :

Déférence: L’interface ne doit pas s’imposer aux utilisateurs, mais elle doit leur permettre de mieux comprendre et de mieux intéragir avec le contenu.

La clarté : Les textes offrent une meilleure lisibilité dans toutes les tailles, les icones sont plus claires , l’habillage des interfaces plus subtile et plus approprié à la fonctionnalité de l’application. 

Prenons l’exemple des icones. Il n’y a plus d’effet “Gloss”, de texture ou de contour, mais on retrouve toujours cette sensibilité tactile propre au look iPhone.  Désormais on utilise des aplats de couleurs flashy, des contrastes plus marqués et les signifiants des illustrations sont plus directs plus explicites et sans “bruits visuels”.

 

ios6-vs-ios7-icones

Icones iOS6 vs iOS7

La profondeur: Les couches visuelles et les mouvements d’interactions plus réalistes permettent d’améliorer l’expérience utilisateur et facilitent la compréhension.

Pour obtenir de la profondeur, la technique est d’utiliser de la transparence sur les composants d’interfaces (barres de navigation, barres d’outils, barres d’onglet …).
Le contenu de l’application reste visible en toile de fond, ce qui permet d’accentuer ce ressenti.

 

transparence

La transparence apporte de la profondeur sur iOS7

Vous pouvez consulter les guidelines apple sur le site internet suivant: https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/

Au final, le nouveau design iPhone version iOs7 offre le meilleur des deux mondes, avec le réalisme et le côté intuitif propre au “skeuomorphisme” combiné à la simplicité et la clarté du “Flat Design”. Désormais, Apple donne tout son sens au slogan “Less is more”.

CONCLUSION

A l’image de ce que propose Apple avec l’iOS7 ou des effets de style comme le « Long Shadow »,  le Flat design est une tendance qui possède un bel avenir et un fort potentiel d’évolution.

Mais les tendances finissent  inévitablement par se démoder un jour et le flat design passera donc de mode comme le skeuomorphisme avant lui. Mais aujourd’hui, il s’agit d’un style graphique parfaitement en phase avec son temps et qui apporte de la clarté à l’ensemble de l’expérience utilisateur. Le Flat design est également un bon exemple qui montre que design et développement peuvent enfin faire bon ménage !

 

8 commentaires pour “Le Flat Design, plus qu’une mode ?”

  1. Dans les critères de différenciation Apple évoqués, la profondeur est finalement la seule différence avec d’autres implémentations du Flat Design, comme Modern UI. Mais la liste serait incomplète si on ajoutait pas le choix de la palette de couleur et des arrondis de blocs. Car si on enlève l’arrondi des bloc, et qu’on dé-pastelise les couleurs, le design Apple n’est plus vraiment différentiable du Flat UI qu’on trouve ailleurs.

    Enfin, il serait dommage de parler de Flat Design sans évoquer le contexte d’utilisation, de plus en plus mobile. En effet, le Flat Design n’est pas qu’UI, mais aussi UX…

    En faisant la part belle aux espaces négatifs, en remettant en avant la clarté des polices, le Flat Design permet de contrecarrer les problèmes douloureux du Design mobile : les micro-mouvements qui fond perdre la focale et la déconcentration de l’utilisateur. En lui offrant des repères visuels forts, on lui permet de moins facilement décrocher, et de raccrocher plus rapidement à l’interface.

    C’est pourquoi, même si ce n’est pas toujours explicite, on retrouve une grande présence Flat dans la plupart des design Responsive du moment…

  2. Merci pour votre article. Le Flat Design a la mode Apple…
    Marrant comme les écoles deviennent des chapelles. Les trollistes Apple et Samsung se déchainent, quid de l’oeuf, quid de la poule? Qui de l’oeuf a pondu la poule qui de la poule a pondu l’oeuf? la preuve que votre billet est très bien documenté… bravo

    Du coup, je tente ma définition: Le Flat Design, c’est quoi? Une tendance graphique que vient de populariser le nouvel IOS d’APPLE,et aussi un style graphique dédié aux usages multi-screens qui consiste à appliquer à l’expérience utilisateur les règles, la science et l’art du minimalisme? Less-is-more. Le Flat Design, c’est quoi?
    C’est beau.

  3. On retrouve également le Flat Design dans la dernière version du célèbre Framework CSS BootStrap.

  4. [...] See on blog.octo.com [...]

  5. Personnellement j’ai toujours un peu dénigré les styles précédents: gif et couleurs horribles des années 90, skeumorphisme imposant, glossy façon plastique… Bref je ne peux que saluer la venue du flat design qui, pour moi, reprend un peu le souffle nécessaire d’essentialité qu’avait apporté le Bauhaus par exemple, ou la simplification dans le domaine de la signalétique par certains designers.

    Egalement, je salue le fait qu’il favorise la prise de conscience grandissante qu’un site web se travaille en amont (structuration, contenu, ergonomie, responsive etc) pour déboucher sur des solutions efficientes (choix des typos, des couleurs, des mots clés, des différents supports…)

    Et, plus personnellement, il me permet de faire le lien entre les concepts techniques que j’aime tant (grafcet, wireframe etc) et le graphisme.

    Pour peu que l’on ne cherche pas à faire du flat parce que c’est la mode, on peut y intégrer assez de créativité et d’originalité (dessin, photo, typos) et je pense que l’avenir du flat réside dans l’espace qu’il laisse à l’image.

    Parallèlement à ce style graphique, une autre tendance survole les pages du web, il s’agit des images pleine page (y a t il un nom pour cela?). Beaucoup de site présentent une belle photo pleine page (responsive, bien sur :) et parfois un simple titre, une fonctionnalité, pas plus. Le site Wetransfer en est un exemple.

    Et pourtant, je constate que le flat présente des limites significatives.
    Il m’arrive de commencer une interface en flat design, parce qu’elle découle d’une réflexion brute (wireframe par exemple), puis, lorsque j’y intègre le contenu visuel demandé, comme une simple photo ou des logos, tout s’écroule.
    Difficile de répondre à une demande client, avec un site aussi simple que l’est Wetransfer…
    Et plus je dois répondre au cahier des charges, plus s’ajoutent les rubriques, les sponsors, partenaires, produits, menus, et tout ce qui a été vendu de fonctionnalités ( et je ne vous parle pas des « inévitables » logos et modules facebook , twitter, g+, pinterest etc), bref et plus j’en ajoute, plus le flat semble crier au meurtre!
    Et il est fou de voir comme un simple logo jaune et mauve ou une photo de la boutique du coin peut tuer un graphisme. Mais je ne critique ni la qualité d’une commande, ni les commerçants « du coin ».

    Comme tous, je vois un grand nombre de beaux sites web, bien graphiques, flat, photo en pleine page, parallaxe…mais je vois aussi la réalité des choses, de ces commanditaires qui vous demandent de mettre en ligne des produits et services locaux surchargés, et qui ne comprennent pas les raisons d’une ergonomie – et d’un business model – simples et efficaces.

    Je ne m’interroge non pas sur un débat qui me semble puéril: faut il faire du flat design, ou est-ce une mode, mais plutôt sur quel en est l’usage? quelles en sont les limites? et que doit on penser « après » le flat design?

    Voyez l’image que l’on a de l’architecture minimaliste de nos jours. De l’immeuble de banlieue, aux modernes et luxueux lofts, les limites de l’épuré peuvent parfois prendre des aspects décevants.
    Faut il pendre les architectes? Comme l’écrit Philippe Trétiack, et un jour, certains web designer se feront ils pendre… à leur dépend?

    Aussi il serait intéressant, non pas de chercher à tuer le flat design, ni à le dénigrer, mais de commencer à comprendre un peu mieux cette méthode, ses limites et ses ouvertures graphiques et fonctionnelles. Ceci afin que les résultats des affrontements (tout relatif qu’il soient) entre commanditaires et architectes du web design ne nous amènent pas à dire un jour « bon sang, qu’est ce qu’ils sont moches les sites des années 2013″.
    Mais aussi parce que le métier de web designer semble glisser vers un métier de business designer, et que le flat semble directement lier business modèle et ergonomie de façon efficace (voyez facebook, twitter, l’évolution graphique de Google…).

    Peut être qu’un prochain mouvement pourrait le bousculer sans le tuer, tel que le mouvement Memphis l’avait fait face au Bauhaus? A mon avis ce n’est pas le long shadow qui va y parvenir…
    La réponse sera t elle dans la photographie?
    Et enfin, les web designers n’ont ils pas intérêt, désormais, à apporter des solutions d’abord en terme de business model, afin de les traduire, ensuite, en solutions « photo/graphique »?…

  6. [...] activité. Par exemple, qui n’a pas déjà entendu parler de Responsive Design ou encore de Flat Design ces derniers temps [...]

  7. Je n’ai pas eu le courage de lire tout le commentaire de Matthieu, je voulais juste préciser quelques petits trucs qui me sont venu à l’esprit en lisant l’article, donc veuillez m’excuser si une répétition d’un autre commentaire a lieu.

    « Apple a annoncé que “l’iOS7 est le plus grand changement dans l’iOS depuis l’iPhone “ mais dire que Johnatan Ive, Senior Vice President of Design chez Apple et ses équipes n’ont fait que copier les autres est une « insulte » au design. »
    Très sérieusement, ce qui m’irrite en premier lieu est de dire que le design d’Apple est nouveau et révolutionnaire. Je n’irais évidemment pas à dire qu’ils ont copié, mais il est clair que le flat design existe depuis belle lurette ! Donc non ce n’est pas une révolution. Le iPhone 5 est tout sauf une révolution. Certes des nouveautés au niveau software (et encore il y a un peu de « copie » chez les autres) et peut-être un peu au niveau hardware. Le skeuomorphisme tout comme le flat design est un style comme un autre. J’ai été content de voir le nom de Bauhaus apparaître ici. Bauhaus a été un des acteurs fondamentaux dans ce qui s’appelle l’art minimaliste et a été une grande source d’inspiration pour Steve Jobs ! Le design d’aujourd’hui n’est pas apparu en un claquement de doigts ^^
    Personnellement j’apprécie le minimalisme, mais je trouve que d’un coup, comme Apple utilise ce design, bim on voit partout ce design, et pour faire court : « Trop de flat design tue le flat design ». Ce n’est pas la première fois, rappelez-vous le « aqua design » (http://img.gawkerassets.com/post/4/2012/10/poopy.jpg).

  8. Un article très intéressant (même s’il date un peu)
    http://www.gizmodo.com.au/2012/10/opinion-the-real-meaning-and-future-of-apples-designed-in-california-mantra/

Laissez un commentaire