Sparks Fly
[Home] [PBS VideoDatabase] [Social Studies] [TSU] [UVA]


Effective Design Elements for
Web Pages

The Web is...

  • A dynamic place
  • Key to success
    • Determining what information to present
    • How to present it effectively
  • Some tips from "paper publishing" apply
  • Complex nature of web causes differences from "paper publishing"

Linear vs. Hypermedia

  • Books—begin at first page and start reading (linear)
  • Start at point A and go to point B
  • Author controls the unveiling of the information
  • Web—reader follows any link in any order (non-linear)
  • Linking allows person with mouse to journey in any direction
  • Reader controls the unveiling of the information

Structuring Your Web Site

  • Define your goals
  • You need to summarize what you want to get across before beginning

What is your purpose?

  • Map your site
    • Create an outline from the top down (homepage and below)
    • Homepage is the front door to your web site

Structuring Your Web Site

  • How to structure the information?
  • Chunking—dividing information into small units
  • Helps readers digest the information
  • One-at-a-time approach

How to link the information?

  • How to tie everything together?
  • Sketch out the structure of the links before you begin.

Structuring Your Web Site

  • Depth of content
    • With linking as an option, can keep pages short and concise
    • Branching allows other information or discussion to take place without cluttering main topic page
  • Navigation
    • Themes help users navigate the site
    • Graphics as standard navigation controls
  • Intuitive images help with navigation (if use image be sure universally understood or label it in text)

Design Tips

All pages should contain

  • Identity
  • Look
  • Links
  • Information

Always link every page to your home page

The Home Page

  • State your purpose for the site here
  • Should act as a as Table of Contents for the site
  • Display your logo here (enlarged)
  • Provide options for all viewers
  • text only
  • frames and non-frame views
  • if needs special browser or Adobe Acrobat, link to download site for these programs

Secondary Pages

  • Establish consistent style
  • Only one or two topics per page
  • Consider using wide margins--different browsers display differently (left to right scrolling is NOT well received)
  • Identify yourself or company with credentials
  • Logo should carry identification through the site

Capturing Your Audience

  • Define your audience
  • Match your structure, tone, and style
  • Know the characteristics of your target audience and target the elements to them
  • Structure of presentation
  • Language
  • Style

Consistent Look and Feel

  • Develop a "look" that will carry through all parts of the web site
  • Design a logo to tie the pages together
  • Be aware of the artistic elements that make the site look "pleasing to the eye"

Keep it Simple

  • Don’t overwhelm with text
  • Rule of thumb
  • Never cover more than 50% of the screen
  • Make good use of white space
  • Reading printed material and screen material requires different skill
  • People read computer screen at 25% the rate they read printed page

Text Style and Graphics

Vary text style

  • Create different levels of headings
  • Include text attributes that emphasize key points

Graphics--one or two

  • Great way to provide interest
  • Should be design elements to break up text or provide variety
  • Keep small--loads faster

Give People a Reason to Return

  • Don’t be a one-shot site
  • Entice readers back with:
  • Tutorials
  • Columns
  • Reviews
  • Comics
  • Tips
  • Links
  • Update on a regular basis


  • Everyone will not enter by the front door
  • Link the site with a common graphic or text element (WordArt)
  • Purpose
  • Get your name and message out
  • Identify and leave a lasting impression

Feedback or Comments

  • Web lets you interact
  • Need to include a way for readers to communicate with you
  • Feedback link (mailto element) allows readers to respond and react to your site


Web allows visitors to enter in places other that the uppermost level

  • Provide an easy way to get to the home page on every secondary page
  • Provide links to important pages within your site (i.e. the site map, page about you, etc.)
  • Provide consistent notation at the end of every page with essential information about the site

Keeping Up to Date

  • Nothing is worse that outdated material
  • Test links systematically and in a timely manner
  • Dead links definitely date your site
  • Regular maintenance is a requirement of good web site management

Color—What’s it mean?

  • Powerful component of design
  • Sends message to audience
  • Symbolism of color is important
  • Cultures have different associations
  • This is World Wide Web so be careful
  • Styles of color (orange and gold—50s, avocado green—60s)


  • Red—excitement, energy, violence, intensity
  • Yellow—joy, happiness, optimism
  • Blue—peace tranquility, calm, stability
  • Orange energy, balance, flamboyant
  • Green—nature, healthy, jealousy, envy
  • Purple—royalty, nobility, ceremony, wisdom
  • Gray--reliability, intelligence, staid, boring
  • Brown--earth, home, outdoors, stability
  • White--reverence, purity, simplicity, cleanliness
  • Black--power, sophistication, formality, wealth, fear, evil, sadness, anger

