Introduction to Web Design Using Microsoft Expression Studio

holeknownSecurity

Nov 5, 2013 (3 years and 9 months ago)

180 views


Introduction to

Web Design Using

Microsoft
®

Expression
®

Studio

C H A P T E R
6
/
MO D U L E
6

I
N T R O D U C T I O N T O
W
E B

D
E S I GN
U
S I N G
M
I C R OS O F T
®

E
X P R E S S I O N
®

S
T U D I O

6
-
2

CHAP TER 6/
MO D U L E
6
:
T H E D E S I G N P R O C E S S

A Professional Team Approach

Web Design as a
C
areer

Designing
Web

pages and sites is a relatively new career option

with opportuni
ties for individuals
with various skill sets; opportunities exist for individuals with technical, artistic, business, and
communication skills.
Web designers need basic design skills in order to be successful.

It is very
helpful to have
communication

skill
s and to be know
ledgeable in

Web
-
specific design
technologies
.

Not only do designers create the “look and feel” of
Web site
s, but
they
incorporate
interactive features
for
e
-
commerce, online communities, site searches, and interactive
applications.

Today’s

designers
create

sites

that are participatory and interactive.

Web designers
must
consider usability and accessibility issues.

Well
-
designed
sites

integrate

the
visual
organization of content,
the
use of an intuitive

navigation system
,
a
careful selection

of typography
(font style, color, size, and spacing),
compliance to W3C standards,
with

a uniform,
consistent
, and
professional

design
.

Web technology

careers
often
require a combination of skill
s

in visual design and proficiency with
technology. Most Web

designers are salaried employees

working
at
an
advertising, marketing,
or
design agency, at Web consulting firms
that

build and manage
Web site
s for client organizations
,
or in separate
design

departments within large

corporations.

Web design also present
s
entrepreneurial opportunities for

designers
who
work on a
freelance
basis

in which they are hired
by a client for a specific project
.

The growth of the Internet virtually
e
nsures job security of
skilled
Web designers.

As the Internet evolves with
new tec
hnologies
and changing needs, Web designers
with skills yet unidentified will be in demand.

Developing the large
Web site
s common
for

today’s Internet requires the skills of many
individuals working in teams. It is not unusual for a team to include dozens
of individuals. Because
Web

desi
gn is often done in teams, team
work skills are critically important. Individuals who are
flexible, cooperative, and willing to assume their share of responsibilities are usually successful.

Communication skills are a critica
l element in
Web design as well as for
successful teams.
Individuals who can write well and speak clearly are valuable for communicating with
clients
, as
well as for communicating with other team members and supervisors. Project managers are usually
respon
sible for establishing expectations of group cooperation, shared responsibilities, and roles,
but the success of the team
,

in terms of both production of
high
-
quality
Web site
s and a pleasant
working environment
,

is dependent upon the teamwork skills of al
l of the team members.

Because so many technology careers involve working in teams, it is advis
able to learn and practice
team
work and communication skills. Opportunities to practice can be found in classrooms, on
recreational teams, in work environments
,

and in family life.

I
N T R O D U C T I O N T O
W
E B

D
E S I GN
U
S I N G
M
I C R OS O F T
®

E
X P R E S S I O N
®

S
T U D I O

6
-
3

W
hat You'll Do

The skills of a Web designer

determine

if visitors

stay on a site or
chose to leave. Ultimately, the
skills of the designer determine if a site meets its goals.

If the
Web site
's goal is to
sell a specific
product, the a
mount of
sales provide
s

a

measure of the Web designer's
skills
. If the
Web site

uses
advertising or subscriptions for its revenue, then
the number of site visit
s or new subscribers
will
be the

measure of success. If the
Web site
's primary goal is to
educat
e the public on spec
i
fic issues,
it is much more difficult to determine whether the goal is met.

Often, the success of
such a

site will
be whether the management “perceiv
es” that the site is doing well based upon the number of page
visits and “click
-
thrus.


Web design is a
n integral part of
the larger process of
Web development. Web designers create the
look, feel, and navigation for
Web site
s using HTML

or other markup languages

as well as a
number of computer graphics programs. Their work
determines what
people
see and interact with
when they
visit

a site
.

One of the most important
designer tasks

is
to
develop the

site
navigation
system that guides and leads v
iewers

through the site
.

Web designers are responsible for
creating
cool

graphics or
other visual
elements
, and choosing the style
s

and

fonts to make a site appealing
and help a company advance its business goals.

M
ore and more the Internet is being accessed

by a variety of connections and devices. Because of
w
ireless devices,
such as

Wi
-
Fi
-
enabled

or
Bluetooth
-
enabled computers,
mobile
phones, and
persona
l digital assistant
s,
Web designers are
under pressure to expand their skills and knowledge
in order to
optimize the pages they design for
these
devices.

A

Web desig
ner's job is to make
the
Web site

fu
nctional and pleasurable for the user. At the same
time
,

the designer must work to meet the goals of the client;

a corporate
Web site

should sell or
market
the sponsor
ing business
's products or services
. A Web designer
creating
a corporate
intranet site

fo
r employees
, for instance,
must provide
easy access to relevant information. A Web
designer
building

an e
-
commerce site
must ensure that

user
s recognize the company’s product
and
make the
shopping and buying process

as easy as possible.

Team
M
ember
R
oles a
nd
R
esponsibilities

Teams can vary in size and structure, but most are
composed
of individual
s

with very specific roles
and responsibilities.
While the specific names given to team members vary from organization to
organization, most fall into the general
responsibilities of manager, documenter, and designer.
These roles may be distributed among many individuals in large teams or condensed into the
responsibilities of just one or two designers in a smaller organization.

And of course, in addition to the spe
cific designer roles, there are numerous other roles that must
be filled in order to create a successful site. Additional tasks are performed by Web developers
who create the behind
-
the
-
scenes code for interactivity and
specific technical functionality.
Bu
siness managers must handle the business side of the project and writers are responsible for
creating content. The larger and more complex the project, the greater the likelihood is that there
will be numerous team members with very specific roles.

Project

Manager



S
upervises the
scheduling

of the project and

assumes responsibility for
coordinating all files so each member can access them on a daily basis.

The manager
is

responsible
for setting up interviews, scheduling meetings, and coordinating schedules

for involved parties
.

I
N T R O D U C T I O N T O
W
E B

D
E S I GN
U
S I N G
M
I C R OS O F T
®

E
X P R E S S I O N
®

S
T U D I O

6
-
4

Mana
gers often help wherever needed especially

if
some

part of the project is running behind
schedule.

Documente
r



C
reates all documents for the project.

The
documente
r

should take careful notes
during the meetings,
tran
scribe these

results
,

and

may be responsible to
organize all documents for
easy access by other team members.

Designer



H
as

responsib
i
l
ity

for acquiring all images for the
Web

site,
creating

any graphics that
will be used, and creating the visual aspects of the site.

The designer

ha
s

the ultimate responsibility
for

creating the design of the
Web site

that all parties have negotiated.

The Importance of Customer
-
Centered Design


“The right features and right
implementation”

In dictionaries, the terms "client" and "cust
omer" are often
listed

as synonyms for each other.

In
the business world, they sometimes have only subtle differen
ces;

in general, "client" refers to a
consumer of "professional" services, such as legal or consulting services, while "customer" refers
to so
meone who is purchasing tangible products.

