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, clarifies 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 first 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 refining 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 Definition
Campaign Strategy Channel Strategy Content Calendar
KPI Definition
Audience Validation
In this way you
can build clear,
large scale plans.