Principes de Flat Design

16

Le flat design ou le « design plat » est la nouvelle lubie des designers d’interfaces. Ce courant graphique se distingue en prônant des interfaces minimalistes aux couleurs vives.

L’exemple le plus emblématique d’application de flat design, c’est le système d’exploitation Windows 8. On y retrouve tous les éléments qui caractérisent les flat design : un panel de couleurs chatoyantes et des icônes minimales pour une lisibilité maximale.

Le flat design, c’est quoi ?

Le flat design est un design graphique minimaliste « à plat », débarrassé de tout relief, ce qui a pour but d’améliorer sa lisibilité. Il est souvent comparé au skeuomorphisme qui réutilise l’apparence des objets familiers pour le design d’objets virtuels remplissant la même fonction.

Le panier de e-commerce, version skeuomorphisme.

Le panier de e-commerce, version skeuomorphisme.

Par exemple, la métaphore du « bureau » avec la présence d’une « corbeille » rappelle la corbeille que l’on trouve sous un bureau. L’une et l’autre servent à supprimer les « documents » inutiles du « poste de travail ». Autre exemple, le panier qui contient les achats sur les sites de e-commerce est la matérialisation d’un objet ayant le même usage dans le monde réel. Ces objets connus renforcent l’intuitivité.

Le skeuomorphisme reprend les caractéristiques de l’objet réel (couleur, forme et relief). Le flat design s’en distingue et propose une représentation épurée.

Le panier de e-commerce, version flat design.

Le panier de e-commerce, version flat design.

Rien d’incompatible : le skeumorphisme rend l’utilisation d’un l’objet familier intuitive et le flat design minimalise son design pour faciliter sa lisibilité.

Le flat design est une évolution logique du skeumorphisme à une époque du développement numérique et de la conquête de l’espace virtuel qui peut plus facilement s’affranchir des représentations du réel.

Le flat design préfère réinventer le réel, plutôt que de l’imiter. Il continue toutefois de s’en inspirer.

Simple tendance ou courant postmoderne ?

icônes-flat-iphoneEn web design, on a longtemps observé une course au réalisme, passant notamment par la 3D. Le flat design va à rebours de cette évolution en décidant de simplifier le réel, à travers la force des symboles.

On peut parler d’un courant réactionnaire face au développement de dispositifs parfois trop sophistiqués, un retour à la simplicité et à un langage visuel symbolique qui fait la force d’un dispositif de communication sur internet.

Le design web, comme la mode, est traversé par des tendances. Depuis 2013, on nous parle de plus en plus de flat design. On l’utilise partout dans le design d’interfaces, des sites internet jusqu’aux applications mobiles. Nouveau crédo, il en deviendrait presque un poncif parfois.

L’avenir nous dira si le flat design peut s’installer comme un courant majeur dans la création. Si la plupart des tendances graphiques s’essoufflent, force est de constater que celle-ci s’appuie sur des éléments immuables comme le langage des couleurs et le symbole.

Les ingrédients d’une interface réussie en flat design

Allan Grinshtein (théoricien du flat design) : « les interfaces élégantes sont celles qui ont le plus d’impact, avec le moins d’éléments ».

Le flat design est une représentation symbolique d’objets qui n’admet aucune texture. Pour faire ressortir certains éléments et guider l’internaute, les designers privilégient l’utilisation de couleurs, de formes et de typographies.

1- COULEURS

couleurs-flatLes couleurs sont fondamentales en flat design. C’est elles qui feront ressortir les éléments particuliers et permettront de distinguer et hiérarchiser le contenu. Attention, on ne fait pas tout à fait ce que l’on veut avec les couleurs… Le flat design offre certes une grande liberté en termes de couleurs, mais il faut les choisir dans une palette uniforme et savoir se limiter.

On évitera le mélange des couleurs vives et pastel. Le pastel est souvent privilégié. Les couleurs flat doivent dynamiser la navigation, sans provoquer la panique ! Pour le choix des couleurs Flatuicolor et couleurs.optimisation sont de bonnes interfaces ( formats HEXA , RGB et RGBA).

2- IMAGES & ILLUSTRATIONS

photo-floueLe flat design ne les interdit pas, mais il faut savoir si la priorité du site est un design plat… dans ce cas, l’utilisation de l’image devra être sporadique et intelligente pour ne pas modifier le design général de l’interface. La profondeur de champ et les flous qu’elle génère sont utiles pour faire ressortir les textes et aplatir l’image. On peut aussi se jouer des formes : rondes, carrées ou encore hexagonales.

Si vous pensez que le pixel est mort, pensez à Dribbble pour les beaux dessins vectoriels.

3- TYPOGRAPHIE

La typographie est tout aussi importante. L’interface étant minimaliste, la typo doit permettre de structurer l’information et organiser de manière claire son contenu. Les webfonts offrent un plus grande liberté créative. La police joue son rôle dans un parti pris graphique. Le flat design privilégie la simplicité des polices : les Serifs sont donc à proscrire. Si les propositions des agences ne sont pas à votre goût, prenez le temps d’observer la toile.

fontgrinderPour le choix des polices Google Fonts, Dafont, Fontfabric ou Fontsquirrel offrent des choix gratuits et payants.

Le site Whatfontis permet de retrouver une police à partir d’une image.

 

 

4- ICÔNES

icons-flatUn site en flat design ne serait pas flat sans ces fameuses icônes. On limitera l’utilisation de formes pour privilégier des icônes « flat ». Les plus téméraires peuvent créer des icônes à l’image de leur charte graphique. De nombreux kits existent et répondent à la majorité des besoins. Certains sont développés au format Syg et modifiables sous illustrator pour adapter les couleurs et les formes au reste du site ou de l’univers applicatif.

Pour le choix de kits d’icônes : Designmodo (format fixes) et Thenounproject (Syg).

Le flat design, pour quelles utilisations ?

Le flat design ne sera pas toujours en phase avec vos besoins. C’est le moment de rappeler qu’avant de penser design graphique, il est nécessaire de réfléchir à l’utilisabilité globale du projet. La recherche UX vient bien en amont de la recherche graphique. Attention de ne pas mettre la charrue avant les boeufs et de faire une application totalement superficielle du flat design, placardé là parce que c’est joli et tendance.
flat-design

Des questions pour vous mettre sur la piste : Quel est votre contenu ? Est-ce un projet complexe ou simple ? Pour une utilisation mobile ? Le flat design est employé pour des projets dédiés aux petits écrans ou dont le contenu est suffisamment simple pour une représentation minimaliste.

C’est l’expérience utilisateur qui doit primer sur les choix graphiques. L’objectif est toujours de proposer un design compris de vos utilisateurs et simple d’utilisation. Le flat design doit s’employer s’il permet de mieux véhiculer l’information et d’améliorer l’expérience de navigation. Ne vous y trompez pas, cela ne dépendra pas du flat design, mais de son utilisation intelligente et pertinente.

A propos de l'auteur

Toujours entre deux mondes. Consultant en communication digitale et institutionnelle, diplômé en droit public & en multimédia. Blogueur et photographe, aimant l'écrit & l'image. En transition dans ce siècle digital, je parle engagement, usages numériques et communication.

Send this to a friend