E
ven within the same organization, the terms are
sometimes used interchangeably.

In this chapter, we use these terms t
o represent two different roles

with respect to the Web designer
and the Web site being designe
d. "Client" refers to the company or department that has engaged a
Web designer to complete a project, whereas "customers" are the intended visitors (end

users) of
the Web site, whether the site's purpose is to sell projects or services
,

or simply to provi
de
information.

Unified
D
esign,
U
sability, and
M
arketing

Customer
-
based
Web site
s
are designed to meet the
needs of the intended audience.

A
n intuitive, user
-
friendly navigation system
is
an essential element.

The
designs of
customer
-
based

sites
have thes
e
characteristics
:



D
esigned to target specific audience



Focus
es

on content rather than technology



Opens with a s
plash page



Provides a u
ser
-
friendly navigation syste
m



Organizes content with
columns

or other
dividers



Gathers information with easy
-
to
-
use f
orm
s



Employs

CSS (
c
ascading
s
tyle
s
heets)


Image 6.1

Customer
-
c
entered Web
d
esign

"Users"

should be thought of
as the ultimate
"customers
.

After all, they are the ones that actually

pay


for the site
through the traffic and business they create for

the company or organization
.

The
goal of the designer is to provide a positive experience for all customers, whether they are
searching for

information
,

join
ing

a community,
purchasing

items, or
seeking entertainment
.

A
c
ustomer
-
center
ed

design increases
the value of the
Web site

because the designer
considers
the
I
N T R O D U C T I O N T O
W
E B

D
E S I GN
U
S I N G
M
I C R OS O F T
®

E
X P R E S S I O N
®

S
T U D I O

6
-
5

customers’ needs, the tools and technologies
customers will

use, and their social context.
P
lanning
a

site is
always
done prior to
any
development. With customer input, the site can be built to
i
nclude the
features that are most important to customers.

Researching custome
r desires and implementing their

ideas into the design of the site will increase
the satisfaction and often increase profits for commercial
Web site
s. Support costs for the compan
y
are reduced because there are fewer phone calls and e
-
mail

message
s
sent
to help desks

from
customers
who are
having difficulties on the site
.

The following design styles are

problematic and the end product will invariably be a poor Web
site.



Company
-
c
en
tered



The
se

Web sites focus on the
interest
s

of the company
, and
the
c
ompany employees or owners

decide on the content.

The problem that often arises is that
what they
think

should be on the site does not meet the need
s

of the customer.

Often
products an
d services are overlooked in lieu of corporate structure.



Technology
-
c
entered



These
Web site
s often
appear as though

they were created by
technology wizards,
or
very inexperienced designers
.

An abundance of
splashy

technology
feature
s

are

incorporated in
to

the site with little regard to actual content

or

the features
required

to satisfy customer needs
.

Little research and planning
are

apparent

and little
valuable information is available for the customer.



Designer
-
c
entered



These W
eb sites are showcases
for the

designers' work

but ofte
n

fail
to satisfy the needs of either the client or the customers. It is important to remember

that
t
he job of the
Web site designer

is to
facilitate
communicat
ion
between

the

client and the
customer
.

S
eek input from
the

cli
ent

and
focus on

the customers’
needs
.

The
I
mpact of Design on Usability and Accessibility

Web
D
esign
P
atterns

Most problems can be solved in
many, many

ways.

Web design is no different. However,
designers often rely on what they
already
know and are most
comfortable with
in solving the
problem of
designing an effective Web site,
instead of searching out new solutions and new
technologies.
Web site design
is hard work and requires research. Often the designer must learn
new skills to stay competitive.

T
he
d
esign
process

can be made
more manageable
by breaking

the
job

into smaller
,

more
controllable tasks
.

Christopher Alexander designed an appr
oach to solving design problems by
breaking down the process into
chunk

patterns.

These
patterns

can be
incorporate
d

into the various
prototypes discussed in this chapter.

A
design pattern

is a formal way of documenting and
recording the steps to a
design problem solution
. An important aspect of design patterns is to
identify and document the key
qualities

that make a go
od
solution

different from a poor
solution
.
This is must be completed by someone with a deep understanding of the problem.

Questions to answer in this process include:



What
key components are found in all
successful
Web site
s?



W
hat information
must
the pag
e
convey
?



W
ho
is
the
audience?



Are there other design considerations?

I
N T R O D U C T I O N T O
W
E B

D
E S I GN
U
S I N G
M
I C R OS O F T
®

E
X P R E S S I O N
®

S
T U D I O

6
-
6

Once
these questions have been answered and documented
,
the designer must
determine which
f
eatures will satisfy the needs and
if some
of them fit together and
can

be combined.

Next the
d
esigner must p
rioritize these key components to determine which
are

critical
,
which are
important
, and
which
can be considered “
extras


that would be nice

to include if time and other
resources allow for them
.

Several qualities of good Web sites can be agr
eed upon.
All of the pages should have descriptive
page titles.

The navigation should be simple and obvious.

Graphics should be used appropriately
a
nd the
HTML markup should be valid.

T
he Web site

should be accessible to all visitors
.

Appropriate meta
-
tags

for
improve
d

s
earch
e
ngine optimization should be included.

The next step is to sketch
the actual “look” of the site
.

This can
incorporate
personal design styles
and strategies.

It begins with

a rough draft of the site
,
and then

the designer
refine
s

that
image into
an actual sketch
which

include
s

specific

images
, a

navigation system,
the content,
and footers.

Site
O
rganization

Organizing a
Web site

involves careful planning.

The goal for
any

site is to
have returning visitors.

The content must be
useful
, e
asy to find, and correct!

The content is the most important part of any
Web site
.

O
rganiz
ation, including
the ability to navigate to all parts of the site
,

is a close second.

The first page of any
Web site

is referred to as the
homepage
.

The
homepage

shoul
d clearly outline
the purpose of the site,
provide
navigation to major sub
-
pages, and include contact information
,

as
well as information regarding when the page was last updated.

Once the content for the entire site has been
selected upon,
the
chunks

must

be organized into a site
map
that
shows the interconnections between chunks
.

Th
e actual specifics of
s
ite maps

will be
discussed later in the chapter.

The site navigation system is d
esign
ed
,

which

includes buttons or link
s to the main pages of the
site

an
d is consistent from page to page throughout the entire site
.

This will allow visitors to
navigate easily and will create a consist
ent

look and feel for the site.

If the navigation links
are
buttons, then text links
are include
d

on the page as well.

This w
ill
enable

people
who
are visually
impaired
t
o use a Web page reader to audibly navigate
or
those
who have disabled

the images in

the
browser

to navigate through the site

using text links
.

A good
usability
test for
a

site is to determine
if any page in the

site can be accessed from the
homepage

with
no more than three clicks of the mouse.

If this cannot be done,
the site

should
be
reorganized. C
licking through a site and not fin
ding the sought
-
after information

or hitting a dead

end
will frustrate the user
and reduce the chances of a second visit
.

Usability
G
uidelines
and
M
easures

According to the United States Bureau of Labor and
Sta
tis
tics
, “
Once Web site creation is seen as
software development, it becomes natural to apply the tools and methods we have le
arned in past
projects. The life cycle of Web creation is identical to that of tr
aditional software: requirement
specification
, analysis, design, implementation, testing, and deployment. And, just as traditional
software development should have functionali
ty and a usability component, so should Web
development efforts.


