nuage6 nuage6 nuage5 nuage6 nuage5 nuage6

Case Study

Un side project ? Késako ?

Étant une doublante (2.5 pour les néophytes du langage employé en DWM), je m’attendais à ce que les consignes soient les mêmes que l’année précédente, et l’année précédente, et l’année précédente,… en bref un portefolio et une présentation de soi en vue d’obtenir un stage.

Je m'y suis donc mise assez à l’avance afin de produire quelque chose de professionnel dans les temps. J’avais déjà fais une ébauche de design et lorsque je me suis rendue près d’un professeur afin d’avoir un premier feedback il m’a dit que les consignes changeraient cette année… VDM

corps
bras gauche bras droit
croquis aidy
Premier croquis d'Aidy

Cette année le thème était: un side project. Il m’a déjà fallu 2 bonnes heures avant de comprendre le concept (pourtant je vous assure que je ne suis pas blonde sous le bleu!) Je suis donc partie sur une idée assez farfelue mais qui me bottait pas mal, je voulais faire un site web sous forme de story-telling racontant une histoire pour enfant, avec de jolies illustrations, animations et interactions.

Compétences mises en avant :

  • Design d’une landing page (UI)
  • Illustrations
  • Ergonomie d’un jeu pour enfant (UX)
  • Animations CSS

Le problème ?

Le problème était que nous devions réaliser un side project dans le domaine duquel nous voudrions notre stage. Étant donné que je veux me diriger vers un stage plutôt orienté design, je n’allais pas réaliser un side project avec des illustrations, ni un projet axé purement code.

Après discussion avec des professeurs, je ne voyais toujours pas vers quoi me diriger, j’avais peur de réaliser un projet trop maigre par rapport à tous les autres qui font des projets de fou orientés code. On m’a donc suggéré de réaliser une landing page qui claque, présentant une application fictive ou réelle (si elle existe, en s’adaptant au design de celle-ci).

Je suis donc restée plusieurs jours à cogiter, me demandant ce que j’allais bien pouvoir présenter comme application… Au début je pensais me tourner vers l’application Made In Asia. Pour rappel, j’avais comme projet de réaliser leur application et ensuite de leur vendre étant donné l’importance de ce salon en Belgique et qu’ils n’ont tout simplement pas de site web responsive et encore moins d’application mobile/web app. Cependant, je ne voulais pas me confiner dans une charte graphique que je n’avais pas choisie.

croquis

Projet-ception

J’ai donc réfléchi (oui ça m’arrive)… ET… je me suis dit: “Etant donné que l’année prochaine tu vas devoir créer un projet, pourquoi ne pas présenter celui-ci dans ton TFA ? Ton TFE dans ton TFA !” J’ai proposé l’idée et ce fût validé ! Victoire ! Au moins c’est déjà ça.

Mon projet consiste en la création d’un jeu éducatif afin d’aider les enfants «dys» à acquérir une autotomie de travail et un suivi de qualité. Et de là le projet a pu voir le jour…

La page blanche

J’avoue avoir eu assez de mal à trouver une charte graphique, les moodboards n’y ont rien changé. Autant l’élaboration de la mascotte et du logo se sont faits tout naturellement, autant le choix des typos et des couleurs fut laborieux. J’avais les wireframes, je connaissais mon public cible et vers quoi je voulais me diriger mais impossible de visualiser les couleurs.

Je suis donc restée assez longtemps sans rien produire tout simplement car dès que je tentais quelque chose je perdais juste des jours et des jours car je n’arrivais à rien.

J’ai donc décidé de me mettre devant mon tableau blanc, j’ai pris un feutre, et j’ai fais un brainstorming pour savoir quelles étaient les informations importantes, vers quoi je voulais clairement me diriger etc.

croquis nid
Premier croquis du nid
before/after
Photoshop vs. Illustrator

J’en suis donc venue à la première conclusion que mon jeu serait une application desktop en priorité jusque tablette, il n’est tout simplement pas optimisé pour le smartphone car se serait trop petit à lire et à utiliser pour un enfant.

