Retour page principale

TFA Case Study

Objectif

Travail de fin d'année de la section Design Web & Mobile de la Haute École Albert Jacquard, ce side project à comme but de mettre une compétence en avant (développement, design visuel, UX, etc…) avec comme finalité de trouver un stage.

L’objectif du projet est d’informer sur l’impact environnement du cycle de vie des plastiques au travers de texte et de visualisations de données.

Contenu

Recherches

J’ai accordé une grande importance au contenu et la véracité du contenu, j’ai donc passé pas mal de temps à chercher plusieurs sources, il y a une quantité énorme de sources différentes. Heureusement, après une bonne semaine, je parviens à mettre de côté plusieurs ressources qui me semblent bonnes.

Rédaction

À cette phase du projet, j’ai commencé à mettre en lien plusieurs faits et chiffres tirés de mes différentes sources, c’était une chose cruciale pour la réussite du projet, j’avais besoin de pouvoir mettre les choses en relations pour les présenter sous forme de data visualization.

Comme mon contenu est destiné au web, j’ai dû me refamiliariser avec le Markdown que j’avais laissé de côté pendant un moment, cela m’a permis de gagner un peu de temps en travaillant légèrement la micro typographie.

Design

Typographie

Le contenu terminé, je me suis attaqué au design et commence évidemment par les choix typographiques.

La forme du projet commençait à se concrétiser dans ma tête, je savais plus ou moins vers quoi aller, j’ai donc choisi de partir sur une base sans-sérif. Le choix de la famille a été long, il m’en fallait une qui possède plusieurs fonctionnalités OpenType.

Deux choix s’offrent à moi, la Montserrat ou la Source Sans Pro, après plusieurs tests de gris typographique, je sélectionne la Source Sans Pro qui convient mieux au projet.

Je poursuis ma mise en place typographique en essayant la Prompt en titre, mais décide finalement de prendre la Source Sans Pro pour les titres aussi. Je termine en choisissant un rapport hiérarchique, pas trop faible, pour apporter du contraste et différencier les niveaux, mais pas trop élevé, pour avoir un peu de souplesse dans le choix des tailles. Mon choix s’est porté sur le rapport Perfect Fourth (1.333). Enfin, la valeur de base pour le desktop est de 20px et pour le mobile 18px, les deux ont un interlignage de 145%.

Choix typographique du projet
Titre : 3.157em, Hauteur de ligne: 95%, Source Sans Pro Bold Texte : 20px, Hauteur de ligne: 145%, Source Sans Pro Regular Rapport hiérarchique : Perfect Fourth (1.333)

Layout

Le défi de ce projet était de ne pas faire un site embêtant à parcourir avec que du texte et avec un visuel ennuyant, c’est pourquoi je suis parti sur une palette très réduite, mais contrastée à base de blanc, gris et vert. En ce qui concerne les data, je suis parti sur des cercles qui représente des données proportionnelles aux parents directs d’où l’importante d’avoir mis en relation les données durant la rédaction.

Comme d’habitude, je commence par disposer au “ feeling ” les différents éléments, ensuite lorsque je trouve quelque chose d’intéressant. Dans ce cas-ci, la taille des images, marges et autres éléments est définie choisie en fonction d’une baseline grid qui repose sur la valeur de l’interlignage de mon corps de texte.

Aperçu du layout mobile
Aperçu du layout mobile
Aperçu du layout desktop
Aperçu du layout desktop

Développement

La combinaison BEM/SASS m’a été bien utile pour l’organisation des fichiers et aussi pour l’efficacité qui permet d’y voir clair et de gagner un temps précieux. Un souci particulier a été apporté à la sémantique du document ainsi qu’à la micro typographie.

Voir le projet