I
N T R O D U C T I O N T O
W
E B

D
E S I GN
U
S I N G
M
I C R OS O F T
®

E
X P R E S S I O N
®

S
T U D I O

6
-
7

The

United States
Bureau of Labor and Statistics
also says that
u
sability can be defined as
the
degree to which a given piece of software assists the person sitting at the keyboard to accomp
lish a
task, as opposed to becoming an additional impediment to such accomplishment. The broad goal
of usable systems is often assessed using several criteria:



Ease of learning

(H
ow easy is it
for a first
-
time visitor
to get the
desired information
?
)



Reten
tion of learning over time

(W
hen

visitor
s

return to the site, how easy is it to
reestablish
their skills in navigating the site
?
)



Speed of task completion

(H
ow quickly can
a
visitor

accomplish
a desired
task?
)



Error rate

(H
ow often
do
visitors

make mistake
s on the
Web s
ite
?

How long does it take for
them to
recover from those mistakes
?
)



Subjective user satisfaction

(
Do visitors report that it is

simple to navigate through the
Web
s
ite
?
)

Evaluating

a Web site's usability
is often difficult
,

since the
measure

is very subjective.

Research
(ref.
http://www.useit.com/alertbox/20030825.html
)

shows that

if representatives from a user group

are selected

as testers
,

as few as
five

users are sufficient to ident
ify problems.
H
ere are three basic
rul
es to follow for good usability:



People want a well
-
designed
Web site
.

The
y have

very little patience for server errors or
construction issues.



Scrolling
should be avoided
.

Information that is not on the first screen o
ften gets
overlooked.



Users don’t read.

This may be a harsh reality, but research has determined that the reading
rate for a computer monitor is 25

percent

slower than from paper.

This translates into
a
directive to
writ
e

50

percent

less
;

s
treamline the co
ntent and leave ou
t nonessential details
.

Accessibility

Most novice
Web

developers are aware that the
I
nternet is accessible to blind people.

What they
may not know is that 22

percent

of Web users report some
other
type of disability, including:



Difficulty

using their hands



Cognitive disabilities



Hearing impairments



Mobility
limitations

Vision impairment is by far the most common disability among
Web

users; nearly

70

percent
of
the
adults in the United States wear some type of corrective lenses.

C
orporate e
xecutives and other
high
-
level decision makers who tend to be older

have an

even higher
percentage
. Many more
Internet users have
lesser or

tempora
ry disabilities: broken arms
,
eye injuries, attention deficit
disorders
,
or
medication side effects. Still mo
re
Web visitors
have “
self
-
inflicted
disabilities”: a
phone pressed against their ear, music blaring through headphones, multitasking, snacking while
surfing, or
other distractions
.

The
result

is that nearly
all

users benefit from accessible
Web

pages
that

allow text re
-
sizing, flexible widths, easy click targets, and no
-
nonsense terminology.

More informati
on can be found by researching
Web Content Accessibility Guidelines 2.0 at

http://www.w3.org/T
R/2008/CR
-
WCAG20
-
20080430/
.

This site detail
s

guidelines established by
the World Wide Web Consortium

(W3C)
.

I
N T R O D U C T I O N T O
W
E B

D
E S I GN
U
S I N G
M
I C R OS O F T
®

E
X P R E S S I O N
®

S
T U D I O

6
-
8

Development Process


“Iterative Design”

One of the most important

things to remember in the development process is to
maintain a constant
focus o
n
your
client
'
s and their customers’

needs
.

An iterative design
entails

working, reviewing,
and
reworking
a site

until the needs of the client and customer are met.

No design process is
perfect.

Decisions are made by teams of people and they may not always

know the right answers.

Iterative design allows for mistakes a
nd provides opportunities for design improvement.

The key
to iterative design is to quickly
create a prototype that will provide feedback from all involved
parties.

It should be flexible enough

so changes can easily be made.

There are three basic steps to
the iterative design process.

1.

Design.

Meet with client, set measurable goals, develop concepts, and discuss customer
needs.

2.

Prototype.

Create site maps, storyboards, and wireframes for th
e
Web

site.

3.

Evaluate.

Asses
s

the prototypes developed in
S
tep 2
;

rework if necessary
.


Image 6.2
The
d
evelopment
d
esign
p
rocess

If there is an existing
Web site
,
the iterative design process can be useful in updating information
and keeping the design
current with technology standards.
Rather than an entirely new
Web site
,
small changes are made on a regular basis and these changes are evaluated
using
customer
responses.

Changes should be made in repeated cycles,
retaining
what works and rethinking part
s
that
do
not.

P
ositive results
in one area of the site
should influence future modifications

to other
areas
.

An example of this iterative process
can be
seen

at
http://www.useit.com/papers/sun/p
agedesign.html
.



I
N T R O D U C T I O N T O
W
E B

D
E S I GN
U
S I N G
M
I C R OS O F T
®

E
X P R E S S I O N
®

S
T U D I O

6
-
9

Stages of the Design Process

The design process generally follows a very organized pattern of activity. The four stages

discovery, developing a value proposition,
exploration
,

and rapid prototyping

are typical

activities that Web designe
rs engage in when working with a client. Each stage has specific goals
and is critical for efficient and successful site development.

1.

Discovery

D
iscovery is a
step
that encourages a more active role in the development process by answering a
series of qu
estions or solving problems.

Understanding

the target audience and conceptualizing the
goals of the
Web site

are

th
e first step of the development
process.

Begin by defining the
objectives for the
Web site
.

What are the
o
verall
g
oals of the
Web site
?

Deter
mine these goals by
interviewing your client and working with the development team.

Know
the
customers.

This will
take more research, but this is essential for the development process.

In the scope of this research
you should determine the answers to the f
ollowing questions
with
regard to
the
customer
:



People/Roles



Who will be visiting the
Web site
?

Understand the needs of customers.

You can use this information to determine what will be included in
the
site
.



Tasks



What

message do
es

you
r client

want to
communicate
with

the
site
?

Once the needs
of the client have been determined, the developer must creat
e that content to deliver that
message.



Technology Access



How will the message be disseminated?

What technology tools will
be used to allow the customer
s to interact with the Web site, or acquire information?



Social Issues



Why

would customers visit the
Web site
?

It is imperative to know and
understand the
larger social and organizational context in which they work, play, and live
(social issues).



Contex
t/Scenarios



Stories

or scenarios can be used
to
examine the

goals and activities
of
likely customers
.

Visitors to the
Web site

appreciate this.

If customer
s

feel that the
company is empathetic to their needs, they are more likely to visit the site and st
ay longer.



Planning
S
tyles,
G
rammar
,

and
R
eading
L
evels



It is often easy to overlook the
obvious.

Always keep the target audience in mind as you are developing the content for the
Web site
.

It is important to communicate to the audience in a way that is
meaningful
to

them and at an appropriate reading level.

Always check grammar and spelling.

Nothing
wi
ll

turn away

a visitor
more quickly
than a sloppy
Web site

with misspelled words.

In summary, spend
considerable
time in the discovery stage.

This will sav
e a lot of time later, and
the end product will reflect that
effort
.

Getting to know
the

client in the early stages of
development is critical.

At the end of the discover
y

stage,
the designer

