Contrairement au design papier, le web design a toujours été moins bien loti question typographie. En position de force sur ce domaine fondateur du design, le designer print regardait de son piédestal le web designers qui souffrait d’une sorte de complexe d’infériorité par rapport à ses confrères sur papier, gardiens de la belle typographie. Mais les web designers commencèrent à rattraper leur retard notamment depuis l’apparition des fontes personnalisées sur Internet. Et aujourd’hui, la tendance du flat design pousse le bouchon un peu plus loin en imposant une façon de mettre en page le web qui se rapproche beaucoup du design papier. Alors, est-ce le début de la réconciliation entre le monde du print et celui du web ?

Le Flat design

Le flat design, vous commencez à entendre parler. Il n’y a pas une semaine sans qu’un blog fasse un article sur le sujet. On pourrait résumer cette tendance du web design, popularisé par Windows 8 avec son Metro UI et la refonte de Google en 2012, par un graphisme épuré, sans effets de profondeurs ni de textures complexes. Le design flat (qui n’est pas un genre nouveau) se concentre essentiellement sur quelques éléments récurrents : des aplats de couleurs plutôt que des dégradés, une composition fortement marquée par la grille et enfin une place importante accordée aux polices de caractères. À y regarder de plus près, cela fait longtemps que dans le design papier, et notamment dans l’édition, ce type de design est la référence. Regarder la plupart des mises en page de livres. Vous verrez essentiellement des fontes, une grille de composition et une gamme colorée simple. Et pour cause, le livre est à la base de la typographie. Ce qu’on appelle donc flat design, c’est tout simplement de la création typographique appliquée au web.

flat-design-schema

Polices personnalisées : vers un design moins chargé

Bien sûr, les sites internet ont toujours utilisé la typographie pour mettre en forme leurs pages. Mais le designer avait une marche de manœuvre très limitée, bien plus que le graphiste sur papier : une dizaine de polices contre des milliers sur le papier, des mises en pages souvent en mono colonne pour se plier aux contraintes du code. Alors, on intégra dans cet internet bridé beaucoup de photo manipulations, d’illustrations, de boutons avec des effets de volumes, de dégradés complexes. C’était l’époque du web 2.0 avec le style glossy. Ce genre de design qui passait pour ringard sur papier ne l’était pas dans le monde numérique. L’arrivée des polices non standards fut la première étape qui changea la donne. Désormais, les web designers purent donner au contenu un design plus riche, avec des résultats plus ou moins heureux, d’ailleurs… Ce n’est qu’avec l’avènement du mobile que la typographie pu se libérer complètement.

typographie-schema

Responsive design : se concentrer sur l’essentiel

Paradoxalement, ce sont les contraintes techniques qui ont permis à la typographie sur Internet de trouver sa place. Le boom des smartphones puis des tablettes à obligé les concepteurs à optimiser les sites pour les petits écrans. Aujourd’hui, la solution la plus répandue est le responsive design. Le site s’adapte automatiquement à la taille d’écran de l’appareil. Et ceci oblige les designers à penser des éléments graphiques qui peuvent changer de taille. Un design qui comporte beaucoup d’éléments en bitmap, avec beaucoup d’effets, des textures, etc. manquera de souplesse pour le rendre responsive. Il s’est donc développé des sites au design épuré, pour les rendre moins lourds et facilement adaptables à la multiplication des tailles d’écrans. C’était une aubaine pour nous, designers, qui ne jurons que par la simplicité. Toujours est-il que grâce au responsive on a dû penser beaucoup plus en terme de grille modulable pour intégrer l’élément essentiel du contenu d’un site : le texte. Jusqu’à maintenant, la typographie était utilisée comme un élément supplémentaire au web design. Avec le flat, il devient l’élément principal.

Conclusion

Comme nous l’avons vu, ce qui était attribué il y a quelques années comme une spécialité exclusive des graphistes papier est en train de glisser vers le web design. Le style épuré du flat design se rapprochant du design d’édition, a redonné une place centrale à la typographie. Ainsi, les web designer ont de moins en moins peur de parler typo et aujourd’hui, sur Twitter, ce sont les web designers qui postent des messages pour respecter les bonnes règles typographiques de l’imprimerie nationale. Sur notre podcast The Walking Web, dédié au web design, nous parlons aussi beaucoup de typographie. Les graphistes print ne sont plus les seuls spécialistes du sujet. Mais il faut se rappeler que la typographie sur Internet est de nature différente. Le piège serait de vouloir copier le papier (comme le papier peut parfois copier le design web). Le web design doit donc encore inventer ce que sera la typographie du futur. De là à dire que l’avenir de la typo passera par le web, il n’y a qu’un pas…

