← Retour au catalogue ui-ux-pro-max
50 styles graphiques + 99 règles d'ergonomie pour génération d'interfaces utilisateur.
Quand l'utiliser (Trigger)
Déclenchement standard selon le contexte de l'écosystème Hermès.
Mode d'emploi (Usage)
Mode d'emploi standard via l'agent Hermès.
UI/UX Pro Max
Overview
Base de connaissances pour générer des interfaces professionnelles. Combine styles visuels et règles d’ergonomie.
When to Use
- Conception de page web, landing page, dashboard
- Design d’interface applicative
- Audit UX d’une interface existante
- Génération de maquettes HTML/CSS
50 Styles Graphiques (Catégories)
Moderne & Minimal (1-10)
| # | Style | Caractéristiques |
|---|
| 1 | Clean White | Espace blanc, typo fine, grille stricte |
| 2 | Glassmorphism | Verre dépoli, backdrop blur, transparence |
| 3 | Neumorphism | Squeuomorphisme doux, ombres intérieures |
| 4 | Brutalist | Gros titres, contrastes forts, asymétrie |
| 5 | Minimal Japanese | Espace négatif, wabi-sabi, typo serif |
| 6 | Swiss Design | Grille modulaire, Helvetica, couleurs primaires |
| 7 | Dark Mode | Fond foncé, accent vif, contrastes réduits |
| 8 | Monochrome | Une seule couleur + nuances de gris |
| 9 | Bento Grid | Boîtes organisées type bento japonais |
| 10 | Terminal | Monospace, vert sur noir, esthétique CLI |
Couleur & Texture (11-20)
| # | Style | Caractéristiques |
|---|
| 11 | Gradient Mesh | Dégradés complexes, couleurs organiques |
| 12 | Duotone | Deux couleurs dominantes, image en bichromie |
| 13 | Pastel | Couleurs douces, saturation basse |
| 14 | Vibrant Neon | Couleurs fluo, fond sombre, glow |
| 15 | Earth Tones | Palette naturelle, ocres, verts, bruns |
| 16 | Retro 80s | Synthwave, magenta/cyan/bleu, grille perspective |
| 17 | Vaporwave | Esthétique web 1.0, néon, grilles, statues |
| 18 | Grain Texture | Bruit texturé, rendu granuleux, vintage |
| 19 | Watercolor | Aquarelle, bords flous, transparence |
| 20 | Pixel Art | Palette limitée, carrés, rétro jeu vidéo |
Layout & Structure (21-30)
| # | Style | Caractéristiques |
|---|
| 21 | Single Page | Tout sur une page, navigation smooth scroll |
| 22 | Card Grid | Tout en cartes, grille responsive |
| 23 | Split Screen | Deux moitiés, text/image |
| 24 | Magazine | Multi-colonnes, hiérarchie éditoriale |
| 25 | Dashboard | Widgets, data viz, KPI cards |
| 26 | Full-Width Hero | Image pleine largeur, texte superposé |
| 27 | Sidebar Nav | Navigation latérale, contenu principal à droite |
| 28 | Tab Navigation | Contenu segmenté par onglets |
| 29 | Timeline | Progression verticale, étapes chronologiques |
| 30 | Masonry | Taille variable des cartes, disposition libre |
Typographie (31-40)
| # | Style | Caractéristiques |
|---|
| 31 | Large Display | Titres énormes (120px+), minimaliste |
| 32 | Serif Elegant | Police à empattement, interlignage large |
| 33 | Handwritten | Écriture manuscrite, personnel |
| 34 | Monospace Code | Design type documentation, code samples |
| 35 | Variable Font | Une police, multiples poids en CSS |
| 36 | Kinetic Type | Typo animée, motion design |
| 37 | Vertical Text | Texte en colonne, style asiatique |
| 38 | Staggered | Titre décalé sur plusieurs lignes |
| 39 | Outline Text | Contour seulement, remplissage transparent |
| 40 | Text Over Image | Texte sur image, fondu ou boîte opaque |
Interaction & Motion (41-50)
| # | Style | Caractéristiques |
|---|
| 41 | Micro-interactions | Petites animations au survol/click |
| 42 | Parallax | Défilement différentiel des couches |
| 43 | Reveal on Scroll | Éléments qui apparaissent en défilant |
| 44 | Morphing | Transition douce entre formes/états |
| 45 | Particle Effect | Particules animées en arrière-plan |
| 46 | 3D Tilt | Effet 3D au mouvement souris |
| 47 | Infinite Scroll | Chargement continu, pas de pagination |
| 48 | Drag & Drop | Interface manipulable, réorganisation |
| 49 | Shimmer Loading | Squelette animé pendant le chargement |
| 50 | Hover Preview | Aperçu au survol, tooltip enrichi |
99 Règles d’Ergonomie
📖 Texte complet dans references/ergonomics.md — 79 règles étendues structurées en 9 catégories (Hiérarchie, Textes, Navigation, Feedback, Formulaires, Mobile, Performance, Accessibilité).
Hiérarchie & Structure
- Loi de Hick — plus de choix = plus de temps. Limiter à 7±2 options.
- Loi de Fitts — Plus la cible est proche/grande, plus vite on clique. CTA grands.
- Règle des 3 clics — L’info doit être accessible en ≤3 clics.
- Fold first — Contenu critique visible sans scroll (above the fold).
- Header clair — Logo cliquable → home, navigation visible.
- Breadcrumbs — Fil d’Ariane pour navigation profonde.
Textes & Lisibilité
- Contraste WCAG AA — Ratio ≥4.5:1 pour texte normal, ≥3:1 pour grand.
- Taille texte — 16px minimum pour body text.
- Largeur ligne — 45-75 caractères par ligne (idéal ~66).
- Interlignage — 1.5x la taille de police.
- Hiérarchie typo — Max 3 niveaux (H1, H2, body).
- Pas de JUSTIFY — Texte justifié = moins lisible.
Navigation & Actions
- Navigation sticky — Menu toujours accessible.
- CTA contrasté — Un seul CTA primaire, différent visuellement.
- Bouton vs lien — Action principale = bouton, secondaire = lien.
- Espacement CTA — 8px+ entre boutons, pas collés.
- Retour visible — État hover/active/focus clair.
- Annulation facile — “Retour”, “Annuler” toujours accessible.
Feedback & États
- Loading state — Spinner ou skeleton pour >300ms.
- Empty state — Message clair quand aucune donnée.
- Error state — Message explicite + solution (pas “Erreur 500”).
- Success state — Confirmation après action.
- Optimistic UI — Mettre à jour l’UI avant confirmation serveur.
- Label visible — Toujours, même avec placeholder.
- Erreur inline — Message d’erreur à côté du champ, pas en haut.
- Validation temps réel — Pas après soumission seulement.
- Autocomplete — Name, email, tel, adresse activés.
- Champs requis — Astérisque ou “optionnel” explicite.
- Keyboard friendly — Tab order logique, Enter soumet.
Mobile & Responsive
- Touch targets — ≥44px (48px idéal).
- Pas de hover — Ne pas cacher d’infos derrière le survol.
- Safe area — Respecter les notch et barres système.
- Bottom nav — Navigation en bas pour mobile.
- Thumb zone — Éléments cliquables dans la zone du pouce.
- Alt texts — Toutes les images.
- Skip link — Lien “Passer au contenu” pour lecteurs d’écran.
- ARIA landmarks — roles main, nav, complementary.
- Lazy loading — Images et contenu non-critique.
- Réduction de mouvement — Respecter prefers-reduced-motion.
- Fout / Foit — Flash de texte invisible/police non chargée.
Common Pitfalls
- Mélanger plus de 2 styles → résultat incohérent
- Ignorer le mobile → 60%+ du trafic
- Trop d’animations → nausée, accessibilité
- Liens sans underline → accessibilité
Verification Checklist