ux-ui-design

UX/UI Design & Prototyping

Purpose: Create user-centered designs, wireframes, prototypes, and production-ready HTML/CSS interfaces.

---

When to Use This Skill

• Creating wireframes or high-fidelity mockups
• Building interactive HTML/CSS prototypes
• Designing user flows and information architecture
• Implementing accessibility (WCAG) standards
• Setting up design systems or component libraries

Prerequisites

• Basic HTML/CSS knowledge for prototyping
• Design tool access

Decision Tree

Use this to pick the right UX approach for your task:

Start: What is the deliverable?
|
+- New feature / epic?
| - 1. User Research -> 2. IA -> 3. Wireframes -> 4. User Flows
| -> 5. Hi-Fi Mockups -> 6. HTML Prototype -> 7. Usability Test
|
+- Bug fix / small change?
| - Skip to step 5 (Hi-Fi) or 6 (HTML Prototype)
|
+- Design system update?
| - Jump to Design Systems - update tokens + components
|
+- Accessibility audit?
| - Jump to Accessibility - run checklist + fix
|
- Responsive issue?
 - Jump to Responsive Design - breakpoint check + fix

---

Table of Contents

1. User Research & Analysis
2. Information Architecture
3. Wireframing
4. User Flows
5. High-Fidelity Mockups
6. Interactive Prototypes
7. HTML/CSS Prototypes
8. Design Systems
9. Accessibility (A11y)
10. Responsive Design
11. Usability Testing
12. Best Practices
13. Tools & Resources

---

Core Rules

[PASS] DO

Research & Wireframing:

• Define Product Posture & Archetype BEFORE sketching any screens
• Start with lo-fi sketches; iterate on paper first
• Use real content, never lorem ipsum in final designs
• Annotate interactions on every wireframe
• Test with diverse user demographics

Design & Prototyping:

• Follow the 8px spacing grid
• Design for ALL states: empty, loading, error, success, partial
• Build production-ready HTML/CSS prototypes (mandatory)
• Use semantic HTML5 + ARIA attributes from the start
• Use CSS custom properties for all design tokens (see prototype-craft asset)
• Validate HTML & CSS