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

Logo

• 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

Concerns

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?

http://www.everythinglongdistance.com/tools/colortable.htm

• 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)

Symbolism

• 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

Common

• 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

http://www.doghause.com/top15.html

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