Design : vue d'ensemble
Le design de TimeManager est commun au site web et à l'application mobile. Les mêmes couleurs, les mêmes polices, les mêmes icônes et les mêmes composants sont utilisés partout. Un employé qui passe de son ordinateur à son téléphone retrouve immédiatement ses repères.
Le fichier Figma
Tout le design vit dans Figma :
TimeManager · Design system (lien public)
| Ce qu'on y trouve | Détail |
|---|---|
| Icônes | Les 45 icônes Uicons utilisées dans l'app |
| Composants | Boutons, statuts, avatars, liens de navigation, barres de navigation, logo, bouton de pointage, barre d'onglets mobile... |
| Variables | Les couleurs et les styles de texte, nommés par leur rôle |
Les maquettes d'écrans (chaque page, pour chaque rôle, sur ordinateur, tablette et téléphone, plus les cadres « App (iOS) 390 px » du mobile) sont dans le fichier de travail de l'équipe, construit à partir de ce design system.
La démarche
Le design a suivi le cycle décrit dans les spécifications (docs/specifications.md) :
- Étude des besoins : qui pointe, qui contrôle, ce qui pose problème aujourd'hui.
- Spécifications : ce que l'application doit faire, avec une priorité par exigence.
- Prototypage : les maquettes de chaque écran, pour chaque rôle.
- Confrontation : les maquettes sont montrées aux utilisateurs, leurs retours sont classés par priorité.
- Ajustements : les maquettes et les spécifications évoluent. Chaque version des spécifications (v1.1 à v1.7) garde la trace de ce qui a changé.
Les principes
| Principe | Ce que ça veut dire concrètement |
|---|---|
| Pointer en un geste | Un clic sur le web, un appui maintenu d'une seconde sur mobile. Le statut du jour est toujours visible. |
| Rien de caché | Chaque modification d'heures est tracée et montrée à la personne concernée (« Mes modifications »). |
| Un rôle, une navigation | Chacun ne voit que ce qu'il peut utiliser. La navigation change selon le rôle. |
| Jamais la couleur seule | Un statut a toujours une icône et un texte, pas seulement une couleur. |
| Lisible par tous | Contraste du texte d'au moins 4,5:1, focus visible, lecteurs d'écran pris en charge. |
| Les couleurs par leur rôle | On ne parle pas de « vert foncé » mais de brand/primary. Le rôle reste quand la teinte change (thème sombre). |
Les pages de cette section
| Page | Contenu |
|---|---|
| Identité | Le logo et les couleurs de la marque |
| Couleurs | Toutes les couleurs, en clair et en sombre |
| Typographie | Les polices et les styles de texte |
| Icônes | La bibliothèque Uicons |
| Composants | Chaque composant du design system, ses variantes et où il est utilisé |
| Accessibilité | Les règles suivies pour que l'application soit utilisable par tous |
Agrandir les images
Toutes les images de cette section s'agrandissent d'un clic, comme les schémas.