Download Principles of Web Design Effective Design for the Web Effective

COMM 317
1
2
Principles of Web Design
Effective Design for the Web
We all look for a certain amount of integrity in communication sources we use for information. Effective page design
communicates trustworthiness, clarity and order which in turn gains our confidence in the source.
Spatial organization on the page is critical in engaging readers-whether it’s a newspaper page or a web page.
•
3
Use of graphics, text, color, and elements of composition direct their attention, prioritize the information presented, and make their
interaction with your web site more enjoyable.
Effective Design for the Web
Basic principals are the same for web and print design
•
•
•
•
4
Visual Logic-seeking a balance
Visual Hierarchy-logical organization
Contrast-an essential visual element
Consistency-create rhythm and unity
Visual Logic
• Good graphic design finds a balance between visual sensation and graphic information
• Good use of color, shape and contrast create impact and motivate the viewer to continue
• Visual and functional continuity are essential in convincing your audience that your web site is useful,
accurate and pertinent.
• A systematic approach to page design will simplify navigation and limit user errors.
5
Visual Hierarchy
• The primary job of graphic design is to create a clear, consistent visual organization in which important elements are
emphasized (just like when composing an image)
• Content should be logically organized and predictable
• Graphic design is visual information management
• Using page layout, typography and illustration to lead the reader’s eye through navigation
6
Visual Hierarchy
•
•
7
Readers first see pages as large masses of shape and color with foreground elements contrasting against a background
Readers then begin to pick out specific information in a hierarchy
• 1st-General graphics
• 2nd-Areas of Text
• 3rd-Individual words & phrases
Contrast is Essential
•
•
•
The overall visual balance and organization of the page is critical to drawing the reader in
A page of solid text is boring, overwhelming and doesn’t help the viewer figure out where to start
A page designed using overly
bold or poorly designed
graphics and text will also
distract viewers
You will need to find a visual
Balance and understand what
Is appropriate for the intended
Audience.
8
Effective design for the web
• The most effective designs for the general internet audience are a perfect balance of text and links
with relatively small graphics
• The pages load into browsers quickly, even when accessed from slow modems, yet they still have
Kristianne Koch Riddle
1
COMM 317
visual impact
9
Effective design for the web
• When establishing a page design for your Web site, consider your overall purpose, the nature of your content, and, most
important, the expectations of your readers
10
Consistency
• Establish a layout grid and style for handling your text and graphics
•
•
•
•
11
This will help create rhythm and unity
It creates a distinct sense of place
Makes your site’s personality memorable
Readers will adapt quickly and predict with confidence where to find information
Consistency
• If you choose a graphic theme, use it throughout your site
• The Bridgeman Art Library home page below sets the graphic theme for the site and introduces distinct typography
and navigation
12
Consistency
Below is a banner at the top of an interior page in the Bridgeman Art Library site. Note how the typography and the graphics
icons are carried over to the interior banners. There is no confusion whose site you are navigating through
13
Page Dimensions
• Although web pages and conventional print documents share graphic, functional and editorial similarities, the computer
screen is very different than the printed page
•
•
14
Computer screens are typically smaller than most open books or magazines
A common mistake is spreading the page width beyond the area most viewers can see
Graphic Safe Areas
• The ‘safe area’ is determined by two factors
•
•
The minimum screen size in common use
The width of paper used to print Web pages
• Web page graphics that exceed the width dimension of the most common display screens look amateurish and will
inconvenience many readers by forcing them to scroll in both directions
15
Graphic Safe Areas
• Dimensions for layouts designed to print well
•
•
560 pixels max width
410 pixels max height (without scrolling)
• Dimensions for layouts designed to view well on 800 x 600 screens
•
•
760 pixels max width
410 pixels max height (without scrolling)
• Again, knowing your viewer is critical-what size monitor will they most likely be using?
16
Page length
• Determining the proper page length requires the balance of the following
factors
•
•
•
•
17
The relation between page and screen size
The content of your documents
Whether the reader is expected to browse the content online or to print it
The bandwidth available to your audience
Page length
• Researchers have noted the disorientation that results from scrolling.
• The reader tends to get lost when the such basic navigational elements as document titles, site
identifiers and links to other pages disappear off screen
• It is thus effective to design pages that are no more than one or two screens’ lengths and that
Kristianne Koch Riddle
2
COMM 317
include navigational links at the beginning and the end of the layout
18
Page Length
• In long pages the user must depend on the vertical scroll bar to navigate.
• The reader is forced to crawl downward with the scroll bar or risk missing sections of the page
• They are easier to download and print
19
Design Grids for Web pages
•
•
•
•
20
The design grids that underlie most well designed paper publications are equally necessary in designing electronic documents and
online publications
Grids bring order to the page
A balanced and consistently implemented design scheme will increase reader’s confidence in your site
Haphazardly mixed graphics and text decrease usability and legibility, just as they would in print design
Design Grids for Web pages
• HyperText Markup Language (HTML) is not as flexible or easy to control as page
layout programs (like Quark Xpress and InDesign)
• It can create a highly functional and detailed communication system
• With it you can create a graphic ‘backbone’ to help determine how the major blocks of type and
illustrations will regularly occur
• You can set the placement and style guidelines for major screen titles, subtitles, and navigation
links
21
Design Grids for Web pages
• Before you begin programming use ‘sketches’ to experiment with various
arrangements of text and scanned graphics to determine a functional design grid
• Establish a consistent, logical screen layout, one that allows you to ‘plug in’ text and
graphics without having to rethink your layout on each new page
• Without a firm underlying design grid, your overall design will seem patchy and
confusing
22
Page Headers and Footers
• A web page is not just a visual experience
• It has to communicate and function efficiently to retain it’s appeal to the user
• The best measure of efficiency is the number of options available to the viewer within the top four
inches of the page
• A big bold graphic at the top of the page is a nice tease to Web surfers but…
• It takes the average reader thirty seconds to download the top of your page
• You may lose readers before they get to see the links to the rest of your page
23
Page headers and Site Identity
• Careful graphic design will give your site a unique visual identity.
• Graphics within headers can also signal the relatedness of a series of Web pages
• Sun Microsystems’s many Web pages and subsites all include a signature graphic that
includes basic navigation links:
24
Page Footers and Provenance
• Every Web page should contain basic data about the origin and age of the page
• Well designed page footers offer the user a set of links to other pages in addition to
essential data about the site
• The pages in the IBM Web site all carry a distinctive footer graphic with consistent
visual and functional graphics:
Kristianne Koch Riddle
3