Tuto
Une plateforme de tutorat en ligne pensée pour connecter facilement les apprenants aux bons tuteurs.
Contexte
Tuto est un projet fictif conçu pour rendre la recherche de tutorat simple et moins intimidante. La plateforme mise sur une expérience accessible et engageante pour encourager l’apprentissage à tout âge.
Mon rôle
Conception UX
Wireframes, prototype
et userflow
Conception UI
recherche d'inspiration, couleurs et typographie
Tests utilisateur
Itérations et prototypes
Étape 1 : Inspiration
L’analyse de plateformes similaires et l’exploration visuelle
ont orienté le projet vers une interface claire, chaleureuse
et accessible.
Cette direction permet de réduire la complexité perçue et de soutenir les utilisateurs dans leur démarche d’apprentissage.
Objectif de design :
Police choisie
Après une exploration typographique, ces polices ont
été
retenues pour leur lisibilité et leurs formes douces
et organiques.
Figtree (Titres)
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj KkLl Mm Nn
Oo Pp Qq Rr Ss Tt Uu
Vv Ww Xx Yy Zz
123456789
!@/$%?&*
Inter (Textes)
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj KkLl Mm Nn
Oo Pp Qq Rr Ss Tt Uu
Vv Ww Xx Yy Zz
123456789
!@/$%?&*
Palette de couleur
La palette de couleurs a été choisie pour créer
une ambiance chaleureuse et rassurante.
Faded Jade
HEX: 3D796F
Mango Orange
HEX: FF7A37
Timberwolf
HEX: DED6C8
Étape 2 : Esquisses et idéations
Cette étape amorce l’idéation de la mise en page, avec
des esquisses
basse fidélité visant à structurer l’information
et réduire la charge cognitive. Elles ont permis de valider
le parcours utilisateur
et les points d’interaction clés.
Étape 3 : Système visuel
Le passage en haute fidélité a permis de concrétiser l’identité visuelle du projet. En respectant les normes WCAG, la couleur
et la typographie servent à hiérarchiser l’information, tandis
que l’équilibre entre angles arrondis et structures carrées
assure confort visuel et rigueur. Voici donc ici quelques exemples.
Étape 4 : Produit final
Ce projet a été un exercice d’équilibre entre une identité visuelle rigoureuse et une interface humaine et accessible. L’utilisation
de composants arrondis pour les éléments interactifs a permis
de rendre l’expérience plus intuitive,
tout en conservant
la structure géométrique du logo.
Cette étude de cas confirme qu’un design esthétique
peut respecter pleinement les normes WCAG.
Proudly designed by Alexandra Doire
© 2026 Alexandra Doire – Tous droits réservés