La deuxième conclusion était que mon jeu serait pour les enfants de 5 à 8 ans, il fallait donc des illustrations simples, avec peu de couleurs différentes et des contours noirs afin de différencier les éléments, du coup pourquoi ne pas partir sur un style un peu clipart ?

Enfin pour le choix des couleurs, un pingouin est généralement soit noir, soit bleu. Cependant, je trouvais le bleu plus sympa pour des enfants. Si Aidy doit être l’ami de l’enfant, je n’allais pas le représenter au Pôle Nord, l’enfant ne s’y identifierait pas. J’ai donc décidé de le placer dans un environnement simple, de jour, avec un ciel bleu, des nuages et un sol tout ce qu'il y a de plus commun.

Le Défi

N’ayant jamais utilisé Illustrator de ma vie avant cela j’ai d’abord tenté de réaliser toutes mes illustrations sur Photoshop à la tablette graphique, c’était ce que je voulais ! Cependant, après l'intégration du design, je me suis rendue compte qu’il y avait un décalage entre le style «dessin à la main» et le flat design du site…

Je me retrouvais donc au pied du mur avec 2 solutions: changer totalement de design pour qu’il colle plus à mes dessins ou refaire les illustrations dans le style du site…

Étant donné que le site me plaisait vachement pour une fois, j’étais vraiment fière de ce que j’avais produit, j’ai dû me résoudre à ouvrir Illustrator. Ayant plusieurs amis à l'aise avec ce logiciel, je leur ai demandé de me montrer quelques astuces afin de le prendre en main. Au final, je n’aime toujours pas ce logiciel mais je sais faire un minimum avec, ce qui est toujours mieux que rien.

J’ai demandé du feedback sur mon travail, celui-ci a été très intéressant, ça m’a pas mal fait réfléchir et il s’avère que les remarques étaient très pertinentes, mon travail est totalement différent juste en ayant changé 4–5 éléments !

stabilos

L'intégration

Le code de ce site était un challenge car j’y ai utilisé des svg pour les fonds et les courbes et bon dieu que c'était laborieux à comprendre ! C'était quelque chose que j’avais déjà en partie faite pour le workshop DataPlay, je l’ai approfondi ici. En effet le design est la branche du web qui me botte le plus avec l’ergonomie/expérience utilisateur, mais j’aime aussi beaucoup les animations css.

Une fois la machine lancée, tout s’est fait assez naturellement, je suis actuellement en train de réaliser mon portfolio indépendamment de ce TFA. Doubler m’a apporté beaucoup et même si sur le moment on se dit «qu’on perd un an», au final c’était plus que bénéfique, j’ai pu approfondir ce qui me plaisait et améliorer ce dans quoi j’étais moins douée.

visuel

L'élaboration

Pour le projet en lui même, j'ai commencé par faire des croquis des personnages, des œufs, des exercices et des écrans de jeu que je réaliserai l'année prochaine.

J'ai dû me mettre à la place d'un enfant de 5 ans et me poser tout un tas de questions comme «Qu'est-ce que je comprendrais ou ne comprendrais pas ? Comment j'aimerais qu'on me parle ? Qu'est-ce que j'aimerais faire sur ce jeu pour que ça paraisse moins scolaire ? Quelles couleurs utiliser ? Combien dois-je en mettre ? Un contour noir ou non ?»

De là je me suis lancée dans la réalisation de 5 écrans afin d'expliquer le concept de mon futur jeu avec un écran d'accueil, un choix d'avatar, personnalisation des informations de l'enfant, choix des exercices ainsi qu'un exemple de ces derniers. 

Ce projet me tient vraiment à cœur et je suis contente d'avoir pu me lancer dans cette aventure. Je pense avoir bien level up point de vue design depuis l'année passée, c'est en forgeant que l'on devient forgeron et maintenant, j'aime ce que je fais et je sais ce que je veux faire de ma vie !

