Design web & mobile

Iolce – Anatomy of a resilient web

Comme chaque année, le fameux workshop ioLCE fait son apparition ! L’objectif principal ? regarder une conférence et la retranscrire à l’écran. Cet atelier est vraiment super génial, car on apprend pleins de choses et en plus on peut partager notre réalisation sur internet ! Je vais vous expliquer ci-dessous toutes les étapes qui m’ont conduit vers la finalisation de ioLCE.

Phase de groupe 1 ⇨ Le défi est lancé !

La première partie de ce workshop a débuté en groupe. Nous sommes 4 à travailler sur une conférence donnée au hasard de manière à cibler les informations importantes et en faire un contenu hiérarchique. La conférence est en anglais donc il faut pouvoir la retranscrire et en garder l’essentiel.

Nous avons travailler pendant plusieurs semaine pour bien comprendre la conférence et pour prendre des notes. Nous avons réfléchi à divers moyens de la représenter à l’écran.

Phase de groupe 2 ⇨ Le contenu

Une fois la conférence bien mémorisé et les notes prises, on s’est attaqué à la création de notre contenu final. On a réfléchi à ce qui était représenté en image et en texte, pour finalement écrire une version qui nous correspondait à tous. On a par la suite écrit tout ce qu’on avait sur un google sheet de façon à se représenter notre hiérarchie de l’information.

Phase perso 1 ⇨ Les wireframes

Une fois tout le contenu établi, nous avons du continuer seul sur la réalisation de nos workshop. Le design était donc personnel.

J’ai donc entamé mes wireframes (Croquis papier ou numérique du site) de façon à visualiser une structure sur ma page web. J’ai également rajouté des images et des textes pour commencer à avoir une partie de mon design.

Une fois mon wireframe terminé, j’ai décidé d’établir un style guide et un style tyles. “Guide” pour les couleurs et “tyles” pour la typographie.

Phase perso 2 ⇨ Style Tyles et Style Guides

J’ai commencé par imager mes couleurs. Après plusieurs réflexions, j’ai opté pour les deux couleurs principales de ma conférence c’est à dire l’orange et le rouge. J’ai rajouté à ceux deux couleurs des nuances entre le blanc et le noir.

Phase perso 3 ⇨ Visuel

Une fois mes couleurs choisies, mes typographies choisies et mon wireframe terminé, je me suis attaqué au design. J’ai réalisé ma mise au propre sur Sketch.app (application conçue pour les designers — Disponible seulement sur MacOS). Cela m’a prit du temps mais j’ai finalement réussi à crée un visuel qui soit bien représentatif de la conférence.

Phase perso 4 ⇨ Intégration

J’ai ensuite commencé à intégrer mon design sur écran. J’ai utilisé la méthode BEM et le SASS pour coder plus proprement et facilement. J’ai rajouté quelques animations. Le code était la partie la plus fun, c’est toujours bon de pouvoir mettre au point ses propres créations.

Conclusion

ioLCE est un atelier vraiment fun. J’ai prit beaucoup de plaisir à la faire. J’aime regarder des conférences et les expliquer sur écran. J’ai beaucoup apprit sur le web grâce au conférencier Jeremy Keith ( Je donne les liens plus bas). Ma conférence est en ligne à présent et je vous invite à y jeter un coup d’oeil !

     Projet au hasard