PROGRESSIVE DESIGN CHALLENGE - Aventri...Connect to Facebook Register f x App name Connect to lrem...

PROGRESSIVE DESIGN CHALLENGE

©2011 DAVID SHERwIN | @CHANGEORDER | [email protected] | CHANGEORDERbLOG.COm

THINkING OUTSIDE THE PAGE

You’ve been hired by a leading publisher of magazines to help them create

a new kind of magazine for the digital age, blending text, video, audio, photography,

and data visualization.

based on your passion and skill as a designer, the publisher has given you

free reign over the editorial direction and design for this digital magazine.

However, there are two important constraints for what you can create:

1. Your client wants this magazine to be fully accessible and usable via browser on PCs,

tablets, and touch-enabled mobile phones (iOS/Android). No native applications!

2. Since this is a forward-thinking magazine, your client wants you to consider ways of

presenting content that are dynamic. “Tap, scroll & read, repeat” isn’t good enough.

Over the course of this conference, use the following worksheets, as well as the best

practices you’ll receive from the speakers, to design and demonstrate your magazine

concept. You won’t need your computer to do this—it’ll all be through sketching!

On Friday, you will have a chance to test your magazine concept with other attendees,

in the form of a low-fidelity paper prototype.

PROGRESSIVE DESIGN CHALLENGE OVERVIEw

DAY 1: CONCEPT & PLAN YOUR mAGAzINE IDEA



PART 2: wIREFRAmING ACROSS mULTIPLE SCREENS

DAY 3: TESTING YOUR DESIGN IDEAS

9:00 Am–9:30 Am

__ Define the vision for your magazine with the Triangle of Pixel Love

9:30 Am–10:00 Am

__ Consider what kinds of content your magazine needs

10:15 Am–11:00 Am

__ Create a thesis statement, title tag, URL, and H1 for your magazine

11:00 Am–12:15 Pm

__ Sketch a concept map for your magazine’s information architecture

12:15 Pm–5:30 Pm

__ Create concept sketches for your magazine, as zoned wireframes for:

__ mobile device

__ tablet

__ PC browser

8:00–8:50 Am

__ Share your sketches with small groups & speakers

9:00 Am–9:45 Am

__ Sketch how your magazine’s home screen, with dynamic content, adapts to these form factors:

__ mobile device

__ tablet

__ PC browser

9:45 Am–12:15 Pm

__ Describe the audience for your magazine as personas, and what they want to do when they visit it

12:15 Pm–4:45 Pm

__ Select a persona and sketch a flow of how s/he would find content on:

__ mobile device

__ tablet

__ PC browser

8:00–8:50 Am

__ Share your flows with small groups & speakers

9:00 Am–11:00 Am

__ Take your mobile flow and draw a final design to test

11:00 Am-12:00 Pm

__ Have the person sitting next to you walk through the flow you’ve created—as the persona you’d identified!

PROGRESSIVE DESIGN CHALLENGE DAY 1



9:00 Am–9:30 Am


9:30 Am–10:00 Am


10:15 Am–11:00 Am


11:00 Am–12:15 Pm


12:15 Pm–5:30 Pm


__ mobile device

__ tablet

__ PC browser

PROGRESSIVE DESIGN CHALLENGE DAY 1 / 9:00 Am–9:30 Am

DEFINE YOUR VISION FOR YOUR mAGAzINE

Define the vision for your magazine with the Triangle of Pixel Love

01 BRAND

Name of your magazine?

what do people say about you?

02 YOUR GOAL

what are you trying to achieve

when people visit the magazine?

03 YOUR USER

who will visit this magazine?

what will they need from it?


START PLANNING YOUR mAGAzINE CONTENT

what kinds of content will your magazine need? Start dreaming it up!

Type of Content: _____________________________________ brief Description: ____________________________________

___________________________________________________

___________________________________________________

How Often Does It Appear? (i.e. daily, weekly, monthly, etc.)

___________________________________________________

Text Photo Video Audio multimedia Docs Data Viz

Type of Content: _____________________________________

brief Description: ____________________________________

___________________________________________________

___________________________________________________


___________________________________________________


Type of Content: _____________________________________


___________________________________________________

___________________________________________________


___________________________________________________


Type of Content: _____________________________________


___________________________________________________

___________________________________________________


___________________________________________________



OPTImIzE YOUR mAGAzINE’S CONTENT FOR SEARCH ENGINES

Think about your magazine’s Search Engine Optimization (SEO) in relationship to your content, users, and editorial direction.

YOUR mAGAzINE’S THESIS STATEmENT:

YOUR mAGAzINE’S TITLE TAG:

YOUR mAGAzINE’S URL:

YOUR mAGAzINE’S H1 ON THE HOmE SCREEN:

___________________________________________________________________________________________

___________________________________________________________________________________________

___________________________________________________________________________________________

___________________________________________________________________________________________

___________________________________________________________________________________________

___________________________________________________________________________________________

___________________________________________________________________________________________

___________________________________________________________________________________________

bONUS QUESTIONS TO CONSIDER:

what platforms (newsletters,

blogs, webinars, etc) will

you use to publish magazine

content on the site?

How much content will be

added to the site per platform?

what calls to action will you

have on the site, both for

people who may be interested

in subscribing to the magazine

today and people who might

need a little persuading over

the next 6–12 months before

committing to purchasing a

subscription?

who will be in charge of

writing, editing, and scheduling

the website content?

PROGRESSIVE DESIGN CHALLENGE DAY 1 / 11:00 Am–12:15 Pm

