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.
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.
Conception UX
Wireframes, prototype
et userflow
Conception UI
recherche d'inspiration, couleurs et typographie
Tests utilisateur
Itérations et prototypes
Mon rôle
Choix typographique
Après une exploration typographique, ces polices ont été
retenues
pour leur lisibilité et leurs formes douces et organiques.
Figtree
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn
Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
123456789 !@/$%?&*
Inter
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn
Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
123456789 !@/$%?&*
Objectif de design :
Choix typographique
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 couleurs
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
Mango Orange
HEX: FF7A37
Faded Jade
HEX: 3D796F
Mango
HEX: FF7A37
Timberwolf
HEX: DED6C8
Système visuel
Le passage en haute fidélité a fixé l'identité visuelle. Entre normes WCAG et hiérarchie graphique, j'ai équilibré arrondis et structures carrées pour conjuguer confort et précision.
Le passage en haute fidélité a fixé l'identité visuelle. Entre normes WCAG et hiérarchie graphique,
j'ai équilibré arrondis et structures carrées pour conjuguer confort et précision.
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.
Palette de couleurs
Faded Jade
HEX: 3D796F
Mango
HEX: FF7A37
Timberwolf
HEX: DED6C8
Le passage en haute fidélité a fixé l'identité visuelle. Entre normes WCAG et hiérarchie graphique,
j'ai équilibré arrondis et structures carrées pour conjuguer confort et précision.
Esquisses et idéations
À cette étape, j’ai pu explorer et visualiser différents concepts, en évaluant ceux
qui pourraient le mieux répondre aux objectifs du projet.
Le passage en haute fidélité a fixé l'identité visuelle. Entre normes WCAG et hiérarchie graphique, j'ai équilibré arrondis et structures carrées pour conjuguer confort et précision.
À cette étape, j’ai pu explorer et visualiser différents concepts, en évaluant ceux qui pourraient le mieux répondre aux objectifs du projet.
Système visuel
Le passage en haute fidélité a fixé l'identité visuelle.
Entre normes WCAG et hiérarchie graphique, j'ai équilibré arrondis et structures carrées pour conjuger confort et précision.
Système visuel
Le passage en haute fidélité a fixé l'identité visuelle. Entre normes WCAG et hiérarchie graphique, j'ai équilibré arrondis et structures carrées pour conjuguer confort et précision.
Le passage en haute fidélité a fixé l'identité visuelle. Entre normes WCAG et hiérarchie graphique, j'ai équilibré arrondis et structures carrées pour conjuguer confort et précision.
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.
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.
Proudly designed by Alexandra Doire
© 2026 Alexandra Doire – Tous droits réservés