Case Study iolce aout 2019

Ethan Marcotte The World Wide Work

Image for post
Image for post

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
Image for post
Image for post
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

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post

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.

Image for post
Image for post

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store