STRUCTURE YOUR mAGAzINE’S INFORmATION ARCHITECTURE

Create a concept map that describes the various content areas and functionality that would be in your magazine.

HOmE

Larger circles mean that content may be mORE important to your users.

Highlight what content may be desired on mobile or tablet devices.

PROGRESSIVE DESIGN CHALLENGE DAY 1 / 12:15 Pm–5:30 Pm

START SkETCHING INFORmATION ARCHITECTURE IDEAS

Create concept sketches for your magazine as zoned wireframes. This will let you establish where on the screen —and off the screen—navigation, search, and content elements may appear.

Start small and at lower fidelity before starting to add in more detail. Try this for multiple devices: mobile, tablet, and PC browser. Start with mobile first!

iPhone 4 template by Giorgio Venturi for Illustrator / CC Attribution / http://www.usercentred.net/2010/06/28/illustrator-template-for-iphone-design/

Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

Connect to Facebook

Register

xf

App name

Connect to lrem ipsum with Facebook to interact with lorem ipsum sit amet etiam alia inter eos.

Email:

Password:

Bring your Facebook friends and info

Keep me signed in

Post stories to your wall

By proceeding, you are agreeinging to Facebook Termsn and Conditions lorem ipsum sit amet

ConnectCancel

Label 1 Label 2 Label 3 Label 4 More

List views

List elementSecond line of textList elementSecond line of textList elementSecond line of textList elementSecond line of textList elementSecond line of textList element2 for 1 admissionSecond line of text

List elementSecond line of text

2 November

Recent deals

Sub-heading


Sub-heading

Title barBack Share

Contact lists Web views Keyboard

Created by Giorgio Venturi26/06/2010www.usercentred.net

TitleBack

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

f

f

f

t

t

f

t

f

t

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#

Done


Table views

Title

Lorem ipsum OFF

Edit card details

Back

****-****-****-4039

6/12

***

Lorem ipsum sit amet12345Lorem ipsum

Visa

Expiry date

CVV

Billingaddress

Credit card details

Notifications

<Notification description> lorem ipsamet etiam alter alia inter nos assu...

<Notications title>

View detailsDismiss


Profile pages

Title

Location Select

Birthday Select

Table heading

Facebook

Twitter

f

t

Off

Off

Done

Lorem ipsum Public

Back


Title bar

Map views

Wedding Cake special - limited ...PaulWedding Cake special - limited ...

2 November

31 October

Tootip titleTooltip description

Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

Connect to Facebook

Register

xf

App name


Email:

Password:


Keep me signed in



ConnectCancel


List views



2 November

Recent deals

Sub-heading


Sub-heading

Title barBack Share



TitleBack

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

f

f

f

t

t

f

t

f

t

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#

Done


Table views

Title

Lorem ipsum OFF

Edit card details

Back

****-****-****-4039

6/12

***


Visa

Expiry date

CVV

Billingaddress

Credit card details

Notifications


<Notications title>

View detailsDismiss


Profile pages

Title

Location Select

Birthday Select

Table heading

Facebook

Twitter

f

t

Off

Off

Done

Lorem ipsum Public

Back


Title bar

Map views


2 November

31 October


Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

Connect to Facebook

Register

xf

App name


Email:

Password:


Keep me signed in



ConnectCancel


List views



2 November

Recent deals

Sub-heading


Sub-heading

Title barBack Share



TitleBack

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

f

f

f

t

t

f

t

f

t

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#

Done


Table views

Title

Lorem ipsum OFF

Edit card details

Back

****-****-****-4039

6/12

***


Visa

Expiry date

CVV

Billingaddress

Credit card details

Notifications


<Notications title>

View detailsDismiss


Profile pages

Title

Location Select

Birthday Select

Table heading

Facebook

Twitter

f

t

Off

Off

Done

Lorem ipsum Public

Back


Title bar

Map views


2 November

31 October


Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

Connect to Facebook

Register

xf

App name


Email:

Password:


Keep me signed in



ConnectCancel


List views



2 November

Recent deals

Sub-heading


Sub-heading

Title barBack Share



TitleBack

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

f

f

f

t

t

f

t

f

t

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#

Done


Table views

Title

Lorem ipsum OFF

Edit card details

Back

****-****-****-4039

6/12

***


Visa

Expiry date

CVV

Billingaddress

Credit card details

Notifications


<Notications title>

View detailsDismiss


Profile pages

Title

Location Select

Birthday Select

Table heading

Facebook

Twitter

f

t

Off

Off

Done

Lorem ipsum Public

Back


Title bar

Map views


2 November

31 October


Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

Connect to Facebook

Register

xf

App name


Email:

Password:


Keep me signed in



ConnectCancel


List views



2 November

Recent deals

Sub-heading


Sub-heading

Title barBack Share



TitleBack

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

f

f

f

t

t

f

t

f

t

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#

Done


Table views

Title

Lorem ipsum OFF

Edit card details

Back

****-****-****-4039

6/12

***


Visa

Expiry date

CVV

Billingaddress

Credit card details

Notifications


<Notications title>

View detailsDismiss


Profile pages

Title

Location Select

Birthday Select

Table heading

Facebook

Twitter

f

t

Off

Off

Done

Lorem ipsum Public

Back


Title bar

Map views


2 November

31 October


Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

Connect to Facebook

Register

xf

App name


Email:

Password:


Keep me signed in



ConnectCancel


List views



2 November

Recent deals

Sub-heading


Sub-heading

Title barBack Share



TitleBack

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

f

