Transcript Web Design Techniques

Web Design
Spring 2003
Web Design
 Everyone and everything has a Web
page these days.
 Web designers need to make their
pages stand out from the crowd.
 Web pages must be attractive and easy
to navigate.
 A Web site must take advantage of
technologies that include: text, images,
sound, video, and interactivity.
Web Design - Model
 Plan

First you plan the site in some detail.
 Gather

Gather and prepare the contents.
 Build

Finally, your build the site.
Step 1:
Planning a Web Site
Identify Your Audience
 Building a Web site is like preparing a
meal.
 Successful Web sites serve the needs of
their audiences.
 Web designers must understand their
audience:



Why they came to the site.
What they are looking for.
How they think.
Defining Your Audience
History
Age
Income
Interest
Education
Gender
Location
Ethnicity
Residence
User-Centered Design
 Organization-centered:

Sites that are built from the point of view of
the company or organization.
 Technology-centered:

Site that is built around the favorite tools of
the designer.
 User-centered:

Site that is build based upon the situation
of the target audience.
Purpose
 After defining the audience, you must
consider what the site will be used for
and why.
 Examples:



Increase sales
Display items
Provide information
Goals and Objectives
 Goals state the desired long-term
results.
 Objectives include specific means and
methods used on the site to accomplish
the goals.
Planning the Structure
 Structures normally consist of a
graphical flow chart and a detailed
written statement.
 A flow chart is a graphical shorthand
diagram that represents the site’s
detailed verbal description.
 No two Web sites have the same
structure.
Flow Chart
My Course Page
Home
INFSY 431
Vita
Course Schedule
Education
Resources
Assignments
Portfolio
Interactivity
 Ability to choose
 Animation
 Search and find
 Manipulate
 Construct
 Question and answer
 Converse
Navigation
 A beautifully designed Web site serves
no purpose unless the user can find
information within the site.
 Navigation is the function that helps
users chart their course through your
Web site.
 A good navigation design is simple and
consistent.
Navigation – Questions
 Whose site am I looking at?
 Where am I in the site?
 What else is available at this site?
 Where should I go next?
 How do I find what I am looking for?
Navigation - Menus
 Menus serve several purposes:



They show the categories in which the site
is organized.
They indicate which category the user is
currently in.
They allow users to click and move to
another category.
 Menus can stretch across the top of the
page or range down the sides of the
page.
Navigation – Site Map
 A site map shows the various sections
and identifies the current page.
 Example:
Contents
Site Map
Course
INFSY 431
Penn State HBG
Navigation – Cascading
Titles
 Most Web sites contain titles.
 Titles usually start from the home page.
 Cascading titles allow the user to click
on words.
 Example:
My Home Page/Courses/Schedule
Navigation – Page
Numbering
 Not all Web pages fit neatly into a
hierarchy.
 Some pages Web pages are designed to
be read serially – one after the other.
 This function is normally implemented by
displaying the page numbers and using
a Next and Previous button.
Navigation – Others
 Displaying Choices:

Navigation menus are implemented by
using a pop-up menu.
 Searching and Finding:

Key word searches.
Feedback and Interaction
 The Internet is a two-way medium.

Information can be gathered as well as
provided.
 Information gathering:


Explicit – Collection in which the user is
aware of.
Implicit – Collection that the user is not
aware of.
Feedback and Interaction
 Forms:

The simplest form of explicit feedback is
collected via a form
 Discussion Boards:

Asynchronous communication that allows
users to share ideas and information.
 Chats:

Synchronous communication that allows
users to communicate in real time.
Observe & Critiques Sites
 The display information:


How does the site display text, images,
and video?
How does the site display lists and tables?
 Navigating through the site:



Whose site am I looking at?
What else is available?
Where am I in the site?
Observe & Critiques Sites
 Choosing and finding:

How do I select items to view?
 Feedback and interaction:

How are forms used?
 Communicating the organization’s
identity:



How does the site use color?
What kind of distinguishing font is used?
How is the logo displayed?
Observe & Critiques Sites
SUN Microsystems
Amazon.com
Jericho Communications
Disney
ESPN
Teacher’s Dilemma
Microsoft
Guidelines for Site Design
 Aspect Ratio:


The aspect ratio is the relationship between the
height and width of a computer screen.
Most modern monitors have a display size of 800
pixels wide by 600 pixels high.
 The Roving Eye – Publications:


Research has shown that items which appear at
the top right of publications are seen first.
Does this apply to Web Pages?
Guidelines for Site Design
 Black text on a white background is the
easiest to read.
 There should be no more than 10 – 12
words per line.
 Stick to standard 12-point font systems.
 Systems fonts include Times, Helvetica,
