De la conférence au site web

Nouvelle année scolaire, et premier gros projet pour nous, l’option DWM de la HEAJ Namur.

Lua Jacqmin
Jan 10, 2019 · 5 min read

Pour ce projet, il nous a été demandé de visionner la conférence de Robin Christopherson, qui a eu lieu lors du Beyond Tellerand de Munich en 2018.
Notre tâche consistait à réaliser un résumé de cette conférence, puis de créer une page web à partir du texte obtenu.

Première étape : visionnage et rédaction

Pour la rédaction du texte, j’étais accompagnée de Raffaele Stasi, Arnaud Dindeleux ainsi que Jérome Willems.

L’équipe. De haut en bas et de gauche à droite : Jérôme, Arnaud, Raffaele et moi-mêle :)

Nous avons donc essayé de rédiger un texte qui convenait à tout le monde mais en même temps, qui correspondait aux attentes d’un texte qu’on pourrait retrouver sur le web.

Cela a été notre première difficulté. Chacun y allait de son style, qui évidemment était différent de celui de son voisin. Finalement, on s’est tous mis d’accord pour adopter un style clair et concis.

Notre texte s’est donc composé de phrases simples et réduites le plus possible.

Vient ensuite la partie développement…

Ensuite nous avons dû réaliser un markdown. J’étais sceptique de cette technique car je pensais qu’il faudrait refaire la structure créée totalement en HTML, ce qui sonnait pour moi comme une perte de temps. C’était sans compter sur le fait qu’on peut directement transformer un fichier markdown en fichier html, avec une majorité de balises déjà correctes.

Puis est venu le moment d’intégrer un fichier CSS, afin de “mettre en page” notre site.

C’est, à mon sens, la partie qui m’a donné le plus de fil à retordre. Le fait de devoir créer un site lisible sur mobile a été une contrainte certaine, au vu du peu de place disponible pour créer un design attirant et sympathique.

J’étais assez confiante en ma capacité à créer des designs colorés et attirants. Je me suis vite rendue compte qu’il me restait encore beaucoup de chemin à parcourir avant de créer un design correct.

Ma première composition était un réel carnage. Aucune gestion de ma palette de couleur, rapport hiérarchique de mes titres catastrophique, et aucune de mes images ne daignait s’afficher.

Si je devais encore énoncer une difficulté, ça serait le fait que j’ai voulu me focaliser plus sur des détails tels que les animations du site, des liens, etc.

En revanche, le fait de tester pas à pas les différentes choses que l’on a apprises dans nos cours était très stimulant, voire amusant.

Pour moi, le code est comme une espèce de formule magique qu’on écrirait et qui permet de faire des choses incroyables et magnifiques, et j’ai hâte d’en apprendre davantage.

Première présentation

Après les congés d’automne, nous avons fait une première présentation de notre Iolce. J’étais peu fière de ce que j’avais à présenter, je savais bien que mon projet n’était pas incroyable et que j’avais encore beaucoup de points à améliorer.

Nous devions faire le tour des Iolce des autres. Le fait de percevoir la différence de niveau entre moi et certains élèves m’a boostée encore plus à donner le meilleur de moi-même.

Reprise en main et amélioration

Difficulté supplémentaire pour la 2e partie, nous devions rendre notre page responsive, c’est à dire lisible sur tous les écrans, avec des layouts adaptés pour chaque largeur d’écran.

J’ai décidé de refaire entièrement mon design après cette première présentation.

Pour ça, j’ai refait une palette de couleur en me servant de colorbox.io ainsi que Adobe Color CC. J’ai décidé de partir sur une base de bleu-vert, de manière totalement arbitraire je dois l’avouer. J’adore cette couleur et je voulais partir d’une seule couleur et créer différentes nuances.

J’ai aussi fait le choix de créer mes propres illustrations, mise à part la photo de Robin Christopherson.

Croquis et versions finalisées des illustrations

C’était l’occasion pour moi de développer un peu mes compétences en Illustrator, qui était clairement le logiciel que je maîtrisais le moins à la fin de ma première année d’infographie.

Niveau design, je suis partie sur quelque chose de plus simple : fond blanc, texte noir, une illustration vient s’ajouter entre le titre et les paragraphes.

Mes layouts, de la version mobile à la version desktop

Ce que j’en retire

Une expérience importante dans mon parcours scolaire et personnel

Grâce à ce workshop, j’ai compris qu’il ne fallait jamais se reposer sur ses acquis. Il faut continuer encore et encore à perfectionner ses compétences, autant en soft skills qu’en hard skills. La maitrise des logiciels, des langages de programmation, est aussi importante que la capacité à gérer un travail de groupe, un planning… J’ai appris qu’on pouvait tomber, à condition de se relever et de persévérer. J’ai appris à être plus curieuse que jamais, chercher sans cesse l’inspiration, entrainer mon oeil à faire les bons choix visuels. C’était une expérience vraiment enrichissante et une grande fierté pour moi de voir mes efforts récompensés.

J’ai plongé la tête la première dans le monde du design web et mobile, et je ne regrette pas.

Lua Jacqmin

Written by

DWM Student at HEAJ Namur (Belgium)

More From Medium

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