David Bowie — Avancement #3

Julien Debrauwer
4 min readApr 2, 2019

--

Beaucoup moins de travail depuis jeudi

Difficile de concilier le professionnel et le personnel parfois, ces derniers jours en ont été la preuve. J’ai moins travaillé depuis jeudi, il y a des coups de fouet qui se perdent! Vous avez raté l’article précédent? Article avancement #2.

De longues recherches typographiques

Après avoir avancé sur les moodboards, la création du design peut commencer. J’ai d’abord voulu mettre en forme mes contenus textes pour ensuite habiller les deux pages que je vais proposer en MVP. Je me suis alors lancé dans une longue phase de recherches typographiques, la web typographie étant une étape que j’affectionne!

Comparaison de hauteur entre plusieurs X.

Après un long combat, j’ai fait mon choix:

  • La police Abril pour les titres;
  • La police Poppins en bold pour les titres de niveau 2 et en Regular pour le corps de texte.
Combinaison de polices retenue: Abril, Poppins Regular et bold.

Design pour le MVP

Après avoir mi en forme mes contenus, je peux alors mettre à profit les phases de recherches, d’inspirations, de wireframing et de moodboards pour mettre en forme mon design.

La page principale, avec ma data visualisation. Au clic sur un des cercles, on accède à l’un des faits marquants.
La page de présentation du personnage Ziggy Stardust, crée par Bowie.
Autre page du MVP: le thin white duke.

Ces trois pages seront présentées au MVP, la fonctionnalité de base de mon projet étant de pouvoir cliquer sur un élément de la data visualisation pour accéder à un fait marquant de la carrière du chanteur. Chacun des faits présentes des couleurs, formes et ambiance différentes pour souligner les diverses périodes traversées par le chanteur.

Je suis plutôt satisfait de mes essais, il faut maintenant que je passe au code pour pouvoir proposer un prototype fonctionnel en test et avoir des feedbacks sur ce que j’ai mis en place.

Conseils de mon professeur référent

J’ai pu discuter avec mon professeur référent notamment pour avoir son avis sur la manière dont je pouvais aborder les choses pour rendre ma data visualisation plus attrayante et attractive. Le but est d’attirer l’oeil de l’utilisateur, lui donner envie de naviguer et en apprendre plus sur David Bowie, même si il n’en avait aucunement l’intention en arrivant sur mon projet. Il m’a conseillé de renforcer le côté “galaxie” ou “univers” de ma data visualisation, en faisant en sorte:

  • qu’au clic sur un des points de la data visualisation, on soit projeté dans le fait marquant;
  • qu’il y ait une impression de profondeur grace à un effet de parallaxe et une utilisation de l’axe Z, avec une position en profondeur différentes pour chacun des points;
  • qu’on donne un avant goût du fait marquant en cliquant une première fois dessus (les couleurs et l’ambiance de la page principale changent, etc.).
Voici un croquis de l’interaction voulu pour mon expérience.

Ce sont des pistes intéressantes à creuser, bien entendu pour le TFE, peut être pas forcément pour le MVP, je dois d’abord faire en sorte d’avoir une interface fonctionnelle, au clic sur un des cercles, on affiche le fait marquant associé.

Je suis conscient qu’il me reste énormément de travail et j’essaie d’être à fond quand je travaille, il faut que je m’accroche. J’ai vraiment envie de créer une expérience attrayante et intéressante, autant visuelle qu’informative.

La suite

Je le sens, je le sais, il va falloir coder! Une phase que j’apprécie aussi beaucoup (en fait, j’aime tout dans le web!!!). Il va falloir que je me penche sérieusement sur le développement de mon projet, avec une documentation sur GSAP en perspective je pense. Aller au boulot

Comme d’habitude, allez jeter un petit oeil au timesheet de ma semaine!
Total des heures de la semaine: 13h30.

Sur ce, je vous dis à la semaine prochaine, promis je travaillerai plus que celle qui vient de passer!!

--

--