f

f

t

t

f

t

f

t

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#

Done


Table views

Title

Lorem ipsum OFF

Edit card details

Back

****-****-****-4039

6/12

***


Visa

Expiry date

CVV

Billingaddress

Credit card details

Notifications


<Notications title>

View detailsDismiss


Profile pages

Title

Location Select

Birthday Select

Table heading

Facebook

Twitter

f

t

Off

Off

Done

Lorem ipsum Public

Back


Title bar

Map views


2 November

31 October


QW

ER

TY

UI

OP

AS

DF

GH

JK

L

ZX

CV

BN

M

spac

e.?

123

retu

rn

Con

nect

to F

aceb

ook

Reg

iste

r

xf

App

nam

e

Con

nect

to lr

em ip

sum

with

Fac

eboo

k to

in

tera

ct w

ith lo

rem

ipsu

m s

it am

et e

tiam

alia

in

ter e

os.

Emai

l:

Pass

wor

d:

Brin

g yo

ur F

aceb

ook

frien

ds a

nd in

fo

Keep

me

sign

ed in

Post

sto

ries

to y

our

wal

l

By p

roce

edin

g, y

ou a

re a

gree

ingi

ng to

Fac

eboo

k Te

rmsn

and

Con

ditio

ns lo

rem

ipsu

m s

it am

et

Con

nect

Can

cel

Lab

el 1

Lab

el 2

Lab

el 3

Lab

el 4

Mor

e

List

vie

ws

List

ele

men

tSe

cond

line

of t

ext

List

ele

men

tSe

cond

line

of t

ext

List

ele

men

tSe

cond

line

of t

ext

List

ele

men

tSe

cond

line

of t

ext

List

ele

men

tSe

cond

line

of t

ext

List

ele

men

t2

for 1

adm

issi

onSe

cond

line

of t

ext

List

ele

men

tSe

cond

line

of t

ext

2 N

ovem

ber

Rece

nt d

eals

Sub-

head

ing

List

ele

men

tSe

cond

line

of t

ext

Sub-

head

ing

Tit

le b

arB

ack

Shar

e

Co

ntac

t lis

tsW

eb v

iew

sK

eyb

oar

d

Cre

ated

by

Gio

rgio

Ven

turi

26/0

6/20

10w

ww

.use

rcen

tred

.net

Tit

leB

ack

Lore

m ip

sum

Lore

m ip

sum

Lore

m ip

sum

Lore

m ip

sum

Lore

m ip

sum

Lore

m ip

sum

Lore

m ip

sum

Lore

m ip

sum

Lore

m ip

sum

f f ft t ft ft

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z #

Don

e

Lab

el 1

Lab

el 2

Lab

el 3

Lab

el 4

Mor

e

Tab

le v

iew

s

Tit

le

Lore

m ip

sum

OFF

Edit

card

det

ails

Bac

k

****

-***

*-**

**-4

039

6/12

***

Lore

m ip

sum

sit

amet

1234

5Lo

rem

ipsu

m

Visa

Expi

ry d

ate

CVV

Bill

ing

addr

ess

Cre

dit c

ard

deta

ils

No

tific

atio

ns

<N

otifi

catio

n d

escr

iptio

n> lo

rem

ips

amet

etia

m a

lter

alia

inte

r no

s as

su...

<N

oti

cati

ons

tit

le> View

det

ails

Dis

mis

s

Lab

el 1

Lab

el 2

Lab

el 3

Lab

el 4

Mor

e

Pro

file

pag

es

Tit

le

Loca

tio

nS

elec

t

Bir

thd

ayS

elec

t

Tab

le h

ead

ing

Face

book

Twitt

er

f t

Off

OffD

one

Lore

m ip

sum

Publ

ic

Bac

k

Lab

el 1

Lab

el 2

Lab

el 3

Lab

el 4

Mor

e

Tit

le b

ar

Map

vie

ws

Wed

ding

Cak

e sp

ecia

l - li

mite

d ...

Paul

Wed

ding

Cak

e sp

ecia

l - li

mite

d ...

2 N

ovem

ber

31 O

ctob

er

Toot

ip ti

tleTo

oltip

des

crip

tion

QW

ER

TY

UI

OP

AS

DF

GH

JK

L

ZX

CV

BN

M

spac

e.?

123

retu

rn

Con

nect

to F

aceb

ook

Reg

iste

r

xf

App

nam

e

Con

nect

to lr

em ip

sum

with

Fac

eboo

k to

in

tera

ct w

ith lo

rem

ipsu

m s

it am

et e

tiam

alia

in

ter e

os.

Emai

l:

Pass

wor

d:

Brin

g yo

ur F

aceb

ook

frien

ds a

nd in

fo

Keep

me

sign

ed in

Post

sto

ries

to y

our

wal

l

By p

roce

edin

g, y

ou a

re a

gree

ingi

ng to

Fac

eboo

k Te

rmsn

and

Con

ditio

ns lo

rem

ipsu

m s

it am

et

Con

nect

Can

cel

Lab

el 1

Lab

el 2

Lab

el 3

Lab

el 4

Mor

e

List

vie

ws

List

ele

men

tSe

cond

line

of t

ext

List

ele

men

tSe

cond

line

of t

ext

List

ele

men

tSe

cond

line

of t

ext

List

ele

men

tSe

cond

line

of t

ext

List

ele

men

tSe

cond

line

of t

ext

List

ele

men

t2

for 1

adm

issi

onSe

cond

line

of t

ext

List

ele

men

tSe

