This document provides an introduction to building wireframes. It discusses what wireframes are, different levels of detail in wireframes, and how to approach the wireframing process iteratively. Key points covered include:
- A wireframe is a visual guide that represents the skeletal framework of a website. They allow for rapid, low-cost design iterations.
- Wireframes can vary in level of detail from high-level box structures to individual page elements. The appropriate level depends on communication needs.
- An iterative approach to wireframing involves testing designs with users at each step and refining solutions collaboratively over multiple iterations. Both long-term project planning and short sprint cycles can employ this iterative process.
-
5. âA website wireframe â¨
is a visual guide â¨
that represents â¨
the skeletal framework â¨
of a websiteâ
Wikipedia:
6. âWireframing is a low-cost,
rapid iterative design
technique that offers one of
the best methods for gaining
design insight earlyâ
Nielsen/Norman Group:
http://www.nngroup.com/courses/wireframing-and-prototyping/
23. Boxes usually contain a uniform kind of
content, not the individual elements.
However, itâs important to choose the right
level of breakdown to support the
discussion.
Box
30. N N N
C C
S S
Box
Box
Box
Box
Box
Box
Box
Box
This high level box view is
implicit most of the time, but
itâs incredibly useful when
applied on a number of pages
to ensure consistency and
reusability.
31. Button
Box
Lorem ipsum gaium sit
amet isciquitur elit in
ellam lacustre pulzella.
TEXT
BUTTONS
IMAGES
¡¡¡MORE...
34. Thomas Talker:
Lorem ipsum gaium sit amet isciquitur elit in
ellam lacustre pulzella.
Expand
Thomas Talker:
Lorem ipsum gaium sit amet isciquitur elit in
ellam lacustre pulzella.
Expand
Thomas Talker:
Lorem ipsum gaium sit amet isciquitur elit in
ellam lacustre pulzella.
Expand
Thomas Talker:
Lorem ipsum gaium sit amet isciquitur elit in
ellam lacustre pulzella.
Expand
Thomas Talker:
OFTEN EACH
HIGH-LEVEL
BOX CONTAINS
A REPEATING
PATTERN
35. TRY WORKING WITH PATTERNS AS
MUCH AS POSSIBLE TO SUPPORT
MEMORY AND LEARNING, MAKING
THE INTERFACE TRUSTWORTHY
46. WEEKLY ITERATION
Helps with project activities
scoping, clariďŹes expectations,
supports continuos progress
review.
WEEKLY MEETING
Sets formal progress steps to help
the client keeping the pace while
being in touch with the project
progress
47. Letâs see an example
PREPARE
The ďŹrst iteration is
about
understanding the
problem.
48. Letâs see an example
WORKSHOP
First wireframes made
collaboratively by the
stakeholders in a workshop, in
groups.
WHITEBOARD
49. Letâs see an example
TEST WITH USERS
Take the whiteboards and
formalize them in individual
proposals to be tested.
50. Letâs see an example
REVIEW ALTERNATIVES
In this review propose a few
alternatives reďŹning the
solutions from the workshop.
PAPER SKETCH
51. Letâs see an example
TEST WITH USERS
Yup, again, if itâs possible. Try a
more guerrilla approach
maybe.
52. Letâs see an example
REVIEW FIRST DRAFT
Ask explicitly to involve
developers if it didnât happen
before the review.
HIGH LEVEL
53. PROJECT PLAN 2012-11-08
29 OCT 5 NOV
6
12 NOV
14
26 NOV
30
3 DEC 10 DEC
10 14
17 DEC
21
24 DEC 31 DEC
4
7 JAN
11
STRATEGY
PREPARATION
Planning and
data gathering
STRATEGY
Planning workshops &
research
STRATEGY
Campaign and
challenges details
19 NOV
23
UX DESIGN
Creativity and planning
workshops
UX DESIGN
High-level wireframes
and interactions
DESIGN
VISUAL DESIGN
Different proposals for
brainstorming
VISUAL DESIGN
Consolidation of a
single choice
VISUAL DESIGN
Preparation of master
documents
Wireframes Visual layouts
DEVELOPMENT
Sprint 1
CONTENT
Preparation of basic
copywriting
DEVELOPMENT
Sprint 2
CONTENT
Preparation of basic
translations
DEVELOPMENT
Submission launch
DEVELOPMENT
Sprint 3
DEVELOPMENT
DEVELO
Sprint 4
Submission page
COMMUNITY
Launch support
COMMU
Launch s
Submission launch
MARKETING
Moment 1
MARKETING
Strategy development
MARKETING
Strategy development
MARKETING
Strategy development
MARKETING
Strategy development
5
Concept DeďŹnition
Campaign Strategy Channel Strategy Content Calendar
KPI DeďŹnition
Audience Validation
In this way you
can build clear,
large scale plans.
90. 5 / Basics of Keynote prototyping
6 / Basics of Keynote animation
91. â
â
Bruno Munari
To complicate is easy, to simplify is hard.
To complicate, just add,
everyone is able to complicate.
Few are able to simplify.