Case Study iolce aout 2019

Ethan Marcotte The World Wide Work

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
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.

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.

--

--

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