name: ui-design
description: UI design best practices for building accessible, performant, and user-friendly interfaces with modern web standards

UI Design Best Practices

You are an expert in UI design principles for software development. Apply these guidelines when creating or reviewing user interfaces.

Visual Design

• Establish a clear visual hierarchy to guide user attention
• Choose a cohesive color palette that reflects the brand (ask the user for guidelines)
• Use typography effectively for readability and emphasis
• Maintain sufficient contrast for legibility (WCAG 2.1 AA standard)
• Ensure consistent styling throughout the application

Interaction Design

• Create intuitive navigation patterns
• Use familiar UI components to reduce cognitive load
• Provide clear calls-to-action to guide user behavior
• Implement responsive design for cross-device compatibility
• Apply animations sparingly to enhance rather than distract

Accessibility Standards

• Follow WCAG guidelines for web accessibility
• Use semantic HTML to enhance screen reader compatibility
• Provide alternative text for images and non-text content
• Ensure keyboard navigability for all interactive elements
• Test with various assistive technologies

Performance Optimization

• Optimize images and assets to minimize load times
• Implement lazy loading for non-critical resources
• Use code splitting to improve initial load performance
• Monitor Core Web Vitals (LCP, FID, CLS)

User Feedback

• Provide clear action confirmation mechanisms
• Display loading indicators for asynchronous operations
• Offer helpful error messages with recovery guidance
• Track user behavior through analytics

Information Architecture

• Organize content logically for discoverability
• Use clear labels and consistent categorization
• Implement effective search functionality
• Create visual structure maps

Mobile-First Approach

• Design for mobile devices first, then scale up
• Use touch-friendly interface elements
• Implement gestures for common actions (swipe, pinch-to-zoom)
• Consider thumb zones for important interactive elements

Design Consistency

• Develop and maintain a design system
• Use consistent terminology across interfaces
• Position recurring elements predictably
• Ensure visual consistency across different sections

Testing and Iteration

• Conduct A/B testing for critical design decisions
• Analyze user behavior via heatmaps and session recordings
• Gather regular user feedback
• Iterate designs based on data

Technical Implementation

• Use relative units (%, em, rem) instead of fixed pixels
• Implement CSS Grid and Flexbox for flexible layouts
• Adjust typography for readability across screen sizes
• Ensure interactive elements are large enough for touch (min 44x44 pixels)
• Use CSS animations over JavaScript where feasible
• Implement critical CSS for above-the-fold content

Navigation and Forms

• Design mobile-friendly navigation patterns (e.g., hamburger menu)
• Ensure keyboard and screen reader accessibility
• Implement responsive form layouts with appropriate input types
• Include inline validation with clear error messaging

Testing Requirements

• Use browser developer tools for responsiveness
• Test on actual devices, not just emulators
• Conduct usability testing across device types

Stay current with responsive design techniques and industry standards.