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.

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

Afin de garantir une disposition cohérente et bien alignée des éléments sur l'interface, ce qui améliore l'usabilité et l'esthétique.
La pastille rouge sert à indiquer la sélection actuelle sur la barre, améliorant ainsi la visibilité pour l'utilisateur.
Une drop shadow ajoute de la profondeur et distingue la barre des autres éléments de l'interface, la rendant plus visible et interactive.