peterbamuhigire/premium-ui-ux-design

Premium-UI/UX-Design

Bestätigung: Geteilt von Peter Bamuhigire, techguypeter.com, +256 784 464178.

Übersetzen Sie die genehmigte Website-Strategie und Experience-Evidenz in eine unverwechselbare, umsetzbare Premium-UX-Richtung.

Verwendung

• Eine Lead-Generierungs-, E-Commerce-, Hochpreis- oder öffentliche Nachweiseite benötigt ein Premium-UX-Gate.
• Die visuelle Richtung muss mit Implementierungsbeschränkungen verbunden sein.

Nicht verwenden, wenn

• Für allgemeine visuelle Doktrin, die zur chwezi-design-engine gehört, oder für Token-Implementierung, die vom design-system verwaltet wird.

Erforderliche Eingaben

| Artefakt | Quelle oder Anbieter | Erforderlich? | Zweck | Bei Fehlen | |---|---:|---|---:| | Genehmigte Strategie, Experience Map, Content-Hierarchie, Markenevidenz, Referenzanalyse und technische Einschränkungen | Upstream-Website-Skills und externe Design-Doktrin | ja | Definieren Sie eine umsetzbare Experience-Richtung | Stoppen, wenn Strategie oder Content-Hierarchie fehlt |

Arbeitsablauf

1. Laden Sie die externe Design-Doktrin und validieren Sie die Upstream-Strategie
2. Wählen Sie Hierarchie, Interaktion, Typografie-Richtung, Zustände und responsives Verhalten
3. Testen Sie auf Unverwechselbarkeit, Barrierefreiheit, mehrsprachiges Wachstum und Niedrigbandbreiten-Beschränkungen
4. Stoppen Sie bei einer verbotenen Standardeinstellung oder einem nicht unterstützten Muster, reparieren Sie die Richtung und übergeben Sie Entscheidungen an das Designsystem und den Page-Builder.

Ausgaben

Artefakt	Verbraucher	Akzeptanzbedingung
Premium-UX-Richtung und Implementierungsbrief	Designsystem und Page-Builder	Benennt Typografie-Begründung, Hierarchie, Komponenten, Zustände, Breakpoints, Bewegungsgrenzen und Qualitätsrisiken

Erstellte Evidenz

Evidenz	Verbraucher	Akzeptanzbedingung
Entscheidungs- und Überprüfungsaufzeichnung	Design- und Release-Verantwortliche	Verknüpft jede größere visuelle Wahl mit Marken-, Verhaltens-, Barrierefreiheits- oder Leistungsevidenz

Fähigkeitsvertrag

Lesen, Suchen und visuelle Inspektion sind erforderlich. Planung ist standardmäßig schreibgeschützt; das Bearbeiten von Design-Artefakten oder Code erfordert Implementierungsbefugnis. Asset-Lizenzierung, externe Veröffentlichung, Ausgaben und Produktionsmutation erfordern ausdrückliche Befugnis.

Herabgesetzter Modus

Ohne Rendering, Schriftarten, Assets oder die externe Doktrin geben Sie die schmalste qualifizierte Richtung zurück, markieren Sie visuelle Prüfungen als nicht geprüft und zertifizieren Sie keine Premium-Qualität.

Entscheidungsregeln

Wahl	Aktion	Vermiedener Fehler oder Risiko
Marke und Inhalt rechtfertigen ein unverwechselbares Display-Gesicht	Geben Sie es mit Leistungs-Fallback an	Generische KI-Standardtypografie
Interaktion fügt keinen Aufgabenwert hinzu oder schadet der 3G-Nutzung	Entfernen oder vereinfachen Sie sie	Dekorative Reibung

Qualitätsstandards

• Geben Sie den gewählten Schriftschnitt und Grund vor der visuellen Produktion an; decken Sie Fehler-, Leer-, Lade-, Fokus- und deaktivierte Zustände ab; erfüllen Sie Barrierefreiheits- und Afrika-Leistungsbeschränkungen.

Anti-Patterns