8 réponses

  1. Salut JP,

    Je viens de lire ton article que je trouve globalement bon. Malheureusement, je reste un peu sur ma faim et je me demande ou est-ce que tu veux en venir. Je trouve l’article un peu léger et je me demande plusieurs choses :
    – Est-ce que cet article fait partie d’une série d’article très court sur les différentes tendances du design ?
    – Est-ce que c’est introduction à quelque chose de plus conséquent comme par exemple une étude de cas ?
    – Est-ce un article isolé que tu as eu envie d’écrire et qui ne fais pas partie d’un ensemble ?

    Je vois bien que c’est dans la catégorie « Réflexions » mais voilà. J’aimerais savoir si tu as prévu d’aller plus loin.

    1. Ce que je veux dire, c’est que le flat design c’est un mot tendance pour décrire une façon de penser le web design avec la typographie (composition, grille, caractères…) comme seul élément. Et que de ce fait, on se rapproche du graphisme papier (et notamment de l’édition) qui développe depuis longtemps évite les « fioritures » graphiques. À fortiori, je me dis qu’enfin la typographie ne sera plus le domaine privilégié du papier et que les web designers pourront même l’amener plus loin.

  2. Sujet intéressant mais tout comme marroon, je reste un peu sur ma faim.

    Il y a une chose qui me chiffonne (mais ça n’est pas la première fois que je lis ça): le flat design serait une limitation technique (due au responsive design). Je ne suis pas d’accord avec ce point de vue sauf pour le cas des designers les plus fainéants.

    Je pense que tout comme le grunge en 2008 ou le « subtle gradients » en 2010, le flat design est (en grande partie) une tendance. C’est certes un retour aux valeurs du graphisme papier car on est beaucoup plus libre de faire ce que l’on veut techniquement aujourd’hui, mais pas que.
    Les grands possibilités de layout et de typographies que l’on a à notre disposition aujourd’hui nous permettent de créer un site web qui se démarque sans trop d’effets bling-bling. D’un autre côté on faisait déjà des angles arrondis (par exemple) avant que cela ne soit possible en CSS en utilisant de « bêtes » images.
    Je ne crois pas non plus que le web a attendu 2012 pour se mettre à utiliser les grilles.

    Dire que le « flat-design » est une conséquence de limitations techniques est une erreur. On n’a pas de telles limitations dans les applications ou le print et pourtant on voit de plus en plus de ce rendu minimaliste sur différents supports.
    Je pense qu’il s’agit d’une tendance, une belle tendance et certainement plus durable car elle est basée sur des principes qui ont fait leurs preuves depuis le Bauhaus.

    Le flat-design me donne l’impression d’être le contrecoup direct du ras le bol de skeuomorphisme. On est passé d’un extrême à l’autre, par « coup de gueule » par ras le bol ou peut être tout simplement qu’on pouvait faire de belles interfaces sans utiliser de faux cuir. Mais ne pas oublier que, comme toute tendance, comme tout principe, il y a des pour et des contre, de bonnes pratiques et de mauvaises (Sacha Grief s’en moque d’ailleurs ici: https://news.layervault.com/stories/1931-announcing-the-flat-design-conference).

    Il faut surtout penser UX, accessibilité et qualité avant de vouloir coller à un style.

    1. Attention, je ne dis pas que le flat est un design « limité ». C’est ce que tu as l’air de prêter à mes propos. Mais je pense que la contrainte du responsive (la contrainte n’est pas forcément négative) a permis de développer plus loin une belle typographie du web. Et ça s’est répandu sur d’autres supports, preuve de son efficacité. En fait le flat était peut être vue comme une contrainte au premier abord mais en fin de compte on a vu que le design s’en est vu améliorer par beaucoup d’aspects.

      1. Si eu am google it imediat dupa ce am vazut comentariul! Imi parea greu de crezut. Parca a scapat in prajituri! Poate se opreste si face ceva. Si cred ca este incredibil de greu dupa ce ai fost intr o lume atat de glamour sa vezi ca ai pierdut controlul.

  3. C’est ce que j’avais compris en effet.

    C’est certain: le responsive a mis un grand coup de pied au c** des webdesigners en les faisant réfléchir sur l’accessibilité depuis différents terminaux et surtout au confort de lecture.
    Mais je reste sur ma position: ça n’a jamais été une contrainte qui a abouti en cette tendance flat-design. 🙂

  4. C’est vrai que jusqu’ici le webdesign pouvait nuire au confort de navigation et au référencement. L’article est très intéressant mais quelques exemples auraient été les bienvenus 🙂

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *