Je me prépare pour mon TFA ( Travail de Fin d’Année ) . Avec l’aide des gens avec qui j’ai discuté, j’ai pu me guider vers une idée de projet : faire un site qui nous dit quel super - héros on est, plus précisément un héros faisant partie de la Justice League. C’est quelque chose que je trouve assez fun à réaliser mais également intéressant car je vais devoir créer un algorithme qui me permettra de trouver la bonne réponse.

Il faut savoir que même si ce projet paraît plus utile pour montrer des qualités de design, je vais essayé de faire en sorte que ce soit très axé code quand même ( vu que c’est la partie que je préfère ) . D’un autre côté, je pense que ce projet peut aider certaines personnes à améliorer ou retrouver leur moral, être identifier à un super - héros ça peut faire plaisir.

Penser à tout pour commencer

Pour me renseigner et faire mon travail au mieux j’ai lu deux livres de psychologie. Cela m’a permi de trouver la meilleur méthode possible pour déterminer la personnalité de chacun ainsi que la manière de proposer des choix. Pour le côté personnalité des super - héros, je suis un fan et en lisant des comics on se rend assez bien compte du tempérament de chacun.

J’ai alors mis en place mon test se passant sur une journée des évènements et préparer les réponses possibles, ce qui en découle et les résultats par rapport aux super - héros. Dix événements, deux, trois ou quatre choix de réponse par événement, ce qui nous donne 23 328 résultats de journées possibles. J’ai six héros avec lesquels on peut s’identifier mais vu le nombre de résultats possible, je suis obligé de présenter les gens sous différents héros dont un principal avec le plus grand pourcentage puis d’autres avec des pourcentage plus faible. Les personnes faisant le test serait alors un super - héros en particulier pour des raisons en particulier.

Commencer son design

Je pense ensuite à des problèmes plus graphiques en commençant mon wireframe de ma page de présentation, après sa rédaction. Je souhaite sortir un peu de ma zone de confort en faisant un design plus arrondi, mes designs sont souvent très carrés, de plus cela apportera un côté plus conviviale à mon site.

Les typos choisis et testées sont également plus arrondi, la Poppins pour les textes et la Varela Round pour mes titres. Niveau couleur, le texte serait principalement noir et en plus de certaines parties de fond blanc, il me faudrait du rouge et du jaune mais plus sombre que ce qu’on a l’habitude de voir pour coller avec l’univers sombre de DC comics d’où provient la Justice League. Ce choix de couleur n’est pas fait par hasard, le noir, le rouge et le jaune sont les couleurs les plus présentes des personnages que je vais utiliser comme résultat possible.

premier design

Du design au code

Sans cesse, il faut passer du design au code pour avancer dans le projet. Vu que c’est ce dont je suis le plus fan, je commence par le fichier JavaScript de l’app et le JSON. Pas trop de souci sur ce point de vue là, juste un petit problème que je n’avais pas bien compris avec une fonction que je crée pour éviter de me répéter et de rallonger mon code où j’assignait une de mes variables comme paramètres mais ne fonctionnait pas comme je le pensais après un peu d’aide j’ai pu débloquer le souci. Cela faisait que mon application était déjà fonctionnelle.

Recommencer son design

Après moultes réflexions et discussions, j’ai recommencer en partie mon design, une partie de la base de celle - ci était bonne mais il manquait ce rappel au comics. On commence par retester des typographies pour trouver une typo titre plus comics ne vous en fait pas pas de Comics Sans, mon choix se fit plutôt sur la typo Kavoon qui gardait cet aspect très grasse tout en gardant l’arrondi et un peu décalé de certains titres de comics. Pour les textes, j’ai choisis la Nunito qui est encore plus arrondi que la Poppins et correspond mieux aux textes présents dans les bulles de comics, le seul soucis de cette typo est que la version regular est trop fine du coup je choisis la version semi - bold pour correspondre plus à cette graisse d’encre sur les pages.

Pour mon fond, j’avais fait un aplat des couleurs choisies mais en fait je finis par mettre en place un motif de petits points au - dessus de l’aplat pour faire penser au trame utilisé pour l’impression de comics et même de BD en règle générale. J’avais aussi garder un côté plus arrondi pour sortir de ma zone de confort … ça a changé au profit encore de ce rappel aux comics par des barres, des coupures, des diagonales qui font repensés aux découpures des comics entre deux cases.

Dernière chose, le côté bulle de comics que j’ai essayé de faire ressortir en incluant des svg à mes titres ou en faisant ces formes de bulles pour les choix de réponses du test.

design final

Continuer le code

Je continue mon code, ici le côté HTML et CSS. Il est l’heure de commencer le style des pages. Je ne vais pas parler de tout en détails mais juste vous faire part des difficultés que j’ai rencontrés. Premièrement, l’apprentissage de la création de bulle de comics en css pour garder ce côté responsive aux choix de réponses générées par le JSON. Pas très difficile à mettre en place quand on comprend la technique par contre j’ai eu très dur de choisir quelle forme elles devaient avoir. Ensuite, les barres que je met en after ou before pour ajouter cette coupure précisée plus tôt qui cachait des fois mon texte ce qui m’as obligé de positionner ces textes en position absolute puisque le système z - index pour mettre en avant plus tel élément qu’un autre élément ne fonctionnait pas comme voulu.

problème de barre oblique

Il y a aussi le fait que je n’ai pas pu utiliser cette technique pour le changement de section de ma page de présentation par exemple car le fond coloré avec les points ne s’accordait pas alors j’ai du utiliser la technique clip - path et transformer mon fond en polygon dont le coin supérieur gauche était descendu. Le problème avec cette technique c’est qu’elle m’oblige de mettre l’autre couleur avec les autres points sur le body et plus sur la section à laquelle elle appartient réellement sinon j’ai un triangle blanc sur le côté descendu par le clip - path.

Penser à tout tout le temps

Cette exercices exprime quand même bien cette phrase « Penser à tout, tout le temps » car c’est le cas et pas que pour le design ou que pour le code cela se fait sur les deux en même temps jusqu’à un résultat final concluant. Il me reste encore des textes à terminer et repasser et ce projet sera terminé.

Continuer d’avancer

Encore quelques modifications à faire. Niveau design, j’ai repensé ma navigation et ma page où est affiché les résultats qui change complètement en desktop, elle ne se fait plus sous forme de slider mais sous forme de 6 blocs. Niveau code, j’ai améliorer mon fichier JavaScript et essayer de mettre un peu d’ordre dans mon HTML, ce qui conduit aussi à des modifications dans mon CSS.

version finale sur desktop