should have a clear
understanding of
the

client’s expectations.

Determine the scope of the project and understand the
audience that will be visiting the site.

Evaluate other sites that
compl
e
ment
or are competition for
the

client.

I
N T R O D U C T I O N T O
W
E B

D
E S I GN
U
S I N G
M
I C R OS O F T
®

E
X P R E S S I O N
®

S
T U D I O

6
-
10

2.

Developing a
Value Proposition

Develop a meaning
ful

value proposition.

This is a shor
t and to
-
the
-
point statement that
distinguishes a Web site

client
's products or services from those of its

competitors.

Put
considerable
effort
into
developing this statement.

It should include what
the

client
does

and who
they
are.

Work with the client to

make sure that it fits their needs.

In short,
the

unique value
proposition
answers the question,
"
Why should I buy from you and not from your competitor
?
"

A deep knowledge of the customers
will
lead to a
better understand
ing of

the concerns they may
have
about purchasing
a

product.

Take time to identify the business and
search for unique features

that

the company offers
.

The goal of the
Web site

should be to make the

client
’s product or service

stand out from the crowd.

Create a compelling message that can
not be misinterpreted.

If the

value
proposition is vague, or if you are solving a problem that may not exist, or if prices are too high
,

you will not
attract and engage visitors in the site
.

The

client may think

that

their product is the
best and
that
ever
yone

in the world needs to purchase it.

The designer’s

job is to be honest with
the

client and
to
help them develop an honest value proposition.
This is balanced with the

need to fully
understand
the
customer
s


situation

and how to address their specific c
oncerns.

3.

Exploration

E
xplore various
Web design
options by generating
numerous

rough designs

from

which one will
be chosen for further development.

Collaborate with members of
the

team and always
communicate with
the

client to make sure their expectatio
ns are being met.

G
enerat
e

multiple designs
:



V
isualize solutions to discovered issues



C
reate a design based on
information
and
navigation



D
evelop an
early graphic design

4.

Rapid Prototyping

Develop a model for the
Web site

that illustrates the design.

Thi
s will allow feedback from
the

client so changes can easily be made.

The development of the prototype early in the process allows
for the client to provide feedback.

Later the user interface can be included.

Clients
want

to know what the finished product w
ill actually look like.

The designer’s job is to
turn
these ideas into

reality.

Conceptual work is very difficult, but there are some models that allow for
design flexibility and iterative design.

The basic process goes like this: research
, think, sketch t
he design, re
-
think, revise
sketch (repeat
as
many times as you can afford to
)
,

and
then

create! The
goal
is to learn as much as
possible

in
the beginning of a project by “front loading” it with research, design
models,

and conversation
among the parties i
nvolved.

I
N T R O D U C T I O N T O
W
E B

D
E S I GN
U
S I N G
M
I C R OS O F T
®

E
X P R E S S I O N
®

S
T U D I O

6
-
11

Some basic models used by most designers

include

site maps, storyboards, and wireframes.

Although the definition
s

can easily overlap,
there are subtle
differences and each can aid in the
design development process
.



A
site map

is a

text outline of
the entire site.



A
s
toryboard

is
a
graphical representation
of the entire site.

It

can be on paper or
created
in any graphic design program.

The storyboard can be
an outline

in an
HTML
editor.

Often, the software will provide a site
-
map view to illustrate
the navigation within the
Web
site
.



A
wireframe

is a

"
shell
"

showing

the actual pages that are
to be created
in the
Web site
.

Each page is represented by a drawing that shows the information components, especially
the navigation, that will appear on a page
. The drawing may suggest a basic visual layout,
but
it
doesn't commit to any specific appearance.

Site Maps

Site maps are one of the most critical and widely used tools for
Web
design
.

Because
site maps

show the overall structure and hierarchy of a
Web si
te
,

t
hey are used to develop the layout of the
site, and provide the framework upon which to base site navigation. Start by sketching out a rough
site map.

Include all of the basic pages
planned for the site
.

Do not include specific detail
s

in the
site map
s.

Expect the design to evolve over the course of the project.

Another good use of site maps is
to create
an HTML site

map

that can be used on the Web site.

This is particularly useful for very large sites
.

The HTML sitemap

can consist of one or more
pages

in the
Web site

that list

all or the most important pages.

HTM
L site maps are most often
text
-
based, but occasionally are graphic.

Each page is represented by the title with a link that
actually accesses the referenced page.

It allows designers
to include

additional information about
each
page
: when it was last updated, how often it changes, and how important it is in relation to
other
pages

in the site. This allows search engines to crawl the site more intelligently.
When used
correctly, HTML
s
ite maps

ca
n help you get more pages from your
Web site

indexed and added to
search engine directories
.

For search engine optimization and ranking
,

it is important to ensure all
pages in your
Web site

have at least one high
-
ranked page linking

to them using relevant
keyword
-
rich anchor text.

Create good descriptions for headings in the sitemap.

It also helps to have good
titles for all of the links in your site.

Link most of the site’s

pages to
the

site

HTML sitemap to give
it high importance to search engines.

Site m
aps

are particularly beneficial in situations when users cannot access all areas of a
Web site

through a browseable interface.

In these cases, a search engine may not find all relevant pages.

When
designers

use A
JAX

or Flash, search engines can
not

navigate

through to get to the content.

This makes a site ma
p very important and allows
search engines to have information from recently
updated pages.

By submitting
site maps

to a search engine
,

a
designer

is h
elping that engine's crawlers

do a better
job of craw
ling their sites.
Site maps

do not replace crawl
-
based mechanisms that search engines
already use to discover URLs.

I
N T R O D U C T I O N T O
W
E B

D
E S I GN
U
S I N G
M
I C R OS O F T
®

E
X P R E S S I O N
®

S
T U D I O

6
-
12


Image 6.3
An example site map from a classroom Web site

Storyboards

In addition to a site map of the
Web site
,
a
storyboard
is

often used
to help with design, budget,
and choice of technology.

A good storyboard can provide a clear understanding of the site
'
s scope

to everyone working on the site

development project.

Often, a completely unstyled outline of the site is built using
basic
HTML

p
ages
. Although the
storyboard does not include every individual page on the site, it does cover the major functional
areas and main sections. Each page in the storyboard will include the main navigation, related
links, a functional description of the page,

and some notes on content for that page. Although
a
storyboard shows

no design elements, it will indicate all of the major elements to appear on each
page.
A
pproximat
ing

the position of these elements
may
give a better
vision

of the final site.

Each
of th
e pages will have an
HTML
file.

Although the pages are limited in detail,
a

storyboard

provides an opportunity for clients to experience primary usage of the site.

These pages can be
created using paper/pencil, or
in any graphics application.

The specific
graphics do not need to be
shown
on these pages, but there should be an obvious theme or design feature that reflects
consistency among the pages.

There are several ways to view a site in Expression Web.

The View buttons appear along the
bottom edge of the

Editing window

when a site is open but no specific page is opened in the
editing window
.

The views are Folders (the one that you usually see when
Expression Web

opens),
Remote Web Site, Reports
,

and Hyperlinks.
The Hyperlinks Vi
ew displays a diagram of al
l the
links that take users to a specific file or, alternately, a diagram of all
l
inks from a specific file
. It
shows links to images, css, DWT, and pages.

I
N T R O D U C T I O N T O
W
E B