cond

line

of t

ext

2 N

ovem

ber

Rece

nt d

eals

Sub-

head

ing

List

ele

men

tSe

cond

line

of t

ext

Sub-

head

ing

Tit

le b

arB

ack

Shar

e

Co

ntac

t lis

tsW

eb v

iew

sK

eyb

oar

d

Cre

ated

by

Gio

rgio

Ven

turi

26/0

6/20

10w

ww

.use

rcen

tred

.net

Tit

leB

ack

Lore

m ip

sum

Lore

m ip

sum

Lore

m ip

sum

Lore

m ip

sum

Lore

m ip

sum

Lore

m ip

sum

Lore

m ip

sum

Lore

m ip

sum

Lore

m ip

sum

f f ft t ft ft


Don

e

Lab

el 1

Lab

el 2

Lab

el 3

Lab

el 4

Mor

e

Tab

le v

iew

s

Tit

le

Lore

m ip

sum

OFF

Edit

card

det

ails

Bac

k

****

-***

*-**

**-4

039

6/12

***

Lore

m ip

sum

sit

amet

1234

5Lo

rem

ipsu

m

Visa

Expi

ry d

ate

CVV

Bill

ing

addr

ess

Cre

dit c

ard

deta

ils

No

tific

atio

ns

<N

otifi

catio

n d

escr

iptio

n> lo

rem

ips

amet

etia

m a

lter

alia

inte

r no

s as

su...

<N

oti

cati

ons

tit

le> View

det

ails

Dis

mis

s

Lab

el 1

Lab

el 2

Lab

el 3

Lab

el 4

Mor

e

Pro

file

pag

es

Tit

le

Loca

tio

nS

elec

t

Bir

thd

ayS

elec

t

Tab

le h

ead

ing

Face

book

Twitt

er

f t

Off

OffD

one

Lore

m ip

sum

Publ

ic

Bac

k

Lab

el 1

Lab

el 2

Lab

el 3

Lab

el 4

Mor

e

Tit

le b

ar

Map

vie

ws

Wed

ding

Cak

e sp

ecia

l - li

mite

d ...

Paul

Wed

ding

Cak

e sp

ecia

l - li

mite

d ...

2 N

ovem

ber

31 O

ctob

er

Toot

ip ti

tleTo

oltip

des

crip

tion

QW

ER

TY

UI

OP

AS

DF

GH

JK

L

ZX

CV

BN

M

spac

e.?

123

retu

rn

Con

nect

to F

aceb

ook

Reg

iste

r

xf

App

nam

e

Con

nect

to lr

em ip

sum

with

Fac

eboo

k to

in

tera

ct w

ith lo

rem

ipsu

m s

it am

et e

tiam

alia

in

ter e

os.

Emai

l:

Pass

wor

d:

Brin

g yo

ur F

aceb

ook

frien

ds a

nd in

fo

Keep

me

sign

ed in

Post

sto

ries

to y

our

wal

l

By p

roce

edin

g, y

ou a

re a

gree

ingi

ng to

Fac

eboo

k Te

rmsn

and

Con

ditio

ns lo

rem

ipsu

m s

it am

et

Con

nect

Can

cel

Lab

el 1

Lab

el 2

Lab

el 3

Lab

el 4

Mor

e

List

vie

ws

List

ele

men

tSe

cond

line

of t

ext

List

ele

men

tSe

cond

line

of t

ext

List

ele

men

tSe

cond

line

of t

ext

List

ele

men

tSe

cond

line

of t

ext

List

ele

men

tSe

cond

line

of t

ext

List

ele

men

t2

for 1

adm

issi

onSe

cond

line

of t

ext

List

ele

men

tSe

cond

line

of t

ext

2 N

ovem

ber

Rece

nt d

eals

Sub-

head

ing

List

ele

men

tSe

cond

line

of t

ext

Sub-

head

ing

Tit

le b

arB

ack

Shar

e

Co

ntac

t lis

tsW

eb v

iew

sK

eyb

oar

d

Cre

ated

by

Gio

rgio

Ven

turi

26/0

6/20

10w

ww

.use

rcen

tred

.net

Tit

leB

ack

Lore

m ip

sum

Lore

m ip

sum

Lore

m ip

sum

Lore

m ip

sum

Lore

m ip

sum

Lore

m ip

sum

Lore

m ip

sum

Lore

m ip

sum

Lore

m ip

sum

f f ft t ft ft


Don

e

Lab

el 1

Lab

el 2

Lab

el 3

Lab

el 4

Mor

e

Tab

le v

iew

s

Tit

le

Lore

m ip

sum

OFF

Edit

card

det

ails

Bac

k

****

-***

*-**

**-4

039

6/12

***

Lore

m ip

sum

sit

amet

1234

5Lo

rem

ipsu

m

Visa

Expi

ry d

ate

CVV

Bill

ing

addr

ess

Cre

dit c

ard

deta

ils

No

tific

atio

ns

<N

otifi

catio

n d

escr

iptio

n> lo

rem

ips

amet

etia

m a

lter

alia

inte

r no

s as

su...

<N

oti

cati

ons

tit

le> View

det

ails

Dis

mis

s

Lab

el 1

Lab

el 2

Lab

el 3

Lab

el 4

Mor

e

Pro

file

pag

es

Tit

le

Loca

tio

nS

elec

t

Bir

thd

ayS

elec

t

Tab

le h

ead

ing

Face

book

Twitt

er

f t

Off

OffD

one

Lore

m ip

sum

Publ

ic

