Introduction to Building Wireframes (with Keynote)

92
INTRODUCTION TO BUILDING WIREFRAMES Davide ‘Folletto’ Casali

Transcript of Introduction to Building Wireframes (with Keynote)

Page 1: Introduction to Building Wireframes (with Keynote)

INTRODUCTION TO BUILDING WIREFRAMES

Davide ‘Folletto’ Casali

Page 2: Introduction to Building Wireframes (with Keynote)

UX Redirector Advisor

NIGHT.EU

Page 3: Introduction to Building Wireframes (with Keynote)

PART I

WIREFRAMES

Page 4: Introduction to Building Wireframes (with Keynote)

@hjmediastudios

THE IDEA OF WIREFRAME COMES

FROM 3D MODELLING

Page 5: Introduction to Building Wireframes (with Keynote)

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

Wikipedia:

Page 6: Introduction to Building Wireframes (with Keynote)

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

Page 7: Introduction to Building Wireframes (with Keynote)

THERE ARE DIFFERENT QUALITIES OF WIREFRAMES

Page 8: Introduction to Building Wireframes (with Keynote)

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

Page 9: Introduction to Building Wireframes (with Keynote)

WIREFRAMES AS JOURNEYS

© Ivor Beddoes@awfulshot

Page 10: Introduction to Building Wireframes (with Keynote)

WIREFRAMES AS STORYBOARDS

FOR INTERFACES

© Ivor Beddoes

Page 11: Introduction to Building Wireframes (with Keynote)

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

Page 12: Introduction to Building Wireframes (with Keynote)

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

Page 13: Introduction to Building Wireframes (with Keynote)

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

Page 14: Introduction to Building Wireframes (with Keynote)

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

Page 15: Introduction to Building Wireframes (with Keynote)

Home Reg. Form Confirmation

LOGIN PROCESS The main steps of the journey

Page 16: Introduction to Building Wireframes (with Keynote)

Home Reg. Form Confirmation Your Page

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

?

Page 17: Introduction to Building Wireframes (with Keynote)

Home Reg. Form Confirmation

Email

Your Page

LOGIN PROCESS An e-mail based approach

Page 18: Introduction to Building Wireframes (with Keynote)

Home Reg. Form Confirmation

Email

Your Page

LOGIN PROCESS A more direct way to engage the user

Page 19: Introduction to Building Wireframes (with Keynote)

Home Reg. Form Confirmation

Email

Your Page

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

!

!

Page 20: Introduction to Building Wireframes (with Keynote)

LOGIN PROCESS The story is even bigger in reality

Home Reg. Form Confirmation

Email

Your Page

Tweet

Third party Third party

Page 21: Introduction to Building Wireframes (with Keynote)

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

sees everything coming together.

Page 22: Introduction to Building Wireframes (with Keynote)

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

Box

Page 23: Introduction to Building Wireframes (with Keynote)

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

Page 24: Introduction to Building Wireframes (with Keynote)

Content

Box

Box

Box

Navigation

Logo

Page 25: Introduction to Building Wireframes (with Keynote)

Some examples

Page 26: Introduction to Building Wireframes (with Keynote)
Page 27: Introduction to Building Wireframes (with Keynote)

Header Image

Navigation

Stats Navigation

Avatar

Profile

Media

Tweet

Tweet

Tweet Filters

Page 28: Introduction to Building Wireframes (with Keynote)
Page 29: Introduction to Building Wireframes (with Keynote)

Invite Friends

Find Friends

Navigation

Pin Pin

Pin

Pin

Pin

Page 30: Introduction to Building Wireframes (with Keynote)

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.

Page 31: Introduction to Building Wireframes (with Keynote)

Button

Box

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

TEXT

BUTTONS

IMAGES

···MORE...

Page 32: Introduction to Building Wireframes (with Keynote)

Box

Page 33: Introduction to Building Wireframes (with Keynote)

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

Expand

Page 34: Introduction to Building Wireframes (with Keynote)

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

Page 35: Introduction to Building Wireframes (with Keynote)

TRY WORKING WITH PATTERNS AS MUCH AS POSSIBLE TO SUPPORT

MEMORY AND LEARNING, MAKING THE INTERFACE TRUSTWORTHY

Page 36: Introduction to Building Wireframes (with Keynote)

1 / Wireframes as stories

2 / From boxes to elements

Page 37: Introduction to Building Wireframes (with Keynote)

PART II

THE PROCESS

Page 38: Introduction to Building Wireframes (with Keynote)

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

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

Page 39: Introduction to Building Wireframes (with Keynote)

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

Page 40: Introduction to Building Wireframes (with Keynote)

THE INTERMEDIATE STEPS ARE VALUABLE: THEY SUPPORT COMMUNICATION AND CONSENSUS

Page 41: Introduction to Building Wireframes (with Keynote)

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

Page 42: Introduction to Building Wireframes (with Keynote)

NAPKINS

WHITEBOARDS

HIGH LEVEL

DETAILED

HD

ASK YOURSELF

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

PAPER SKETCH

Page 43: Introduction to Building Wireframes (with Keynote)

WORK IN ITERATIONS

do

observe

think

dotL OOP

Page 44: Introduction to Building Wireframes (with Keynote)

This works from startups to big enterprises

Page 45: Introduction to Building Wireframes (with Keynote)

Got 4 weeks?

Page 46: Introduction to Building Wireframes (with Keynote)

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

Page 47: Introduction to Building Wireframes (with Keynote)

Let’s see an example

PREPARE The first iteration is

about understanding the

problem.

Page 48: Introduction to Building Wireframes (with Keynote)

Let’s see an example

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

WHITEBOARD

Page 49: Introduction to Building Wireframes (with Keynote)

Let’s see an example

TEST WITH USERS Take the whiteboards and

formalize them in individual proposals to be tested.

Page 50: Introduction to Building Wireframes (with Keynote)

Let’s see an example

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

PAPER SKETCH

Page 51: Introduction to Building Wireframes (with Keynote)

Let’s see an example

TEST WITH USERS Yup, again, if it’s possible. Try a

more guerrilla approach maybe.

Page 52: Introduction to Building Wireframes (with Keynote)

Let’s see an example

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

HIGH LEVEL

Page 53: Introduction to Building Wireframes (with Keynote)

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.

Page 54: Introduction to Building Wireframes (with Keynote)

Got 1 week?

Page 55: Introduction to Building Wireframes (with Keynote)

MONDAY UNPACK

TUESDAY SKETCH

WEDNESDAY DECIDE

THURSDAY PROTOTYPE

FRIDAY TEST

THE DESIGN SPRINT

Page 56: Introduction to Building Wireframes (with Keynote)

Got 10 minutes?

Page 57: Introduction to Building Wireframes (with Keynote)

6 Up Idea Generation Technique

1 2 3

4 5 6

Page 58: Introduction to Building Wireframes (with Keynote)

1 ITERATION = No review

NEVER.

Page 59: Introduction to Building Wireframes (with Keynote)
Page 60: Introduction to Building Wireframes (with Keynote)

3 / Choose level of detail

4 / Iterative approach

Page 61: Introduction to Building Wireframes (with Keynote)

PART III

KEYNOTE PROTOTYPING BASICS

Page 62: Introduction to Building Wireframes (with Keynote)

Keynote

Page 63: Introduction to Building Wireframes (with Keynote)

1

Setup pages

Page 64: Introduction to Building Wireframes (with Keynote)
Page 65: Introduction to Building Wireframes (with Keynote)

Choose the size you need, desktop or mobile.

Page 66: Introduction to Building Wireframes (with Keynote)

2

Build your journey

Page 67: Introduction to Building Wireframes (with Keynote)

Add all the screens of your

journey as slides

Page 68: Introduction to Building Wireframes (with Keynote)

2

Build your screens

Page 69: Introduction to Building Wireframes (with Keynote)
Page 70: Introduction to Building Wireframes (with Keynote)

Welcome screen

Page 71: Introduction to Building Wireframes (with Keynote)

Welcome toNote Taker

Page 72: Introduction to Building Wireframes (with Keynote)

Add note

Page 73: Introduction to Building Wireframes (with Keynote)

Add

You have no notes

Create

Page 74: Introduction to Building Wireframes (with Keynote)

3

Link your screens

Page 75: Introduction to Building Wireframes (with Keynote)

LinkFormat → Add Link

Cmd+K

Page 76: Introduction to Building Wireframes (with Keynote)
Page 77: Introduction to Building Wireframes (with Keynote)

4

Build your animations

Page 78: Introduction to Building Wireframes (with Keynote)
Page 79: Introduction to Building Wireframes (with Keynote)

MAGIC MOVE

Slide 1 Slide 2

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

Page 80: Introduction to Building Wireframes (with Keynote)

Create new note+

Page 81: Introduction to Building Wireframes (with Keynote)

|

ADDCANCEL

Page 82: Introduction to Building Wireframes (with Keynote)
Page 83: Introduction to Building Wireframes (with Keynote)
Page 84: Introduction to Building Wireframes (with Keynote)

Menu

Home

Write

Profile

Page 85: Introduction to Building Wireframes (with Keynote)

5

Test your wireframe

Page 86: Introduction to Building Wireframes (with Keynote)

Play

Page 87: Introduction to Building Wireframes (with Keynote)

6

Export your video

Page 88: Introduction to Building Wireframes (with Keynote)

RecordPlay → Record Slideshow

Page 89: Introduction to Building Wireframes (with Keynote)
Page 90: Introduction to Building Wireframes (with Keynote)

5 / Basics of Keynote prototyping

6 / Basics of Keynote animation

Page 91: Introduction to Building Wireframes (with Keynote)

”Bruno Munari

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

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

Page 92: Introduction to Building Wireframes (with Keynote)

Thanks.

@Folletto

INTENSEMINIMALISM.COM