Case study

Un début de travail productif

Pour ce projet, j’ai dû choisir une conférence qui est en anglais et je dois la traduire et en tirer des points-clés pour pouvoir analyser Shirley Wu qui est la personne qui est au coeur de la présentation.

Choix de la conférence

Il y avait une liste de conférence, et j’ai choisi celle de Shirley Wu qui est basée sur le data, design, code car c’est le sujet qui me parlait le plus. Cela dure plus ou moins 1 h.

Partie solo

Pour commencer, j’ai de l'analysé la conférence de manière individuelle. J’ai fait un résumer avec des points-clés pour pouvoir en tirer les informations les plus pertinentes.

Partie en commun

Après le résumé personnel, on a constitué des groupes de 4-5 élèves qui avaient choisi la même conférence pour qu’on puisse faire un résumé global et avoir les bonnes informations.

Photo de l'ui-kit en court de réalisation

Création de l’ui-kit

Une fois le projet mis en contexte, il est temps de commencer mes recherches graphiques pour désigner mon futur projet.

Du coup je commence par faire des recherches typographiques. Je suis parti sur des titres dans la famille Didot et des textes dans la famille sans serif car je trouvais le contraste intéressant et adéquat pour ce thème + une couleur primaire et des formes pour la partie éléments graphiques.

Les maquettes et test

Une fois mon ui-kit réalisé pour avoir mes différents éléments graphiques et mes gestions de typographies, je me suis lancé sur la tache de mettre en forme mon futur site d’IOLCE pour avoir une représentation visuelle du site pour simplifier la seconde partie qui est le codage.

Pour faire mes maquettes, je prends ma liste de contrainte et j’essaye de baser mon site par rapport à ceux-là. La grosse nouveauté pour IOLCE est la structure et la mise en page du site par une grille. Comparé à Hello World, on doit utiliser les Css grid pour faire notre mise en page.

Photo de la grille que j'ai utilisé sur mon index Photo de mon plan de travail avec mes grilles et mes mockups

La plus grosse étape est pour moi le code de mon site web. Grâce à mes wireframes, j’ai déjà la structure visuelle de mes pages donc j’arrive à savoir comment bien structure mon HTML. La sémantique est simple aussi car j’ai déjà les tailles et les espacements de mes typographies.

Une fois mon HTML fini, je m’attaque à la partie Css. J’ai commencé par faire ma grille et c’est la partie ou j’ai un peu plus de mal car je venais de m’habituer au flexbox donc pour avoir une grille qui était parfaite à mon travail je l’ai travaillé durant quelque temps.

Après le travail de ma grille, je place mes éléments avec des classes dans mon HTML que je design dans mon Css et le tour est joué. La seconde grosse contrainte, est l’apparition d’un burger menu pour l'header lorsqu’on est dans un format mobile.

Photo de mon plan de travail avec mes grilles et mes mockups

Pour finir en beauté!

Une fois la majorité du projet terminé, il ne reste qu’à peaufiner et a demandé des retours auprès de mes professeurs et avec cela changer les dernières petites choses qui ne collent pas et un projet de plus terminer!

Photo du logo et de ma typographie pour avoir le thème global