Case-study : un site pour l'unité ?

Remise en question

Retravailler un travail de fin d'année, ça a d'abord été "se remettre en question".

Début août, je commence enfin à plancher sur mon TFA, après un mois d'animation, entre plaines de vacances et scoutisme.

Tout d'abord, je mets mes idées au clair. Que dois-je améliorer ? Comment vais-je procéder ? Dois-je me faire un planning ?

Je définis mes objectifs:

  • Changer mes transitions de pages
  • Corriger les erreurs de styles faites en juin
  • Introduire mon formulaire d’inscription de manière moins intrusive
  • Améliorer la navigation
  • Revoir ma cohérence graphique

Croquis et premiers tests

Histoire de commencer en douceur, j'esquisse quelques croquis pour les illustrations de mon site.

esquisse d'un louveteau

Pour ne pas rester sur la même partie de travail trop longtemps, je teste aussi une nouvelle transition de page pour mobile. Celle-ci est composée de 3 bandes verticales qui découvrent la page avec un décalage dans le timing.

Je teste aussi une nouvelle manière de faire apparaitre mes phrases d’accroches. J’aimerais qu’elles apparaissent et se décalent vers le haut, comme dans une discussion sur un chat.

Je tente plusieurs technique (en utilisant un timeout, en gérant les délais d’animations en css…) mais rien ne va. Je cherche donc une animation qui correspondrait à mon idée sur internet mais rien de concluant.

On continue sur notre lancée.

Le 2e jour, je continue de travailler sur mes illustrations, et je réfléchis à ce que je vais faire pour garder une bonne cohérence graphique.

Je décide de garder les couleurs que j'avais choisies pour mon TFA de juin. Je change cependant ma palette pour les feuilles tropicales qui me servent de décoration du site.

Je redessine entièrement mes feuilles tropicales, dans un style plus léger avec mes nouvelles couleurs. Je vais sur pinterest pour trouver l’inspiration des formes.

J’ai d’ailleurs créé un tableau Pinterest pour garder dans un coin mes inspirations.

Je termine 2 de mes illustrations. J’en profite pour créer et tester le motif qui servira pour les transitions en mobile.

Pour l’instant donc, je suis beaucoup sur illustrator, et je suis assez fière de voir que je n’ai pas perdu la main. J’ai également recommencé un fichier adobe xD pour refaire une maquette propre.

Je dois avouer que j’ai du mal à me motiver pour commencer à coder. En effet, vu que la structure de mon site laissait à désirer j’ai décidé de le reprendre de zéro, mais le fait de voir mon fichier html vide me déprime un peu.

J’ai donc peu cherché à résoudre mon problème d’animation de la veille, cependant j’ai trouvé une solution qui pourrait m’aider et que je dois encore tester.

Illustrations finies et début du design

J'ai enfin fini mes illustrations principales. Cela m'aura pris 3 bonnes journées. En voici 2 :

deux louveteaux se saluant deux louveteaux au coin du feu, discutant

Je commence donc mon design system proprement en me basant sur les conseils de Mizko, trouvé sur Instagram

J’ai d’abord créé ma grille verticale pour mobile. Elle se compose cette fois de 2 colones de 150px et d’un gap de 9px. A la base j’avais gardé mes 3 colones de 100px mais en y réfléchissant, je me suis dit que ce n’était pas très utile.

J’ai donc repris une partie des couleurs de mon site finalement, pas toutes. Comme conseillé dans le post de Mizko, j’ai pris mes couleurs de bases et j'ai créé des nuances en ajoutant du blanc ou du noir avec une opacité réduite à 25 ou 50%

les couleurs de mon site

J’ai gardé mes typos mais j'ai utilisé le site type-scale.com pour générer les différentes tailles de polices pour mes niveaux hiérarchiques. J'ai trouvé ce site très utile, il propose de reprendre les tailles en em, c'est la première fois que j'utilisais cette unité plutôt que les pixels et ça s'est avéré plus rapide.

mes typos et les différentes tailles l'ensemble typos des titres et des paragraphes

Ensuite j’ai fait mes différents boutons suivant leurs états, et de même pour les formulaires.

Mes boutons dans différents états Mon formulaire

J’ai un peu de mal à jongler entre mes couleurs primaires, secondaires et tertiaire, j’essaye de les répartir de façon logique sur les éléments de mon site mais je ne suis pas convaincue par tout.

J’ai par contre ressenti beaucoup de stress quand il a fallu commencer à refaire le design du site en lui-même. Je commence par le mobile, comme on nous l’a appris. Mais je sèche.

On commence (enfin!) à coder.