Bac

k

Lab

el 1

Lab

el 2

Lab

el 3

Lab

el 4

Mor

e

Tit

le b

ar

Map

vie

ws

Wed

ding

Cak

e sp

ecia

l - li

mite

d ...

Paul

Wed

ding

Cak

e sp

ecia

l - li

mite

d ...

2 N

ovem

ber

31 O

ctob

er

Toot

ip ti

tleTo

oltip

des

crip

tion



iPad Idea Sheets / http://lab.3fl.jp/ipad-idea-sheet-v01/



web App Storyboards by Arie Stavchansky for Illustrator/InDesign / http://stavchansky.net/blog.php?bID=21


TEmPLATES: mObILE DEVICE

Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

Connect to Facebook

Register

xf

App name


Email:

Password:


Keep me signed in



ConnectCancel


List views



2 November

Recent deals

Sub-heading


Sub-heading

Title barBack Share



TitleBack

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

f

f

f

t

t

f

t

f

t

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#

Done


Table views

Title

Lorem ipsum OFF

Edit card details

Back

****-****-****-4039

6/12

***


Visa

Expiry date

CVV

Billingaddress

Credit card details

Notifications


<Notications title>

View detailsDismiss


Profile pages

Title

Location Select

Birthday Select

Table heading

Facebook

Twitter

f

t

Off

Off

Done

Lorem ipsum Public

Back


Title bar

Map views


2 November

31 October



Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

Connect to Facebook

Register

xf

App name


Email:

Password:


Keep me signed in



ConnectCancel


List views



2 November

Recent deals

Sub-heading


Sub-heading

Title barBack Share



TitleBack

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

f

f

f

t

t

f

t

f

t

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#

Done


Table views

Title

Lorem ipsum OFF

Edit card details

Back

****-****-****-4039

6/12

***


Visa

Expiry date

CVV

Billingaddress

Credit card details

Notifications


<Notications title>

View detailsDismiss


Profile pages

Title

Location Select

Birthday Select

Table heading

Facebook

Twitter

f

t

Off

Off

Done

Lorem ipsum Public

Back


Title bar

Map views


2 November

31 October


Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

Connect to Facebook

Register

xf

App name


Email:

Password:


Keep me signed in



ConnectCancel


List views



2 November

Recent deals

Sub-heading


Sub-heading

Title barBack Share



TitleBack

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

f

f

f

t

t

f

t

f

t

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#

Done


Table views

Title

Lorem ipsum OFF

Edit card details

Back

****-****-****-4039

6/12

***


Visa

Expiry date

CVV

Billingaddress

Credit card details

Notifications


<Notications title>

View detailsDismiss


Profile pages

Title

Location Select

Birthday Select

Table heading

Facebook

Twitter

f

t

Off

Off

Done

Lorem ipsum Public

Back


Title bar

Map views


2 November

31 October



TEmPLATES: TAbLET



TEmPLATES: PC bROwSER






9:00 Am–9:30 Am


9:30 Am–10:00 Am


10:15 Am–11:00 Am


11:00 Am–12:15 Pm


12:15 Pm–5:30 Pm


__ mobile device

__ tablet

__ PC browser

8:00–8:50 Am


9:00 Am–9:45 Am


__ mobile device

__ tablet

__ PC browser

9:45 Am–12:15 Pm


12:15 Pm–4:45 Pm


__ mobile device

__ tablet

__ PC browser


HOw DOES YOUR HOmE SCREEN ADAPT ACROSS DEVICES?

Consider how the content on your home screen designs could dynamically adapt for different screen sizes. How does this influence navigation? Search? Screen content?

http://www.usercentred.net/2010/06/28/illustrator-template-for-iphone-design/ | http://lab.3fl.jp/ipad-idea-sheet-v01/ | http://stavchansky.net/blog.php?bID=21

Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

Connect to Facebook

Register

xf

App name


Email:

Password:


Keep me signed in



ConnectCancel


List views



2 November

Recent deals

Sub-heading


Sub-heading

Title barBack Share



TitleBack

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

f

f

f

t

t

f

t

f

t

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#

Done


Table views

Title

Lorem ipsum OFF

Edit card details

Back

****-****-****-4039

6/12

***


Visa

Expiry date

CVV

Billingaddress

Credit card details

Notifications


<Notications title>

View detailsDismiss


Profile pages

Title

Location Select

Birthday Select

Table heading

Facebook

Twitter

f

t

Off

Off

Done

Lorem ipsum Public

Back


Title bar

Map views


2 November

31 October


Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

Connect to Facebook

Register

xf

App name


Email:

Password:


Keep me signed in



ConnectCancel


List views



2 November

Recent deals

Sub-heading


Sub-heading

Title barBack Share



TitleBack

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

f

f

f

t

t

f

t

f

t

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#

Done


Table views

Title

Lorem ipsum OFF

Edit card details

Back

****-****-****-4039

6/12

***


Visa

Expiry date

CVV

Billingaddress

Credit card details

Notifications


<Notications title>

View detailsDismiss


Profile pages

Title

Location Select

Birthday Select

Table heading

Facebook

Twitter

f

t

Off

Off

Done

Lorem ipsum Public

Back


Title bar

Map views


2 November

31 October


QW

ER

TY

UI

OP

AS

DF

GH

JK

L

ZX

CV

BN

M

space.?123

return

Connect to Facebook

Register

xf

App name

Connect to lrem

ipsum w

ith Facebook to interact w

ith lorem ipsum

sit amet etiam

alia inter eos.

Email:

Password:


Keep me signed in

Post stories to your w

all

By proceeding, you are agreeinging to Facebook Term

sn and Conditions lorem

ipsum sit am

et

Connect

Cancel

Label 1

Label 2

Label 3

Label 4

More

List views

List element

Second line of textList elem

entSecond line of textList elem




ent2 for 1 adm

issionSecond line of text

List element

Second line of text

2 Novem

ber

Recent deals

Sub-heading

List element

Second line of text

Sub-heading

Title b

arB

ackShare

Co

ntact listsW

eb view

sK

eybo

ard

Created

by G

iorg

io Venturi

26/06/2010w

ww

.usercentred.net

Title

BackLorem

ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

fff ttf tf t

ABCDEFGHIJKLMNOPQRSTUVWXYZ#

Done

Label 1

Label 2

Label 3

Label 4

More

Table view

s

Title

Lorem ipsum

OFF

Edit card details

Back

****-****-****-4039

6/12

***

Lorem ipsum

sit amet

12345Lorem

ipsum

Visa

Expiry date

CVV

Billing

address

Credit card details

No

tifications

<N

otification descrip

tion> lorem

ips

amet etiam

alter alia inter nos assu...

<N

oticatio

ns title>View details

Dism

iss

Label 1

Label 2

Label 3

Label 4

More

Pro

file pag

es

Title

Locatio

nS

elect

Birthd

ayS

elect

Tab

le heading

Facebook

Twitter

ft

Off

Off D

one

Lorem ipsum

Public

Back

Label 1

Label 2

Label 3

Label 4

More

Title b

ar

Map

views

Wedding C

ake special - limited ...

PaulW

edding Cake special - lim

ited ...

2 Novem

ber

31 October



HOw DOES YOUR HOmE SCREEN ADAPT ACROSS DEVICES?

http://www.usercentred.net/2010/06/28/illustrator-template-for-iphone-design/ | http://lab.3fl.jp/ipad-idea-sheet-v01/ | http://stavchansky.net/blog.php?bID=21

Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

Connect to Facebook

Register

xf

App name


Email:

Password:


Keep me signed in



ConnectCancel


List views



2 November

Recent deals

Sub-heading


Sub-heading

Title barBack Share



TitleBack

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

f

f

f

t

t

f

t

f

t

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#

Done


Table views

Title

Lorem ipsum OFF

Edit card details

Back

****-****-****-4039

6/12

***


Visa

Expiry date

CVV

Billingaddress

Credit card details

Notifications


<Notications title>

View detailsDismiss


Profile pages

Title

Location Select

Birthday Select

Table heading

Facebook

Twitter

f

t

Off

Off

Done

Lorem ipsum Public

Back


Title bar

Map views


2 November

31 October


Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

Connect to Facebook

Register

xf

App name


Email:

Password:


Keep me signed in



ConnectCancel


List views



2 November

Recent deals

Sub-heading


Sub-heading

Title barBack Share



TitleBack

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

f

f

f

t

t

f

t

f

t

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#

Done


Table views

Title

Lorem ipsum OFF

Edit card details

Back

****-****-****-4039

6/12

***


Visa

Expiry date

CVV

Billingaddress

Credit card details

Notifications


<Notications title>

View detailsDismiss


Profile pages

Title

Location Select

Birthday Select

Table heading

Facebook

Twitter

f

t

Off

Off

Done

Lorem ipsum Public

Back


Title bar

Map views


2 November

31 October


QW

ER

TY

UI

OP

AS

DF

GH

JK

L

ZX

CV

BN

M

space.?123

return

Connect to Facebook

Register

xf

App name

Connect to lrem

ipsum w

ith Facebook to interact w

ith lorem ipsum

sit amet etiam

alia inter eos.

Email:

Password:


Keep me signed in

Post stories to your w

all

By proceeding, you are agreeinging to Facebook Term

sn and Conditions lorem

ipsum sit am

et

Connect

Cancel

Label 1

Label 2

Label 3

Label 4

More

List views

List element

Second line of textList elem





ent2 for 1 adm

issionSecond line of text

List element

Second line of text

2 Novem

ber

Recent deals

Sub-heading

List element

Second line of text

Sub-heading

Title b

arB

ackShare

Co

ntact listsW

eb view

sK

eybo

ard

Created

by G

iorg

io Venturi

26/06/2010w

ww

.usercentred.net

Title

BackLorem

ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

fff ttf tf t

ABCDEFGHIJKLMNOPQRSTUVWXYZ#

Done

Label 1

Label 2

Label 3

Label 4

More

Table view

s

Title

Lorem ipsum

OFF

Edit card details

Back

****-****-****-4039

6/12

***

Lorem ipsum

sit amet

12345Lorem

ipsum

Visa

Expiry date

CVV

Billing

address

Credit card details

No

tifications

<N

otification descrip

tion> lorem

ips

amet etiam

alter alia inter nos assu...

<N

oticatio

ns title>View details

Dism

iss

Label 1

Label 2

Label 3

Label 4

More

Pro

file pag

es

Title

Locatio

nS

elect

Birthd

ayS

elect

Tab

le heading

Facebook

Twitter

ft

Off

Off D

one

Lorem ipsum

Public

Back

Label 1

Label 2

Label 3

Label 4

More

Title b

ar

Map

views

Wedding C

ake special - limited ...

PaulW

edding Cake special - lim

ited ...

2 Novem

ber

31 October



wHAT PERSONA wILL READ YOUR mAGAzINE mOST?

