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

Wireframes for Web Design

on

  • 4,775 views

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

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

Statistics

Views

Total Views
4,775
Views on SlideShare
4,772
Embed Views
3

Actions

Likes
2
Downloads
80
Comments
2

3 Embeds 3

http://localhost:1054 1
http://zootool.com 1
http://dschool.co 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Wireframes for Web Design Wireframes for Web Design Presentation Transcript

    • Wireframes
for
Web
Design
 MMC
4341


    • 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



    • 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
 –  PowerPoint
 –  Pen
and
paper


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


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

    • 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.

    • 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://www.aptmediainc.com/About/ Apt‐Lab/Designers‐Who‐Wireframe



    • 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


    • 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


    • 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

    • 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