• Auswahl von Inter oder einem nackten System-Stack als primäres Gesicht. Behebung: Wählen Sie ein markenkonformes, erlaubtes Gesicht und dokumentieren Sie warum.
• Verwendung eines lila Farbverlaufs als Abkürzung für Premium. Behebung: Leiten Sie Farbe und Kontrast aus der Markenevidenz ab.
• Nur die Startseite gestalten. Behebung: Definieren Sie gemeinsame Muster für jede Vorlagenfamilie.
• Nicht-happy States ignorieren. Behebung: Geben Sie Fehler-, Leer-, Lade-, Fokus- und deaktiviertes Verhalten an.
• Qualität ohne Renderings zertifizieren. Behebung: Markieren Sie die visuelle Bewertung als nicht geprüft und fordern Sie eine visuelle Qualitätssicherung an.

Ausgearbeitetes Beispiel

Für eine Beratungsfirma in Kampala wählen Sie eine lizenzierte redaktionelle Serife, die von ihrer Autoritätsposition unterstützt wird, kombinieren Sie sie mit einer kompakten serifenlosen Schrift für mobile Nutzung und testen Sie beide unter dem 3G-Schriftartenbudget vor der Übergabe.

Referenzen

• ux-strategy-differentiation-and-meaning.md – Lesen Sie bei der Rahmung der UX-Strategie, Differenzierung und der Regel "kein ungetesteter Launch".

• lean-design-cycle-and-deliverable-selection.md – Lesen Sie bei der Auswahl schlanker Design-Zyklen und des richtigen Deliverables.

• enterprise-internal-tools-and-portal-ux.md – Lesen Sie bei der Gestaltung interner Tools oder Kundenportale.

• ai-feature-discovery-and-risk-framing.md – Lesen Sie bei der Entscheidung, ob und wie eine KI-Funktion hinzugefügt werden soll.

• ai-interface-trust-and-control-spec.md – Lesen Sie bei der Spezifikation von Vertrauen, Steuerung und Korrektur für KI-Schnittstellen.

• ux-discovery-and-wireframe-procedure.md – Lesen Sie bei der Durchführung von UX-Discovery, Journey-Grids, Sitemaps und Wireframes.

• Website Skills-Authoring-Standard

Anleitung zur Verwendung im bewahrten Bereich

• Eine Website muss ausreichend premium aussehen, um hochpreisige Preisgestaltung, Vertrauen oder ernsthafte kommerzielle Aufmerksamkeit zu rechtfertigen.
• Erstellung von Lead-Generierungs-, E-Commerce-, Produkt-, Portfolio-, SaaS-Marketing-, Hospitality-, Bildungs-, Healthcare-, Non-Profit- oder Enterprise-Websites.
• Die Seite läuft Gefahr, generisch, vorlagenhaft, überdekoriert, langsam, schwer lesbar oder visuell billig zu wirken.
• Die Website muss das Angebot des Eigentümers wertvoller erscheinen lassen und gleichzeitig als Beleg für die Premium-Handwerkskunst des Entwicklers dienen.

Eingaben im bewahrten Bereich

• Website-Strategie-Brief, Zielgruppe, Angebot, Markenposition, Content-Inventar, Fotos/Assets und Conversion-Ziel.
• Vorhandenes Designsystem, Screenshots, Wettbewerber-Benchmarks und Leistungs-/Barrierefreiheitsbeschränkungen.

Arbeitsablauf im bewahrten Bereich

1. Definieren Sie den geschäftlichen Auftrag der Website: Vertrauen, Conversion, Vertriebsunterstützung, Bewerbung, Buchung, Spende, Produktbildung oder Autorität.
2. Wählen Sie die zur Zielgruppe und zum Angebot passende visuelle Stimme: operativ, redaktionell, luxuriös-minimalistisch, konsumenten-poliert, institutionell oder lokal-premium.
3. Laden Sie premium-website-product, wenn der Brief Premium-Positionierung, Content, SEO, Stack oder Agenturnachweise benötigt, bevor das Styling beginnt.
4. Bauen Sie die Hierarchie vom Conversion-Pfad aus, bevor Sie Abschnitte gestalten.
5. Erstellen Sie das Designsystem mit dem Premium-Playbook: visuelle Prinzipien, Farbe, Schriftart, Abstände, Bildmaterial, Bewegung, Diagramme/Tabellen und Produktions-Polish.
6. Wenden Sie das Premium-Website-Gate vor der Seitenproduktion und erneut nach der visuellen Qualitätssicherung an.
7. Dokumentieren Sie Evidenz im Projekt-Scorecard und Design-Qualitätsbericht.

