# Web Design Reference Essential web design principles and practices for creating effective, accessible, and user-centered web experiences. ## User-Centered Design **Everything we do is for the user.** Design decisions should always prioritize user needs, goals, and limitations. ### Key Principles - **Understand your users**: Conduct user research and testing to understand requirements - **Design for accessibility from the start**: Consider the target audience and what additional needs they may have - **Test with real users**: Validate designs with actual users to ensure usability - **Be empathetic**: Consider users with permanent, temporary, situational, or changing disabilities ## UI Design Fundamentals ### Contrast Use differences in color, size, and weight to: - Draw attention to important elements - Improve readability and legibility - Create visual interest - Guide the user's eye through the interface ### Typography Good web typography ensures: - **Readability**: Text is easy to read at all sizes - **Hierarchy**: Important content stands out through size, weight, and spacing - **Consistency**: Font choices match the design's tone - **Accessibility**: Sufficient contrast and appropriate sizing **Best practices:** - Limit to 2-3 fonts maximum - Use clear sizes and spacing (leading) - Pair decorative fonts for headlines with simple fonts for body text - Test font sizes on different devices ### Visual Hierarchy Organize elements to show importance: - Largest elements capture attention first - Medium elements signal moderate importance - Smallest elements provide supporting details - Use size, color, weight, and position to establish order ### Scale and Proportion - Make important elements larger - Use consistent sizing relationships - Create emphasis through dramatic scale differences - Maintain balance with proper proportions ### Alignment - Use grids to align elements consistently - Choose one alignment style (left, center, right) and stick to it - Create clean, professional, organized layouts - Guide the viewer's eye smoothly through content ### Use of Whitespace - Provide breathing room around elements - Prevent cluttered, overwhelming designs - Highlight key elements through isolation - Create elegant, sophisticated experiences ## Color Theory for Web ### Color Psychology Colors influence emotions and perceptions: - **Blue**: Trust, calm, professionalism - **Green**: Health, nature, growth - **Red**: Excitement, urgency, passion - **Yellow**: Energy, optimism, warning - **Orange**: Enthusiasm, creativity, warmth - **Purple**: Luxury, creativity, wisdom - **Black**: Elegance, power, sophistication - **White**: Simplicity, cleanliness, purity ### Color Strategies **Monochromatic palettes**: Easiest to work with, most accessible for novice designers - Creates pleasant, polished experiences - Emphasizes content over decoration - Use shades and tones of a single hue **Limited palettes**: Use 2 colors for balance - Reserve color for product imagery or calls-to-action - Creates visual hierarchy naturally - Easier to maintain consistency **Accessibility considerations:** - Ensure sufficient contrast for readability (WCAG guidelines) - Test with contrast checkers - Don't rely on color alone to convey information - Avoid neon or overly saturated colors ## Common Web Design Patterns Recognizing and using established patterns improves usability: - **Dark mode**: Alternative color scheme for low-light viewing - **Breadcrumbs**: Navigation showing the user's location in the site hierarchy - **Cards**: Contained content blocks that are scannable and clickable - **Deferred/Lazy registration**: Allow users to explore before requiring sign-up - **Infinite scroll**: Continuous content loading as user scrolls - **Modal dialogs**: Overlay windows for focused tasks - **Progressive disclosure**: Revealing information gradually to reduce overwhelm - **Progress indicators**: Show users their position in multi-step processes - **Shopping cart**: Familiar e-commerce pattern for managing purchases ## Inclusive Design Principles Design for the needs of people with permanent, temporary, situational, or changing disabilities. ### 1. Provide Comparable Experience Ensure that all users can accomplish tasks in a way that suits their needs: - Alternative text for images - Captions and transcripts for video/audio - Keyboard navigation for all interactive elements ### 2. Consider Situation People use your interface in different contexts: - Poor lighting conditions - Noisy or quiet environments - While mobile or stationary - With limited time or attention - On various devices and screen sizes ### 3. Be Consistent Use familiar conventions and maintain consistency: - Follow established design patterns - Keep navigation predictable - Use consistent terminology - Maintain visual consistency across pages ### 4. Give Control Allow users to control their experience: - Provide play/pause for animations and videos - Allow text resizing - Let users choose color schemes (light/dark mode) - Enable skip navigation links ### 5. Offer Choice Provide multiple ways to accomplish tasks: - Multiple navigation methods - Various contact options - Different input methods (mouse, keyboard, touch, voice) ### 6. Prioritise Content Focus on core content first: - Remove unnecessary elements - Present information in a logical order - Use clear headings and structure - Minimize distractions ### 7. Add Value Enhance the experience thoughtfully: - Features should add genuine value - Don't add complexity for its own sake - Consider load time and performance - Test that additions actually help users ## Accessibility Best Practices ### HTML Accessibility A great deal of web content can be made accessible by using correct HTML elements: - Use semantic HTML (`