Wiki.Quizz.vn

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== UI Design Levels (Figma Mockup → Frontend Implementation) ======

===== Purpose =====
This page defines the UI design levels used when creating screens from Figma mockups.
It helps PM, Designer, Frontend Developer, and AI-assisted coding workflows align on what level of design is required before implementation.

-----

===== UI Design Levels =====

==== Level 1: Low-Fidelity (Lo-fi / Wireframe) ====
**Purpose:** Focus on layout, structure, and user flow.

**Characteristics:**
  * Simple boxes / placeholders
  * Basic screen sections
  * Navigation position only
  * No final colors
  * No final typography
  * No detailed icons/images

**What to review:**
  * Page structure
  * Section order
  * Main CTA placement
  * Navigation flow

**Best for:**
  * Early requirement discussion
  * Quick UX alignment
  * Easy tasks

**Example image:**
  * Add lo-fi wireframe screenshot here
  * Example: {{ :design:ui_levels:lofi_example.png?600 }}

-----

==== Level 2: Mid-Fidelity (Mid-fi) ====
**Purpose:** Validate screen structure with more realistic components before final polish.

**Characteristics:**
  * Real component shapes
  * Better spacing and hierarchy
  * Text labels included
  * Grayscale or limited colors
  * More realistic forms / tables / cards / modals

**What to review:**
  * Component arrangement
  * Form/table structure
  * Information hierarchy
  * Usability before visual polish

**Best for:**
  * Medium tasks
  * UX review
  * Component structure review

**Example image:**
  * Add mid-fi mockup screenshot here
  * Example: {{ :design:ui_levels:midfi_example.png?600 }}

-----

==== Level 3: High-Fidelity (Hi-fi / Final Mockup) ====
**Purpose:** Provide near-final UI for implementation.

**Characteristics:**
  * Final brand colors
  * Final typography
  * Real icons/images
  * Final spacing
  * Polished components
  * Accurate visual design

**What to review:**
  * Final look and feel
  * Brand consistency
  * Component sizing and spacing
  * Visual approval for development handoff

**Best for:**
  * Frontend implementation
  * Stakeholder approval
  * AI-assisted code generation from Figma

**Example image:**
  * Add hi-fi mockup screenshot here
  * Example: {{ :design:ui_levels:hifi_example.png?600 }}

-----

==== Level 4: Prototype / Interaction Flow ====
**Purpose:** Show how the user interacts across screens.

**Characteristics:**
  * Click flow between screens
  * Modal open/close behavior
  * Navigation transitions
  * Dropdown / tab / filter behavior
  * User journey from one screen to another

**What to review:**
  * Screen transitions
  * Interaction behavior
  * UX flow correctness
  * User journey completeness

**Best for:**
  * Complex tasks
  * UX validation
  * Demo / testing before implementation

**Example image:**
  * Add prototype / flow screenshot here
  * Example: {{ :design:ui_levels:prototype_example.png?600 }}

-----

===== Required UI Review Dimensions =====

==== 1. Layout Level ====
Check:
  * Page structure
  * Grid / columns
  * Section grouping
  * Alignment
  * Spacing consistency

----

==== 2. Component Level ====
Check:
  * Button
  * Input
  * Select / dropdown
  * Modal
  * Table
  * Card
  * Tabs
  * Sidebar
  * Navbar
  * Pagination
  * Toast / alert

----

==== 3. Component States ====
Each important component should define states where applicable:
  * Default
  * Hover
  * Active
  * Focused
  * Disabled
  * Loading
  * Error
  * Success
  * Empty state

**Note:** Static Figma without component states is usually not enough for frontend implementation.

----

==== 4. Responsive Level ====
Recommended breakpoints:
  * Desktop
  * Tablet
  * Mobile

Check:
  * Sidebar collapse behavior
  * Table overflow / card conversion
  * Form stacking
  * Modal scaling
  * Header / navigation behavior

----

==== 5. Interaction Level ====
Check:
  * Navigation between screens
  * Modal behavior
  * Dropdown behavior
  * Validation behavior
  * Loading behavior
  * Error handling behavior
  * Empty state behavior
  * Pagination / infinite scroll behavior

-----

===== Recommended Definition of Done by Task Complexity =====

^ Task Complexity ^ Minimum Required Design Level ^ Notes ^
| Easy | Level 1 or Level 2 | Lo-fi or Mid-fi may be enough if UI is simple and existing design system is reused |
| Medium | Level 3 + Component States | Hi-fi design is recommended before frontend starts |
| Complex | Level 3 + Level 4 + Responsive + States | Hi-fi + Prototype + states required before implementation |

-----

===== Frontend / AI Coding Handoff Checklist =====

Before development starts, confirm the following:

  * Final screen or approved mockup exists
  * Main user flow is defined
  * Component states are defined
  * Responsive behavior is defined
  * Empty / loading / error states are defined
  * Design tokens are available:
    * Colors
    * Typography
    * Spacing
    * Border radius
    * Shadow
  * Assets are available:
    * Icons
    * Images
    * Logos
  * Interaction notes are available:
    * Modal open/close
    * Validation rules
    * Async loading behavior
    * Navigation rules

-----

===== Team Recommendation =====

**For AI-assisted UI coding (Claude Code / Copilot / other agents):**

  * Easy task:
    * Lo-fi or Mid-fi
    * Existing design system reference
    * Short interaction notes

  * Medium task:
    * Hi-fi
    * Component states
    * Responsive notes

  * Complex task:
    * Hi-fi
    * Prototype / flow
    * Component states
    * Responsive behavior
    * Edge cases (loading / error / empty)

**Conclusion:**
A single static Figma screen is often not enough for reliable frontend implementation.
For better quality and less rework, include:
  * Hi-fi design
  * Component states
  * Responsive behavior
  * Interaction notes

-----

===== Storage Path Recommendation =====

Suggested wiki path:
  * ``design:ui_levels``
or
  * ``frontend:figma_handoff:ui_design_levels``

-----

===== Attachments =====

Store example images under:
  * ``design:ui_levels:lofi_example.png``
  * ``design:ui_levels:midfi_example.png``
  * ``design:ui_levels:hifi_example.png``
  * ``design:ui_levels:prototype_example.png``