VC 237 :: Week 05 1 of 2 27 October 2008
— Demonstration Outline —
week::five
Web Design Considerations
Visual Hierarchy
o The visual hierarchy of content elements is just as important in Web
design as in print.
o Grid design principles from print work apply to Web designs.
o Considerations:
Relative size of elements
Placement and position
Contrast of page elements
o Examples: www.nytimes.com, www.vlct.org
Consistency
o Carry your look and feel to every page on the site.
o Three key reasons why consistency is good:
1. Improves ease of navigation for users—predictability.
2. Reduces download time for graphics since images are cached.
3. Reduced development time.
o Place navigation elements in the same position on every page.
o Don’t remove the link users are currently on.
Removal can cause confusion & disrupts the user’s visual memory.
Highlight the current area with bold or a rollover effect instead.
o When possible, use completed HTML pages as templates.
o The home page of a site can have a distinctive appearance. The home
page has a different set of goals and objectives than interior pages, and
the design should reflect those goals.
o Examples: www.childrenscancerassociation.org; www.vlct.org
Make your pages freestanding
o Users can come to your page from anywhere on the Web.
o Make sure that every page has enough identifying information.
o Think of your Web page like a page in a daily newspaper. You can pull a
page from a newspaper and still know who published it and when. Your
Web page should be able to accomplish the same thing.
o Example: www.waterfrontbluesfest.org, www.idexsolutions.com
Page Weight
o There are a number of reasons we are concerned with page weight:
Even if a user has a broadband connection to the Internet, users prefer
faster-loading pages to slower ones (think Google).
o Achieving a reasonable page weight involves establishing a balance
between HTML text, HTML elements, and bitmap graphics on a page.
Sites can be graphically rich and attractive but take forever to load
Sites can be primarily text and load quickly but be plain-looking
o We slice and dice so that pages are not 100% graphics.
o Inter-mixing text, HTML objects and graphics to create a Web page has
become an art form, blending technical and visual design skills.
o
Using zero-bandwidth graphics (HTML objects, colors, tables, CSS)
helps reduce page weight.
