92
INTRODUCTION TO BUILDING WIREFRAMES Davide ‘Folletto’ Casali

Introduction to Building Wireframes (with Keynote)

Embed Size (px)

Citation preview

INTRODUCTION TO BUILDING WIREFRAMES

Davide ‘Folletto’ Casali

UX Redirector Advisor

NIGHT.EU

PART I

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 JOURNEYS

© Ivor Beddoes@awfulshot

WIREFRAMES AS STORYBOARDS

FOR INTERFACES

© Ivor Beddoes

DIFFERENT WAYS TO TELL A STORY frame by frame, drawings key frames, textual descriptions video, 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

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

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

Some examples

Header Image

Navigation

Stats Navigation

Avatar

Profile

Media

Tweet

Tweet

Tweet Filters

Invite Friends

Find Friends

Navigation

Pin Pin

Pin

Pin

Pin

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

1 / Wireframes as stories

2 / From boxes to elements

PART II

THE PROCESS

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

NAPKINS

WHITEBOARDS

HIGH LEVEL

DETAILED

HD

ASK YOURSELF

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

PAPER SKETCH

WORK IN ITERATIONS

do

observe

think

dotL OOP

This works from startups to big enterprises

Got 4 weeks?

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

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

14 JAN

18

21 JAN

25

28 JAN

1

4 FEB

STRATEGY

PREPARATIONPlanning anddata gathering

STRATEGYPlanning workshops &research

STRATEGYCampaign and challenges details

19 NOV

23

11 FEB 18 FEB 25 FEB 4 MAR 11 MAR 18 MAR 25 MAR 1 APR 8 APR 15 APR 22 APR 29 APR

UX DESIGNCreativity and planningworkshops

UX DESIGNHigh-level wireframes and interactions

DESIGN

VISUAL DESIGNDifferent proposals for brainstorming

VISUAL DESIGNConsolidation of a single choice

VISUAL DESIGNPreparation of master documents

Wireframes Visual layouts

DEVELOPMENTSprint 1

CONTENTPreparation of basic copywriting

DEVELOPMENTSprint 2

CONTENTPreparation of basic translations

DEVELOPMENTSubmission launch

DEVELOPMENTSprint 3

DEVELOPMENT

DEVELOPMENTSprint 4

DEVELOPMENTFinal QA and testing

Submission page Ready

DEVELOPMENTRelease

Internal Launch

EXECUTION

COMMUNITYLaunch support

COMMUNITYLaunch support

Submission launch Voting starts Challenges start

AWARENESS

COMMUNITYLaunch support

COMMUNITYSubmission support

COMMUNITYSubmission support

COMMUNITYSubmission support

COMMUNITYVoting support

COMMUNITYVoting support

COMMUNITYChallenge anticipation

COMMUNITYChallenge execution

COMMUNITYChallenge execution

COMMUNITYChallenge execution

COMMUNITYChallenge execution

MARKETINGMoment 1

MARKETINGMoment 2

MARKETINGMoment 3

MARKETINGMoment 5

MARKETINGMoment 4

MARKETINGMoment 6

MARKETINGMoment 7

COMMUNITYChallenge execution

Voting ends

MARKETINGStrategy development

MARKETINGStrategy development

MARKETINGStrategy development

MARKETINGStrategy development

5

Closing evaluation

Concept Definition

Campaign Strategy Channel Strategy Content Calendar

KPI Definition

Audience Validation

In this way you can build clear, large scale plans.

Got 1 week?

MONDAY UNPACK

TUESDAY SKETCH

WEDNESDAY DECIDE

THURSDAY PROTOTYPE

FRIDAY TEST

THE DESIGN SPRINT

Got 10 minutes?

6 Up Idea Generation Technique

1 2 3

4 5 6

1 ITERATION = No review

NEVER.

3 / Choose level of detail

4 / Iterative approach

PART III

KEYNOTE PROTOTYPING BASICS

Keynote

1

Setup pages

Choose the size you need, desktop or mobile.

2

Build your journey

Add all the screens of your

journey as slides

2

Build your screens

Welcome screen

Welcome toNote Taker

Add note

Add

You have no notes

Create

3

Link your screens

LinkFormat → Add Link

Cmd+K

4

Build your animations

MAGIC MOVE

Slide 1 Slide 2

If the same object appears on two pages, it transitions moving and scaling

Create new note+

|

ADDCANCEL

Menu

Home

Write

Profile

5

Test your wireframe

Play

6

Export your video

RecordPlay → Record Slideshow

5 / Basics of Keynote prototyping

6 / Basics of Keynote animation

”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

INTENSEMINIMALISM.COM