Cultural Color Symbolism

  • Red
  • China—celebration, luck
  • India—purity
  • US—Christmas color, Valentine’s Day, traffic light
  • Eastern cultures—joy
  • Yellow
  • Asia—sacred, imperial
  • Western cultures—joy, happiness
  • Blue
  • China—immortality
  • Hindus—color of Krishna
  • Jews—holiness
  • Middle Ease—protective color (safest color globally)
  • Orange
  • Ireland—religious significance
  • US—Halloween
  • Green
  • China—not good color for packaging—associated with cheating
  • France—not good
  • India—color of Islam
  • Ireland—religious significance
  • Some tropical countries associated with danger
  • US—traffic lights (go), Christmas color, St Patrick's Day
  • Purple
  • Western culture—royalty
  • Gray
  • Western culture—loneliness
  • Brown
  • Columbia—discourages sales
  • India—color of mourning
  • White
  • Eastern cultures—mourning
  • Japan—death
  • US—purity
  • Black
  • Western culture—death, mourning
  • Saffron
  • Hindu sacred color (orange/peach color)
  • Pastels (pink, yellow, pale blue)
  • Korea—trust
  • US—spring, Easter, infants

The Right Font


  • Windows
  • Arial, Comic Sans, Courier New, Georgia, Helvetica, Times New Roman, Verdana
  • Times New Roman usually Windows default
  • Mac
  • Arial, Chicago, Courier, Geneva, Helvetica, Times
  • Times usually Mac default
  • Pick for ease of reading
  • Choose first for both (if possible), second and third for either platform and fourth generic
  • Place in font face tag and you are done

<font face="Georgia, Times New Roman, Times, serif">

Design Don’ts

  • Backgrounds
  • Too busy
  • Gray
  • Invisible text
  • Text
  • Crowded
  • Stretched across whole page
  • Centered
  • All caps
  • All bold
  • All italic
  • All anything all at once
  • Links
  • Useless links
  • Dead links
  • Distracting links
  • Unclear links
  • Link colors always blue (should coordinate with page colors)
  • Graphics
  • Big (too long in download)
  • Meaningless to page
  • Thumbnails too big
  • Halos on graphics
  • No alt labels
  • Missing graphics
  • Don’t fit on screen
  • Tables
  • Borders (turned on when used to space on page)
  • Used as design elements (too cute with borders and fills)
  • Blinking
  • Anything
  • Multiple blinks
  • Rainbow rules
  • Animations
  • Under construction signs
  • Email pictures
  • Animations that never stop
  • Multiple animations on page
  • Junk
  • Counters—who cares
  • Advertising
  • Scrolling sideways
  • Too many little pictures on first page of awards
  • Navigation
  • Unclear—overly complex
  • Complicated frames
  • Orphan pages (no links back, no identification
  • Useless page titles that don’t explain wheat the page is about
  • General design
  • Home page that does not fit within the standard browser window (640 x 460)
  • No focal point on page
  • Too many focal points on page
  • Navigation buttons as the only visual interest
  • Cluttered—not enough alignment
  • Lack of contrasts
  • Pages that look okay in one browser but not in another

For More Don’ts

Top 15 Mistakes of First Time Web Designers

REMINDER--Steps for Web Design

  • Gather Information
  • What kind of page—what info?
  • How will you present the info?
  • What resources (links)?
  • Interactivity?
  • How to get return visits?
  • Audience
  • Who are you writing for?
  • How to be user friendly?
  • Create Storyboard
  • Map it out
  • Brainstorm ideas for the what
  • Organize the ideas
  • Think about file names (lower cas, chart)
  • Navigational Tools
  • How are you going to get around?
  • What are you going to link to?
  • How will you accommodate disabilities, older browsers?
  • Web page appeal
  • Visual impact
  • Graphics
  • Background/contrast
  • Font--color, size
  • Credit
  • Credibility
  • Standard closing to each web page
  • Author, email address of contact, update and link check dates, name of host school or organization
  • Provide information that verifies that web page creator knows the information presented is accurate
This page was updated on:  04/10/02