Premium UI UX Design

Premium UI/UX Design

Acknowledgement: Shared by Peter Bamuhigire, techguypeter.com, +256 784 464178.

Use When

• Designing or reviewing a website, SaaS app, dashboard, Android app, or iOS app where perceived quality, trust, usability, and commercial value matter.
• A product must feel premium, beautiful, calm, efficient, and worth paying serious money for.
• Existing UI work looks generic, cluttered, one-note, hard to scan, or visually cheap.
• Creating a design system, visual QA report, UX specification, or screen-by-screen implementation plan.
• Writing or reviewing an SRS, acceptance criteria, traceability matrix, or design handoff requirements where premium UI/UX must be specified as testable, non-taste-based requirements.

Do Not Use When

• The request is copy-only, backend-only, or not user-facing.
• A platform-specific companion skill owns the implementation detail and already loaded this premium layer.

Required Inputs

• Product goal, target users, business model, brand position, platform, and primary user tasks.
• Existing screenshots, designs, or product screens when available.
• Domain constraints: data density, performance budget, accessibility needs, device classes, and revenue-critical flows.

Workflow

1. Define the business promise: what the user must understand, trust, and accomplish quickly.
2. Choose a visual voice: restrained enterprise, editorial premium, operational dense, consumer polished, luxury minimal, or another defensible direction.
3. Build hierarchy before style: one primary action, obvious navigation, clear content priority, and explicit next steps.
4. Create a tokenized visual system: color, type, spacing, radius, elevation, motion, icons, charts, and image treatment.
5. Design every state: loading, empty, error, success, disabled, offline, slow network, permissions denied, and destructive confirmation.
6. Apply platform conventions: web, Android, and iOS must feel native to their medium, not like resized versions of one another.
7. Run the premium UI/UX gate before calling the work done.
8. Produce evidence: screenshots, score, defects, and concrete improvements.
9. When operating in SRS mode, translate the above into testable non-functional requirements linked to SRS IDs and verification methods (see premium-ui-ux-specification-rules.md).

Decision Rules

Capability Contract

• Must inspect real journeys, brand assets, and platform behaviour; critique is read-only unless remediation is requested.
• May create in-scope concepts, but may not purchase assets, change pricing/service claims, or publish without authority and evidence.

Degraded Mode

• If premium promise or target buyer is unclear, stop aesthetic direction and return the strategic questions.
• Without rendering/user evidence, provide a provisional experience standard and mark sensory/trust claims unverified. Recover weak results by correcting the highest-cost trust or task defect before adding polish.

Quality Standards

• Beauty must serve comprehension, trust, efficiency, and conversion. Decoration that does not improve these outcomes is removed.
• The interface has a clear visual path. Size, weight, color, spacing, placement, and grouping agree about what matters.
• Color has a job: brand recognition, hierarchy, grouping, status, warning, emotion, or navigation. It is never random garnish.
• Text remains readable at all breakpoints and in dark/light modes. Contrast, line length, line height, and hierarchy are verified.
• Dashboards and charts prioritize perceptual accuracy, direct labels, context, comparisons, and actionability.
• Mobile UI uses platform-native ergonomics, navigation, gestures, touch targets, accessibility, and motion expectations.
• Implementation must be production-ready: responsive, fast, accessible, documented, tokenized, and screenshot-verified.

Anti-Patterns

• Generic AI aesthetic: oversized cards, vague gradients, decorative blobs, one-color palettes, weak typography, and stock-like imagery.
• Pretty but slow, inaccessible, or hard to use.
• Dashboard decoration: gauges, 3D effects, unnecessary shadows, loud colors, disconnected legends, and chart junk.
• Native apps that look like squeezed websites.
• Design systems that define colors and fonts but omit component states, usage rules, ownership, and quality gates.

Outputs

• Premium UI/UX brief, visual direction, token plan, component/pattern guidance, dashboard guidance, mobile guidance, or review findings.
• A premium UI/UX score with specific remediation items when reviewing finished work.
• Source notes for any book-derived reasoning used in the decision.

Examples

• examples/premium-direction-worked.md - a full worked premium UI/UX direction for one SaaS screen (the Collections workspace): visual voice, dominant/subordinate/accent colour logic, typography roles, imagery rules, data/proof presentation, component states, and the "why this reads premium not templated" rationale.

References

• doctrine/design-doctrine.md — the Mission ("the moat is looking human-made") and the Anti-Slop Charter (state the choice first; the sourcing-authority asymmetry rule). Premium is the engine's core promise.
• doctrine/references/ai-slop-taxonomy.md — the convergent-default tells ("generic AI aesthetic") this skill exists to push away from.
• doctrine/references/pairing-principles.md and doctrine/references/type-scale-and-spacing.md — typographic craft underpinning perceived value.
• Sibling skills in this engine: 04-web-and-ui-design/distinctive-by-design (the pre-flight that commits one distinctive idea), 02-color-brand-and-visual-identity/color-system-and-palette (colour roles + WCAG gate), 12-data-viz-and-dashboards/data-visualization (dashboard/chart rules). (The former cross-engine companion premium-software-product-execution lives in srs-skills; consult it there when the UI/UX work must connect to premium offer architecture, buyer psychology, high-ticket pricing, or service design.)
• references/premium-visual-principles.md - hierarchy, layout, typography, perceived value, and pleasantness.
• references/color-emotion-brand-systems.md - color choice, palette systems, emotion, hierarchy, and accessibility.
• references/data-visualization-dashboard-ux.md - chart, table, KPI, and dashboard rules.
• references/production-quality-handoff.md - production polish, asset quality, handoff, and implementation QA.
• references/mobile-android-ios-premium-ux.md - platform-specific Android and iOS UX guidance.
• references/mobile-dashboard-ux-patterns.md - mobile navigation, onboarding, dashboard, and mobile app quality patterns.
• references/saas-ux-scope-costing.md - SaaS UX scope, Uganda-calibrated fee bands, cost drivers, and SRS handoff requirements.
• references/premium-ui-ux-gate.md - scoring rubric and blocking checks.
• references/premium-ui-ux-specification-rules.md - SRS/UX-specification rules: how to translate premium UI/UX into testable, traceable requirements and acceptance criteria.
• references/source-register.md - local book sources dissected for this skill.