ui-design

Topics in the source

• UI/UX Best Practices Frontend Design
• When to Apply
• Rule Categories by Priority
• Quick Reference
• 1. Accessibility & WCAG Compliance (CRITICAL)
• 2. Core Web Vitals Optimization (CRITICAL)
• 3. Visual Hierarchy & Layout (HIGH)
• 4. Responsive & Mobile-First Design (HIGH)

Comprehensive UI/UX and frontend design best practices guide. Contains 42 rules across 8 categories, prioritized by impact to guide accessible, performant, and user-friendly interface development. Reference these guidelines when: Structuring HTML for accessibility and semantics Writing CSS for responsive layouts and visual hierarchy Optimizing images and fonts for Core Web Vitals Designing forms with proper validation and error handling Adding animations and interactive elements | Priority | Category | Impact | Prefix | |----------|----------|--------|--------| | 1 | Accessibility & WCAG Compliance | CRITICAL | access- | | 2 | Core Web Vitals Optimization | CRITICAL | cwv- | | 3 | Visual Hierarchy & Layout | HIGH | layout- | | 4 | Responsive & Mobile-First Design | HIGH | resp- | | 5 | Typography & Font Loading | MEDIUM-HIGH | typo- | | 6 | Color & Contrast | MEDIUM | color- | | 7 | Forms & Validation UX | MEDIUM | form- | | 8 | Animation & Performance | LOW-MEDIUM | anim- | access-semantic-html - Use semantic HTML elements for screen readers access-keyboard-navigation - Ensure full keyboard navigation access-focus-indicators - Provide visible focus indicators access-alt-text - Pro

This is an excerpt. Refer to the complete source and its current requirements.