Scribd
Upload
20 views15 pages

Understanding Wireframes in Design

This document provides information on wireframes, including what they are, why they are used, examples of different types of wireframes, and tips for creating wireframes. It defines wireframes as blueprints that communicate structure, content, layout, and functionality before visual design. They are used to get everyone on the same page, prototype for usability tests, and are easier to change than finished designs. The document provides examples of sketch, low-fidelity and high-fidelity wireframes and emphasizes that wireframes should focus only on content and interaction, not visual design elements. It concludes with advice to start wireframing at a high level with the largest interface elements and work down to smaller details.

Uploaded by

Garima
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
20 views15 pages

Understanding Wireframes in Design

This document provides information on wireframes, including what they are, why they are used, examples of different types of wireframes, and tips for creating wireframes. It defines wireframes as blueprints that communicate structure, content, layout, and functionality before visual design. They are used to get everyone on the same page, prototype for usability tests, and are easier to change than finished designs. The document provides examples of sketch, low-fidelity and high-fidelity wireframes and emphasizes that wireframes should focus only on content and interaction, not visual design elements. It concludes with advice to start wireframing at a high level with the largest interface elements and work down to smaller details.

Uploaded by

Garima
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd

Wireframes

Communication & Multimedia


Design
Today’s agenda
 What are
wireframes?

 Why use
them?

 Examples
A lot is happening
At times the design process can
seem very complicated, a lot of
things are happening at the same
time. Many people from different
disciplines are all working together
(and often simultaneously) on the
same project.

Everyone has their own role, and to


make a truly good product, the
communication between the
different parties involved has to be
good.
Why use wireframes?
Before making the visual design, you
first make decisions about the
structure, content, layout, etc.
Wireframes are a tool to
communicate
these ideas.

“Blueprint for design”

Get everyone on the same page

Prototype for usability tests

Easier to change a wireframe,


than a
design!
What does it Contain?
 Structure
How will the pieces of this site be put
together?

 Content
What will be displayed on this site?

 Information Hierarchy
How is this information organized and
displayed?

 Functionality
How will this interface work?

 Behavior
How does it interact with the user? How
does it behave?
Types of wireframes
 Sketches
Quick / experiment
Good for feedback
Types of wireframes
 Sketches
Quick / experiment
Good for feedback
 Lo-fidelity

Block diagrams
Good for testing flows
Types of wireframes
 Sketches
Quick / experiment
Good for feedback

 Lo-fidelity
Block diagrams
Good for testing flows

 Hi-fidelity
Detailed wireframes
Including comments
Describe content & behavior
“Blueprint for final design”
Should be understood without
explanation
Good and Bad
 This is a bad wireframe!
o Forget visual design
o Avoid using color / gradients
o Adding unnecessary elements
makes the wireframe less
powerful

 Remember:
Wireframes focus only on the
content and interaction of the
interface!

 Try and add content that will


best represent content that
will be placed in the final
interface. Fake text can be
very distracting.
Looks good, right?
Example 1:
This is an example of a hi
fidelity wireframe for an
[Link] concept.

On the left site of the page is


the wireframe. The blue
circles are numbered to
refer to the comments on
the right half of the page.

 Note: The comments can


also be placed below the
wireframe, it is up to you.
Example 2:
Instead of
using
dots to
refer to
the
comment
s,
another
option is
to use
arrows
to link
the
interface
elements
to the
comment
s.
How to Start?
 How to start?
Start big! Start with the largest parts of the interface, the
frame, header, footer, etc. Then work your way through
the smaller elements of the interface.

Remember, your wireframe will be used by lots of different


people for different purposes:
o Designers
o Developers
o Project leaders
o Usability testers
o Clients
o So be as clear as you can!
Questions?

You might also like