Case Study

Le commencement

Peu de temps après la fin de notre projet HelloWorld, nous voilà lancé dans un nouvel atelier: IOLCE. Celui-ci consiste à présenter et d’analyser une conférence parmis la liste imposée. Mon choix s’est porté sur la conférence “Slow Design for an Anxious World” de Jeffrey Zeldman durant An Event Apart 2019 à Seattle.

Slow Design? (réalisé en groupe)

La société actuelle nous pousse à toujours aller plus vite, et cela même dans le web. Lorsqu’on parle d’un design orienté sur le service des clients, tels que les sites de ventes, newsletter ou encore abonnement, la rapidité du service est un point crucial. L’utilisateur doit trouver ce qu’il cherche le plus vite possible. Plus l'information qu’il cherche lui est donnée rapidement, meilleurs seront son expérience et son ressenti.

L’utilisateur doit trouver ce qu’il cherche le plus vite possible. Lorsqu’il s’agit d’un texte complexe, étant donné que la lecture n’est pas un procédé naturel pour l’Homme, il est nécessaire de trouver des moyens pour faciliter cette expérience.

Photo conférence SDAW

Crédits © User Defenders

Oui mais comment?

Lors de sa conférence, Jeffrey Zeldman parle de 5 (+2) principes pour faciliter la lecture d’un contenu plus complexe. J’y viendrai tout au long de mon case-study mais vous pouvez les retrouver en résumé sur ma page expérience.

Partir sur de bonnes bases

En commençant mon projet, il m’a paru évident que pour mener à bien cet atelier, j’aurais besoin de documentation. Dans l’un de ces points, Zeldman nous parle de l’importance de la hiérarchisation des informations et du minimalisme. J’ai donc été voir ce qui se faisait actuellement en matière de web design quand le but principal était de faire passer un message. J’ai rassemblé un tas d'idées qui m’ont été très précieuses pour l’étape suivante.

Début de la conception

C’est à partir de là que mon aventure IOLCE a réellement commencé. Mon contenu étant prêt, il ne me manquait plus qu’à savoir comment je comptais le présenter. En me basant sur la conférence et de ce que j’ai pu voir sur les différents sites que j’ai parcouru, je me suis lancé dans la conception de l’identité graphique. J’avais déja plusieurs idées en tête mais avant tout, il fallait que je reste dans un univers simple.

Photo conférence SDAW

Crédits © UX Store

Typographie

Tout d’abord pour la typographie, j’ai souhaité partir sur une police sans serif pour les titres. Mais je cherchais une police avec un peu plus de caractère que les polices du genre Roboto ou encore Montserrat. J’ai donc opté pour la police Fahkwang. Cette police inspirée des écritures d’anciens journaux thailandais manie à la fois les pleins et les déliées afin d’augmenter son contraste.

Pour le texte courant, je suis parti sur la police Taviraj, qui elle est une police à empattement. Mon choix s’est porté vers cette famille car elle a une structure assez large la rendant plus lisible. De plus, le fait qu’elle soit une police à empattements lui permet de se démarquer des titres et rend la lecture de longs textes moins fatiguant pour les yeux.

Aperçu des choix de polices Google Fonts

Identité

Mon choix typographique fait, je me suis tourné vers les éléments graphiques de mon identité. J’ai souhaité rester dans une gamme de couleurs très sobres et efficaces. C’est pour cela que mon choix s’est porté sur une palette de de 3 nuances de gris, du blanc et une nuance de rouge (avec une déclinaison uniquement pour les effets d’hover). Quant aux éléments graphiques, j’ai trouvé intéressant de partir dans un style revisité du peintre français Mondrian.

Dans sa conférence, Jeffrey Zeldman parle de minimalisme, que le basique est très efficace donc pas besoin de fioritures autour. Ce style Mondrian très épuré le rend parfait pour le sujet de cet atelier.

Photo conférence SDAW

Palette sur Coolors

Mise en place

L’un des plus gros challenges de cet atelier a été de garder cet aspect Mondrian avec ces cases tout en respectant les grilles CSS et les rapports des marges. J’ai à de nombreuses reprises dû corriger des éléments qui ne s'affichaient pas correctement dans leurs cases.

Ensuite l’autre plus grosse contrainte a été d’adapter ce design de grille en responsive. Étant donné que le design des grilles change en fonction du support, j’ai du corriger les bords de chaque blocs en fonction du device. Sans compter le fait qu’une fois l’aspect corrigé, il faut aussi s’assurer que les bords changent bien de couleurs avec le dark theme (ce qui n’était pas forcément le cas pour certains…).

À eux seuls, ces deux facteurs m’ont pris pas mal de temps car se sont les éléments principaux de mon design donc il faut que l'affichage se fasse correctement peu importe le support de visionnage. Heureusement que c’est une des première chose que je me suis empressé de corriger car je ne réalisais pas le temps que cela allait me prendre.

Photo conférence SDAW

Exemple de bug rencontré

Bilan

À l’heure où j’écris ces dernières lignes, mon site est totalement terminé. Tout mon contenu est intégré, les bugs sont corrigés et il ne me manque plus qu'à rentrer ces dernières lignes dans mon code. Je dois avouer que cet atelier m’a donné du fil à retordre, le fait d’être à distance n’a pas facilité la chose mais j’ai quand même pris du plaisir durant cet atelier.