Case Study
Iolce
Iolce est un projet organisé dans le cadre des cours de web. Il s’agit de découvrir et de comprendre un nouveau contenu. En premier lieu , il a fallu découvrir une conférence parmi une liste de 5 proposées par notre professeur. Personnellement, j’ai choisi All Together Now d’Alexandra Deschamps-Sonsino.
Design
Iolce est un projet organisé dans le cadre des cours de web. Il s’agit de découvrir et de comprendre un nouveau contenu. En premier, il a fallu découvrir une conférence parmi une liste de 5 proposées par notre professeur. Personnellement, j’ai choisi All Together Now d’Alexandra Deschamps-Sonsino.
Wireframes
Une fois un design en tête, j’en ai fait une rapide version papier afin de la faire tester à ma famille. Leurs conseils en tête, j’ai commencé à désigner une version numérique sur Figma. À la base, j’avais mis des photos juste à côté des textes mais ça n’a pas plus. J’ai alors eu l’idée de les mettre en arrière plan avec un effet de parallax (que je n’ai pas su réaliser sur Figma). J’ai donc fait un rapide test sur Codepen pour pouvoir le montrer lors des tests utilisateurs.
J’ai voulu faire un site simple et sobre. Les images que je comptais utiliser étant en noir et blanc je décide donc je faire tout le site en monochrome. Ça apporte ce côté simple, sobre et classe.
Code
Cette partie a été relativement rapide. J’avais déjà le code des sections avec du parallaxe que j’avais codé sur Codepen quelques jours plus tôt. Puis à force, on a quelques automatisme. Même si ça n’a pas empêché quelques couacs.
Je ne suis pas parvenu à faire les sections de la page d’accueil en oblique pour la version mobile. J’avais un scroll horizontal que j’ai supprimé sur PC mais pas sur téléphone. Après avoir cherché, je me suis dis que le plus simple restait de les faire en horizontal dans un premier temps et de revenir dessus par après.
J’ai aussi dû refaire une partie du code après m’être rendu compte que le design en version pc nécessite quelques ajustements dans l’html mais rien de grave en soit.
Je suis content du rendu final du projet. Je le préfère nettement à la première version. J’ai réussi à rester simple et à ne pas vouloir en rajouter toujours plus. J’ai pu au travers de ce projet travailler en mettant en avant le contenu, ce que je ne fais pas souvent. Ca m’a bien plus de réfléchir à la meilleure manière de mettre en place les images.