UI Components

Statut

Cette page documente les composants visibles aujourd’hui et propose une base d’harmonisation pour la refonte.
Elle ne décrit pas un système canonique final.

1. Objectif

Construire une base UI plus cohérente entre :

• branding
• navigation
• catalogue
• conversion
• réassurance
• footer et contenus de service

2. Composants observés

Header

Observé aujourd’hui

• logo
• navigation courte
• icônes compte / panier
• informations opérationnelles en haut de page

Amélioration court terme

• clarifier la hiérarchie du header
• mieux distinguer navigation, actions et informations pratiques

À revoir en refonte

• header e-commerce plus propre
• parcours plus clair entre menu, commande et contact

Hero

Observé aujourd’hui

• image food forte
• message principal
• CTA

Amélioration court terme

• simplifier le message
• renforcer la lisibilité du bénéfice principal

À revoir en refonte

• hero plus net entre traiteur entreprise, commande et valeur de marque

CTA

Observé aujourd’hui

• boutons orange très visibles
• logique arrondie / pill

Recommandation

• un seul style primaire
• un style secondaire
• un style tertiaire textuel

Cards avantages

Observé aujourd’hui

• cartes colorées
• icônes simples
• bénéfices courts

Recommandation

• uniformiser hauteur, padding, radius, ton des titres
• mieux cadrer le niveau de contraste

Tabs catégories

Observé aujourd’hui

• Plats / Entrées / Desserts

Recommandation

• renforcer l’état actif
• clarifier les espacements
• améliorer la cohérence mobile

Carte produit

Observé aujourd’hui

• image
• prix
• nom
• tags alimentaires
• bouton d’ajout

Recommandation

• normaliser la hiérarchie visuelle
• mieux distinguer prix, nom, badges et action
• limiter les variations inutiles

Badges / tags alimentaires

Observé aujourd’hui

• halal
• vegan / veggie
• sans lactose
• sans gluten
• piquant

Recommandation

• créer un système unique de badges
• standardiser couleur, casse, taille, radius et ordre d’affichage

Slider / contenus éditoriaux

Observé aujourd’hui

• cartes de contenu food / inspiration

Recommandation

• clarifier si ce bloc sert le SEO, la réassurance ou la conversion
• éviter le composant décoratif sans utilité claire

Logos de confiance

Observé aujourd’hui

• bandeau de réassurance

Recommandation

• améliorer l’alignement visuel
• prévoir une version plus premium et plus structurée

Footer

Observé aujourd’hui

• colonnes d’informations
• contact
• liens légaux

Recommandation

• mieux séparer navigation, aide, légal et contact
• rendre la structure plus stable pour la future base WooCommerce

3. Tokens UI recommandés

• radius.pill pour CTA principaux
• radius.md pour cartes
• space.4 à space.6 comme base des composants
• shadow.sm maximum par défaut
• contrastes forts pour les actions

4. Principes UI à garder

• interface simple
• action visible
• offre lisible
• appétence food forte
• discours commercial direct

5. Principes UI à corriger

• trop d’hétérogénéité entre blocs
• hiérarchie parfois floue
• coexistence de plusieurs langages visuels
• mélange parfois imprécis entre éditorial, catalogue et service

6. Priorités de refonte WooCommerce

1. définir une bibliothèque de boutons
2. définir une carte produit de référence
3. définir un système de badges
4. refondre header et navigation
5. simplifier hero et blocs de réassurance
6. harmoniser footer et pages de service

7. Résultat attendu

À terme, Tastiie doit disposer d’un système UI :

• plus cohérent
• plus maintenable
• plus rapide à décliner
• plus lisible pour le client final
• mieux aligné avec le branding et les objectifs business