Website Design Principles

Lesson Skills

• After completing this lesson, you will be able to categorize Web sites by purpose and domain, identify Web page elements, critique aesthetics & functionality, and demonstrate color wheel knowledge.

Key Terms

• Accessibility
• Aesthetics
• Alignment
• CARP (Contrast, Alignment, Repetition, Proximity)
• Compatibility
• Contrast
• Domain name
• Functional
• .gif
• Human-Computer Interaction (HCI)
• .jpg
• Layout
• Lossless compression
• Lossy compression
• Media compression
• Multimedia
• .png
• Proximity
• Raster images
• Repetition
• Responsive design
• Top-level domain (TLD)
• Typography
• Usability
• Vector images
• Visual hierarchy

Web Site Categories and Domains

• A website address (domain name) consists of the server (host) name, the second-level domain (registered company name), and the top-level domain (TLD).
• Top-level domains (TLDs) identify the type or origin of the website.
• Examples of country-specific TLDs: .ca (Canada), .uk (United Kingdom), .au (Australia), .de (Germany), .us (United States).
• Restricted TLDs (.gov, .edu, .mil) require permission to use.

Aesthetic Web Design

• Aesthetics in Web design involves the site's layout, graphics, links, colors, and fonts to create a look and feel that engages visitors.
• Responsive design creates Web pages that adapt to multiple screen sizes.

Layout

• Layout helps define the meaning of page elements, creates visual hierarchy and directs visitor focus.
• Visual hierarchy ranks visual elements to draw the user's eye to certain parts of the page.
• Color, font size, font type, and placement contribute to the visual hierarchy.
• Good layout increases readability and usability.
• CARP (Contrast, Alignment, Repetition, Proximity) are principles of design and layout.

Contrast

• Achieved when page elements differ in color, size, shape, texture, orientation, position, or movement.

Alignment

• Placement/grouping of elements, visual hierarchy, and an understanding of flow direct the eye.

F-Patterns

• Mostly used for text-heavy pages, readers scan down the page for topics of interest.

Z-Patterns

• Used for ads or pages with images, users scan across the top and diagonally down the page.

Repetition

• Repeated visual elements (colors, shapes, textures, fonts, graphics, etc.) appear throughout the site.

Proximity

• White space and logical structure group related items to create visual unity.

Color

• A website's color scheme should enhance the page and reinforce branding.
• More than 90% of consumers' decisions about purchases are based on visual appearance.
• Red, green, and blue are primary colors for Web and graphic design.
• White is the combination of all three colors (RGB).
• Black is the absence of color.

Color Schemes

• Monochromatic schemes use varying shades/tints of the same hue.
• Analogous schemes use colors that are next to each other on the color wheel.
• Complementary schemes use colors that are across from each other to create a vibrant look.
• Triadic schemes use evenly spaced colors around the color wheel.

Graphics

• Copyright applies to images; permission is needed to use copyrighted images.
• Graphics can be created using software or downloaded from free graphics sites.
• Raster images are made of pixels, become "blocky" when enlarged, and include .gif and .jpg.
• Vector images use paths or lines, can be scaled without loss of quality, and include .svg and .eps files.

Media Compression

• Lossy compression means some data is permanently eliminated when the file is compressed, resulting in resolution loss.
• Lossless compression retains all data, allowing it to be completely restored without resolution loss.

Common Image Formats

• .jpg/.jpeg: Photographs, small file size, lossy compression.
• .gif: Line art, logos, cartoons, transparency, best used for electronic display, lossless compression.
• .png: Line art, logos, cartoons, transparency, animation support, best used for electronic display, lossless compression

Fonts and Typography

• Typography is the arrangement/appearance of text to improve readability, branding, and tone.
• Font families include serif, sans serif, cursive, fantasy, and monospace.
• Serif fonts have flared extensions and a combination of thick and thin strokes.
• Sans-serif fonts have plain endings.
• Sans-serif fonts are generally easier to read for Web design.
• Use real text and standard fonts to create readable Web pages.

Functional and Usable Design

• Functional/usable design incorporates human-computer interaction (HCI), usability, writing for the Web, accessibility, and browser compatibility.
• A functional Web site renders correctly and functions as expected.
• Web usability measures the quality of a person's experience on the site.
• Most usable Web sites anticipate visitor needs.

Human-Computer Interaction (HCI)

• HCI studies how people interact with computers to make them easier to access.

Usability (5 Parts)

• Learnability: How easy is it to use the first time?
• Efficiency: How quickly can users do what they want?
• Memorability: How easy is it to remember how to use it?
• Errors: How many errors do users make, and how can they recover?
• Satisfaction: How pleasant is it to use?

Writing Web Content

• Use the inverted pyramid writing style and clear headings to communicate content.
• Avoid overly promotional language, jargon, and clickbait.
• Content should be organized, concise, accurate, current, and useful.
• Divide text into small sections (chunking) with headings and lists.
• Use line spacing and white space to increase readability and save font changes for contrast.
• Create content free of errors and use meaningful hyperlink text.

Browser Compatibility

• Web sites should be tested in various browsers/devices for consistent display.

Accessibility

• Making Web sites usable by people of all abilities and disabilities (ADA Compliance).
• Add page titles for screen reader software and provide text links/descriptions for images for screen readers.
• Use a high amount of contrast between page background and text colors.
• Do not use color alone to convey meaning.
• Summarize tables with appropriate headings.
• Provide transcripts for audio and captioning for video

Multimedia and Interactivity

• Multimedia enhances a Web site visitor's experience.
• In Web design, multimedia combines audio, video, animation and interactive features.
• Multimedia and interactivity elements should serve a clear purpose and enhance the content, not distract from it.