D
E S I GN
U
S I N G
M
I C R OS O F T
®

E
X P R E S S I O N
®

S
T U D I O

6
-
13


Image

6.4
A
view from the Expression Web Hyperlinks view

Wireframes

In
Web

design
,

a wireframe is
a diagrammatic representation of the elements that need to be
accounted for on each page of the
W
eb

site or screen of the program.

The key to wireframes is for
them to be quick and disposable. Wireframes are the place for experiment
ing

with

new ideas
,

test
ing
,

and adaptation, not for displaying extensive detail.

W
ireframe
s are used extensively in
3D
animation.

The designer begins with a
"
frame
"

of the character without color, skin, clothing
,

or
hair.

It is a lot less expensive to change the design at this p
oint rather than after the finer points
have been developed.

This same principle can be applied to
Web
design.

Web site

wireframes are
simple line drawings that show the placement of elements on a
Web

page.

Wireframes allow your
client to focus on layout
w
ithout the distraction of images
, font
style,
and other design elements.

The client can c
oncentrate on
the content of

each page and the amount of space each element

will use.

The important elements of the
Web site

should be illustrated in the wireframe.

U
se simple shapes
instead of actual graphics, and label them.

Include navigation, a logo for the company or a banner
for the site, and all content areas.

You m
ay want to include a search box

or a user login area.

I
N T R O D U C T I O N T O
W
E B

D
E S I GN
U
S I N G
M
I C R OS O F T
®

E
X P R E S S I O N
®

S
T U D I O

6
-
14


Image 6.5
An example of a wireframe

It is
not often that

the wirefram
e

is actually seen since it is part of the development phase of a
W
eb

site.

View
photos
of

wireframe
sketches
created by professional Web designers at
http://deeplinking.net/paper
-
we
b/
.

Refinement

Once the design of the
Web site

has been developed, refinement begins.

This process is also an
iterative process.

The wireframe is a
starting point in

the

process
for selecting the t
ypeface of
headers and text, appearanc
es of images, and co
lor schemes.
After all parties have worked on the
refinement of the site, there should be
a detailed prototype

of the
Web site
,

and t
he storyboards and
wireframes
will

include many more details.
T
he refi
nement process involves many evaluative
steps.



Expert

Reviews


“Heuristic Evaluation”

The goal of heuristic evaluation is to find the usability problems in the design so that they
can be corrected during the iterative process. Heuristic evaluation involves
evaluators
examining the interface and judging

its
compliance with recognized usabili
ty principles
.

Heuristic evaluation is difficult for a single individual to do because one person will never
be able to find all the usability p
roblems in an interface. D
ifferent people find different
usability problems. I
t is generally recommended that

three to five evaluators be used for a
site evaluation, since additional information is
generally
not gained by using larger
numbers.

I
N T R O D U C T I O N T O
W
E B

D
E S I GN
U
S I N G
M
I C R OS O F T
®

E
X P R E S S I O N
®

S
T U D I O

6
-
15



Proofread the
S
ite and
C
heck for
E
rror
s
.

Test forms and other interactive elements. If th
e site includes forms, polls, surveys, or
frequently asked questions, train the client in utilizing them.

Include a plan to update
these
interactive elements.



Informal Evaluations


“Think Aloud”

When two people collaborate in using a Web site
,
problems wi
th the site can become
quickly apparent. O
ne
person uses the site and v
erbally disc
usses the process, while t
he
other person records the comments and encourages the
first

to express
his or her

thoughts
and questions.

The only way to
truly
tell whether the
design works is

to ask a few people to
use

it and
to
have them
report

what

they're thinking while they do.
Major errors are

obvious
right away and
less obvious problems can be further investigated through more discussion
with the testers.



Formal Usability
Studies


“Bottom
-
Line Data”

Usability testing is the process by which the human

computer interaction characteristics of
a system are
analytically
measured, and weaknesses are identified for correction
. Standard
Web server

logs are
a

valuable source of inf
ormation about usage patterns once a
Web site

has
been posted to a server.

At this point the testers need not find usability experts or
representative users; real users' sessions are captured in great
statistical
detail and are
available for analysis. Such

testing can be rigorously structured and quite expensive.
Ultimately, the bottom line is

the potential cost savings that can be realized through
usability
studies.

The purpose of most
Web site
s is to attract users and distribute
information or products. L
osing users because of a poor design could be catastrophic for a
commercial venture. Even in the absence of direct monetary considerations, an
organization may find the cost of user support

such as calls or e
-
mail to a help desk

is
directly related to a si
te's ease of use.

After all of the refinement strategies have been
used
, the site should be published in a nonpublic
area so the client can test it.

The site should be v
iew
ed
on several different computers,
on
various
monitor sizes
,

and
with
different brow
sers.

It is critical that the look and feel of the site remain
consistent
across all viewing scenarios and from page

to

page
.

All modifications should be
completed during the refinement state before actually publishing the

site and making it public.

Writin
g for
Effective
Communication on the Web

There are many
attributes of


good


writing. They include correct spelling

and

grammar, as well as
interesting content.

However, to write for the Web
,

writers

should

be aware of how people read
Web pages, as well as

the nature of hypertext itself.
Writing for the
Web

differs dramatically from
writing for
print

media
.

Web users generally scan the content rather than read
ing

every word.

Designers must

write concisely, then cut, edit, and paraphrase.

Classic academic wr
iting follows a
pyramid structure.

It lays the foundation, then
supports the information from research or data
, and
is then
followed by a conclusion.

Th
at

style does not work for
Web

content.

An inverted pyramid
approach
is suggested.

The workflow is rever
sed by putting the essential information first.

Details
follow, letting the user decide whether to read more on the page.

When a page is longer than the
typical monitor
screen, putting important information first is critical.

Research has
shown

th
at

most
r
eaders do not scroll.

Write f
r
om your reader’s

per
spective and work to answer the questions
in the
I
N T R O D U C T I O N T O
W
E B

D
E S I GN
U
S I N G
M
I C R OS O F T
®

E
X P R E S S I O N
®

S
T U D I O

6
-
16

visitor’s

mind.

Group your content into small, bite
-
size pieces of information.

Th
is

makes the te
xt
much easier to read in the Web environment
.

Use the headl
ine feature to your advantage.

Not only does an attractive headline at the top of the
page attract your reader’s attention, but good use of
headings

will
enable browsers to find and
categorize your site properly.

Heading
s

within a document
improve
the read
er
’s ability to scan the
site
.

Allowing the user to feel in control is very useful.

Techniques that aid in communication
include highlighting important text
, adding

h
ypertext links
, and varying

font
s

and colors.

The
imperative
mood
will grab their attentio
n.

Put
action
words like
subscribe, place order,
and

quit

at
the beginning of sentences or phrases.

The active voice helps
convey

your point quickly, improves
clarity
,

and results in shorter sentences.

Be factual
.

Do not assume that the reader is paying cl
ose
attention.

A reader spends a very short time at a site on the first visit.

State the facts plainly and
clearly.

Jakob Nielsen and others have conducted eye
-
tracking studies
,
in which
eye movement
s

and dwell
times of site visitors (in a controlled envir
onment) are
recorded. The result is a heat
map showing
the most heavily consumed (time spent) areas of a

Web

page. Examples of the heat
maps can be
found at the following
site
:

http://www.useit.com/eyetracking
/
.

These studies show where people's
eyes spend the most time
, suggesting that

they contain
the

most heavily
-
consumed content
.

Users
tend to read in an "F" pattern and focus on information that is presented in bulleted lists.

Quality w
riting for the Web i
ncludes using hypertext links appropriately.

Summary information for
each link is essential.

Convey enough information to
ensure that
the reader
will

follow links that
actually ha
ve

information they need.

Links to extr
a information can be included; however
, you risk
losing your customer when a link takes
him or her
to another Web site.

By i
ncluding links to
related content
, you

show readers that you've done some research, and that you are willing to let
them
examine

other viewpoints.

Scannable, concise
,

and

objective writing styles have been shown to make a positive difference in
Web users’ ability to navigate
a
Web site and
in
their satisfaction.

Each Web site competes with
potentially thousands of other sites for your reader’s attention.

Make every wor
d

co
unt.

I
N T R O D U C T I O N T O
W
E B

D
E S I GN
U
S I N G
M
I C R OS O F T
®

E
X P R E S S I O N
®

S
T U D I O

6
-
17

Chapter Summary

Web site
s commonly require

the skills of many individuals working in teams

in which
communication skills are

critical. Web design teams generally have a project manager, a
documenter, and a designer. The actual number of team members
varies with the size of the
project.

Sites can be designed to be company
-
centered, technology
-
centered, or designer
-

centered; the
most useful is customer
-
centered. Christopher Alexander designed an approach to solving design
problems by breaking down the
process into
patterns

that
formally document the steps to arrive at
a design solution.

Usability standards are intended to make the Web accessible to everyone. While vision impairment
is the most common disability, the majority of users have some disabilit
y, so everyone benefits
from accessibility standards and techniques.

The iterative process assures quick revisions of Web projects through repetitions of
design,
prototype creation,
evaluation of results
, and refinement
. Typically, a design team moves thro
ugh
various tasks
,

including discovery, establishing a value proposition, exploration of possible design
solutions, and rapid prototyping in the process of creating a Web site that meets the needs of the
client and the customer.

Site maps, storyboards
,

and

wireframes all provide a way for the designer to
visualize the Web site
being designed. Employing a variety of testing tools and scenarios assures a quality product.
Heuristic
e
valuation,
p
roofread
ing
,
i
nformal
e
valuations, and
f
ormal
u
sability
s
tudies ar
e all testing
strategies.

Writing for the Web requires different skills than typical content writing. Because visitors spend so
little time on a Web site and are generally rather impati
ent, the designer should use an

inverted
pyramid writing style using fe
w words, keeping the most important details at the top, and creating
small
,

manageable segments of content in easy
-
to
-
read formats.

Review Activities

1.

Investigate the design theories of
Christopher Alexander
. Create a simple Web page of
your findings. In
terpret his theories for a design activity of your choosing.

2.

Which team
-
member role are you most suited for? Why?

3.

Select your favorite Web site. What “focus” does it have?
C
ite
four
reasons
to justify your
answer.

4.

Interview an acquaintance who has

some
type of disability

and uses the Internet. Question
him
about the difficulties
he has

and what some businesses or organizations have included
on their sites to make it easier to use them.

5.

Create a site map for a favorite Web site of at least
six
pa
ges.

6.

Create a wireframe for a favorite Web page.

I
N T R O D U C T I O N T O
W
E B

D
E S I GN
U
S I N G
M
I C R OS O F T
®

E
X P R E S S I O N
®

S
T U D I O

6
-
18

7.

Select a Web site on the topic of your favorite hobby. Evaluate the writing of content. Does
it follow an inverted pyramid? What are the most important details? What is next in
importance? Find a site
that does not follow the inverted pyramid style. Evaluate why it is a
more difficult site to use by identifying
three
reasons.

Review Questions

1.

What are the three roles necessary for a good design team?

2.

What are four design processes discussed in the

module?

Which is the most effective?

3.

What term

is
used to refer to the first page of any Web site
?

4.

What key components should be included in all Web sites?

5.

What guidelines are used to measure Web sites
'

usability?

6.

List five accessibility issue
s that Web designers must consider when creating Web sites.

7.

Explain the three steps used in iterative designs.

8.

What four methods or tools should be used in the design process?

Briefly explain each.

9.

Describe three prototypes used in Web design.

Bri
efly explain each.

10.

When refining a Web site, what techniques
can

be used?

11.

List
three
traits of quality Web content.

Essential
Vocabulary

A
ccessibility



A
n initiative of the World Wide Web Consortium launched in 1997 to ensure that
as the Internet
grows in usage

among all people.

Web sites are designed to accommodate people
with disabilities.

A
udience



T
he group of people who will visit and use a Web site.

C
lient



(as used in this chapter)
T
he company or department for which a Web site is being
de
signed.

C
ompany
-
C
entered



A

design style that focuses on the interest of the company.

C
ustomer



(as used in this chapter)
A

person who will visit and use a Web site, presumably to
purchase products or services.

C
ustomer
-
C
entered



A

design style that foc
uses on the needs of the intended audience
(customer).

D
esigner



A

team or group member responsible for Web page design.

D
esigner
-
C
entered



A

design style that focuses on the design of the Web site.

I
N T R O D U C T I O N T O
W
E B

D
E S I GN
U
S I N G
M
I C R OS O F T
®

E
X P R E S S I O N
®

S
T U D I O

6
-
19

D
ocumenter



A

team or group member responsible for

cre
ating the actual documents of a Web
site.

E
ye
-
T
racking



T
he process of recording the e
ye movements and dwell times
of site visitors (in a
controlled environment).

H
euristic
E
valuation



A

method of identifying usability problems in a user interface throug
h
informal inspection.

Homepage



T
he first page of a Web site.

H
ypertext



A

system that enables a user to access particular locations in Web pages or other
electronic documents by clicking on links within specific Web pages or documents.

I
nverted
P
yramid



A

shape that symbolizes the reversal of the normal workflow of writing, so
that the essential information comes first.

Details follow, letting the user decide
how much to read
on a particular Web page.

I
terative

D
esign



A

three
-
phase design process:

1.

interviewing clients and customers,

2.

making small changes made to the Web site,

3.

evaluating the affects these changes have with the audience,

and then repeating
the
process
when needed.

N
avigation



A

way to access

the pages of a Web site
.

P
attern



A

model or template for handling a common need in Web design.

P
roject
M
anager



T
eam or group member that provides the organization, arranges interviews,
and keeps all involved members on task.

R
apid
P
rototyping



M
odel that illu
strates the design of Web si
tes through an iterative process.

S
ite
M
ap



T
ext
-
based outline of
a
Web site that shows the overa
ll structure and hierarchy of the
site.

Splash Page


A splash page is
the first p
age that a viewer sees and tries

to catch the

user’s
attention. There are tw
o types of splash pages. One that is on the screen for a set amount of time
(
for example,

10 seconds) and some Web sites use the homepage as a splash page.

S
toryboard



U
nstyled graphical representation of all pages of a Web site.

T
echnology
-
C
entered



D
es
ign style that features technological
over content or visitor needs.

U
sability



T
he degree to which a Web site assists the person sitting at the keyboard to accomplish
a task, as o
pposed to becoming an

impediment to such accomplishment.

U
ser



A
nother wor
d for audience or customer
.