Arial and Times Roman.
 Use serif fonts for the body.
 Use san serifs fonts for titles.
Guidelines for Site Design
 Use only two types of fonts and two
sizes on a page.
 Avoid all words in caps.
 Make sure headings contrast with the
body text.
 Separate paragraphs using line space or
an indented first line.
Guidelines for Site Design
 Leave plenty white space ( 40%) around
blocks of text.
 Build your page around a single axis.
 Make the page balanced visually from
top to bottom.
 The simpler the better.
Color, Contrast, and Balance
 Bold, bright colors in the menu areas
and masterheads distract the eye from
other elements.
 Often it is best to use subtle or pastel
colors for these purposes.
 Colors used in combination should
compliment each other.
 Don’t use bold colors or patterns as
backgrounds
Color, Contrast, and Balance
Color Wheel
Color, Contrast, and Balance
 Primary Colors:

Red, yellow and
blue.
 Secondary Colors:

Orange, green, and
violet.
 Use the Color Wheel
to help you select
colors that fit your
purpose.
Color, Contrast, and Balance
The colors on the
left: blues, greens,
and violets, are
cooler in tone than
those on the right,
reds, yellows and
oranges.
Color, Contrast, and Balance
 The warm colors get their influence from
their connection with fire.
 The cooler colors remind us of the sea
and the sky.
 Cool colors are more business-like and
detached.
 Warmer colors are more fiery and
provocative.
Color, Contrast, and Balance
 Colors that sit directly across from the
wheel are called complementary colors.
 Combining two complementary colors
makes each seem more intense and
brighter, creating a great deal of
contrast.
 Colors next to each other create less
contrast.
On a Light Background!
White letters can get lost
Pink may not do it either
Magenta is a little better
Red looks okay but may be a
problem for some to see
Black or violet are good
Yellow letters tend to disappear
But Look at them Here!
White letters can get lost
Pink may not do it either
Magenta is a little better
Red looks okay but may be a
problem for some to see
Black or violet are good
Yellow letters tend to disappear
Color, Contrast, and Balance
 To create contrast you can also use
shades and tints.
 Adding black to a color is called a shade.
 Adding white to a color is called a tint.
 There is no right or wrong color scheme.
 Some colors schemes create a sense of
comfort and harmony, whereas other
create contrast and discord.
Color, Contrast, and Balance
 Alignment:




The human eye likes it when things line up.
Humans read from left to right.
The scheme of alignment should be consistent.
Use the left column as the core of your alignment
scheme.
 Frames:


Most Web pages consist of a single frame.
Others divide the page into separate frames that
can change independently.
One Column Layout
MY WEB PAGE
Two Column Layout - 1 R
Table
Of
Contents
Main Window
Two Column Layout – 2 R
LOGO - TITLE BAR
Main Window
Table
Of
Contents
Scrolling
 In no case should essential items of
navigation such as menu items, appear
below the scroll bar.
 Long scrolling is an unnatural and
inefficient process.
 Scrolling requires too much additional
effort by the user.
User Control
 A Web page should offer as much user
control as possible.
 The Internet is an interactive medium.
 User control is a central aspect of this
interactivity.
 Keep in mind that most users like
simplicity.
Step 2:
Gather and Prepare the Contents
Step 3:
Build Your Web Site
Top Ten Mistakes
1.
Using Frames

2.
Gratuitous Use of Latest Technology.

3.
Inability to bookmark current page and return to it.
Using the latest and greatest technology is a sure
way to discourage users.
Scrolling Text, Marquees, and Constantly
Running Animations

Never include page elements that move
incessantly.
Top Ten Mistakes
4. Complex URLs
 A URL should contain a human-readable
directory and filename.
5. Orphan Pages
 Make sure that all pages include a clear
indication of what web site they belong to.
6. Long Scrolling Pages
 All critical content and navigation options
should be on the top part of the page.
Top Ten Mistakes
7. Lack of Navigation Support
 Provide a site map and let users know
where they are and where they can go.
8. Non-Standard Link Colors
 Consistency is key to teaching users what
the link colors mean.
9. Outdated Information
10. Overly Long Download Times
Things to Remember
 Use well-organized information
 Use well-placed items
 Use well-chosen graphics that support
content or theme
 Use well-designed icons and buttons
 Important things go at the top and left.
 Top-left is prime real estate.
Things to Remember





Navigation tools should be intuitive and
appear in the same place from screen to
screen.
Elements should line up
Show appropriate relationships between
items.
Be consistent in placement of key elements
Use balanced arrangement that facilitates
interpretation and navigation.
Things to Remember
 Leave “white” space (40 percent rule)
 Do not crowd or clutter
 Present one topic per screen
 Do not create text-heavy screens
 Present data in tables
Questions?