Il y a environ deux semaines, j’ai eu une discussion intéressante avec mon ami et collègue Pierre Lemieux, autre membre fondateur de la Forge Numérique. Nous discutions alors des nombreuses conversations que nous avons régulièrement avec les concepteurs graphiques lors de projets web et du manque d’utilisation de la typographie en tant qu’élément visuel de conception.
En effet, la typo est souvent remplaçée par des éléments graphiques alors qu’elle pourrait elle-même être utilisée en tant qu’élément d’information ET de design. Du moins, c’est la thèse que nous discutions et soutenons, prêchant l’un l’autre envers un converti.
Étrangement, cette conversation m’est resté en tête et je me suis demandé si notre point de vue d’analystes et architectes informationnels ne biaisait pas notre jugement. Évidemment que notre jugement est altéré par nos spécialités professionnelles, souvent elles-même les reflets de nos préférences personnelles. Néanmoins, je me suis mis à chercher des exemples intéressants de l’utilisation de la typographie en tant qu’élément de design.
Avantages d’utiliser la typo comme élément de design:
- Bien que je passe mon temps à me répéter, je le répète encore: le design devrait toujours supporter l’information sur un site web à caractère informatif. Par conséquent, en utilisant la typo comme élément de design, on fait d’une pierre deux coups: on informe ET on créé quelquechose de joli, donc d’attirant. On utilise donc l’espace disponible d’une manière optimale;
- Les moteurs de recherches lisent la typographie et non les images, donc le fait d’utiliser de véritables fontes au lieu d’images permet un meilleur positionnement;
- Les personnes qui souffrent d’une mauvaise vue auront toujours le loisir d’agrandir votre typographie, c’est une fonction standard de tous les fureteurs modernes. De plus, ceux qui souffrent d’handicaps visuels et qui utilisent des fureteurs qui “lisent” les informations visibles à l’écran vous seront reconnaissants de leur permettre un accès aux précieux éléments de design.
Merveilleux! Je suis intéressé! En plus, j’imagine que cela me permettra d’économiser sur les frais de conception graphique?
J’ai bien peur que non. Utiliser la typographie en tant qu’élément de design n’est pas une panacée et demande une grande compréhension des enjeux du design web. En effet, la mode du design épuré des dernières années a cela de bon qu’elle a permis de dégager les éléments essentiels d’une conception et de mettre l’accent sur ce qui compte le plus. Le temps requis pour concevoir un “visuel” épuré est assurément plus important que celui requis pour le “remplissage” quelquefois demandé. Par conséquent, un bon concepteur tentera de maintenir le nombre d’éléments à son minimum tout en maximisant la compréhension du message. Il faut non pas mettre le plus d’éléments possibles pour faire passer le message d’une manière ou d’une autre mais concevoir des éléments qui supportent le message de plusieurs façons. Cela demande réflexion et expérience.
Des exemples d’utilisation de la typographie en tant qu’élément de design
J’ai choisi quelques exemples de sites web réputés, connus pour leur qualité de contenu mais aussi pour leur influence sur les tendances du design web. Quelques classiques mais aussi des découvertes…
Ceux qui diront “Oui mais il s’agit souvent de blogs, les blogs sont souvent laids de toute façon” seront renversés d’apprendre que de nombreux sites corporatifs sont influencés par la vague des blogs. Et que de toute façon, de plus en plus d’entreprise publient leurs propres blogs. Et puisque vous avez vraiment besoin d’être convaincus que même des “majors” osent utiliser de la typo en tant qu’élément de design, je commencerai donc par ceux-ci…
Oui, ils trichent un peu en utilisant des images pour représenter un texte. Mais tout ceci aurait pu être réalisé à peu de choses près avec une bonne utilisation de CSS et une fonte plus adaptée. Néanmoins, l’omniprésence du texte me frappe.
Un autre géant qui utilise la simplicité et la typographie à son avantage. Un site web léger, rafraîchissant et qui dessert la le message de BP: une compagnie d’énergie qui se veut verte. Ou qui, du moins, veut que l’on la percoive comme telle.
Un peu minimaliste, j’en conviens. Mais si vous visitez le site de Alcoa, vous trouverez ce que vous cherchez très facilement.
La plus grosse compagnie de pharma/biotech nous donne ici une leçon de simplicité et d’excellente utilisation de la typo comme élément de design. En mettant de l’avant le message le plus important au moment de la lecture, soit les relations avec les investisseurs.
Le site de CapGemini, major de la consultation d’affaires et récemment refait de façon très heureuse. Oui, il y a des images, je n’ai rien contre. Mais la typo attire l’attention et constitue, avec les fonds de couleurs en à -plats, une merveilleuse façon de faire passer le message efficacement et de structurer l’information.
Maintenant que j’ai exploré un peu le côté “brick and mortar” avec des entreprises traditonnelles, comment les technos s’en sortent-ils? Ayant créé le modèle, il n’est pas surprenant que les exemples soient légions. Ils ne sont pas tous heureux mais il y a en certains qui influencent le genre plus que d’autres.
À tout seigneur, tout honneur. Je ne dis pas qu’ils ont inventé le genre mais pour moi du moins, ils ont été très influents. L’entête de leur nouveau site explique en peu de mots ce qu’ils font et ne s’encombre pas de graphisme.
Une firme de design… qui réduit le graphisme de son interface au minimum pour le remplacer uniquement par du texte et quelques éléments de mise en page de couleur… Pas mal comme approche minimaliste et réussie!
BusinessLogs, une firme de consultation qui se spécialise dans l’utilisation des blogs pour les entreprises. Léger, efficace, joli.
Signal vs Noise est un des meilleurs exemples de l’utilisation de la typographie en tant qu’élément de design. D’ailleurs, ce carnet a gagné le dernier “Business Blogging Awards” dans la catégorie design… et ça, presque sans aucune illustration… Une excellente maîtrise de la typo, à n’en pas douter!
Probablement mon préféré, le site de StopDesign, une autre boîte de consultation web qui réussit très bien à conjuguer typographie et pureté de l’interface. Trop “froid” au goût de certains, parfait selon mes critères.
À la demande de l’ami Clément, le site de Opossum… 
C’est vrai qu’il est très bien vore nouveau site, il était dans ma sélection initiale mais le post devenait trop long. Voilà , si qqun le trouve trop long maintenant, ce sera votre faute les gars!
Voilà . Qu’on ne me dise plus que d’utiliser la typo comme principal élément du design n’est pas possible ou encore donne des résultats fades. D’autres le font bien, même très bien. Mes préférés? British Petroleum dans la catégorie “traditionnel” et StopDesign dans la catégorie “techno”.
Et vous, quand mettez-vous votre site au diapason de ce que cherchent les internautes tout en le rendant plus beau, plus conforme, plus accessible et plus facile à trouver sur les moteurs de recherche?
J’aime bien la séparation entre les différents éléments créé par les espaces laissés vides sur le site de About Design.
Mes préférés dans cette liste: British Petroleum et About Design. Et comment trouvez-vous le mien?
Sans doute est-ce parce que tu lis toujours le site d’Opossum par l’intermédiaire d’un agrégateur de fils rss, mais je te signale avec un clin d’oeil qu’il n’est pas mal non plus en terme d’utilisation de la typographie en tant qu’élément de design.
http://www.opossum.ca
Clément, j’avais fait une saisie d’écran de votre site, efffectivement. Mais j’ai dû me limiter, le post devenait trop long. C’est effectivement une excellente utilisation de la typo.
Michel: C’est clair, léger, agréable à lire. J’aime beaucoup!
La typographie comme élément de design sur le web
Partant du constat que la typographie est souvent remplacée par des éléments graphiques alors qu’elle pourrait elle-même être utilisée en tant qu’élément d’information et de design, Michael Carpentier a concocté un billet La typographie en…