Accueil Formations Apprendre Claude Design - De l'idée à l'interface sans coder

Détails de la leçon

Description de la leçon

Dans cette vidéo pédagogique, nous abordons étape par étape la conception d’un tableau de bord dédié aux conseillers d’une agence de voyage, en s’appuyant sur le design system Hestia Voyage depuis Figma. La construction commence par la sélection d’un kit UI compatible, permettant de respecter l'identité visuelle de l’agence.

L’interface est structurée de façon professionnelle, plaçant une sidebar avec logo et liens de navigation, ainsi qu’un header affichant le message personnalisé du jour, la date, la barre de recherche, les notifications et l’avatar utilisateur. Trois à quatre indicateurs clés sont placés en haut de l’interface : voyages en cours, chiffre d'affaires mensuel, nouveaux clients, et satisfaction.

Le cœur du dashboard est constitué d’un graphique comparatif affichant l’évolution du chiffre d’affaires sur douze mois, comparant année en cours et précédente. Le système inclut également un tableau dynamique pour les voyages en cours, des cartes visuelles mettant en avant les destinations tendances, le nombre de devis et le prix moyen. Une fonctionnalité avancée permet d’afficher un panneau latéral détaillé à la sélection d’un voyage, dévoilant la fiche client, le programme journalier, les prestataires, documents et notes internes.

Le tout est conçu pour garantir une parfaite cohérence avec la charte graphique et une expérience utilisateur fluide, tout en étant immédiatement exploitable pour la gestion interne d’une agence de voyage.

Objectifs de cette leçon

À l’issue de cette vidéo, l’apprenant saura :
- Structurer un dashboard métier dans Figma en respectant un design system existant.
- Organiser les fonctionnalités essentielles pour un outil interne d'agence de voyage.
- Dynamiser l’interface avec des composants interactifs (tableaux, graphiques, cartes, panneaux latéraux).
- Comprendre les enjeux d’ergonomie pour l’interface utilisateur en contexte professionnel.

Prérequis pour cette leçon

Il est recommandé de maîtriser les notions de base de Figma et d’avoir une connaissance introductive des design systems ainsi qu’une compréhension générale des besoins de gestion dans le secteur du voyage.

Métiers concernés

Les compétences acquises sont applicables dans les métiers de designer UX/UI, chef de projet digital, product designer, ainsi que pour les responsables d’équipes commerciales et les gestionnaires d’agence ayant besoin de solutions visuelles personnalisées.

Alternatives et ressources

Des logiciels alternatifs à Figma pour la création de dashboards comprennent Adobe XD, Sketch, ou des solutions no-code comme Webflow et Notion pour le prototypage rapide.

Questions & Réponses

Le dashboard comprend une sidebar de navigation, un header avec informations personnalisées, des indicateurs clés (voyages en cours, chiffre d'affaires, nouveaux clients, satisfaction), un graphique comparatif du chiffre d'affaires, un tableau des voyages, des cartes de destinations tendances et un panneau latéral de détails sur chaque dossier client.
En sélectionnant uniquement le design system Hestia Voyage dans Figma, toutes les couleurs, typographies, composants et icônes suivent la charte graphique de l’agence, garantissant une expérience utilisateur uniforme entre l’outil interne et le site web institutionnel.
Un clic sur un voyage dans la liste ouvre un panneau latéral où s’affiche la fiche client complète, le programme du séjour jour par jour, les prestataires réservés, les documents téléchargeables et les notes internes, facilitant la gestion individualisée des dossiers.