V
alue
P
roposition



A

short and specific

statemen
t that distinguishes a Web business’

products or
services

from those of its competitors.

I
N T R O D U C T I O N T O
W
E B

D
E S I GN
U
S I N G
M
I C R OS O F T
®

E
X P R E S S I O N
®

S
T U D I O

6
-
20

W
ireframe



A

diagrammatic representation of the elements on each page of a Web site.

W
ork
flow



T
he defined series of tasks within a team or group to produce a final product.

For Instructors

Review Questions with Answers

1.

What are the three
roles

necessary for a good design team?

A
N S WE R



Project Manager


Supervises project flow and helps whe
re needed



Documenter


Manages creating the actual documents



Designer


Responsible for page design

2.

What are four design processes discussed in the module?

Which is the most effective?

A
N S WE R



Customer
-
centered



Company
-
centered



Technology
-
centered



Design
er
-
centered

A
N S WE R



Customer
-
centered is the most effective.

3.

What term

is
used to refer to the first page of any Web site
?

A
N S WE R



Homepage

4.

What key components should be included in all Web sites?

A
N S WE R



All of the pages of the site should have descrip
tive page titles.



The navigation should be simple and obvious.



Graphics should be used appropriately.



The
HTML markup should be valid.



Web site
employs
accessibility features.



Appropriate meta
-
tags
used
to improve
s
earch
e
ngine optimization.

I
N T R O D U C T I O N T O
W
E B

D
E S I GN
U
S I N G
M
I C R OS O F T
®

E
X P R E S S I O N
®

S
T U D I O

6
-
21

5.

What guide
lines are used to measure Web sites
'

usability?

A
N S WE R



Ease of learning



Retention of learning



Speed of task completion



Error rate



Subjective user satisfaction

6.

List five accessibility issues that Web designers must consider when creating Web
sites.

A
N S WE
R



Vision impairment



Difficulty using hands



Cognitive disabilities



Hearing impairment



Mobility limitations

7.

Explain the three steps used in iterative designs.

A
N S WE R

1.

Plan the overall design

2.

Create simple prototypes

3.

Evaluate design

(repeat any and

all of these steps as needed)

8.

What four methods or tools should be used in the design process?

Briefly explain
each.

A
N S WE R

1.

Discovery


G
et to know your client and
their

customers
.

2.

Value Proposition


D
evelop a meaningful statement that sets your

client apart from the
competition
.

3.

Exploration


C
onsider various design types for the site
.

4.

Prototypes


C
reate models that illustrate the design of the site
.

9.

Describe three prototypes used in Web design.

Briefly explain each.

A
N S WE R

1.

Site Map
s


T
ext
-
based outline of the entire Web site

I
N T R O D U C T I O N T O
W
E B

D
E S I GN
U
S I N G
M
I C R OS O F T
®

E
X P R E S S I O N
®

S
T U D I O

6
-
22

2.

Storyboard


G
raphical representation of the entire Web site that shows the navigational
structure and page hierarchy

3.

Wireframes


D
iagrammatic representation of each page in the Web site.

Placement of
va
rious elements on the page should be represented with simple drawings

10.

When refining a Web site, what techniques
can

be used?

A
N S WE R



Heuristic


A

problem solving method, commonly informal



Think Aloud


W
ork in teams (pairs) and go through the entire si
te and discuss and record
comments



Usability Studies


U
se various tools to track data collected from the Web site.

11.

List
three
traits of quality Web content.

A
N S WE R

1.

Make text
easy to scan

2.

Concise

3.

Objective

Credits

"Accessibility / Section 508
,


Foraker Design
,

2008
,

26 Jun 2008
www.foraker.com/accessibility_section508.html

(accessed June 26, 2008).

Carstens, Deborah Sater
, Ph.D., Pauline Patterson
,

"Usability Study of Travel Web

Sites
,
"

Journal of Usability Studies
,

Vol. 1
,

Issue 1
,

November 2005
,

47

61
,

http://www.usabilityprofessionals.org/upa_publications/jus/2005_november/travel.pdf

