Vous avez remarqué vous aussi ? Cette tendance aux logos « aplatis », épurés... Un peu comme votre dernière mise à jour IOS. Même votre imprimeur Comoprint s'y est mis ! Décryptage de la dernière tendance graphique du moment : le Flat design.

Le "Flat Design" vous dites ?

Pour ceux qui ne seraient pas familiarisés avec ce terme anglophone, le « flat » traduit littéralement « plat », concorde avec une crise de l'ombre portée et des effets de 3D dans le web design. Alors pourquoi cette tendance ?

  

Leitmotiv : S.I.M.P.L.I.C.I.T.É

Cette vague d'épuration des logos et visuels apparaît comme plus sobre, plus frais, plus moderne que les effets de 3D visiblement trop utilisés et passés de mode. Désormais, on donne toute son importance à la couleur et la typo comme éléments forts d'une identité visuelle, en utilisant des aplats de couleurs vives, une typographie bien visible médium ou grasse.

Les éléments graphiques "Flat" sont donc plus faciles à reconnaître et visuellement plus synthétiques. On peut donc mieux se repérer dans la navigation d'un site internet et identifier plus facilement un visuel donné (et donc une marque, un site, une entreprise).

Vous l'aurez compris, les éléments forts du Flat Design sont le minimalisme et la simplicité. Les informations sont plus faciles à identifier, comprendre et mémoriser. Sa simplicité le rend aussi plus facile à utiliser sur une multitude de supports, ce qui lui octroie un avantage supplémentaire.

Parmi cette multiplicité de supports, le Flat Design est très utile pour une navigation sur mobile. Il la rend même évolutive ! Pourquoi ? Car lorsque l'on préfère un design basé sur des couleurs franches plutôt que sur une multiplicité d'images, on utilise moins de détails. Or, les informations de votre site internet, qui deviennent plus petites sur votre smartphone, seront plus rapides à charger et communiqueront plus vite avec n'importe quelle plate forme utilisée par votre lecteur.

Mais alors ? Le flat design ne s'utilise que dans le domaine numérique ?

Bien sur que non ! Même s'il est principalement utilisé pour le web, le flat design s'utilise aussi sur papier. C'est un style que l'on aime de plus en plus, mais c'est aussi, et surtout, un moyen pour les entreprises de créer une identité visuelle en cohérence avec leur design web.

En plus d'être utilisé pour des concepts visuels dans le web et les applications, le style Flat est aussi utilisé dans l'élaboration visuelle de cartes de visite, posters, et même de journaux.

Attention tout de même, on ne peut pas transcrire à l'identique un visuel Flat d'un support numérique à un support PRINT. Les couleurs doivent être remaniées dans la mesure où le numérique utilise un spectre colorimétrique RVB alors qu'il faut composer en CMJN pour les documents imprimables.

Pour ceux dont ce vocabulaire semble sorti d'un autre monde, RVB sont les trois couleurs primaires – rouge, vert, bleu – que l'on utilise en web. Le blanc est visible à l'écran au croisement de ces trois couleurs et le reste des couleurs est rendu par différents mélanges rouge – vert, vert – bleu – bleu -rouge. Le spectre colorimétrique RVB est donc moins étendu que ce qu'on appelle « CMJN », autrement dit, la quadrichromie. C'est un procédé d'imprimerie permettant de reproduire un large spectre colorimétrique à partir des trois teintes de base (le cyan, le magenta et le jaune) auxquelles on ajoute le noir.

Par conséquent, lorsque l'on regarde un écran, les couleurs qui déteignent se voient moins (le spectre étant moins élargi, plus synthétique) et les couleurs semblent s'harmoniser. Le rendu ne sera pas le même sur papier : les couleurs sombres à l'écran deviennent plus claires sur papier et même le poids du papier aura une influence importante sur le rendu final - les couleurs déteignent plus sur un papier fin que sur un papier épais. Si vous utilisez beaucoup d'encre (donc, des teintes sombres) préférez un papier épais qui absorbera mieux les couleurs susceptibles de déteindre.

En clair, il faut avoir une vue d'ensemble sur la sélection des couleurs et leur vibrance. Le numérique a une plus grande capacité à afficher et montrer des couleurs avec des variations plus fortes et plus percutantes que le papier. Il peut y avoir beaucoup moins de contraste entre les nuances quand on travaille en CMJN (tout dépend de la méthode d'impression). Par conséquent, vous n'utiliserez pas un vert trouvé sur la palette de couleur Flat numérique (oui, oui, elle existe) sur votre site internet et sur votre carte de visite au risque d'avoir un rendu complètement différent.

Flat UI Colors : les 20 teintes les plus populaires en Flat Design (applicables sur support numérique).

Moins de questions à se poser, donc, si vous ne vous concentrez que sur l'aspect numérique. Lorsque votre visuel joue sur les tableaux PRINT et numérique, c'est là que la stratégie se corse.

Les web designers utilisent parfois certaines couleurs et nuances pour des raisons de compatibilité entre les plates formes. Au lieu de faire en sorte que les couleurs aillent de paire avec de faibles changements de valeurs, un designer pourra faire le choix d'aller au delà pour créer plus de contraste. Ce rendu pourra être plus facile à utiliser sur différents supports.

La sélection des typographies peut aussi être différente si le projet utilise le web et le PRINT. On peut emprunter certaines typos utilisables en ligne (comme les typos google web) pour les services PRINT, mais le designer doit toujours anticiper les différentes polices à disposition pour chaque projet.

En bref, les designers doivent penser au projet du début jusqu'à la fin, en considérant la déclinaison des couleurs et des typos sur tous les supports. Convertir le Flat Design numérique au PRINT peut être très compliqué dans la mesure où le Flat est rarement considéré comme faisant partie, avant tout chose, d'une stratégie PRINT (le PRINT découlant souvent du web).

Nous vous parlions le la palette flat pour support numérique (Flat UI Colors). Cette palette montre les 20 teintes les plus populaires du Flat Design, mais ces couleurs sont uniquement utilisables sur un spectre RVB.

 

Mais le site britannique Flat UI Pro a converti ces couleurs en CMJN pour une plus grande aisance dans l'adaptation des visuels web et PRINT.

L'auteur du post conseille d'adapter ces couleurs en demandant conseil à votre imprimeur et donne quelques directives à appliquer lors de l'utilisation de ces couleurs :

  • Les couleurs que vous voyez sur votre écran seront légèrement différentes lorsque qu'elles seront appliquées en CMJN. Rappelons que ces couleurs ont été créées pour un design digital.
  • Utilisez les couleurs de la deuxième à la quatrième rangée pour les projets PRINT. Les couleurs de ces rangées sont un peu plus saturées et contiennent plus de couleurs provenant du mélange CMJN (tous les 0 de la première et de la troisième colonne signifient qu'il faudra les éviter pour une création PRINT)
  • Si vous prévoyez d'utiliser du texte blanc, optez pour une couleur de fond sans noir. Inversement pour un texte noir.
  • Evitez les typo propres au web si vous prévoyez une créa PRINT (ces typo n'auront pas assez de profondeur pour certaines résolutions PRINT). Optez plutôt pour une typo plus épaisse s'utilisant pour le PRINT comme pour le web, ou choisissez deux polices similaires, l'une fonctionnant plus pour le web (voir typo google web), l'autre pour le PRINT. Certaines typo comme le Helvetica et Lobster fonctionnent très bien.

Source : http://designmodo.com/flat-design-web-print/