Designing for the Web

1
Designing for the Web

2
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

3
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, youd try to bypass the problems found
  with
• generations one through three.

4
Pre-Design Work

• DONT use seat of the pants design!
• Pre-production concerns
• Consider your organizations mission
• Establish audience
• Set goals for your website
• immediate
• long-term
• Think about strategies for meeting goals

5
Pre-Design Work, contd.

• Pre-production concerns, contd.
• 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

6
Pre-Design Work, contd.

• 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

7
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.

8
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.

9
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

10
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

11
Design Basics, contd.

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

12
Accessibility

• Provide text equivalents for non-text elements
• Dont rely solely on color to indicate links
• Dont make the screen flicker in any way
• Use plain, understandable English
• Dont rely completely on high tech solutions
• As a last resort, make an alternative text page

13
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 youll miss

14
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

15
Improvement

• Schedule an quarterly review of the site
• Considerations
• update of content
• update of design
• update of use of cutting edge tools

16
Some Resources

• Web Style Guide (http//www.webstyleguide.com/)
• Jacob Nielsens Use It(http//www.useit.com/)
• HTML Writers Guild(http//www.hwg.org/)
• Vincent Flanders 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/W
  AI/)
• Bobby 3.2 Accessibility Validator(http//www.cast
  .org/bobby/)
• HTML Validator(http//validator.w3.org/)