chapter5-2

Chapter 5: Web Design Overview

Learning Outcomes

  • Describe common types of website organization

  • Explain principles of visual design

  • Design with target audience in mind

  • Create clear, user-friendly navigation

  • Enhance readability of textual content

  • Use graphics effectively in web design

  • Apply universal design concepts

  • Discuss web page layout design techniques

  • Explain responsive web design

  • Implement best practices in web design

Website Organization Types

  • Hierarchical:

    • Clearly defined home page.

    • Links to major sections, commonly seen in commercial and corporate sites.

  • Linear:

    • Series of pages that guide users through a tutorial or presentation.

  • Random:

    • No clear navigation path; often used for creative or artistic websites.

Hierarchical Organization

  • Ensure organization isn't too shallow to avoid confusion.

  • Groups of navigation links should not exceed four to maintain usability.

Deep Organizational Structures

  • Avoid creating a structure that requires too many clicks to navigate.

  • The Three Click Rule: Users should access any page within three hyperlinks.

Design Principles

  • Repetition: Keep visual elements consistent throughout the design.

  • Contrast: Use contrasting elements to draw attention.

  • Proximity: Group related items to achieve clarity.

  • Alignment: Create visual unity by aligning page elements.

Accessibility in Design

  • Importance of universal access in web design—targeting users with disabilities as well.

  • Legal standards: Section 508, WCAG 2.0/2.1/2.2.

Writing for the Web

  • Keep text concise: Avoid long blocks; use bullet points.

  • Use headings and short paragraphs for clarity.

Text Design Considerations

  • Choose common web-safe fonts: Arial, Verdana, Times New Roman.

  • Ensure strong contrast between text and background for readability.

  • Use columns for better text flow across the page.

Color Theory

  • Studies the use of color in design:

    • Color Wheel includes primary, secondary, and tertiary colors.

  • Color Schemes:

    • Monochromatic, Analogous, Complementary, Split Complementary, Triadic, Tetradic.

Implementation of Color Schemes

  • Select a dominant color and use accent colors wisely for various elements like headings and buttons.

  • Ensure sufficient contrast between text and background.

Graphics and Multimedia

  • Attention to file sizes and dimensions for optimal loading times.

  • Provide alt text for all graphics to enhance accessibility.

Graphic Design Best Practices

  • Use alternate text for images and ensure descriptions are provided where necessary.

  • Aim to minimize image file sizes while maintaining visual quality.

Web Page Design Considerations

  • Test compatibility across multiple browsers and resolutions.

  • Design for both fixed and fluid layouts:

    • Fixed Layout: Content doesn't change based on screen size.

    • Fluid Layout: Adapts to fill the browser window.

Mobile Design Principles

  • Considerations for small screens include:

    • Single-column layouts and optimization for bandwidth.

    • Focus on simplifying content displayed on mobile devices.

Responsive Web Design

  • Focuses on adapting content across devices using flexible layouts and media queries.

Web Design Best Practices Checklist

  • Focus on aspects such as page layout, navigation, colors, graphics, multimedia, and site functionality.

Checkpoints and Evaluations

  • Evaluate websites using specified design principles and best practices, focusing on user experience and design effectiveness.

Summary

  • Awareness of best web design practices is vital for targeting specific audiences effectively through color, graphics, and text.