Designing for the Web

1
Designing for the Web

• Presentation for
• Master Internet VolunteerSM Program

North Dakota State University Extension Service
2
Creating a Successful Site

• Determine your audience
• Design for your audience
• their equipment
• special interest areas
• customer service

3
How to Start

• Define the goal of your Web site
• Create a home page plan
• Diagram the site
• Diagram the page

4
Define the Goal

• Gather information
• Write a simple statement about the function of
  your site
• Expand the statement to include info on
• client
• site
• page
• interactivity

5
Simple Statement Example
This site will provide the means to create
dynamic special interest groups.
6
Expanded Example
This site will be aimed at 30- to 40-year-old
mid-level executives with limited computer
background who are interested in building
professional networks. Clients will have
entry-level browsing capabilities and access to
few helper applications.
7
Create a Home Page Plan

• List the required items (name, function,
  contents, contact info)
• List available graphic elements (logos, photos)
• Create several quick sketches
• Review the sketches with HTML in mind. Select the
  one that works.

8
Diagram the Site

• A rough sketch showing pages and relationships

9
Example Site Diagram
10
Diagram the Page
Logo
Navigation bar
11
General Design Tips

• Keep home pages short--aim for one screen
• Pages below gradually get longer
• Home pages introduce site
• Level one pages major topics
• Level two pages more detail

12
General Design Tips

• Design for lowest technology denominator
• Start with text
• Optional additions (in order)
• images
• advanced layouts (tables)
• animation, sound, multimedia
• frames

13
General Design Tips

• Be fast keep it simple
• Be consistent
• Have content on every page
• Focus on readability
• Limit use of lines ltHRgt instead make white space
  with line breaks ltBRgtltBRgt

14
Home Page Design

• Limit to one screen
• Design for quick loading
• Identify yourself, company, or organization
• Describe the site function
• Provide contact information
• Link to content

15
Navigation

• Be consistent
• page design
• navigation elements
• placement
• Make info accessible within two clicks of the
  home page
• Dont link to pages that dont contain content

16
Type Tips

• Keep text readable
• use mixed case, not all caps
• avoid tiny type
• make sure text and background contrast
• limit the amount of text on a page
• avoid tiled backgrounds behind text
• Always use ALT tags if you use a graphic to
  replace text

17
More Type Tips

• Use text to help design your page
• Use different sizes of text
• Use bold and italic to differentiate text
• Change the alignment (left, center, or right)

18
Color Tips

• White backgrounds load fastest
• Black text is highest contrast to white
• Red is a good accent
• Use color in meaningful ways
• Background colors dont print
• white text on a black background prints nothing

19
More Color Tips

• Choose colors with audience appeal the rules
  might change
• Youth appeal
• Serious audiences

20
Tips for Web Graphics

• Use HEIGHT and WIDTH tags
• text will load while image loads
• Use the ALT tag. Write short, clear descriptions
• Keep graphics small
• Use thumbnails and link to larger image

21
More Tips for Web Graphics

• Use GIF format for artwork and line drawings
• Use JPEG format for photographic images

22
New Web Technology

• Most users value content over whiz-bang
  technology
• Know your audience and their capabilities

23
HTML Tips

• Use simple codes to enhance design
• headings ltH1gtlt/H1gt to ltH6gtlt/H6gt
• bold ltBgtlt/Bgt
• breaks for vertical space ltBRgt

24
HTML Tips

• Use tables to format information and graphics
• set width to 560 pixels or less
• experiment with borders on and off
• can place tables within tables to enhance
  formatting

25
HTML Tips

• Borrow code
• View page source code in the browser when you see
  a layout you like to learn how it was created.

26
Web work is never done...

• Constantly update
• Work with small teams
• Weed out old information and links
• Test! Test! And Test!
• Make sure your site is accessible to your
  audience.

27
Use Web Review Software

• Website Garage
• www.websitegarage.com
• Bobby
• www.cast.org/bobby/

28
Master Internet VolunteerSM Programwww.ext.nodak
.edu/miv/
This slide set was prepared by the University of
Minnesota Master Internet Volunteer program
leaders and is being used with their permission.