Frontend UI/UX Design

Overview

This skill enables creation of production-ready frontend UI/UX designs from research through implementation. Follow a structured design process that balances user needs, business goals, technical constraints, and accessibility requirements.

Design Workflow

1. Understand Requirements

Gather Context:

• Project goals and success metrics
• Target audience and user personas
• Technical constraints (frameworks, browsers, devices)
• Brand guidelines and design language
• Accessibility requirements (WCAG level)

Clarify Scope:

• Type of deliverable (wireframes, mockups, design system, component library)
• Fidelity level (low, medium, high)
• Responsive breakpoints needed
• Browser and device support

2. Research & Strategy

User Research:

• Analyze user needs, goals, and pain points
• Review existing analytics or user feedback
• Identify key user journeys and scenarios
• Define information architecture

For complete research process: See [uiux-design-process.md](references/uiux-design-process.md) for detailed research, personas, journey mapping, and information architecture guidelines.

3. Design & Prototype

Create Wireframes:

• Start with low-fidelity layouts
• Focus on content hierarchy and structure
• Define user flows for key tasks
• Iterate based on feedback

Apply Visual Design:

• Define color palette (primary, secondary, semantic colors)
• Establish typography scale and spacing system
• Design components with variants and states
• Ensure visual hierarchy and consistency

For design principles: See [design-principles.md](references/design-principles.md) for visual hierarchy, consistency, simplicity, feedback, and error prevention guidelines.

For design systems: See [design-systems.md](references/design-systems.md) when building comprehensive design systems with design tokens, governance, and documentation.

4. Ensure Accessibility

WCAG Compliance:

• Minimum contrast ratios (4.5:1 for text, 3:1 for large text/UI)
• Keyboard navigation support
• Screen reader compatibility (semantic HTML, ARIA labels)
• Focus indicators and skip links
• Alternative text for images

For complete accessibility guidance: See [accessibility-guide.md](references/accessibility-guide.md) for WCAG 2.1/2.2 standards, ARIA patterns, keyboard navigation, testing tools, and compliance checklists.

5. Design Responsive Layouts

Mobile-First Approach:

• Start with mobile design (320px minimum)
• Progressively enhance for tablets (768px+)
• Optimize for desktop (1024px+, 1440px+)
• Use fluid grids and flexible images
• Apply appropriate layout patterns

For responsive patterns: See [responsive-design.md](references/responsive-design.md) for breakpoints, layout patterns (fluid grid, column drop, off-canvas), responsive navigation, typography, images, tables, forms, and container queries.

6. Build Component Libraries

Component Design:

• Design atomic components (buttons, inputs, icons)
• Create molecule components (form fields, cards, menus)
• Build organism components (headers, forms, sections)
• Define component variants, states, and props
• Document component usage patterns

For component details: See [component-library.md](references/component-library.md) and [component-patterns.md](references/component-patterns.md) for comprehensive component catalogs with specifications, variants, states, and usage guidelines.

7. Optimize Performance

Performance Considerations:

• Optimize images (WebP/AVIF, lazy loading, responsive images)
• Minimize CSS/JS bundle sizes
• Implement critical CSS for above-the-fold content
• Use efficient animations (transform, opacity)
• Monitor Core Web Vitals (LCP, FID, CLS)

For optimization details: See [performance-optimization.md](references/performance-optimization.md) for image optimization, code splitting, caching strategies, and performance budgets.

8. Document & Handoff

Design Deliverables:

• Design specifications (colors, typography, spacing)
• Component documentation with variants
• Responsive breakpoint designs
• Accessibility report and compliance checklist
• Implementation guidelines and design tokens

For output format: See [output-format.md](references/output-format.md) for structured deliverable formats including design briefs, wireframes, visual designs, component libraries, and developer handoff materials.

Quick Reference

When to Load References

• [uiux-design-process.md](references/uiux-design-process.md) - Full design process from research through prototyping and user testing
• [design-principles.md](references/design-principles.md) - Core design principles (hierarchy, consistency, simplicity, feedback)
• [design-systems.md](references/design-systems.md) - Building comprehensive design systems with tokens and governance
• [accessibility-guide.md](references/accessibility-guide.md) - WCAG compliance, ARIA patterns, keyboard navigation, testing
• [responsive-design.md](references/responsive-design.md) - Breakpoints, layout patterns, responsive components
• [component-library.md](references/component-library.md) - Atomic/molecular component catalog with specifications
• [component-patterns.md](references/component-patterns.md) - Component patterns (forms, navigation, data display, feedback)
• [performance-optimization.md](references/performance-optimization.md) - Image optimization, code splitting, Core Web Vitals
• [design-tools-and-resources.md](references/design-tools-and-resources.md) - Design tools, frameworks, icon libraries, resources
• [output-format.md](references/output-format.md) - Structured deliverable formats for handoff
• [examples.md](references/examples.md) - Real-world design examples and patterns
• [design-checklist.md](references/design-checklist.md) - Quality checklist before finalizing designs

Key Principles

1. User-Centered Design

• Always start with user needs and goals
• Validate assumptions through research and testing
• Prioritize usability over aesthetics

2. Accessibility First

• Design for all users, including those with disabilities
• Follow WCAG 2.1 AA standards minimum
• Test with keyboard navigation and screen readers

3. Mobile-First Responsive

• Start with smallest screen sizes
• Progressively enhance for larger screens
• Ensure touch-friendly interactions (44x44px minimum)

4. Design System Thinking

• Build reusable, consistent components
• Document patterns and usage guidelines
• Maintain design token systems

5. Performance Matters

• Optimize images and assets
• Keep bundle sizes small
• Monitor and improve Core Web Vitals

6. Iterative Process

• Start with low-fidelity, iterate to high-fidelity
• Gather feedback early and often
• Refine based on user testing and metrics