Flat design :
design sobre, épuré, c’est bien…
Mais ne pas perdre son identité, c’est mieux !
Depuis l’arrivée des sites responsives et des templates plus ou moins gratuits, l’ère du flat design perdure. Bienvenue dans un monde épuré, sobre où les jeux entre aplats de couleurs, iconographie et typographies s’entremêlent.
Mais (parce qu’il faut bien un mais, sans quoi cet article ne pourrait exister), qui n’a jamais entendu : « Hey, j’ai un super site à te montrer !! oups …attends je ne retrouve plus le nom… beaucoup de sites se ressemblent ! » Vous l’aurez compris : le risque, c’est de perdre son identité, ou de la retranscrire que partiellement. Quelle frustration ! Alors quelles astuces peuvent aider pour injecter les valeurs d’une marque et investir l’entièreté du parcours utilisateur-ice ?
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
1 / L’importance du choix de la typographie
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
Le choix typographique pour les titres et sous-titres, c’est la continuité et/ou la complémentarité du logo.
• Elle doit représenter les valeurs que la marque souhaite véhiculer, ainsi : une typo ronde et voluptueuse peut représenter la gourmandise, le gustatif / une typo fine à empattements biseautés peut transmettre des valeurs historiques / une typo ronde à empattement rigides peut mettre en avant la technicité particulière, tout peut-être interprété à l’infini ! Qu’elle soit avec ou sans empattement, pleine ou vide, en bas de casse ou en capitales, la typo apporte une personnalité, et définie le caractère du site / marque.
• Par ailleurs la variation des tailles entre titre / chapeau et contenu a son importance : cela permet de comprendre en un clin d’oeil la structure du pavé de texte.
• Pour les typographies de contenu (soit les paragraphes de textes) on va privilégier une typo facile à lire, surtout sur un écran qui peut-être de petite taille, aka les smartphones.
Quelques exemples concrets :
https://nuri.com/
La typo des titres est la continuité du logo, elle est épaisse, statique et vient appuyer le sérieux, la robustesse de la solution financière proposée.
https://spielzeit.jungesschauspielhaus.de/pinocchio/ La typo du titre vient en complément du logo : elle est à la fois ludique, fantaisiste et apporte du mouvement grâce à l’orientation en diagonale de certaines lettres, ce qui est plutôt adapté pour une activité théâtrale avec des enfants. Le logo, lui, ne contient pas de fantaisie mais est tout de même bien ludique de par sa rondeur.
https://ferro13.it/it La typo du titre vient en complément du logo. Le logo met en avant l’aspect artisanal de la marque de vin ; la typo des titres vient illustrer la force, la qualité du goût de l’alcool proposé.
///////////////////////////////////////////////////////////////////////////////////////////////////
2/ Un choix photographique identitaire
//////////////////////////////////////////////////////////////////////////////////////////////////
Pour illustrer au mieux son identité, l’idéal est de trouver une direction artistique commune à tous les visuels présents dans le site.
Pour cela, il y a une infinité de possibilités :
- un type de cadrage commun : vues en plongée, premier plan net/ arrière-plan flou, en contre-plongée…
- un type de lumière commun : lumières rasante, lumière naturelle en intérieur ou extérieur…
- un traité graphique particulier : en noir et blanc, en bichromie, un rappel d’un motif sur chaque photo, ajout d’un filtre d’une couleur spécifique…
Quelques exemples pour illustrer ces propos :
https://www.davidwilliambaum.com Les photos possèdent une gamme de couleur restreinte, un contraste et une saturation commune. Ainsi, le chevauchement entre toutes les photos donnent une impression de qualité, et non de carnaval désorganisé 😉
https://asmobius.co.jp/ Une suite de visuels dont les cadrages montrent une profondeur de champ avec un filtre foncé particulièrement marqué sur les bords donnent une impression d’homogénéité entre les photos.
https://www.voyageursdumonde.fr/voyage-sur-mesure Toutes les photos ont le même niveau de saturation avec un léger filtre gris foncé. Ainsi, on ressent un bon niveau de qualité sur les voyages proposés dans ce site.
https://nuri.com/bank/ Sur ce site, les visuels sont principalement des photos détourées mêlées à des illustrations avec une gamme colorimétrique commune, ce qui donne une impression de sérieux, de confiance.
https://www.alexfrisondeisla.com Les photographies ont un grain commun, ainsi qu’une légère animation avec le même effet de mouvement.
https://editorialnew.com/ Sur ce site, les photos contiennent un pixel étiré. L’intérêt est double : d’un part, il permet de donner une orientation visuelle à l’internaute, il/elle sait où regarder par la suite, et d’autre part, cela crée une cohérence globale dans la navigation du site.
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
3/ Les plus : les comportements/interactions au roll, au scroll…
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Les comportements des boutons, des images, les animations générées au scroll, au roll, au clic… Toutes ces petites interactions peuvent appuyer les valeurs de la marque. Au-delà de l’identité visuelle, ils vont apporter une sensation, une ambiance, une autre dimension à l’interface et ainsi approfondir l’expérience utilisateur-ice. L’intérêt bien sûr, est de trouver l’effet visuel qui va appuyer le propos. Si non, cela ne serait qu’un effet « cool » sans intérêt.
Quelques exemples :
https://www.kikk.be/2017/en/home Sur ce site, le contenu se situe dans un monde sous-marin, où de légères animations de bulles flottent en permanence et au roll, un effet de mouvement aquatique apparaît sur les visuels.
https://spielzeit.jungesschauspielhaus.de/listen-to-my-story/ Sur ce site, au scroll, une animation image par image se déclenche avec des jeux d’acteurs pour appuyer le fait que ce soit un atelier ludique et théâtral avec les enfants.
https://www.leroymerlin.fr/big2/guides-2021/experience-inspiration/box-rangement-chambre-ado.html Ici, en bas de page, une animation se déclenche au scoll après avoir lu le titre « faites le tour du propriétaire » telle une carte qui se déploie pour repérer où l’on est. Le rédactionnel est en corrélation avec l’animation proposée.
https://zonanorte.27films.fr/ Ce site présente des portraits, pour une plus grande immersion dans le personnage, un léger zoom se fait automatiquement, lorsque l’on change de portrait, une transition avec un effet de flash apparait, comme si l’internaute endossait le rôle d’un reporter photo.
https://solace-store.com/pages/lookbook Dans la rubrique lookbook, une animation de photos qui s’étalent sur l’écran s’opère, tel l’internaute qui souhaite se créer son cahier de tendances. Au roll, l’image zoome légèrement, comme si on la prenait dans la main pour l’approcher de nos yeux.
https://lpalo.com/ Ce site propose des podcasts décalés pour les enfants, toute la navigation contient des comportements surprenants avec une tonalité ludique : des Rolls qui changent la perception de la page, des éléments qui s’animent au scroll.
/////////////////////////////////////////////////////
Donc, pour résumer :
//////////////////////////////////////////////////////
Pour transposer une identité visuelle sur une interface en flat design, une subtile alchimie entre le choix typographique et le choix iconographique doit avant tout s’opérer.
Si l’on souhaite ajouter une ambiance globale à l’interface (et si le budget le permet parce qu’après tout, c’est aussi ça « la vraie vie »…), des animations comportementales peuvent contribuer à une meilleure immersion. Pour cela, le choix des comportements est crucial car il doit pleinement illustrer les valeurs de la marque.
Voilà, avec tout ça, votre interface est en bonne voie, du moins… d’un point de vue visuel, l’ergonomie c’est une autre histoire !