Davide ‘Folletto’ Casali

INTRODUCTION TO BUILDING WIREFRAMES

UX Designer Advisor

NIGHT.EU

What do you do?

TODAY1 / Wireframes · how to work with them 2 / Wireframes management · how to use them effectively 3 / OmniGraffle Pro · introduction

90’ Junior/Mid

PART 1 Wireframes

@hjmediastudios

THE IDEA OF WIREFRAME COMES

FROM 3D MODELLING

“A website wireframe is a visual guide that represents the skeletal framework of a website”

Wikipedia:

“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/

THERE ARE DIFFERENT QUALITIES OF WIREFRAMES

Even if wireframes display a single interface/page they are less like photos and more like movie stills

WIREFRAMES AS STORIES

© Ivor Beddoes@awfulshot

WIREFRAMES AS STORYBOARDS

FOR INTERFACES

© Ivor Beddoes

DIFFERENT WAYS TO TELL A STORY frame by frame, drawings key frames, textual descriptions key frames, spoken narrative

Even if the storyboard is not visible it’s still the foundation of wireframes

Wireframes are a static representation of a dynamic non-linear flow of activity

The wireframe represents also the very first moment when the project team sees

everything coming together.

The minimal visual building block of a wireframe is the box.

Box

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

Content

Box

Box

Box

Navigation

Logo

Let’s wireframe Twitter. Boxes only.

User Page Navigation

Global Navigation

Multimedia Content of the User

Who to follow suggestions

Trends

User profile

User Stats Messages

Tweets

N N N

C C

S S

Box

Box

BoxBox

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.

Button

Box

Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella.

TEXT

BUTTONS

IMAGES

···MORE...

Box

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:!Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella.

Expand

Thomas Talker:!Lorem ipsum gaium sit amet isciquitur elit in

OFTEN EACH HIGH-LEVEL

BOX CONTAINS A REPEATING

PATTERN

TRY WORKING WITH PATTERNS AS MUCH AS POSSIBLE TO SUPPORT

MEMORY AND LEARNING, MAKING THE INTERFACE TRUSTWORTHY

Let’s build a journey. Imagine Twitter’s registration process.

Home Reg. Form Confirmation

LOGIN PROCESS The main steps of the journey

Home Reg. Form Confirmation Your Page

LOGIN PROCESS How do we guide the user to the value?

?

Home Reg. Form Confirmation

Email

Your Page

LOGIN PROCESS An e-mail based approach

Home Reg. Form Confirmation

Email

Your Page

LOGIN PROCESS A more direct way to engage the user

Home Reg. Form Confirmation

Email

Your Page

LOGIN PROCESS Review journeys for the edge cases: errors, problems, etc

!

!

LOGIN PROCESS The story is even bigger in reality

Home Reg. Form Confirmation

Email

Your Page

Tweet

Third party Third party

1 / Wireframes as stories

2 / From boxes to elements

PART 2 Wireframes management

NAPKINS

WHITEBOARDS

HIGH LEVEL

DETAILED

HDAGILE APPROACH TO WIREFRAMING

Ask yourself: What’s the level of detail I need to communicate effectively?

PAPER SKETCH

Wireframes are made to be thrown away. They are steps in the process of design.

Only the final one stays... until it gets developed.

In other words: they can be delivered as documentation but they are not for most of the process

THE INTERMEDIATE STEPS ARE VALUABLE: THEY SUPPORT COMMUNICATION AND CONSENSUS

AT EACH STEP YOU CAN · test the journey · discuss with management · discuss with technical team · share with other parties

WORK IN ITERATIONS

do

observe

think

dotL OOP

This works from startups to big enterprises

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

Let’s see an example

PREPARE The first iteration is

about understanding the problem.

Let’s see an example

WORKSHOP First wireframes made collaboratively by the stakeholders in a workshop, in groups.

WHITEBOARD

Let’s see an example

TEST WITH USERS Take the whiteboards and

formalize them in individual proposals to be tested.

Let’s see an example

REVIEW ALTERNATIVES In this review propose a few alternatives refining the solutions from the workshop.

PAPER SKETCH

Let’s see an example

TEST WITH USERS Yup, again, if it’s possible. Try a more guerrilla approach maybe.

Let’s see an example

REVIEW FIRST DRAFT Ask explicitly to involve developers if it didn’t happen before the review.

HIGH LEVEL

1 ITERATION = No review*

* or review in a different next step (visual design? development?)

2 ITERATIONS = Draft, then feedback, then refine

3 / Wireframes as steps

4 / Iterative approach

PART 3 OmniGraffle Pro

OmniGraffle Professional

Why Pro?

Wireframes

IA

Diagrams

Interactive PDFs

From sketches to HD prototypes

HTML export

Build any PDF

Presentations

Pixel perfect

OmniGraffle is a powerhouse

No built-in collaboration

No motion design

...even if it lacks some pieces

· You can send them via email · You can use them as prototypes · You can use them for testing · They show flows, not stills

OMNIGRAFFLE CAN EXPORT INTERACTIVE PDFS THAT CAN BE USED AS PROTOTYPES

FUNDAMENTALS

select shape lines text freeform

Let’s try!

Let’s sketch Twitter’s wireframe

User Page Navigation

Global Navigation

Multimedia Content of the User

Who to follow suggestions

User profile

User Stats Messages

Tweets

Let’s sketch a single tweet wireframe

Thomas Talker:!Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella.

Expand

Let’s sketch Google’s homepage

Let’s sketch Twitter’s homepage

Let’s sketch Dropbox’s homepage

Let’s sketch Wordpress.com homepage

SIGN UP

VIDEO

LOGIN

MORE INFO

Lots of actions...

PROPERTIES: ACTION1. Properties panel 2. Action 3. Jump elsewhere 4. Switch to a Specific Canvas 5. Select canvas

INTERACTIVE PDF1. File → Export… 2. PDF vector image 3. Entire Document

TIPS

Shared LayersGrouping Smart Objects

Grouping

Shared Layers

Smart Objects

SET THE PAGE SIZE IN PX BY SPECIFYING THE “PX” (OR “PT”) UNIT

BY HAND

IT’S A GOOD IDEA TO KEEP THE ZOOM AT 100%, TO DESIGN AT THE RIGHT

SCALE. KEEP ALSO THE HEIGHT SHORT TO FEEL THE SCROLL POSITION.

REVIEW THE KEYBOARD SHORTCUTS FROM PREFERENCES TO ADAPT THEM

TO YOUR STYLE. REVIEW ALSO “KEEP TOOL ACTIVE”.

5 / Basics of OmniGraffle Pro

6 / Grouping, masters, smart objs

“

”Bruno Munari

To complicate is easy, to simplify is hard. To complicate, just add,

everyone is able to complicate. Few are able to simplify.

Thanks.

@Folletto