Establish a primary persona that would be the most avid reader of your magazine. Sketch in a little bit about this persona here:

NAmE:

GOALS:

NEEDS:

DEmOGRAPHICS:

2-mINUTE bIO:

HEADSHOT


CREATE A wIREFRAmE FLOw FOR YOUR PERSONA: mObILE DEVICE

Determine what content your primary persona would most want to reach. Sketch a flow for how s/he would get to it from the home screen of your magazine… for mobile, tablet, and PC browser.


(Feel free to do this in your sketchbook…)

Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

Connect to Facebook

Register

xf

App name


Email:

Password:


Keep me signed in



ConnectCancel


List views



2 November

Recent deals

Sub-heading


Sub-heading

Title barBack Share



TitleBack

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

f

f

f

t

t

f

t

f

t

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#

Done


Table views

Title

Lorem ipsum OFF

Edit card details

Back

****-****-****-4039

6/12

***


Visa

Expiry date

CVV

Billingaddress

Credit card details

Notifications


<Notications title>

View detailsDismiss


Profile pages

Title

Location Select

Birthday Select

Table heading

Facebook

Twitter

f

t

Off

Off

Done

Lorem ipsum Public

Back


Title bar

Map views


2 November

31 October


Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

Connect to Facebook

Register

xf

App name


Email:

Password:


Keep me signed in



ConnectCancel


List views



2 November

Recent deals

Sub-heading


Sub-heading

Title barBack Share



TitleBack

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

f

f

f

t

t

f

t

f

t

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#

Done


Table views

Title

Lorem ipsum OFF

Edit card details

Back

****-****-****-4039

6/12

***


Visa

Expiry date

CVV

Billingaddress

Credit card details

Notifications


<Notications title>

View detailsDismiss


Profile pages

Title

Location Select

Birthday Select

Table heading

Facebook

Twitter

f

t

Off

Off

Done

Lorem ipsum Public

Back


Title bar

Map views


2 November

31 October


Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

Connect to Facebook

Register

xf

App name


Email:

Password:


Keep me signed in



ConnectCancel


List views



2 November

Recent deals

Sub-heading


Sub-heading

Title barBack Share



TitleBack

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

f

f

f

t

t

f

t

f

t

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#

Done


Table views

Title

Lorem ipsum OFF

Edit card details

Back

****-****-****-4039

6/12

***


Visa

Expiry date

CVV

Billingaddress

Credit card details

Notifications


<Notications title>

View detailsDismiss


Profile pages

Title

Location Select

Birthday Select

Table heading

Facebook

Twitter

f

t

Off

Off

Done

Lorem ipsum Public

Back


Title bar

Map views


2 November

31 October


Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

Connect to Facebook

Register

xf

App name


Email:

Password:


Keep me signed in



ConnectCancel


List views



2 November

Recent deals

Sub-heading


Sub-heading

Title barBack Share



TitleBack

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

f

f

f

t

t

f

t

f

t

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#

Done


Table views

Title

Lorem ipsum OFF

Edit card details

Back

****-****-****-4039

6/12

***


Visa

Expiry date

CVV

Billingaddress

Credit card details

Notifications


<Notications title>

View detailsDismiss


Profile pages

Title

Location Select

Birthday Select

Table heading

Facebook

Twitter

f

t

Off

Off

Done

Lorem ipsum Public

Back


Title bar

Map views


2 November

31 October


Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

Connect to Facebook

Register

xf

App name


Email:

Password:


Keep me signed in



ConnectCancel


List views



2 November

Recent deals

Sub-heading


Sub-heading

Title barBack Share



TitleBack

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

f

f

f

t

t

f

t

f

t

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#

Done


Table views

Title

Lorem ipsum OFF

Edit card details

Back

****-****-****-4039

6/12

***


Visa

Expiry date

CVV

Billingaddress

Credit card details

Notifications


<Notications title>

View detailsDismiss


Profile pages

Title

Location Select

Birthday Select

Table heading

Facebook

Twitter

f

t

Off

Off

Done

Lorem ipsum Public

Back


Title bar

Map views


2 November

31 October


Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

Connect to Facebook

Register

xf

App name


Email:

Password:


Keep me signed in



ConnectCancel


List views



2 November

Recent deals

Sub-heading


Sub-heading

Title barBack Share



TitleBack

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

f

f

f

t

t

f

t

f

t

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#

Done


Table views

Title

Lorem ipsum OFF

Edit card details

Back

****-****-****-4039

6/12

***


Visa

Expiry date

CVV

Billingaddress

Credit card details

Notifications


<Notications title>

View detailsDismiss


Profile pages

Title

Location Select

Birthday Select

Table heading

Facebook

Twitter

f

t

Off

Off

Done

Lorem ipsum Public

Back


Title bar

Map views


2 November

31 October



CREATE A wIREFRAmE FLOw FOR YOUR PERSONA: TAbLET


CREATE A wIREFRAmE FLOw FOR YOUR PERSONA: PC bROwSER




TEmPLATES: mObILE DEVICE

Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

Connect to Facebook

Register

xf

App name


Email:

Password:


Keep me signed in



ConnectCancel


List views



2 November

Recent deals

Sub-heading


Sub-heading

Title barBack Share



TitleBack

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

f

f

f

t

t

f

t

f

t

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#

Done


Table views

Title

Lorem ipsum OFF

Edit card details

Back

****-****-****-4039

6/12

***


Visa

Expiry date

CVV

Billingaddress

Credit card details

Notifications


<Notications title>

View detailsDismiss


Profile pages

Title

Location Select

