Retour page principale

IOLCE Case Study

Objectif

IOLCE est un workshop de la section Design Web & Mobile à la Haute École Albert Jacquard. L’objectif de ce workshop est de réinterpréter en groupe une conférence, et par la suite de présenter individuellement ce contenu sous forme d’une page web en appliquant différentes notions de typographie, UX, etc.

Contenu

Une fois avoir formé un groupe avec lequel j’allais rédiger le contenu. Nous avons choisi ensemble la conférence “ The Internet of Natural Things ” de Simon Collison.

J’ai visionné la conférence une première fois et pris des notes globales à la fin, c’est seulement le jour avant la première mise en commun que je l’ai regardé une nouvelle fois et pris des notes au fur et à mesure de la vidéo.

Je suis arrivé le premier jour avec pas mal de notes, mais avant de mettre en commun et d’en discuter, nous avons mis en place un Google Docs pour partager, commenter et intervenir sur le même fichier. Après plusieurs heures, nous arrivons à une première version et décidons de demander au professeur supervisant notre groupe d’y jeter un œil. Suite à ce feed-back, nous avons restructuré l’entièreté du texte et reformulé tous les paragraphes.

Vendredi 19 octobre, soit deux semaines plus tard, en nous aidant de la retranscription et après un bon nombre de feed-back, reformulation, ajout et suppression, nous arrivons enfin à une bonne version finale de notre texte. À partir de ce moment-là, la partie collaborative était terminée, le design et le développement étaient à réaliser individuellement.

Une fois cette version finale entre mes mains, j’ai réalisé une structure personnelle du contenu en Markdown, ce qui m’a permis plus tard lors du développement, mais aussi à réfléchir aux différentes solutions graphiques me permettant de respecter la hiérarchie des informations durant la phase de design.

Design

Typographie

J’avais déjà mis au point en amont la couleur de paragraphe, le rapport hiérarchique et la combinaison de police.

Durant mes recherches, je souhaitais une couleur de paragraphe aéré avec une police sans empattement pour l’associer par la suite à une avec empattement. Une fois la couleur de paragraphe choisie, j’ai testé et sélectionné un rapport hiérarchique peu élevé et ai commencé à comparer différentes polices afin de trouver des hauteurs de x identiques entre la police de titre et celle de paragraphe.

Composition typographique du projet
Titre : 2.074em, hauteur de ligne : 115%, Vesper Libre Medium Paragraphe : 18px, hauteur de ligne : 180%, Hanken Grotesk Regular Rapport hiérarchique : Minor Third (1.2)

Moodboard

Pour m’aider dans la conception du design et pour garder de la cohérence, j’ai réalisé un moodbard avec des couleurs et des principes graphiques.

Moodboard du projet

Layout

Enfin ! Me voilà sur Sketch pour la réalisation du design, pour commencer, j’ai choisi une grille de 4 colonnes (gouttières de 18px et extérieures de 36px). Après avoir mis en place mon document, je peux réellement commencer le layout de la page.

Au début, j’ai placé mes éléments en respectant uniquement les espacements horizontaux de la grille pour tester et arriver à une disposition qui me plaisait. Ensuite, j’ai choisi des multiples de la taille du corps de paragraphe (18px) et je les ai utilisés comme valeurs d’espacement vertical et comme hauteur pour tous les éléments (soulignements, photographies, logo, icônes, etc.).

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

Développement

HTML & CSS

Cela faisant bien longtemps que je n’avais pas intégré un site de A à Z et j’ai pris un peu de temps, car j’ai dû intégrer de nouvelles méthodes de travaille fraîchement apprises durant les cours, comme la sémantique HTML, BEM et DRY.

Mes fichiers HTML et CSS s’allongeaient au fur et à mesure du temps qui passait, et à partir d’un moment je n’avais plus qu’à ajouter l’attribut class dans mes balises HTML. Ma page se mettait en forme avec les différentes combinaisons de classe que j’avais mise en place grâce à la méthodologie BEM. J’avais seulement à faire quelques ajustements sur certains éléments spécifiques.

Micro Typographie

Une fois la partie HTML et CSS terminés, je me suis attaqué à la micro typographie, c’est une partie que je n’avais pas préparé lors de mon design sur Sketch, j’ai donc dû parcourir mon contenu au milieu des différentes balises HTML ainsi que vérifier pas mal de fois de n’avoir rien oublié.

JavaScript

J’ai attendu la fin pour ajouter un peu de JS puisque je ne savais pas si j’allais être dans les temps. J’en avais de tout manière besoin pour l’ouverture de mon menu, mais j’en ai profité pour ajouter un effet smooth scroll pour avoir une navigation un peu plus sympa.

Voir le projet