Petite leçon de vocabulaire spécialisé ! Vous avez probablement déjà entendu les termes « skeuomorphisme » et « flat design ». À quoi correspondent-ils exactement ? Il s’agit de tendances actuelles en design. Chacune d’elles correspond à une technique et à un style bien spécifiques. Le skeuomorphisme imite les différents matériaux et semble souvent familier, tandis que le flat design est minimaliste et utilitaire, tout en restant fidèle à son médium.

Ces deux styles s’opposent et représentent deux chemins distincts dans la vie d’un graphiste (surtout dont le travail est en rapport avec l’expérience utilisateur). Au début d’un projet, de nombreux designers commencent par déterminer dans lequel de ces deux mondes il va s’orienter. Pour vous aider dans cette démarche, cet article examine chacune de ces deux tendances en détail. Nous verrons également le nouveau jargon design de Google, le Material Design, qui rassemble les deux courants esthétiques.

Skeuomorphisme

Le terme skeuomorphisme vient du grec « skéuos » (conteneur ou outil) et de « morphḗ” (forme). Mais qu’est-ce que « contenir une forme » peut bien vouloir dire ? Voyons plutôt dans quel contexte le terme est né.

sk1

Vous voyez la répétition des cubes qui ornent ce bâtiment grec ? Ces cubes (appelés des denticules) sont mis ici pour recréer les motifs des chevrons en bois qui soutenaient le toit des vieux bâtiments.

Étant donné que, en Grèce, les bâtiments étaient faits en bois avant d’être faits en marbre, on peut penser que les architectes de l’époque aient voulu contenir ou recréer une forme qui leur était familière. On peut imaginer que d’imiter une structure en bois avec du marbre ait facilité les gens à se faire à une nouvelle technologie ou tendance de l’époque.

sk2

Depuis la Grèce Antique, le skeuomorphisme s’est invité à maintes reprises. Dans les années 50, le coût de production des carrosseries en bois étant devenu trop élevé, Ford commence à explorer de nouveaux matériaux. Et parce que les consommateurs étaient attachés au bois, l’entreprise opte pour des panneaux en faux bois pour ne pas dérouter ses clients.

En ce qui concerne la bouilloire électrique, on retrouve la forme originale de l’objet d’antan (base large, socle semblable à une gazinière, bec verseur), alliée à la technologie moderne. Cette technique permet de rassurer les consommateurs en jouant sur la nostalgie, pour les habituer à une nouvelle technologie. De la même manière, le « tofu dog » est en tous points semblable au traditionnel « hot dog ».

À travers ces exemples, on comprend mieux la définition du skeuomorphisme : un design qui nous est familier et qui rassure le consommateur.

Controverse et authenticité

Le skeuomorphisme est très controversé. Les détracteurs dénoncent le faux et le manque d’authenticité. Pourquoi remplacer une bouilloire traditionnelle en métal par une bouilloire de mauvaise qualité en plastique ? Le skeuomorphisme est aussi souvent utilisé pour donner un aspect plus haut de gamme à des produits qui sont autrement de qualité moyenne. Ceux qui ont acheté une Ford Caprice, vue plus haut, ont peut-être eu le sentiment de tricher et les végétariens mangeurs de tofu dog remettront en question les standards (et valeurs) des carnivores.

Si le skeuomorphisme a sans aucun doute aidé le déploiement de nombreuses avancées technologique, il y a toujours deux revers à une médaille.

Skeuomorphism in UI design

Le passage à l’ère numérique est probablement l’un des plus gros changements de notre époque. Les ordinateurs, les téléphones et les tablettes sont des appareils très complexes par rapport aux anciennes technologies. Nous avons rassemblé des centaines de fonctionnalités dans de tout petits objets rétroéclairés remplis de pixels.

Créer des interfaces intuitives pour des objets aussi denses et parfois complètement abstraits est un vrai défi. Comment rendre un outil aussi puissant et complexe facile à utiliser pour le consommateur moyen ? Vous vous en doutez, la familiarité et le skeuomorphisme font partie des techniques utilisées par les designers UI.

Apple a choisi des icônes qui rappellent le symbole du téléphone classique (bien que les smartphones d’aujourd’hui ne ressemblent en rien aux « combinés téléphoniques » d’avant), et les emails sont représentés par une enveloppe, bien que complètement inutile pour envoyer « un courrier électronique ». Tout comme pour le tofu dog, nous savons que les fonctionnalités que nous utilisons n’ont pas la forme du symbole qui les représente. Mais ces formes familières permettent aux utilisateurs d’iOS de reconnaître facilement les fonctions qu’ils cherchent.

De plus, les icônes d’iOS sont légèrement brillantes et biseautées pour leur donner l’allure de vrais boutons. Ce qui permet également aux utilisateurs de savoir que ces éléments sont interactifs et qu’ils peuvent appuyer dessus comme s’il s’agissait de vrais boutons, alors que l’objet qu’ils ont dans les mains est entièrement plat.