Les améliorations

En effet mon travail n'avait pas montré tout son potentiel et je n'avais pas exploité toutes les ressources de celui-ci. Voici donc le comparatif de juin et aout, avec les modifictations que j'ai apportées au projet qui, j'espère, vous permettront d'encore mieux visualiser où je veux en venir.

La demo

Tout d'abord le gros point qui a été soulevé par tous les professeurs était que mon side-project était un peu maigre par rapport aux autres, en effet le projet les intéresse tous et il pourrait avoir une vraie valeur ajoutée, je décris bien tout le projet mais je n’en montre pas assez, ils sont restés sur leur faim. Ils m’ont donc suggéré de faire une démo testable Invision ou Adobe XD de mon projet car seulement 5 slides ne suffisent pas à se faire une idée du jeu.

N’y connaissant rien à Invision je me suis mise à regarder des tutoriels afin de comprendre comment cela fonctionnait.

Tester la demo

Les crédits

J’ai posé la question à Madame Wera afin de savoir ce qu’elle pensait de mon footer, car des footers qui attirent autant l’attention ce n’est pas commun et j’ai pris un risque.

old and new footer

Cependant elle le trouvait assez chouette et ne la choquait pas, elle m’a proposé de créer une page crédits si vraiment je voulais mettre les infos de l’école et les remerciements à part et j’ai beaucoup aimé l’idée.

credits

Le menu

Comme je n’avais pas réellement de side project, j’ai du en créer un. Donc le Invision devient mon side-project et mon ancien site la landing page. Il fallait donc adapter le menu. Pour cela Madame Wera m’a conseillé de retirer les éléments du menu supérieur en supprimant entièrment le menu et d’uniquement laisser des liens dans le footer redirigeant vers les différentes pages du site, j’ai pris la liberté de rajouter ma page 404 dans ces liens car elle fait partie de mon examen.

La 404

Enfin pour une remarque personnelle j’ai décidé de refaire une page 404 afin qu’elle soit plus en adéquation avec mon tfa et sa charte graphique.

404 404-new

Les typos

Comme les conseils de mMnsieur Marchal se sont toujours révélés justes, je suis allée le voir pour savoir ce qu’il pensait du projet final. Il m’a dit que le contenu était vraiment très intéressant et qu’il donnait envie d’être lu. Il m’a cependant fait quelques remarques assez précises afin que mon travail soit parfait. Par exemple, il faut un espace entre les guillemets et les points d'interrogation/exclamation.

Il m’a aussi fait une remarque par rapport à la police d’écriture utilisée pour les titres des box (et encore une fois il a totalement raison, ce sont des détails auxquels je n’avais pas forcément attaché beaucoup d’importance), je n’utilise la police Lobster qu’une seule fois sur tout mon site, or elle ressemble assez à la police de mon logo alors pourquoi ne pas la remplacer par cette dernière ou alors remplacer la police Lobster par celle utilisée pour mon logo ? Je me suis tournée vers la seconde option.

Le slider

C’est grâce aux erreurs que l’on apprend, j’ai pris un risque en faisant un slider un peu différent de d’habitude, contre toute attente il a plu ! Cependant on m’a demandé de rajouter une paire de flèches car, point de vue ergonomie, naviguer uniquement avec des bullets n’est pas le plus approprié. J’ai donc décidé de rajouter des flèches en opacité réduite qui apparaissent au hover.

slider-old slider-new

Le code

Pour ce qui était du code Monsieur Thronte et Monsieur Thérasse n’avaient rien à dire et ne remettent pas en question mes compétences. Je n’ai pas réussi suite à un document non valide W3C, j’ai donc directement modifié cela ainsi que le "type=text" qui est devenu un "type=email" pour le formulaire de page “about” et le doctype de toutes les pages qui était à la ligne 2 est maintenant à la bonne place.

Je vous invite à vous rendre dans l’article «à propos» afin d’en savoir un peu plus sur moi et sur la recherche de mon stage.