SOP: Starting UI Design from Approved Wireframes

1. Purpose

To provide a clear, step-by-step method for transitioning from approved wireframes into high-fidelity UI design, ensuring visual consistency, brand alignment, and dev-ready outputs.

2. Scope

• Applies to all new features, redesigns, and marketing UIs.
• Covers work from approved wireframe → final high-fidelity design.
• Used by designers, design leads, and collaborators (PM/dev).

3. Definitions

• Wireframe → Low/medium fidelity layouts focusing on structure.
• UI Design → High-fidelity visuals that include tokens, brand elements, interaction states.
• Platform Variants → Desktop, tablet, mobile adaptations.
• State Variants → Default, Hover, Active, Disabled, Error, Success.

4. Step-by-Step Process

Stage A – Preparation

1. Review Wireframes
   • Confirm wireframes are approved (Doc 3.10).
   • Check annotations, edge cases, and responsiveness notes.
   • Validate against Design Goals & Success Criteria (EPIC 1.7).
2. Load System Foundations
   • Import tokens (Doc 4.1) and grid rules (Doc 4.2).
   • Confirm you’re using the shared component library, not local versions.
3. Set Up File
   • Create separate Figma pages for:
     • UI Screens/Drafts
     • UI Screens/Approved
     • UI/Archive

Stage B – First Draft (UI Layering)

1. Apply Visual Tokens
   • Replace placeholders with system tokens: colors, typography, spacing.
   • Ensure accessibility contrast from the start (don’t fix later).
2. Map Components
   • Swap wireframe placeholders with actual components (buttons, forms, cards).
   • Use Component Documentation (Doc 4.6) for correct variants/states.
3. Integrate Brand Elements
   • Add imagery, iconography, and branding as per Visual Language One-Pager (Doc 4.8).
   • Use real content, not lorem ipsum.

Stage C – Responsive & State Coverage

1. Create Platform Variants
   • Design Desktop, Mobile, Tablet versions using guide (Doc 5.2).
   • Validate with Grid & Spacing Rulesheet (Doc 3.5).
2. Design State Variants
   • Default, Hover, Active, Disabled, Error, Success states must be created.
   • Use UI State Variants Sheet (Doc 5.7).
3. Edge Case Handling
   • Add empty states, overflow conditions, and unusual data cases.
   • Annotate deviations in notes.

Stage D – Validation & Approval

1. Run Internal QA
   • Apply Visual Consistency Checklist (Doc 5.4).
   • Check alignment, spacing, token usage, and variant coverage.
2. Peer Review
   • Share with peer designer → collect notes in Peer Feedback Sheet (Doc 3.9).
3. Lead Approval
   • Design Lead reviews for consistency, brand fit, dev clarity.
   • Store approved screens under UI Screens/Approved.

Stage E – Pre-Handoff Prep

1. Organize Frames
   • Use naming conventions (UI/Homepage/Hero/v1).
   • Add cover thumbnails to Figma pages for clarity.
2. Annotate for Dev
   • Add notes on hover states, responsiveness, error handling.
   • Highlight reusable components vs. custom screens.
3. Approval Lock
   • Apply Locked for Handoff tag once approved.
   • Trigger Dev Handoff SOP (EPIC 7).

5. Roles & Responsibilities

• Designer Assigned → Converts wireframes into UI screens, ensures token/state coverage.
• Peer Designer → Reviews for consistency & completeness.
• Design Lead → Approves final UI screens.
• PM/Account Manager → Validates business alignment.
• Dev Lead → Provides feasibility feedback if required.

6. Governance

• UI cannot move to dev without state coverage + multi-device variants.
• Violations (using local styles, skipping states) → rollback to draft.
• Monthly audits → check random UI screens for adherence.