Creative Dash va encore plus loin dans le skeuomorphisme et créé un bouton « pâtisserie » hyper réaliste. Cet exemple est tellement exagéré que ça en devient presque sarcastique. On note un petit clin d’oeil aux nombreux designers qui tentent de reproduire la texture du cuir ou de créer des boutons à l’allure de montres suisses hors de prix.

Le logo de Top Secret Case est également basé sur le principe du skeuomorphisme, avec ses ombres et textures métalliques. Le graphiste a rendu un simple design vectoriel familier, pour que les utilisateurs s’identifient à la marque.

Dernier exemple, l’application mobile de D. Jiang rappelle la texture en bois des vieux jeux de société. Tous les boutons ont été réalisés dans un style similaire et la profondeur visuelle fait référence au look traditionnel ou même vintage.

sk9

Flat design

Le flat design vient de la tendance suisse, qui a elle-même débuté en Russie, aux Pays-Bas et en Allemagne dans les années 20, puis s’est développé en Suisse. La tendance suisse met l’accent sur la lisibilité et le minimalisme. Ces designs sont plats et privilégient l’efficacité, notamment dans l’utilisation de l’espace.

Le style suisse a fait beaucoup parler de lui, notamment au sein du célèbre Bauhaus. Josef Muller-Brockam est l’un des designers notoires de ce mouvement. Il met en oeuvre un système de grille qui va révolutionner le design et son travail utilise l’espace de la manière la plus efficace possible, un concept fort de sens pour tous les designers UI.

Le flat design en UI

On voit une nette transition vers le flat design, tant sur Windows 8 (2012) que sur iOS 7 (2013). Dans le cas de Windows 8, les boutons en 3D sont remplacés par de simples carrés et rectangles, et la mise en page est fluidifiée (ce qui n’est pas sans rappeler le travail de Josef Muller-Brockmann). Chaque carré 2D possède une valeur, une teinte et saturation, sans dégradé. Apple fait de même et « aplatit » tous ses designs dans iOS 7. Les icônes brillantes et biseautées ont disparu, et les ombres et dégradés sont tenus au strict minimum. Ces deux exemples illustrent très bien ce qu’est le flat design.

 

L’application Outside the Window, tout comme Windows, exploite au maximum la tendance avec de simples rectangles colorés. En revanche, ici, on se rapproche encore plus du minimalisme caractéristique du Style suisse en ce que les rectangles ne sont pas séparés les uns des autres. On dira même que la seule chose qui différencie de design de la géométrie pure et dure, ce sont les icônes. Voilà un design UI qui joue le jeu du numérique à fond, et ça marche !

L’application Analytics est toute simple. Elle représente très bien l’essence du flat design : pas d’ombres, pas de textures, pas d’effets visuels. Les couleurs sont plates et unies, et les graphiques sont tout simplement représentés par des formes géométriques. Très intuitive, cette application est tout à fait dans l’air du temps. Ce qui nous pousse à nous demander : le skeuomorphisme est-il bien utile de nos jours ?

Material

google_materialdesign14

En 2014, Google a lancé Material, un projet qui veut unifier l’expérience utilisateur sur toutes les plateformes et tous les appareils, quelle que soit leur taille. Inspiré par la bonne vieille méthode « papier stylo », Google invente un design imaginaire « matériel » et créer un guide pour le mettre en oeuvre. Parce que le concept est basé sur le principe du papier, on pourrait le qualifier de skeuomorphe. Mais ce nouveau design appartient également au courant flat design de par sa mise en page ingénieuse et son minimalisme certain.

material_design-svg

En tant que langue graphique, un certain nombre de règles visuelles sont attachées au Material Design. Par exemple :

  • Deux éléments Material ne peuvent jamais se superposer.
  • Tous les éléments sont opaques.
  • Aucun élément Material ne peut être plié.
  • La liste des règles ne s’arrête pas là. Google a également inclus des directives sur la manière dont les utilisateurs peuvent interagir avec les applications. Le but est de fournir un jeu d’outils aux développeurs afin qu’ils puissent créer des applications les plus fonctionnelles et intuitives possibles. Ça fait penser au Style suisse, vous ne trouvez pas ?

    Malgré l’influence du papier et de certaines ombres subtilement placées, Google Material a été créé dans la lignée du flat design. On pourrait alors peut-être dire que cette nouvelle tendance est à la fois flat et skeuomorphe? Peut-être. Dans tous les cas, il sera intéressant de voir ce que les développeurs parviennent à faire avec ces outils. Si vous avez un Android, utilisez les applications Google ou si vous êtes tout simplement fans de design UI, nous vous conseillons de garder un oeil sur ce nouveau courant.