Transcript Web Design by Jack Davis

Web Design
by Jack Davis
Based on:
The WEB WIZARD’S GUIDE TO
WEB Design
by James G. Lengel
Chapter 1 –
Planning A Web Site
• Chapter Objectives
- identify and describe the audience
- site purpose
- plan site structure
- communications through site
- planning table for a site
Audiences/Users
• Yahooligans!
http://www.yahooligans.com
• Fidelity Investments
http://www.fidelity.com/
• National Oceanic and Atmospheric
Administration
http://www.NOAA.GOV
Audience/Design
• Yahooligans
Children - limited choices
- pictures
- simple words
• Fidelity
Adult Investors - information & advice
- quick and easy access to info.
• NOAA
wide audience - researchers, meteorologists,
and people who need weather information
User-Centered Design
• Organization-centered
- built from company point of view
- company vocabulary and structure
• Technology-centered
- uses a particular set of tools
- designed based on technology
• User-centered
- considers target audience
- what they need and how they work
Defining the Audience
Demographics
•
•
•
•
•
•
•
•
•
age
gender
geographic location
residence: urban, suburban, rural
level of income
level of education
race or ethnicity
interest
history (path of Web pages previously visited)
Defining the Audience
•
•
•
•
•
•
•
•
•
Who are they?
Why are they at the site?
How did they get there?
How old are they? What’s the age range?
Where do they live?
What gender? Why?
How wealthy?
History of dealing with this organization?
What are the common characteristics?
Audience Definition
The audience for the LeftyStuff Web site is
potential purchasers of LeftyStuff products
who have responded to one of LeftyStuff’s
banner ads and are interested in items
designed especially for left-handed people
Most are adults, equally divided among
men and women, between 25 and 50 years
of age, who live in the United States or
Canada, are sports-minded, and have
family incomes greater than $50,000. Most
have never visited the site before.
Site’s Purpose
• What the users will be trying to do and
why?
• Part is stated in the audience definition
and part is in the organization’s goals.
• Organization
- increase the direct online sales of …
- make it easy to find the right item …
- easy to make purchases (credit card)
- communicate the organization’s goals
Financial Times News
• http://news.ft.com/news/home/us
• What’s the purpose of the Financial Times
Web site?
- provide news and advertising
- ??? (other)
• How would you define the audience?
- age, gender, economics, history, ???
Goals & Objectives
• Statement of purpose should contain both
goals and objectives
• Goals – state the desired long-term
results, such as
- “to increase the direct online sales of
tennis racquets by 30% over the next
year”
- “provide a wider range of services to
readers”
Goals and Objectives
• Objectives include specific means and
methods used on the site to accomplish its
goals
- “to provide online readers of the
newspaper with hourly updates of key
news stories”
Organization and User Purposes
• Both types should be included in the
purpose statement.
• A user-centered objective might be,
“to promote intelligent conversation about
XYZ among all audiences”
• An organization-centered objective –
“to expand and broaden the reach of the
program so it makes a greater impact on
American education.”
Evaluating Success
• How will you know if the web site achieves
the goals?
To measure you must have stated
measurable goals and objects. Some
measures might include:
- how much did product sales go up?
- how many new readers registered?
- how many hits on the site?
- how many return hits?
- how many e-mail requests?
Site Purpose
•
•
•
•
•
•
Goals of the organization
Goals of the user
Objectives for display
Objectives for interactivity
Objectives for communication
Objectives for technology
Planning Site Structure
• The layout of a web site typically includes
each of the pages and functions of each
part.
• It typically consists of a flow chart and a
detailed written statement of functions.
Home Page
Complete Site Structure
Home Page
Teaching
Resources
Teaching
Units
Publications
Multimedia
Calendar of
Events
About the
Home Page
Forums
Faculty and
Staff
Discussion
Topics
Faculty
Pages
Synchronous
Chat
Institutes
Component Descriptions
describes what’s included
• Teaching Resources Section
This is the largest part of the site, contains
materials to help teachers integrate media
and democracy topics into curriculum
* Teaching units: full text available on-line
* Publication: references to print and online publications with links
* Multimedia: video, audio, image and
slide material
Function Descriptions describe
how the site works.
• Functions
- Dynamic home page: program staff need
to change images and text on the home
page weekly, without reprogramming
- Database of resources: viewers need to
be able to search and retrieve teaching
units from a large collection. Program
staff need to be able to add new units
to this database easily and index them.
Goal – Function Description
• A good way to develop the site’s structure
is to list the goals and objectives specified.
Then, for each one, write a statement of
functionality.
Purpose
To inform
audiences about
XYZ happenings.
Structure
Calendar of Events section: Viewers will find a
listing of various types of events: workshops
and institutes, offered by the program staff.
Online discussions and chats offered by the
program. Viewers can search events by topic,
date, and other criteria.
“Speccing” Out the Flow Chart
• Adding important characteristics to the
flow chart will make it more useful.
- filename
- graphics to be used
- menu items
- multimedia elements
- input forms
- etc.
Web Site Components
• Text – most efficient for many types of
communication (html)
- Text to be printed is a problem, one
solution is to use PDF files
• Images – (gif, jpeg, & others)
• Multimedia
- animation (Macromedia Flash)
- sound, video
- virtual reality (VR)
Interactivity is the key
difference in Web applications
User’s are interactive when they:
- choose (select their next topic or page)
- participate in animations (usually via choices)
- search & find
- buy & sell
- manipulate (move screen objects)
- construct
- converse
- play
Web app
Planning Table
Start with purpose and list site components.
Purpose
Structure
Function
Media
To inform
Calendar of
user can
audiences
Events: list
link to
about …
of events …
teaching
Text, with
small
icons for
each
event …
resources
and …
Chapter 2 - Designing Display
and Navigation
• Chapter Objectives
- to review the ways that text, images, and
multimedia can be displayed
- to develop systems that allow users to
find their way through the site
- to describe methods for collecting user
feedback and supporting interactivity
- to understand role of corporate identity in
web site design
Design Follows Function
Audience + Purpose => Design
Most Web site functions fall into one of these
categories.
- The display of information.
- Navigation through the site.
- Choosing, searching, and finding
- Feedback and interaction
- Communicating the organization’s
identity
Examples
• Professor Lengel’s site
http://www.bu.edu/jlengel/cmc/onlineindex.
html
• Dorling Kindersley Web site
http://www.dk.com/uk/
• Harvard
http://www.harvard.edu/
• espn.com http://www.espn.com/
• Radford University http://www.radford.edu/
Display of Information
• Early Web designs copied format from
magazines and newspapers but
- printed doc’s are taller than they are
wide, screens width > height
- print is high resolution
- magazine, 2000 dots per inch
- newspaper, 300 dots per inch
- computer, 75 dots per inch
- printed documents – no navigation
Screen Resolution
Dots per inch, pixels, and resolution all refer to
the density of a display medium. A pixel (“picture
element”) is represented by one dot on a
computer screen. All computer screens have
nearly the same aspect ratio, 4:3, 4 units wide
and 3 units high. Most monitors now are 800
pixels wide and 600 pixels high. (New ones are
1024 x 768) The page must fit within the browser
window, so the web designer should plan on a
space of 760 wide by 420 high. (10.1 in x 5.6 in)
Site Navigation
The Web site should provide the answer to
these questions on every page.
- 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?
Remember navigation is closely related to
“use cases”.
Answer the navigation
questions.
• BMW
http://www.BMW.com
- Whose site?
- Where am I?
- What else is available?
- Where should I go next?
- How do I find what I am looking for?
Feedback and Interaction
• Should be evident on the site’s list of
purposes.
• Implicit collection – user doesn’t know
• Explicit collection – user realizes
- forms
- discussion boards (asynchronous)
- chats (synchronous)
Image Logos & Identity
• Color – many organizations have an
official color scheme, if so – use it to
promote identity
• Logos – signs or symbols of an
organization are very useful to establish
identity (How many little children know
what the “golden arches” mean?
• Font – Special for logo
• Features – Consistent with other pubs.
Chapter 3 – Better Design
• Understand how to incorporate key design
concepts to the entire site
• Guidelines for site design
• Use color, balance, alignment, and other
tools for Web page eye appeal
• Sketching, prototyping, and testing Web
design process
Observe First
• Before building any new web application,
first look at other sites from your
organization and at sites with similar
purposes, review:
- display of information
- navigation
- choosing and finding
- communicating the organization’s identity
- feedback and interaction
Most important location on a
Web Page
• Publishers have learned that people look at the
upper right portion of the right-hand page first.
• First point seen hasn’t been established for web
pages yet, but –
- top more likely than bottom
- things below or right of scroll bar never seen
- number of items should be 7 plus or minus 2,
“hrair limit”
- if you want something seen, put it near the top
of the page with few competing items
Text Easier to Read if:
• Black text on white background
• 10-12 words per line
• Standard 12 point system fonts
Times, Helvetica, Arial, Times Roman
• Serif font for body, sans serif for titles
- this is Arial, this is Times Roman
• Use only two font sizes, one for titles and
one for the body text
Text Easier to Read if:
(continued)
• Avoid words in all caps (only for warnings)
DON’T CLICK HERE!!!
• Make sure headings contrast with body
text. (let’s users scan easily)
• Separate paragraphs using a blank line or
an indented first line, not both.
• Leave plenty of white space around text
• Build page around a single axis. We like
things to line up.
Text Easier to Read if:
(Continued)
• Balance the page from top to bottom and
right to left.
• Memorize this:
“The simpler, the better. Chaos and clutter
are the opposites of order and
organization.” A simple page with a few
visual and text elements is easier to read
than a page with a plethora of items
competing for attention.
Designing for Eye Appeal
• http://www.webwhirlers.com/colors/combin
ing.asp
• Primary colors – red, yellow, blue
• Colors that are directly across the wheel
are complementary. They work will
together.
• Adding black to a color is called a shade.
• Adding white is called a tint.
Designing for Eye Appeal
(continued)
• Alignment – human eye likes things to line
up, for example, the left edge of a picture
and text column (single axis)
- alignment should be the same from
page to page
• Frames facilitate
- constant titles and menu items
• Pay close attention to how scrolling will
work on your pages
Web Site Design Steps
• Sketch the pages, consider the display of
information – text, images, video, tables, lists
(pay attention to alignment)
• Build navigation: menus, identification, and user
control
• Consider feedback and interaction issues
• Decide how to include Corporate Identity
• Decide on type of text
• Color, contrast, and balance
• Frames & alignment
• Scrolling
After Design - Prototype
• Use a WYSIWYG Web page editor or drawing
package to create your online prototype
• Test the prototype with the target audience
• Ask the questions of prototype reviewers
- Text readable? Useful images? Could
you find information?
- Is it clear where you are and where you
going within the site?
After Design – Prototype
(continued)
- Are all menu choices evident? How
would you find “X”?
- Who sponsored the web site?
- What seems missing from this page?
What could be eliminated?
- On a continuum from simple to cluttered
where would this page fall?
- What changes do you recommend?
Chapter 4 – Gathering and
Preparing Text, Numbers, Images
Chapter Objectives
- To analyze your Web page to determine its
component elements
- To learn the techniques for preparing text
to be used on your Web site
- To learn the techniques for preparing
numeric data for display on your Web site
Prepare a list of Elements
•
•
•
•
•
•
Radford University Web Site
How many images?
Text Components?
Banners, to be used throughout the site?
Frames?
Create a list of files that includes all the
needed component.
Writing for the Web
• Keep it short: Ruthlessly restrict text to
the absolute minimum needed by users.
• Pyramid Structure: The journalistic style –
summarize the story in the first paragraph,
covering the who, what, where, and when.
• Use subheads: Allow users to scan
• Use bullets: it conserves space and time
• Provide links: to interesting/related asides
Numbers and Graphs
• Generally put together in a spreadsheet
• Build into tables in XHTML 1.0
- can import tab or comma delimited
spreadsheets into some HTML editors
• Graphs in spreadsheets
- copy into editing program
Photoshop, Microsoft Paint, …
- save as .gif or .jpeg files and pull into
HTML document as images
• Similar process for other photographs & images
Image Compression
• .GIF – best for nonphotographic images
such as logos, diagrams, maps, and other
pictures with lines and areas of solid color
• .JPEG – used for photographs and for
images with complex colors that blend
• .PNG – new lossless compression scheme
that’s relatively new
Chapter 5 – Multimedia Elements
Standard Types of Multimedia Files
• Animation Files
• Sound Files
• Video Files
• Databases
Animations
• Do you really need them?
- Remember they are distracting to the
user, (design for the expected audience)
• Adobe Photoshop – simple ones, save a
series of .gif files
• Macromedia Flash – designed for creating
large graphics animations, .swf files
• 3-D rendering programs – very technical,
requires an expert user
Sound Elements
• Tools for editing sounds
- Macromedia SoundEdit
- RecordSound
- SoundForge
- CoolEdit
• After editing a sound file, must choose a
compression method and a codec (the
algorithm) used to compress the sound file
Sound Files
• Audio Streaming
The file never downloads to the user but plays
immediately as it arrives. Audio streaming
transmits a constant, real-time stream of sound
to the user and also lets you use much larger
files. Requires a special server on the sender’s
side, and a plug-in on the receiver’s side.
RealAudio, QuickTime Streaming, & Windows
Media are examples of Audio Streaming
Software.
Video
• RealVideo - .ram files – Any application,
wide range of quality settings
• QuickTime Movie - .mov files – Any
application, wider range of quality settings
• Windows Media - .asf files – Any
application, wide range of quality settings
Video-editing software – Adobe Premiere,
iMovie, Final Cut Pro, Media Cleaner Pro
Chapter 6 – Selecting Tools,
Organizing Files, and Creating
Templates
• Software Tools
• Role of the web designer
• Organization of web site elements
Web Site Building Tools
• WYSIWYG Editors
- PageMill, GoLive, FrontPage, and
DreamWeaver
• Code editors – assist in authoring HTML,
XML, Javascript & others
- HomeSite, BBEdit, and HotDog Pro
• Save as HTML functions
- Microsoft Word, other word processors
Microsoft Front Page
• An example of web page development in
Microsoft Front Page
- forms, tags, etc.
Templates
• Saves implementation time
• Can be implemented in tables or frames
• Table templates avoid navigational
problems for users
• Frames used to be avoided but are now
implemented in almost all browsers
Table Template Example
• <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN"
•
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• <html>
• <head><title>Web Page Table Template</title></head>
• <body leftmargin="0" topmargin="0" marginwidth="0"
•
marginheight="0">
•
<table width="100%" border="0" cellspacing="0"
•
cellpadding="0" height="100%">
•
<tr><td width="100px" height="440px" rowspan="2"
bgcolor="red">
•
Menu <br /> or <br />Contents <br />Area </td>
•
<td width="400px" height="60px%" bgcolor="blue">
•
Title Area<br /><br /></td> </tr>
•
<tr><td width="400px" height="380px" bgcolor="green">
•
Contents Area</td></tr>
• </body>
• </html>
Chapter 7 – Assembling the
Pages
•
•
•
•
•
•
•
Backgrounds
Grids and Borders
Text Placement
Images
Sound and Video
Feedback Forms
Linking Web Pages
Background Colors and Images
• Remember dark background colors make
it difficult to read text
- in HTML <body bgcolor=“#6666FF”>
- in CSS body {background-color:”blue”}
- or <body style=“background-color:blue”>
• Background Images
- <body background=“sailboat.jpeg”>
• backgroundexample.html
Readable Text
•
•
•
•
12 pt serif font for body
Make headings larger and bolder
leave white space around text
Use tables and lists to organize text
Embedding Sound and Video
<body>
<p>
Here's a sound file.
<a href="eightiesJam.wav" target="_new">
Play a sound file.
</a>
</p>
</body>
soundexample.html
Image Maps
• Here’s an example
http://www.teachingdemocracy.gse.harvar
d.edu/partners.htm
Chapter 8 - Testing
• Be thorough
- Windows running Netscape
- Windows running IE
- Macintosh on both browsers
• In particular, test on older versions of
browsers if you’re looking to reach a wide
diverse group of users
• Design without browser specific
extensions <marquee>, <blink>
Testing Display
• Test versus the three most common
display sizes
- 640 x 480
- 800 x 600
- 1024 x 768
• In Windows, click Settings from the Start
menu, then click Control Panel
- double-click Display, set slider to desired
resolution
Test Color Depth
• Most computers set their monitors to 16-bit
color depth
• However, some are set to 8-bit colors
• Changing the resolution of the display,
follow a similar procedure as used on
resolution
Test Bandwidths
• Make sure to test downloading your page
via a modem connection to the internet
(56K connection speed)
• Depending on your audience, you may
want to eliminate some intensive
applications (video, pictures/images, or
sound)
Most Important – User Testing
• Find the various kinds of users as defined
in your use cases
• Let them use the site and see if they can
get what they want from the site easily
• Make sure to note anything they have
difficulty with and make corrections
• Get a good cross section of users, don’t
just get experienced users