Birthday Select

Table heading

Facebook

Twitter

f

t

Off

Off

Done

Lorem ipsum Public

Back


Title bar

Map views


2 November

31 October


Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

Connect to Facebook

Register

xf

App name


Email:

Password:


Keep me signed in



ConnectCancel


List views



2 November

Recent deals

Sub-heading


Sub-heading

Title barBack Share



TitleBack

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

f

f

f

t

t

f

t

f

t

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#

Done


Table views

Title

Lorem ipsum OFF

Edit card details

Back

****-****-****-4039

6/12

***


Visa

Expiry date

CVV

Billingaddress

Credit card details

Notifications


<Notications title>

View detailsDismiss


Profile pages

Title

Location Select

Birthday Select

Table heading

Facebook

Twitter

f

t

Off

Off

Done

Lorem ipsum Public

Back


Title bar

Map views


2 November

31 October


Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

Connect to Facebook

Register

xf

App name


Email:

Password:


Keep me signed in



ConnectCancel


List views



2 November

Recent deals

Sub-heading


Sub-heading

Title barBack Share



TitleBack

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

f

f

f

t

t

f

t

f

t

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#

Done


Table views

Title

Lorem ipsum OFF

Edit card details

Back

****-****-****-4039

6/12

***


Visa

Expiry date

CVV

Billingaddress

Credit card details

Notifications


<Notications title>

View detailsDismiss


Profile pages

Title

Location Select

Birthday Select

Table heading

Facebook

Twitter

f

t

Off

Off

Done

Lorem ipsum Public

Back


Title bar

Map views


2 November

31 October



TEmPLATES: TAbLET



TEmPLATES: PC bROwSER







DAY 3: TESTING YOUR DESIGN IDEAS

9:00 Am–9:30 Am


9:30 Am–10:00 Am


10:15 Am–11:00 Am


11:00 Am–12:15 Pm


12:15 Pm–5:30 Pm


__ mobile device

__ tablet

__ PC browser

8:00–8:50 Am


9:00 Am–9:45 Am


__ mobile device

__ tablet

__ PC browser

9:45 Am–12:15 Pm


12:15 Pm–4:45 Pm


__ mobile device

__ tablet

__ PC browser

8:00–8:50 Am

__ Share your flows with small groups & speakers

9:00 Am–11:00 Am

__ Take your mobile flow and draw a final design to test

11:00 Am-12:00 Pm

__ Have the person sitting next to you walk through the flow you’ve created—as the persona you’d identified!



DESIGN TO TEST: FOLD UP TO PROGRESSIVELY REVEAL THE SCREENS

FOLD FOLD

Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

Connect to Facebook

Register

xf

App name


Email:

Password:


Keep me signed in



ConnectCancel


List views



2 November

Recent deals

Sub-heading


Sub-heading

Title barBack Share



TitleBack

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

f

f

f

t

t

f

t

f

t

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#

Done


Table views

Title

Lorem ipsum OFF

Edit card details

Back

****-****-****-4039

6/12

***


Visa

Expiry date

CVV

Billingaddress

Credit card details

Notifications


<Notications title>

View detailsDismiss


Profile pages

Title

Location Select

Birthday Select

Table heading

Facebook

Twitter

f

t

Off

Off

Done

Lorem ipsum Public

Back


Title bar

Map views


2 November

31 October


Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

Connect to Facebook

Register

xf

App name


Email:

Password:


Keep me signed in



ConnectCancel


List views



2 November

Recent deals

Sub-heading


Sub-heading

Title barBack Share



TitleBack

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

f

f

f

t

t

f

t

f

t

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#

Done


Table views

Title

Lorem ipsum OFF

Edit card details

Back

****-****-****-4039

6/12

***


Visa

Expiry date

CVV

Billingaddress

Credit card details

Notifications


<Notications title>

View detailsDismiss


Profile pages

Title

Location Select

Birthday Select

Table heading

Facebook

Twitter

f

t

Off

Off

Done

Lorem ipsum Public

Back


Title bar

Map views


2 November

31 October


Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

Connect to Facebook

Register

xf

App name


Email:

Password:


Keep me signed in



ConnectCancel


List views



2 November

Recent deals

Sub-heading


Sub-heading

Title barBack Share



TitleBack

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

f

f

f

t

t

f

t

f

t

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#

Done


Table views

Title

Lorem ipsum OFF

Edit card details

Back

****-****-****-4039

6/12

***


Visa

Expiry date

CVV

Billingaddress

Credit card details

Notifications


<Notications title>

View detailsDismiss


Profile pages

Title

Location Select

Birthday Select

Table heading

Facebook

Twitter

f

t

Off

Off

Done

Lorem ipsum Public

Back


Title bar

Map views


2 November

31 October



TESTING YOUR DESIGN

5 mins: Give the person next to you your persona worksheet. Let them read it. Explain to them the nuances of this reader for your magazine. Take notes on their questions & comments.

5 mins: Share your mobile device wireframe flow with the person next to you. Have them walk through the mobile flow you created as the persona, fulfilling the task you’ve set out for them. They decide what to tap on screen, and should speak out loud what they’re thinking. Take notes on what happens, then switch!

Did they use your magazine how you’d expected? Or did they suggest something that could improve your design? why?

PROGRESSIVE DESIGN CHALLENGE - Aventri...Connect to Facebook Register f x App name Connect to lrem...

Documents

Transcript of PROGRESSIVE DESIGN CHALLENGE - Aventri...Connect to Facebook Register f x App name Connect to lrem...