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 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 for visual hierarchy, consistency, simplicity, feedback, and error prevention guidelines.
For design systems: See 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 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 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 and 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 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 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 - Full design process from research through prototyping and user testing
- design-principles.md - Core design principles (hierarchy, consistency, simplicity, feedback)
- design-systems.md - Building comprehensive design systems with tokens and governance
- accessibility-guide.md - WCAG compliance, ARIA patterns, keyboard navigation, testing
- responsive-design.md - Breakpoints, layout patterns, responsive components
- component-library.md - Atomic/molecular component catalog with specifications
- component-patterns.md - Component patterns (forms, navigation, data display, feedback)
- performance-optimization.md - Image optimization, code splitting, Core Web Vitals
- design-tools-and-resources.md - Design tools, frameworks, icon libraries, resources
- output-format.md - Structured deliverable formats for handoff
- examples.md - Real-world design examples and patterns
- 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