Janus

Objectif du projet

Pour la fin de ce quadrimestre, nous devions réaliser ce projet appelé: Janus. Janus, c’est un travail sur un·e influenceur·e qui est dans le milieu du web. On doit réaliser 4 pages sur cette personne: une page factuelle, une page où l'on fait sa promotion, une page critique et une page contenant notre avis. Pour ce travail, j’ai choisi de parler d’Alberta Tech, je ne la connaissais pas avant mais j'ai directement aimé son contenu et les sujets qu'elle aborde. J’ai commencé par me renseigner car nous devions écrire et créer 4 pages sur cette personne. Ensuite, je me suis lancée dans le design. Nous devions respecter la même direction artistique (DA) que celle de l’influenceur pour 3 pages sur les 4 et pour la page critique il fallait créer une DA complètement différente. J'ai choisi de la faire sous forme de casier judiciaire, comme si on lui reprochait quelque chose. Une fois satisfaite de mon prototype Figma, je me suis mise à coder.

Des essais oubliés

Au début j’ai eu un peu de mal à comprendre comment représenter sa DA car elle n’en a pas une bien définie, il y a juste quelques petits détails qui reviennent régulièrement dans son contenu. Je me suis donc inspirée du style de son site web pour son merch et des symboles pixelisés sur ses miniatures de vidéos.

Rétrospective

Quand je suis passée au code, je me suis rendue compte que j’allais avoir du mal à rendre certaines choses responsives. Il m’a fallu plusieurs tentatives avant que je sois satisfaite du rendu sur téléphone car je trouvais ça vachement vide, peu personnalisé. Mais après avoir regardé quelques sites sur téléphone, je me suis rendue compte que c’était souvent la seule possibilité pour le rendu téléphone: un design simple et léger.

J’ai rencontré deux grosses difficultés en codant ce projet. La première était l’animation sur ordi des réseaux sociaux sur la page d’accueil. Il y avait un changement de taille dû au fond bleu qui décalait la manière dont l’animation se faisait en état “hover”. Pour régler ça, j’ai ajouté un fond rose de la même couleur que le rectangle afin qu’il n’y ait plus de changement de taille mais que le fond ne se voit pas. Ce n’était pas un problème difficile à régler mais il m’a fallu du temps pour comprendre d’où venait le problème. Ma seconde difficulté a été l’adaptation du footer pour toutes les tailles d’écrans. Je ne voulais pas d’un footer qui faisait “pierre tombale” au fond des pages mais ça a rendu les choses compliquées vu que les pixels dépassaient parfois la limite du footer dû au zoom.