Qualitätsrichtlinien im bewahrten Bereich

• Der erste Viewport kommuniziert sofort Marke/Kategorie, Angebot, Glaubwürdigkeit und primäre Aktion.
• Das Layout ist responsiv, schnell, barrierefrei und visuell kohärent über die primären Vorlagen hinweg.
• Bildmaterial zeigt, wann immer verfügbar, das reale Produkt, den Ort, die Person, den Nachweis, die Schnittstelle oder das Ergebnis.
• Farbe, Typografie, Abstände und Bewegung sind tokenisiert und kommerziell angemessen.
• Formulare, Preisseiten, Service-Seiten, Produktseiten und Kontaktabläufe reduzieren Angst und machen den nächsten Schritt offensichtlich.
• Daten, Testimonials, Fallstudien, Statistiken und Vergleiche werden mit genauer und lesbarer visueller Hierarchie präsentiert.
• Einfachheit wird als Premium behandelt: Navigation, Formulare, Textblöcke, Zustandsänderungen und mobile Abläufe entfernen Käuferaufwand, ohne notwendige Nachweise zu verstecken.
• Jede primäre Vorlage erreicht mindestens 8/10 im Premium-UI/UX-Gate und im Design-Qualitäts-Score-Rubrik.

Anti-Patterns im bewahrten Bereich

• Landingpages, die sich wie generische KI-Ausgabe anfühlen: vage Farbverläufe, Blob-Hintergründe, dekorative Kartenstapel, schwache Stockfotos und unbelegte Behauptungen.
• Schöne Seiten, die das Angebot nicht erklären oder den Benutzer nicht zu einem geschäftlichen Ergebnis führen.
• Einfarbige Paletten, enge mobile Layouts, langsame Hero-Medien und unzugängliche Overlays.
• Verwendung visueller Neuheit, wo Nachweis, Klarheit und Vertrauen erforderlich sind.

Ausgaben im bewahrten Bereich

• Premium-Website-UX-Brief, visuelle Richtung, Token-Plan, seitenweise Qualitätsnotizen, Conversion-Pfad-Anleitung oder Gate-Bericht.

Referenzen im bewahrten Bereich

• references/premium-website-ui-ux-playbook.md – Buchbasierte Website-Design-Regeln.
• references/enterprise-website-ux-playbook.md – Enterprise-Website-Stakeholder, Nachweis, Navigation, Vertrauen und Afrika-kalibrierte UX-Regeln.
• references/mobile-dashboard-website-patterns.md – Mobile Navigation, Erstim-Besuch-Anleitung, Dashboard-/Nachweis-Präsentation und mobile Qualitätsprüfungen.
• references/premium-website-gate.md – Bewertung und Sperrung von Defekten.
• ../premium-website-product/references/premium-website-market-asset-gate.md – Website-als-Premium-Produkt, Content, SEO, Launch, Stack und Agentur-Nachweis-Gate.
• references/source-register.md – Herkunfts- und Rechte-Gate; kein aktiver Quellpfad wird behauptet.

Weltklasse-UX-Grundlagen (buchbasiert)

Erforderliche Lektüre vor dem Start eines Premium-Engagements:

• references/levy-four-tenets.md – Vier-Prinzipien-Rahmen (Geschäftsstrategie + Wertinnovation + Validierte Benutzerforschung + Killer UX Design); Top-10 Anti-Patterns, die in Kunden-Briefen abzulehnen sind.
• references/enterprise-five-outcomes.md – Fünf obligatorische Ergebnisse (Nützlich / Einfach / Effizient / Angenehm / Barrierefrei) als Pre-Launch-Gate. Ein Nein = kein Launch.
• references/pm-collaboration-rules.md – Fekeshazi 5+1 (5-10 Min. zum Erklären, Design als fortlaufender Prozess usw.) und die Regel "wichtige Funktionen nicht in Menüs verstecken".

Wenn ein Brief den Top-10-Check von Levy nicht besteht oder eines der 5 Ergebnisse auslässt, lehnen Sie ab, bevor Sie den Umfang definieren.