<aside> <img src="/icons/arrow-right_blue.svg" alt="/icons/arrow-right_blue.svg" width="40px" /> imd1 • UI Design • Brief
</aside>
<aside> <img src="/icons/info-alternate_blue.svg" alt="/icons/info-alternate_blue.svg" width="40px" /> Réalisation Figma en individuel (étape 1) puis en groupe de 2 (étapes 2 et 3) Durée : 4h (UI Design, théorie comprise) Evaluation : formative
</aside>
Une régie de transports vous demande de réaliser un prototype d’interface destinée à des bornes interactives, qui seront présentes à de multiples emplacements en ville.
Ces bornes, disposant d’un écran tactile, informent les passagers·ères des horaires de bus en fonction de l’arrêt où ils·elles se trouvent.
<aside> <img src="/icons/arrows-swap-horizontally_yellow.svg" alt="/icons/arrows-swap-horizontally_yellow.svg" width="40px" />
Ce projet est en relation avec le travail réalisé dans le cours Design Thinking
UX & Design Thinking 1 – Borne informative
</aside>
<aside>
</aside>
<aside>
</aside>
<aside>
</aside>
Préparation de la grille horaire
Dans Figma, créez un dossier UID 01 - Information kiosk.
Créez un fichier Figma Design nommé Bus schedule.
Créez les pages cover, mockup et playground (pour vos essais).
Dans la page playground, créez une frame pour un premier écran de la borne à la dimension 1080 x 1920 pixels (format 9:16). Nommez-le explicitement.
Créez une grille de 12 colonnes ou plus, comprenant des marges externes (20 pixels) et des gouttières (valeur à choix). Créez une grille de x lignes selon le rythme souhaité, comprenant également des marges externes et des gouttières.
<aside> <img src="/icons/info-alternate_gray.svg" alt="/icons/info-alternate_gray.svg" width="40px" />
Conseil
Un horaire peut chevaucher plusieurs lignes de votre grille ; vous pouvez en moduler la hauteur.
</aside>
Créez un horaire modèle, que vous allez reproduire sur la surface de la borne. Définissez sa hauteur de façon à pouvoir afficher 8 horaires sur ~2/3 de la hauteur de la frame.