peterbamuhigire/premium-ui-ux-design

Premium UI/UX Design

Remerciements : Partagé par Peter Bamuhigire, techguypeter.com, +256 784 464178.

Traduire la stratégie de site web approuvée et les preuves d'expérience en une direction UX premium distinctive et implémentable.

Quand l'utiliser

• Lorsqu'un site web de génération de leads, e-commerce, high-ticket ou de preuve publique nécessite une passerelle UX premium
• la direction visuelle doit être connectée aux contraintes d'implémentation.

Ne pas l'utiliser quand

• Pour la doctrine visuelle générale, qui appartient à chwezi-design-engine, ou pour l'implémentation de tokens appartenant au design-system.

Entrées requises

| Artefact | Source ou fournisseur | Requis ? | Objectif | En cas d'absence | |---|---:|---|---| | Stratégie approuvée, carte d'expérience, hiérarchie de contenu, preuves de marque, analyse de référence et contraintes techniques | Compétences amont du site web et doctrine de conception externe | oui | Définir une direction d'expérience implémentable | Arrêter lorsque la stratégie ou la hiérarchie de contenu est absente |

Workflow

1. Charger la doctrine de conception externe et valider la stratégie amont
2. Choisir la hiérarchie, l'interaction, la direction typographique, les états et le comportement responsive
3. Tester la distinction, l'accessibilité, la croissance multilingue et les contraintes de bande passante faible
4. S'arrêter sur une valeur par défaut interdite ou un motif non pris en charge, réparer la direction, puis transmettre les décisions au système de design et au constructeur de pages.

Sorties

Artefact	Consommateur	Condition d'acceptation
Direction UX premium et brief d'implémentation	Système de design et constructeur de pages	Nommer la justification du type, la hiérarchie, les composants, les états, les points de rupture, les limites de mouvement et les risques qualité

Preuves produites

Preuve	Consommateur	Condition d'acceptation
Enregistrement des décisions et revues	Propriétaires du design et de la mise en production	Lier chaque choix visuel majeur à la marque, au comportement, à l'accessibilité ou à la performance

Contrat de capacité

La lecture, la recherche et l'inspection visuelle sont requises. La planification est en lecture seule par défaut ; la modification des artefacts de conception ou du code nécessite une autorisation d'implémentation. La licence des actifs, la publication externe, les dépenses et la mutation de production nécessitent une autorisation explicite.

Mode dégradé

Sans rendu, polices, actifs ou doctrine externe, renvoyer la direction qualifiée la plus restreinte, marquer les contrôles visuels non évalués, et ne pas certifier la qualité premium.

Règles de décision

Choix	Action	Échec ou risque évité
La marque et le contenu justifient une police distinctive	La spécifier avec un fallback de performance	Typographie générique par défaut de l'IA
L'interaction n'ajoute aucune valeur à la tâche ou nuit à l'utilisation 3G	La supprimer ou la simplifier	Frottement décoratif

Standards de qualité

• Indiquer la police choisie et la raison avant la production visuelle ; couvrir les états d'erreur, vide, chargement, focus et désactivé ; respecter les contraintes d'accessibilité et de performance en Afrique.

Anti-patrons

• Choisir Inter ou une pile système nue comme police principale. Correctif : sélectionner une police autorisée correspondant à la marque et documenter pourquoi.
• Utiliser un dégradé violet comme raccourci premium. Correctif : dériver la couleur et le contraste des preuves de marque.
• Concevoir uniquement la page d'accueil. Correctif : définir des motifs partagés pour chaque famille de modèles.
• Ignorer les états non heureux. Correctif : spécifier le comportement des états d'erreur, vide, chargement, focus et désactivé.
• Certifier la qualité sans rendus. Correctif : marquer l'évaluation visuelle non évaluée et exiger une QA visuelle.

Exemple concret

Pour un cabinet de conseil à Kampala, choisir une police serif éditoriale sous licence soutenue par son positionnement d'autorité, l'associer à une police sans compacte pour l'utilité mobile, et tester les deux sous le budget de polices 3G avant la remise.

Références

• ux-strategy-differentiation-and-meaning.md — lire lors de la définition de la stratégie UX, de la différenciation et de la règle de preuve sans lancement non testé.

• lean-design-cycle-and-deliverable-selection.md — lire lors du choix des cycles de conception lean et du livrable approprié.

• enterprise-internal-tools-and-portal-ux.md — lire lors de la conception d'outils internes ou de portails clients.

• ai-feature-discovery-and-risk-framing.md — lire lors de la décision d'ajouter ou non une fonctionnalité IA et comment.

• ai-interface-trust-and-control-spec.md — lire lors de la spécification de la confiance, du contrôle et de la correction pour les interfaces IA.

• ux-discovery-and-wireframe-procedure.md — lire lors de la réalisation de la découverte UX, des grilles de parcours, des sitemaps et des wireframes.

• Website Skills authoring standard

Guide d'utilisation du domaine préservé