J’ai commencé à coder le 6 août, parce que j’étais un peu lassée de travailler sur Adobe XD. Cependant mon design est en grande partie finie pour le mobile et déjà bien avancé pour le desktop.

Le design mobile de mon site le design desktop de mon site

Pas trop d’encombre pour obtenir ce que je voulais, j’étais assez confiante.

Mon slider qui ne prends pas toute la largeur de l’écran à cause de son container. Ce slider m’a posé beaucoup de souci car pour obtenir le visuel que je voulais il a fallu imbriquer div sur div …

le design de mon slider

Deuxième problème, mes boutons radio dans le formulaire. Quand le oui était selecitonné, c’est le non qui se mettait en highlight

Grosse session de code

Les jours qui ont suivi, j'ai arrêté de prendre note de ce que je faisais. Mon activité principale est de coder, de chercher les petits problèmes de code pour les résoudres.

Dans les problèmes rencontrés et résolu, je peux citer le fait que ma transition n'était pas fluide. Le problème venait du fait que mes bandes verticales disparaissaient avant que mon site ne change de page. Cela était dû au fait que je rajoutais un "display : hidden" à mes transitions lorsqu'elles étaient finies, ce qui fonctionnait quand on arrive sur la page mais pas quand on en sort.

J'avais aussi un problème de syntaxe dans mon css. Le validateur m'affichait des erreurs car j'utilisais une imbrication de type .classe:hover{ &:after} } alors que je pouvais simplement l'écrire .classe:hover:after mais je n'ai découvert ça que quelques jours après.

J'ai fini par résoudre mon problème avec les boutons radio oui et non, en fait il fallait que je mette le label après et pas avant l'input

J'ai fini par abandonner l'idée de chercher comment mettre mon slider sur toute la largeur de l'écran sans "casser" mon design

J'ai eu l'impression que la mise en page de mon site était plus simple cette fois-ci. Pourtant j'ai jonglé entre les flexboxs et les grids.

Je pense que j'ai codé sans interruption pendant 3-4 jours, jusqu'au 10 août. Du 10 au 15 (au moment ou je rédige ce case-study) j'ai passé mon temps à régler des petits détails.

Les petits détails

J'ai essayé plusieurs backgrounds pour mes décorations en desktop et en tablette avant d'arriver au résultat final. J'ai dû jouer avec la taille de mes feuilles, leur placement, l'opacité... Jusqu'à trouver ce qui correspondait à ce que je voulais.

J'ai passé beaucoup de temps pour que ma navigation en desktop se place correctement. Pour ça, j'ai du dévélopper un petit programme en javascript qui calculait la largeur totale de l'écran, retirait la largeur de mon contenu et divisait le résultat par 2. De fait, ma navigation reste toujours centrée

Les illustrations présentant les jeux ainsi que celles qui présentent les éléments de l'uniforme ont été faites après tout ça.

J'ai également développé un petit programme qui fait en sorte que toutes mes div dans les sliders aient la même hauteur, je trouvais que ça rendait plus propre.

J'ai aussi ajouté les petites animations qui font apparaitre les images et le texte grâce à la librairie AOS, qui m'a été conseillée par un camarade de classe (merci Raffaele !)

Je me suis aussi amusée à animer mes feuilles tropicales grâces aux animations svg.

Terminer par le départ

Ce n'est qu'après avoir fini la majorité des petits détails que j'ai décidé de m'occuper de ce qu'on voit en premier sur ma page d'accueil : l'accroche.

J'ai finalement opté pour des questions qui arrivent de la gauche, droite et du haut de l'écran, puis disparaissent et laisse apparaitre un texte qui incite à rejoindre notre mouvement de jeunesse.

C'est également à ce moment que j'ai finalisé mon footer

Mes forces et mes faiblesses

Si je devais retenir quelque chose de ce travail, je dirais que cela m'a conforté dans le fait que j'adore coder. Ma vision du code n'a pas changé depuis que j'ai commencé : c'est comme de la magie. On écrit quelques lignes de code et c'est tout un univers qui se crée.

Je me suis rendue compte que j'aime plus designer que je ne le pensais. C'est juste que je m'y prenais mal dans ma manière de faire.

Mes points faibles sont que je me déconcentre assez vite. Je ne sais pas rester des jours entiers sur une chose bien précise sans finir par me lasser et passer à autre chose. Je ne suis pas encore assez organisée par ailleurs.

Globalement, je suis assez contente du travail que j'ai fourni pour cette session. Je vois que j'ai fait des progrès depuis la dernière fois. J'apprends peu à peu et j'adore ce que j'apprends.