Case Study iolce aout 2019

Ethan Marcotte The World Wide Work

J’ai regardé la conférence une première fois en prenant quelques notes à la volée. J’ai parcouru ensuite la vidéo en m’arrêtant et en ciblant les éléments qui me paraissaient les plus importants. J’ai également complété mes informations avec les articles qu’Ethan Marcotte mettait en liens sur son site. J’ai enfin réalisé un texte structuré en plusieurs parties qui allait servir à la réalisation de ma page Web.

Le design

Choix des polices

  • Open Sans, Merriweather (Fast sur Google Font)
  • 2 graisses: Regular et Bold
Capture mobile.

Titres

  • Merriweather:( h3 = 1.953em , mobile), (2.7em, Desktop).
    Marges: (2.9rem, mobile) (5rem, Desktop).
  • Open Sans: (h4 = 1.563em, mobile), ( 1.8em, Desktop).
    Marges: 3.7rem.

Paragraphes

  • 15.6px
  • Hauteur de ligne: entre 150 et 200%
  • Rapport hiérarchique de 1.250 Major-Third, permettant d’avoir un contraste assez élevé entre les titres et les paragraphes.

Choix des couleurs

nuancier

J’ai réalisé plusieurs tests sur Adobe XD et Sketch en utilisant une grille de mise en page de 12 colonnes en Desktop et 8 colonnes en mobile, avec une gouttière de 16px. J’ai passé pas mal de temps à réaliser des tests non concluant avant d’arriver à une maquette qui me plaisait.

Capture Desktop

Le développement

Pour le html et css, j’ai utilisé la méthode BEM (box, element, modifier) que nous avons appris au cours de M. Thronte. J’ai pris beaucoup de temps sur cette étape car je devais revoir certaines notions que j’avais oublié ou que je n’avais pas appliqué lors de mon dernier projet.

En ce qui concerne le JavaScript, j’ai implémenté un simple burger menu permettant d’accéder aux différentes parties de ma page.

Optimisation

J’ai dû optimiser mes images en essayant de ne pas dépasser 120k pour chacune d’entre elles (sauf pour les exports en 2x). Je les ai compressées avec Optimizilla qui réduit le nombre de couleurs (elles sont alors indexées). J’obtiens donc un total de 3,55 Mo pour l’ensemble du fichier.