• Un site web doit sembler suffisamment premium pour justifier un prix élevé, la confiance ou une attention commerciale sérieuse.
• Construction de sites web de génération de leads, e-commerce, produit, portfolio, marketing SaaS, hôtellerie, éducation, santé, à but non lucratif ou entreprise.
• Le site risque de paraître générique, basé sur des modèles, sur-décoré, lent, difficile à parcourir ou visuellement bon marché.
• Le site web doit rendre l'offre du propriétaire plus précieuse tout en servant de preuve du savoir-faire premium du développeur.

Entrées du domaine préservé

• Brief de stratégie du site web, public cible, offre, positionnement de marque, inventaire de contenu, photos/actifs et objectif de conversion.
• Tout système de design actuel, captures d'écran, benchmarks concurrents et contraintes de performance/accessibilité.

Workflow du domaine préservé

1. Définir le rôle commercial du site web : confiance, conversion, support commercial, candidature, réservation, don, éducation produit ou autorité.
2. Choisir la voix visuelle qui correspond à l'acheteur et à l'offre : opérationnelle, éditoriale, minimaliste de luxe, grand public poli, institutionnelle ou premium locale.
3. Charger premium-website-product lorsque le brief nécessite un positionnement premium, du contenu, du SEO, une pile ou une preuve d'agence avant le début du stylisme.
4. Construire la hiérarchie à partir du chemin de conversion avant de styliser les sections.
5. Créer le système de design en utilisant le playbook premium : principes visuels, couleur, type, espacement, imagerie, mouvement, graphiques/tableaux et polissage de production.
6. Appliquer la passerelle du site web premium avant la production de la page et à nouveau après la QA visuelle.
7. Enregistrer les preuves dans le tableau de bord du projet et le rapport de qualité de conception.

Guide de qualité du domaine préservé

• La première fenêtre communique immédiatement la marque/catégorie, l'offre, la crédibilité et l'action principale.
• La mise en page est responsive, rapide, accessible et visuellement cohérente sur les modèles principaux.
• L'imagerie montre le produit réel, le lieu, la personne, la preuve, l'interface ou le résultat chaque fois que disponible.
• La couleur, la typographie, l'espacement et le mouvement sont tokenisés et commercialement appropriés.
• Les formulaires, les pages de tarification, de service, de produit et les flux de contact réduisent l'anxiété et rendent l'étape suivante évidente.
• Les données, témoignages, études de cas, statistiques et comparaisons sont présentés avec une hiérarchie visuelle précise et lisible.
• La simplicité est traitée comme premium : la navigation, les formulaires, les blocs de copie, les changements d'état et les flux mobiles suppriment l'effort de l'acheteur sans cacher les preuves nécessaires.
• Chaque modèle principal obtient au moins 8/10 à la passerelle UI/UX premium et à la rubrique de score de qualité de conception.

Anti-patrons du domaine préservé

• Pages d'atterrissage qui ressemblent à une sortie IA générique : dégradés vagues, arrière-plans blob, piles de cartes décoratives, photos d'archives faibles et affirmations non étayées.
• Belles pages qui n'expliquent pas l'offre ou ne poussent pas l'utilisateur vers un résultat commercial.
• Palettes de couleurs monotones, mises en page mobiles serrées, médias héros lents et superpositions inaccessibles.
• Utiliser la nouveauté visuelle là où la preuve, la clarté et la confiance sont requises.

Sorties du domaine préservé

• Brief UX de site web premium, direction visuelle, plan de tokens, notes qualité au niveau de la page, guide du chemin de conversion ou rapport de passerelle.

Références du domaine préservé

• references/premium-website-ui-ux-playbook.md - règles de conception de sites web dérivées de livres.
• references/enterprise-website-ux-playbook.md - règles UX pour les sites web d'entreprise : parties prenantes, preuves, navigation, confiance et règles calibrées pour l'Afrique.
• references/mobile-dashboard-website-patterns.md - navigation mobile, conseils de première visite, présentation de tableau de bord/preuves et contrôles qualité mobiles.
• references/premium-website-gate.md - notation et blocage des défauts.
• ../premium-website-product/references/premium-website-market-asset-gate.md - site web en tant que produit premium, contenu, SEO, lancement, pile et passerelle de preuve d'agence.
• references/source-register.md - disposition de provenance et passerelle de droits ; aucun chemin de source actif n'est affirmé.

Fondations UX de classe mondiale (dérivées de livres)

Lecture obligatoire avant de démarrer un engagement premium :

• references/levy-four-tenets.md — Cadre en quatre principes (Stratégie commerciale + Innovation de valeur + Recherche utilisateur validée + Conception UX tueuse) ; Top 10 des anti-patrons à rejeter dans les briefs clients.
• references/enterprise-five-outcomes.md — Cinq résultats obligatoires (Utile / Facile / Efficace / Agréable / Accessible) en tant que passerelle avant lancement. Un Non = pas de lancement.
• references/pm-collaboration-rules.md — Règles Fekeshazi 5+1 (5 à 10 min pour expliquer, conception comme processus continu, etc.) et la règle "ne pas cacher les fonctions importantes dans les menus".

Si un brief échoue à la vérification du Top 10 de Levy ou omet l'un des 5 résultats, faire une objection avant de définir le périmètre.