UX/UI Design Skill

PURPOSE

User experience design, interface design, and usability optimization.

CORE COMPETENCIES

User Research:
├── User interviews
├── Surveys & analytics
├── Persona development
├── Journey mapping
└── Competitive analysis

Design:
├── Wireframing
├── Visual design
├── Interaction design
├── Design systems
└── Responsive design

Prototyping:
├── Figma
├── Sketch
├── Adobe XD
├── Framer
└── Principle

Testing:
├── Usability testing
├── A/B testing
├── Heatmaps
├── Session recording
└── Accessibility audits

DESIGN PATTERNS

Design System Structure

Design System:
├── Foundations
│   ├── Colors (semantic naming)
│   ├── Typography (scale, hierarchy)
│   ├── Spacing (8px grid)
│   ├── Shadows & elevation
│   └── Icons
│
├── Components
│   ├── Atoms (buttons, inputs, labels)
│   ├── Molecules (form fields, cards)
│   ├── Organisms (navigation, modals)
│   └── Templates (page layouts)
│
└── Patterns
    ├── Navigation
    ├── Forms
    ├── Data display
    └── Feedback

Accessibility Checklist (WCAG 2.2)

Perceivable:
├── [ ] Alt text for images
├── [ ] Captions for video
├── [ ] Color contrast 4.5:1
├── [ ] Resize up to 200%
└── [ ] No color-only meaning

Operable:
├── [ ] Keyboard accessible
├── [ ] Focus indicators
├── [ ] Skip navigation
├── [ ] No time limits
└── [ ] No seizure triggers

Understandable:
├── [ ] Clear language
├── [ ] Consistent navigation
├── [ ] Error identification
├── [ ] Labels for inputs
└── [ ] Predictable behavior

Robust:
├── [ ] Valid HTML
├── [ ] ARIA when needed
├── [ ] Works with assistive tech
└── [ ] Cross-browser tested

Component Specification

# Button Component Spec
button:
  variants:
    - primary: High-emphasis actions
    - secondary: Medium-emphasis
    - tertiary: Low-emphasis
    - danger: Destructive actions

  sizes:
    - small: 32px height
    - medium: 40px height (default)
    - large: 48px height

  states:
    - default
    - hover
    - focus (visible ring)
    - active (pressed)
    - disabled (0.5 opacity)
    - loading (spinner)

  accessibility:
    - role: button
    - aria-disabled: when disabled
    - aria-busy: when loading
    - focus: visible outline

UX HEURISTICS (Nielsen)

1. Visibility of system status
2. Match real world
3. User control & freedom
4. Consistency & standards
5. Error prevention
6. Recognition over recall
7. Flexibility & efficiency
8. Aesthetic & minimal
9. Help users with errors
10. Help & documentation

TROUBLESHOOTING