(accessed
June 26, 2008
.

"Customer
-
Centered Web Design: More Than a Good Idea
,
" January
10,
2
007
,

WebReference.com: Dev the Web
,

http://www.webreference.com/authoring/design/customer_centered/3.html

(accessed June 26,
2008)
.

Henning, Kathy,

"The Seven Qualities o
f Highly Successful Web Writing,
" Dec
. 12, 2000, ClickZ,

http://www.clickz.com/showPag
e.html?page=833861

(accessed July 15, 2008)
.

Levi, Michael D.
,

and Frederick G. Conrad
,

"Usability Testing of World Wide Web Sites
,
"
U.S.
Department of Labor, Bureau of Labor Statistics, Office of Survey Methods Research
,

August
23,
2002
,

U.S. D
epartment o
f Labor,
http://stats.bls.gov/ore/htm_papers/st960150.htm

(accessed June
26, 2008).

Nielsen, Jakob
,

"1995 Design of Sun Microsystems' Web

S
ite, Using Iterative Design and User
Testing
,
" May

25,

1995
,

http://www.useit.com/papers/sun/

(accessed June 26, 2008
)
.

I
N T R O D U C T I O N T O
W
E B

D
E S I GN
U
S I N G
M
I C R OS O F T
®

E
X P R E S S I O N
®

S
T U D I O

6
-
23

Nielsen, Jakob
,

"Eyetracking Research into Web Usability
,
" 2006
,

Nielsen Norman Group
,


http://www.useit.com/eyetracking/

(accessed July 9, 2008)
.

Nielsen Norman Group
,

"Beyond ALT Text: Making the Web Easy to Use for Users With
Disabilities
,
" 2007
,

htt
p://www.nngroup.com/reports/accessibility/

(accessed July 15, 2008).

"Research
-
Based Web Design & Usability Guidelines
,
" 2006
,

U.S. Department of Health &
Human Services and the U.S. General Services Administration
,

http://www.usability.gov/pdfs/guidelines
.html

(accessed July 15, 2008)
.

Saldarini, Robert. "
Effective Team Dynamics
."
CSTA Voice
,

Volume 4, Issue 1

(2008): 3

4.

Singer, Ryan
,

"An Introduction to Using Patterns in Web Design
,
"
October 4, 2004,

37 Signals.

http://37signals.com/papers/intropatterns/

(accessed June 25, 2008)
.

Stepno, Bob. "Web Writing in Journalism Classes
,
"
Bob Stepno's Other Jour
n
alism Weblog
,


Oct
. 28,

2006
,
http://radio.weblogs.com/0106327/stories/2004/12/30/webWritingInJ
ournalismClas.html

(accessed July 15, 2008)
.

"UsabilityNet: Rapid prototyping methods
,
"
2006. UsabilityNet
,

http://www.usabilitynet.org/tools/rapid.htm

(accessed June 26, 2008)
.

W3C World Wide Web Consortium
,
http://www.w3.org

(accessed July 15,

2008
).

"We
b Site Organization
,
"
Fronterix: Web Design and Development
,

http://www.fronterix.com/articles/organization.php

(accessed June 26, 20
08
)
.

WetFeet,
"Web Design
,
"

2008 UNIVERSUMUSA
,
http://www.wetfeet.com/Careers
-
and
-
Industries/Careers/Web
-
Design.aspx

(accessed June 25, 2008).

Additional References,
S
uggested
R
eading

van Duyne, Douglas K.,
James A. Landay,
and
Jason I. Hong
.

July 2002.
The

Design of Sites:
Patterns, Princip
les, and Processes for Crafting a Customer
-
Centered Web Experience
.

Addison
Wesley.

van Duyne, Douglas K.,
James A. Landay,
and
Jason I. Hong
. December 2006.

The

Design of
Sites: Patterns for Creating Winning Web Sites

(2
nd

ed.) Prentice Hall.

Topics

1.

A
Professional Team Approach

a.

Web design as a career

b.

Team member roles and responsibilities

I
N T R O D U C T I O N T O
W
E B

D
E S I GN
U
S I N G
M
I C R OS O F T
®

E
X P R E S S I O N
®

S
T U D I O

6
-
24

2.

The Importance of Customer
-
C
entered Design


“The right features and right
implementation”

a.

Unified design, usability, and marketing


(1)
.

Other design sty
les

(c
ompany
-
c
entered
, t
echnology
-
c
entered
, designer
-
centered)

3.

The Impact of Design on Usability and Accessibility

a.

Web design patterns

b.

Site organization

c.

Usability guidelines and

measures

4.

Development Process


“Iterative Design”

a.

Discovery


(1).

Overall Goals of the
Web site



(a).

Know your customers


“Primary & Secondary Research”



(i).

People/Roles (Who)



(ii).

Tasks (What)



(iii).

Technology Access (How)



(iv).

Social Issues (Why)



(v).

Context/Scenarios (Stories)



(vi).

Planning
styles, grammar and reading levels


(2).

Value Proposition


(3).

Exploration


(4).

Rapid Prototyping



(a).

Site Maps



(b).

Storyboards



(c).

Wireframes

b.

Refinement


(1).

Expert Reviews


“Heuristic Evaluation”


(2).

Informal Evaluations


“Think Aloud



(3).

Formal Usability Studies


“Bottom
-
Line Data”

5.

Writing for Communication on the Web

Learning Objectives

1.

Simulate
a
professional Web dev
elopment team

2.

Introduce students to th
e formal process of developing Web site
s in pairs or teams

3.

Utili
ze a professional W
eb development sequence

4.

Iden
tify a
client problem/need and create a plan to address that need

5.

Work with others to plan a Web
-
based solution to solve a client’s problems

6.

Use online information resources to meet your needs or thos
e of a client for collaboration
,
research, publication, communication, and productivity

7.

Apply design and communication principals to a real
-
world problem

I
N T R O D U C T I O N T O
W
E B

D
E S I GN
U
S I N G
M
I C R OS O F T
®

E
X P R E S S I O N
®

S
T U D I O

6
-
25

NETS
-
S

Align
ment

1.

Creativity and Innovation



Students demonstrate creative thinking, construct knowledge, and develop
innovative products and processes using technology. Students:



a.

apply existing knowledge to generate new ideas, products, or processes.

b.

cr
eate original works as a means of personal or group expression.

c.

use models and simulations to explore complex systems and issues.

d.

identify trends and forecast possibilities.


2.

Communication and Collaboration



Students use digital media and en
vironments to communicate and work
collaboratively, including at a distance, to support individual learning and
contribute to the learning of others. Students:



a.

interact, collaborate, and publish with peers, experts, or others employing a
variety of d
igital environments and media.

b.

communicate information and ideas effectively to multiple audiences using a
variety of media and formats.

d.

contribute to project teams to produce original works or solve problems.


3.

Research and Information Fluency



Students apply digital tools to gather, evaluate, and use information. Students:



a.

plan strategies to guide inquiry.

b.

locate, organize, analyze, evaluate, synthesize, and ethically use information
from a variety of sources and media.

c.

evaluat
e and select information sources and digital tools based on the
appropriateness to specific tasks.

d.

process data and report results.


I
N T R O D U C T I O N T O
W
E B

D
E S I GN
U
S I N G
M
I C R OS O F T
®

E
X P R E S S I O N
®

S
T U D I O

6
-
26


4.

Critical Thinking, Problem Solving, and Decision Making



Students use critical thinking skills to plan and c
onduct research, manage projects,
solve problems, and make informed decisions using appropriate digital tools and
resources. Students:



a.

identify and define authentic problems and significant questions for
investigation.

b.

plan and manage activities
to develop a solution or complete a project.

c.

collect and analyze data to identify solutions and/or make informed decisions.

d.

use multiple processes and diverse perspectives to explore alternative solutions.


5.

Digital Citizenship



Students unde
rstand human, cultural, and societal issues related to technology and
practice legal and ethical behavior. Students:



a.

advocate and practice safe, legal, and responsible use of information and
technology.

b.

exhibit a positive attitude toward using te
chnology that supports collaboration,
learning, and productivity.


21
st

Century Skills

Learning and Innovation Skills

C
R E A T I V I T Y A N D
I
N N OV A T I ON
S
K I L L S



Demonstrating originality and inventiveness in work



Developing, implementing
,

and communicating new ide
as to others



Being open and responsive to new and diverse perspectives



Acting on creative ideas to make a tangible and useful contribution to the domain in which
the innovation occurs

C
R I T I C A L
T
HI N KI N G A N D
P
R O B L E M
-
S
OL V I N G
S
K I L L S



Exercising sound reasoning
in understanding



Making complex choices and decisions



Understanding the interconnections among systems



Identifying and asking significant questions that clarify various points of view and lead to
better solutions

I
N T R O D U C T I O N T O
W
E B

D
E S I GN
U
S I N G
M
I C R OS O F T
®

E
X P R E S S I O N
®

S
T U D I O

6
-
27



Framing, analyzing
,

and synthesizing inform
ation in order to solve problems and answer
questions

C
O MMU N I C A T I O N A N D
C
O L L A B O R A T I O N
S
K I L L S



Articulating thoughts and ideas clearly and effectively through speaking and writing



Demonstrating ability to work effectively with diverse teams



Exercising flexib
ility and willingness to be helpful in making necessary compromises to
accomplish a common goal



Assuming shared responsibility for collaborative work

Information, Media
,

and Technology Skills

I
N F O R MA T I O N
L
I T E R A C Y



Accessing information efficiently and effec
tively, evaluating information critically and
competently
,

and using information accurately and creatively for the issue or problem at
hand



Possessing a fundamental understanding of the ethical/legal issues surrounding the access
and use of information

M
E D
I A
L
I T E R A C Y



Understanding how media messages are constructed, for what purposes
,

and using which
tools, characteristics
,

and conventions



Examining how individuals interpret messages differently, how values and points of view
are included or excluded
,

and h
ow media can influence beliefs and behaviors



Possessing a fundamental understanding of the ethical/legal issues surrounding the access
and use of information

I CT

L
I T E R A C Y



Using digital technology, communication
tools,
and/or networks appropriately to acces
s,
manage, integrate, evaluate, and create information in order to function in a knowledge
economy



Using technology as a tool to research, organize, evaluate
,

and communicate information,
and the possession of a fundamental understanding of the ethical/leg
al issues surrounding
the access and use of information

Life and Career Skills



Flexibility & Adaptability



Initiative & Self
-
Direction



Social & Cross
-
Cultural Skills



Productivity & Accountability



Leadership & Responsibility