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

1. Wireframes for Web Design
MMC 4341

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

4. Site ID
Site navigaOon
Footer

5. Placement of secondary navigaOon

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

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

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

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

10. An example from a different Web site
SOURCE hJp://www.gliffy.com/examples/wireframes/

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

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

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

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

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

16. Storyboard from a BriOsh TV series

17. Storyboard from an animated short

18. Storyboard planner

19. Storyboard planner

20. Storyboard example for Flash animaOon

21. Wireframes for Web Design
MMC 4341
PresentaOon by Mindy McAdams
University of Florida