Sparks Fly
Home ] Up ] Troy State ] UVA ] PBS VideoDB ] Social Studies ] ODU ]

Elements of Web Design

Rush to Publish


Form vs. Function

User-centered Design

If you build it…..

Why will people come to your web site?

Is one visit all you have? Will they come back? What will attract repeat visitors?

How will they find you site?

How will they find information on your site once they get there?


Why do sites go bad?

  • Designer focuses on technical aspects of site
  • Designer focuses on features
  • Designer is highly technical (programmer) and out of touch with end user needs
  • Developers go with trends, cutting edge technology
  • End user no where near the cutting edge
  • Design failure due to lack of planning
  • Common sense missing
  • Experienced designer in NOT making critical decisions

Five Design Elements--The 5 C’s

1. Communicate with Clarity

What is the point?

Does the web site communicate the purpose immediately on arrival?

Could you concisely state the idea or feeling or call to action that the site portrays? You can’t afford to be ambiguous!

Hurtles to Success


Use common syntax (navigation buttons, colors for links, etc.)

Examples of Symbols used on the web

2. Visual, Conceptual, Mechanical Consistency

Patterns—human brain constantly seeks

Web design takes advantage of brain need for organization and consistency (patterns)


Similar tools




Action states



Coordinate all elements

Interface standards

Line widths

Text style



Photography—size, special effects, color depth




File formats

3. Take Advantage of Contrast

Information overload

Right amount of visuals, space, sound

White space important

Intrigue not annoy user




Illustration techniques

Positive/negative space

4. Clutter--Strive to be Uncluttered

Only offer what achieves the purpose

Empower the curser

Layer information

Simplify navigation

Focus and filter

Use negative space—lets the eye rest

Empty space can be powerful tool for focus

5. Content--Storytelling

Need structure—beginning, middle, end

Show rather than tell the story

Sound—used effectively can really enhance site

Two-way communication possible

Need elements that change—recommended links, new information, downloads, etc.

Let’s Get Started--Users

Find out who your users are.

What is the reason they need your site?

What information do they want?

How old? What gender? Occupation? What is the profile?

Why are they looking for your site?

How to get started

Digital watch


Paper for notes

Web browser

Comfortable chair

Quiet workspace

Internet connection

Handout of Sites

Check out at least 10 of these sites

Begin your evaluation here

Look at the five C’s





Concept (logical sequence of information--story)

Now What? You determine…

What are the 10 things you hate the most about the Web?

What are the 5 things you love about the Web?

What are your favorite sites and why are they your favorites?

Web Design is Important

Good web sites do not happen by accident

Planning is essential

Lots of competition

Information overload

Check out the competition to determine…

How do you make your site memorable?