Comme chaque année, les étudiants du 2ème année DWM doivent réaliser un workshop qui s’appelle IOLCE (Input Output Lire et Communiquer sur Ecran) ! L’objectif principal de ce workshop est de regarder une conférence et la retranscrire à l’écran. Cet atelier est vraiment super génial, car on apprend pleins de choses comme par exemple:

  • Apprendre à lire, écrire et communiquer sur écran
  • Travailler en groupe
  • Avoir un esprit critique et justifier ses choix
  • Comprendre et s’approprier le contenu d’une conférence traitant des métiers du web
  • Mettre en place une méthode de travail
  • Concevoir des wireframes…

Je vais vous expliquer ci-dessous toutes les étapes qui m’ont conduit vers la finalisation de IOLCE.

Etape 1 : Le contenu

Une fois la conférence a été choisi par nos profs, je l’ai regardé plusieurs fois en prenant des notes pour et en identifiant des idées principales, j’ai effectué aussi plusieurs recherches sur internet sur Ethan Marcotte et sur les points importants qu’il a dit pendant sa conférence, ensuite j’ai ressemblé tout cela dans a document Google Doc pour avoir finalement un contenu final.

Etape 2 : Les wireframes

Une fois tout le contenu établi, j’ai commencé à m’inspirer des sites web sur internet pour crée mon propre design pour le site web de la conférence, y’avait plusieurs choix à faire comme le choix des couleurs, la police, les images…

Les couleurs:

Les couleurs que j’ai choisi

La typo:

Karla font
Roboto Slab

Etape 3 : Le design

Une fois j’ai choisi mes couleurs, ma typographie, j’ai commencé à réaliser le design par rapport à mes idées et mes inspirations, j’ai réalisé mon design au propre sur Adobe XD.

Image du design:

Etape 4 : Codage

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.

Merci pour votre attention :)

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