Travel Mate
Étude de cas en Design sprint de 5 jours - Création d'un site desktop first pour une valise connectée
Il m’a été demandé de concevoir en langages HTML et CSS un site de présentation pour une valise connectée avec une page d’Accueil, une page Produit et une page Data.
Méthode KJ
Wireframing
Photoshop
HTML
CSS
Recherche UX
Idéation
Une fois que nous avons eu bien pris connaissance de toutes les caractéristiques de la valise connectée pour laquelle nous étions chargés de faire un site internet, nous avons mis en place la méthode d’idéation KJ pour mettre en commun toutes nos idées pour la future interface.
La structure du site nous ayant été imposée, nous avons divergé, puis convergé sur nos zonings.
Wireframes - Desktop
Nous nous sommes ensuite réparti les pages à réaliser en Wireframes. Je me suis pour ma part occupée de la page d’accueil et de la page data en utilisant l’auto-layout.
Nous avons ensuite mis en UI nos wireframes selon un moodboard établi précédemment.
Intégration
Classes et Flexboxes
Une fois la conception sur Figma terminée, j’ai codé l’ensemble de l’interface en langages HTML et CSS sur le logiciel Visual Studio Code. À l’instar de l’auto-layout utilisé dans Figma, je me suis servi des class (HTML) et des flexboxes (CSS) pour conférer une uniformité et une précision visuelle aux différentes sections des
pages.
Keyframes
Pour ce qui est de la data, j’ai fait appel aux keyframes (CSS), qui m’ont permis d’ajuster avec précision les animations à l’intérieur des jauges.
Pseudo-class :hover
Enfin, pour l’effet de hover au passage de la souris, j’ai utilisé la pseudo-class :hover.
