Content First

Case Study

Content first

Une conférence de Jeffrey Zeldman

Ça y est, le sujet de l'atelier est donné. Il s'agira de regarder la vidéo d'une conférence pour ensuite la retranscrire et en faire un site web. Une conférence… en anglais. Ça promettait d'être difficile. Mon niveau d'audition en anglais étant relativement peu évolué, je me demandais comment j'allais bien pouvoir faire pour en comprendre ne serait-ce qu'un traître mot.

Mon groupe reçoit sa vidéo : il s'agit d'une conférence de Jeffrey Zeldman, « Content First ». Après une première écoute, la première chose que je me suis dit était « Oh, je n'ai rien compris ».

Heureusement qu'un des membres de mon groupe comprenait bien l'anglais et a pu expliquer au reste du groupe ( pour qui l'anglais était loin d'être une évidence non plus ) le sens général de la conférence. Ce qui m'a permis, à force de la regarder à nouveau, d'en comprendre davantage.

Donc... il faut écrire ?

Si je devais résumer les semaines suivantes en quelques mots, je dirais :

screen

Écrire n'est pas une chose aisée mais écrire ensemble du contenu destiné au web était une autre paire de manche. Nous voulions que notre contenu touche directement d'autres web designers, ou autre pratiquants de métiers du Web, avec un ton sympathique, des tournures de phrases pas trop formelles, froides et distantes. Le plus dur a été de combiner et écrire ensemble car chacun avait une approche de l'écriture très différente. Cependant, à force de concessions, d'argumentations et d'itérations, nous sommes parvenus à créer un contenu satisfaisant l'ensemble du groupe.

Le début de la fin?

La suite de l'atelier était personnel, créer le site web qui allait contenir le contenu durement travaillé. C'était le premier site web que j'allais créer de toute pièce, et j'avoue que je ne savais pas vraiment par quoi commencer. J'avais quelques règles de base qui trottait dans ma tête, telle que :

Cependant, au niveau du visuel, j'étais un peu perdue, tel qu'on peut le voir dans mon premier essai dont je ne suis pas particulièrement fière.

wireframe:essai

Donc, j'étais à nouveau au point de départ, c'est à dire, nul part. Pour commencer sur des bases saines, j'ai parcouru pinterest, awwwards et siteinspire, afin d'essayer de comprendre diverses structures de sites web. Ils étaient tous très différents, mais mon impression était qu'aucun ne contenait autant de contenu que celui que je devais mettre en ligne. Cependant, il y a quelques sites que j'ai directement ajouté à mes favoris et qui, je pense, ont contribué au visuel de mon site actuel.

J'en ai conclu qu'un site pouvait être efficace sans déborder de couleurs de tous les côtés.

L'histoire d'un contenu

Mon idée était de présenter un site clair, centré sur le contenu, en adéquation avec le sujet de la conférence « Content First ». Pour accentuer cet effet de clarté, je voulais offrir à mes lecteurs ( donc potentiellement vous! ) un texte aéré avec des titres mis en évidence, j'ai donc utilisé le principe de proximité de la Gestalt. Un espace suffisant entre un titre et son paragraphe, tout en comprenant qu'il s'agit d'un tout.

La réalisation, en pratique !

Je crois que je peux résumer ça en une seule phrase : Vive la communauté web !

screen skype

Oui, google est mon ami et chaque membre de la communauté aussi ! A chaque fois que je me posais une question sur comment je pouvais faire ça dans mon css, rendre ceci interactif avec js, rendre mieux mon html, je trouvais une réponse.

Haut en couleur

Le choix des couleurs ne fût pas simple, j'ai feuilleté énormément de catalogues de couleurs avant de trouver mon bonheur.

C'est finalement sur la palette blue magnet que j'ai jeté mon dévolu. Pas en entier, je ne voulais plus que mon site web ressemble à un arc-en-ciel. Je sélectionnai le gris #343838 ainsi que le bleu #00b4cc, auquel j'ajoutai un gris clair #e8e8e8 pour la couleur de mes titres. En effet, le blanc pur tranchait trop sur le fond gris #343838, le gris #e8e8e8 harmonisait le tout. Le bleu #00b4cc me servit à mettre en évidence certains mots-clés de mes titres, faisant ressortir directement le sujet du paragraphe qui allait suivre.

La typographie

J'ai choisi deux typographies différentes :

Playfair display pour mes titres

J'étais à la recherche une police élégante qui se marierait avec ma composition simple et aérée.

EB Garamond pour le corps de texte

Pour le corps de texte, il me fallait quelque chose de délicat, léger et EB Garamond correspondait parfaitement à mes attentes.

Le travail en groupe

Même si je suis parfaitement capable de travailler en groupe, je préfère en général faire cavalier seul. Dans l'ensemble, il y avait une bonne cohésion au sein du groupe, cependant, il arrive qu'une personne soit incapable de s'affirmer, de donner son avis malgré la demande. Dans un groupe, il faut de l'investissement individuel, et ce, de la part de chacun des membres. Malgré tout, le reste du groupe a fourni un excellent travail, et j'ai apprécier travailler avec ceux qui étaient motivés pour fournir un contenu de qualité.

Ce que j'en ai tiré...

En quelques mots, je dirais que j'ai vraiment compris en quoi consiste l'itération, à quel point c'est un concept important. Ensuite, la mise en place d'une grille et créer un wireframe photoshop peut sembler long et ennuyant mais ça facilite énormément le codage par la suite ! J'ai aussi appris que les professeurs n'étaient pas cannibales et que je pouvais sans soucis aller leur poser des questions et leur exposer mon avancement et mon travail. :)