Conception de la Barre des Heures Déroulante
Cette vidéo vous montre comment créer et paramétrer une barre des heures déroulante en respectant les principes d'usabilité et de design.
Installation de Figma
Découverte de l'interface
Refonte de l'application météo "Rain Today"






















Prototypage de l'app
Pour aller plus loin / Bonus







Détails de la leçon
Description de la leçon
Dans cette leçon, nous allons terminer l'écran en nous concentrant sur la création de la barre des heures déroulante. Vous apprendrez à créer un rectangle, à ajuster ses dimensions et son style pour garantir qu'il soit utilisable sur mobile. Nous détaillerons chaque étape, de l'affichage de la grille à la duplication des formes et l'application des styles nécessaires. Nous nous assurerons que chaque élément est bien calibré, et nous montrerons comment ajouter des éléments de texte et les aligner horizontalement. De plus, nous aborderons l'ajout d'une pastille rouge pour indiquer la sélection et l'application de drop shadows pour améliorer la visibilité de la barre. Finalement, la leçon terminera par des ajustements mineurs pour affiner le design avant de vous inviter à passer à la vidéo suivante pour la réalisation d'un composant réutilisable.
Objectifs de cette leçon
À l'issue de cette vidéo, vous serez capable de concevoir et de paramétrer correctement une barre des heures déroulante, en assurant une meilleure usabilité pour les utilisateurs.
Prérequis pour cette leçon
Pour suivre cette vidéo, vous devez avoir des connaissances de base en design d'interface et en utilisation de logiciels de conception graphique.
Métiers concernés
Les compétences acquises peuvent être applicables dans les métiers de designer UX/UI, développeur front-end, et concepteur d'interfaces utilisateur.
Alternatives et ressources
En alternative, vous pouvez utiliser des libraries CSS ou frameworks front-end tels que TailwindCSS ou Bootstrap pour créer des barres similaires avec des composants préexistants.
Questions & Réponses
