0
Wireframes
for
Web
Design
         MMC
4341


What
are
wireframes?
•  Wireframes
are
similar
to
building
blueprints
•  They
define
the
content
and
func)onality
of
   eac...
Site
ID
                     Site
navigaOon
           Footer

Placement
of
secondary
navigaOon

How
are
wireframes
made?
•  Different
soUware
programs
can
be
used
  –  Visio
  –  MS
Word
(using
tables)
  –  Excel
  –  P...
Notes
about
the
                    page
content
are
                    wriJen
beside
the
                    wireframe
A...
Later,
the
designers
can
decide
whether
they
want
the
list
at
leU
to
appear
like
a
table,
or
a
grid,
and
what
colors
to
us...
The
whole
column
here
on
the
right
is
for
notes
and
details
about
the
Web
page,
which
takes
up
the
whole
space
to
the
leU.

An
example
from
a
different
Web
site
SOURCE

hJp://www.gliffy.com/examples/wireframes/



A
hand‐drawn
wireframe
hJp://www.aptmediainc.com/About/Apt‐Lab/Designers‐Who‐Wireframe



<
   The
page
would
look
like
this

     (a
designer
might
make
a
comp
of
     the
page
in
Photoshop)

               hJp:...
What
is
informaOon
architecture?
•  Like
architecture
for
a
building,
it’s
a
plan
for:

   –  Where
everything
should
go
 ...
A
few
other
notes
•  Wireframes
can
be
“high
fidelity”
(lots
of
   precise
details)
or
“low
fidelity”
(rough
and
   more
gen...
What
is
a
storyboard?
•  Shows
a
sequence
or
a
process
•  Used
extensively
in
making
Hollywood
movies,
   animaOon
and
vid...
Storyboard
from
a
BriOsh
TV
series

Storyboard
from
an
animated
short

Storyboard
planner

Storyboard
planner

Storyboard
example
for
Flash
animaOon

Wireframes
for
Web
Design
           MMC
4341    

 PresentaOon
by
Mindy
McAdams
       University
of
Florida

Wireframes for Web Design
Upcoming SlideShare
Loading in...5
×

Wireframes for Web Design

4,760

Published on

Wireframes are not well understood by Web design students in various disciplines. With illustrations and examples, this presentation differentiates between storyboards and wireframes.

Published in: Education, Business, Technology
2 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,760
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
110
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Wireframes for Web Design"

  1. 1. Wireframes
for
Web
Design
 MMC
4341


  2. 2. What
are
wireframes?
•  Wireframes
are
similar
to
building
blueprints
•  They
define
the
content
and
func)onality
of
 each
page
on
a
Web
site
•  Wireframes
show
structure
•  Wireframes
may/may
not
show
content
detail
•  They
do
not
show
design:
colors,
typography,
 photos
or
graphics
(but
they
do
show
 placement
of
images)
 SOURCE:
hJp://www.gdoss.com/web_info/web‐site‐wireframe.php



  3. 3. Site
ID
 Site
navigaOon
 Footer

  4. 4. Placement
of
secondary
navigaOon

  5. 5. How
are
wireframes
made?
•  Different
soUware
programs
can
be
used
 –  Visio
 –  MS
Word
(using
tables)
 –  Excel
 –  PowerPoint
 –  Pen
and
paper


•  The
point
is
to
make
it
design‐neutral
(while
 showing
content
and
funcOonality)
•  Never
make
wireframes
in
Photoshop


  6. 6. Notes
about
the
 page
content
are
 wriJen
beside
the
 wireframe
An
example
from
a
different
Web
site

  7. 7. Later,
the
designers
can
decide
whether
they
want
the
list
at
leU
to
appear
like
a
table,
or
a
grid,
and
what
colors
to
use.

  8. 8. The
whole
column
here
on
the
right
is
for
notes
and
details
about
the
Web
page,
which
takes
up
the
whole
space
to
the
leU.

  9. 9. An
example
from
a
different
Web
site
SOURCE

hJp://www.gliffy.com/examples/wireframes/



  10. 10. A
hand‐drawn
wireframe
hJp://www.aptmediainc.com/About/Apt‐Lab/Designers‐Who‐Wireframe



  11. 11. <
 The
page
would
look
like
this

 (a
designer
might
make
a
comp
of
 the
page
in
Photoshop)

 hJp://www.aptmediainc.com/About/ Apt‐Lab/Designers‐Who‐Wireframe



  12. 12. What
is
informaOon
architecture?
•  Like
architecture
for
a
building,
it’s
a
plan
for:

 –  Where
everything
should
go
 –  How
big
or
small
each
part
needs
to
be
 –  How
all
the
parts
connect
to
one
another
•  Visual
design
is
a
different
skill,
but
in
small
 shops/companies,
one
person
might
handle
 the
whole
process*

•  Wireframes
are
a
part
of
the
IA
process

 *
SOURCE:
hJp://www.aptmediainc.com/About/Apt‐Lab/Designers‐Who‐Wireframe


  13. 13. A
few
other
notes
•  Wireframes
can
be
“high
fidelity”
(lots
of
 precise
details)
or
“low
fidelity”
(rough
and
 more
generic;
less
specific;
less
detail)
•  Wireframes
are
not
the
same
as
prototypes
 (which
can
be
clicked,
etc.)
•  Wireframes
can
help
you
work
out
ideas
with
 the
client
(and
save
Ome)

•  Wireframes
can
help
you
plan
your
site


  14. 14. What
is
a
storyboard?
•  Shows
a
sequence
or
a
process
•  Used
extensively
in
making
Hollywood
movies,
 animaOon
and
video
games
•  SomeOmes
the
word
“storyboards”
is
used
 when
“wireframes”
is
what
is
meant
•  Don’t
get
hung
up
on
the
terminology,
but
 recognize
that
some
people
would
use
one
 term
and
not
the
other

  15. 15. Storyboard
from
a
BriOsh
TV
series

  16. 16. Storyboard
from
an
animated
short

  17. 17. Storyboard
planner

  18. 18. Storyboard
planner

  19. 19. Storyboard
example
for
Flash
animaOon

  20. 20. Wireframes
for
Web
Design
 MMC
4341 

 PresentaOon
by
Mindy
McAdams
 University
of
Florida

  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×