Input Output Lire et Communiquer sur Écran | Case Study | A Brief History of Web Design

01. Une conférence

Pour résumé une conférence il faut avant tout la visionner et l’analyser. Le travail portait sur la conférence “A Brief History of Web Design” de Dave Shea donnée lors de la convention Beyond Tellerand de 2015.

La conférence est en anglais et il faut pouvoir la comprendre parfaitement pour pouvoir ensuite bien la traiter. Heuresement pour moi je me débrouille plutôt bien en anglais.

J’ai pris beaucoup de note pendant les visionnages de la conférence. J’ai pris le temps de comprendre les propos de Dave Shea et j’ai pris en note la grande majorité de son contenu.

J’ai ensuite synthétisé mes notes en établissant un plan avec le nom de mes différentes parties et sous-parties.

02. Une direction principale

Premièrement j’ai vite voulu éviter de faire un site “timeline” avec des dates et des évènements mis bout à bout. J’ai voulu traiter un peu plus en profondeur les sujets que j’avais jugé comme important lors de mon analyse de la conférence.

J’avais donc beaucoup de contenu à intégrer sur mon site et j’ai voulu le mettre en avant sans le noyer avec des images non constructives. J’ai donc choisi de partir sur un design composé de grandes images séparant chaque section avec un effet de parallax.

J’ai choisi de donner une couleur en superposition à chaque image pour renforcer la séparation entre les différentes parties.

03. Typographie

Pour la typographie j’ai décidé de travailler avec un ratio de 1.414 (major fourth) car c’est un ratio que je maîtrise et que j’apprécie beaucoup. Je connais les différents niveaux hiérarchiques par coeur et je ne m’en lasse toujours pas.

Pour le choix de mes polices j’ai voulu sortir de ma zone de confort, j’ai jusqu’à alors toujours travaillé avec des combinaisons sans-serif/sans-serif mais j’ai décidé pour ce projet d’utiliser une police serif pour les titres. 
Après beaucoup de test mon choix s’est porté sur Cantata One pour les titres et Open Sans pour le corps.

04. Hiérarchiser le contenu

Beaucoup de contenu textuel implique de pouvoir bien le hiérarchiser pour éviter de rendre la lecture trop indigeste. Pour ce faire j’ai utilisé plusieurs niveau de hiérarchie avec mes titres. Différence de font-size et différence d’habillage.

En plus de la hiérarchie des titres j’ai varié la position des blocs de texte pour rendre la lecture le plus confortable possible.

05. Conclusion

Le sujet de cette conférence était très intéressant car il met en lumière la façon dont le web évolue constamment et la nécessité de se tenir informé des évolutions et d’être prêt à toujours apprendre pour rester à jour dans ce milieu.

En plus de l’apprentissage personnel je me suis permis d’explorer et de sortir de ma zone de confort au niveau du design de ce site. Ce fut une expérience enrichissante à tout les niveaux.