Designing for the Web

What Makes Good Design

• Content is important but content alone will not make your site work.

• Good design is:– understandable– interesting– useful– easily navigated– unified in look and feel

Typical Website Evolution

• Generation One -- replaces paper information

• Generation Two -- flashy elements added

• Generation Three -- bleeding edge, content suffers

• Generation Four -- integration of content and technology

Ideally, you’d try to bypass the problems found withgenerations one through three.

Pre-Design Work

DON’T use “seat of the pants” design!

• Pre-production concerns– Consider your organization’s mission– Establish audience– Set goals for your website

• immediate• long-term

– Think about strategies for meeting goals

Pre-Design Work, cont’d.

• Pre-production concerns, cont’d.– Gather & organize content– “Chunk” into logical information units– Establish hierarchy of content– Create outline or plan for content– Create flow chart– Build site structure which is the basis for

URLs– Establish navigation routes

Pre-Design Work, cont’d.

• Technology concerns– Browsers– Operating Systems– Connection Speeds– User screen sizes

• Budget concerns– Staff time for creation and maintenance– In-house vs outsource

• Establish criteria for measuring success

Page Elements• Make page somewhat freestanding

– include navigation elements on each page

– include logo/home page link– if page will be printed, include URL for

home page

• Brief informative title• Contact information• Creation/revision dates• Create template for each page type

you plan to use in your site.

Navigation

• Strive for balance between appearance and usefulness.

• Make sure that users can get where they need to go within your site quickly and easily.

• Make sure the navigational elements will work in a non-graphical browser as well as in a rich format.

Use of Cutting Edge Tools & Content

• Bad reasons– to look cool– to prove you can

• Good reasons – to look cool – to draw attention– to maintain attention– to enhance info– to inform or educate

Design Basics

• Balance• Visual uniformity• Visual hierarchy• Contrast• Page dimensions

– Scroll 3 screen lengths only (1440 pixels)» include jump to top element

– No vertical scroll -- either use a percentage width or keep the width at 700 pixels maximum

– Consider layout of material above and below “the fold”

Design Basics, cont’d.

• Color palette• Typography• Understand the medium• Fixed page elements (Navigation)• Maximize prime real estate

Accessibility

• Provide text equivalents for non-text elements

• Don’t rely solely on color to indicate links• Don’t make the screen flicker in any way• Use plain, understandable English• Don’t rely completely on high tech

solutions• As a last resort, make an alternative text

page

Approvals/Proofing

• Design Critiques– Other Web designers

• Content Critiques– Subject Matter Experts– Any represented parties (i.e., Leads,

Chairs, etc.)

• Proof-reading for grammar, links, etc.– Fresh eyes can usually see things that

you’ll miss

Maintenance

• Set a maintenance schedule for your site– Considerations include:

• who will do the maintenance• what to do if emergency problems come

up• where backup copies of your Web pages

are kept

Improvement

• Schedule an quarterly review of the site – Considerations:

• update of content• update of design• update of use of cutting edge tools

Some Resources

• Web Style Guide (http://www.webstyleguide.com/)

• Jacob Nielsen’s Use It(http://www.useit.com/)

• HTML Writers Guild(http://www.hwg.org/)

• Vincent Flander’s Web Pages That Suck(http://www.webpagesthatsuck.com/)

• Cool HomePages.com(http://www.coolhomepages.com/)

• Web Design: The Complete Reference (http://www.webdesignref.com/)

• Web Design Examples:(http://www.webdesignref.com/examples/design_examples.htm)

• Web Accessibility Initiative (http://www.w3.org/WAI/)

• Bobby 3.2 Accessibility Validator(http://www.cast.org/bobby/)

• HTML Validator(http://validator.w3.org/)