10 Principles for Good Design for Mobile

73
DESIGN 10 principles for good

description

 

Transcript of 10 Principles for Good Design for Mobile

Page 1: 10 Principles for Good Design for Mobile

DES I GN10 principles for good

Page 2: 10 Principles for Good Design for Mobile

DES I GN10 principles for good

Page 3: 10 Principles for Good Design for Mobile

I N NOVAT I V E1. Good design is

Page 4: 10 Principles for Good Design for Mobile

The possibilities for innovation are not, by any means, exhausted. Technological development is always offering new opportunities for innovative design. But innovative design always develops in tandem with innovative technology, and can never be an end in itself.

Page 5: 10 Principles for Good Design for Mobile
Page 6: 10 Principles for Good Design for Mobile
Page 7: 10 Principles for Good Design for Mobile
Page 8: 10 Principles for Good Design for Mobile
Page 9: 10 Principles for Good Design for Mobile
Page 10: 10 Principles for Good Design for Mobile

Facebook

Page 11: 10 Principles for Good Design for Mobile

Vsco

Page 12: 10 Principles for Good Design for Mobile

Rdio

Page 13: 10 Principles for Good Design for Mobile

Feedly

Page 14: 10 Principles for Good Design for Mobile

Facebook Vsco Rdio Feedly

Page 15: 10 Principles for Good Design for Mobile

iOS 7 Native Photos

Page 16: 10 Principles for Good Design for Mobile

iOS 7 Native Calendar

Page 17: 10 Principles for Good Design for Mobile

US E FU L2. Good design makes a product

Page 18: 10 Principles for Good Design for Mobile

A product is bought to be used. It has to satisfy certain criteria, not only functional, but also psychological and aesthetic. Good design emphasizes the usefulness of a product whilst disregarding anything that could possibly detract from it.

Page 19: 10 Principles for Good Design for Mobile

Clear hierarchy of information, most important content front and center

Consistent size, stroke weightYahoo! Weather

Page 20: 10 Principles for Good Design for Mobile

Concise and accurate secondary information

Yahoo! Weather

Page 21: 10 Principles for Good Design for Mobile

Uses geolocation, search history, social history to provide useful contextual information.

Google Now

Page 22: 10 Principles for Good Design for Mobile

Weather conditions available to golfers at all times.

Digital Caddies

Page 23: 10 Principles for Good Design for Mobile

Chat with other golf carts and staff at any time.

Page 24: 10 Principles for Good Design for Mobile

A ES TH E T I C3. Good design is

Page 25: 10 Principles for Good Design for Mobile

The aesthetic quality of a product is integral to its usefulness because products we use every day affect our person and our well-being. But only well-executed objects can be beautiful.

Page 26: 10 Principles for Good Design for Mobile

Dots

Page 27: 10 Principles for Good Design for Mobile
Page 28: 10 Principles for Good Design for Mobile
Page 29: 10 Principles for Good Design for Mobile

VS.

DotsBubblet

Page 30: 10 Principles for Good Design for Mobile

for the wine connoisseur

Plonk

A periodic table of...

WINE

Page 31: 10 Principles for Good Design for Mobile

MUSIC

Timbre

LOCAL

DISCOVERY

Page 32: 10 Principles for Good Design for Mobile

Could easily be standard/native list screens, but focus on aesthetics makes the interaction with the product more memorable and meaningful.

Timbre Plonk

Page 33: 10 Principles for Good Design for Mobile

Jiffy

Page 34: 10 Principles for Good Design for Mobile

NexoniaJiffy

“Recognizing patterns helps you make quick sense of the sensory input that comes to you every second. Your eyes and brain want to create patterns, even if there are no real patterns there.”

- Susan M. Weinschenk

VS.

Page 35: 10 Principles for Good Design for Mobile

4. Good design makes a product

UNDERSTANDAB L E

Page 36: 10 Principles for Good Design for Mobile

It clarifies the product’s structure. Better still, it can make the product talk. At best, it is self-explanatory.

It clarifies the product’s structure. Better still, it can make the product talk. At best, it is self-explanatory.

Page 37: 10 Principles for Good Design for Mobile
Page 38: 10 Principles for Good Design for Mobile
Page 39: 10 Principles for Good Design for Mobile
Page 40: 10 Principles for Good Design for Mobile

iMessages

Speech bubble graphic convention borrowed from comics is universally understood.

Page 41: 10 Principles for Good Design for Mobile

“During everyday activities your mind wanders up to 30 percent of the time, and in some cases like driving, up to 70 percent of the time.

People will only focus on a task for a limited time. Assume that their minds are wandering often.”

- Susan M. Weinschenk

Strava Cycling

Page 42: 10 Principles for Good Design for Mobile

UNOBTRUS I V E5. Good design is

Page 43: 10 Principles for Good Design for Mobile

Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the user’s self-expression.

Page 44: 10 Principles for Good Design for Mobile

SimpleAndroid Notifications

Page 45: 10 Principles for Good Design for Mobile

Simple

Page 46: 10 Principles for Good Design for Mobile

HONEST6. Good design is

Page 47: 10 Principles for Good Design for Mobile

It does not make a product more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept.

Page 48: 10 Principles for Good Design for Mobile

VS.iOS 7 iOS 6

Page 49: 10 Principles for Good Design for Mobile

uh oh...

Page 50: 10 Principles for Good Design for Mobile

VS.

Page 51: 10 Principles for Good Design for Mobile

...

Page 52: 10 Principles for Good Design for Mobile

L ONG - L AS T I NG7. Good design is

Page 53: 10 Principles for Good Design for Mobile

It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years – even in today’s throwaway society.

Page 54: 10 Principles for Good Design for Mobile
Page 55: 10 Principles for Good Design for Mobile
Page 56: 10 Principles for Good Design for Mobile

The Mercedes symbol, for example, has nothing to do with automobiles; yet it is a great symbol, not because its design is great, but because it stands for a great product.

-Paul RandOriginally published in 1991 by AIGA, the

professional association for design.

Page 57: 10 Principles for Good Design for Mobile

Minecraft

Page 58: 10 Principles for Good Design for Mobile

DE TA I L8. Good design is thorough down to the last

Page 59: 10 Principles for Good Design for Mobile

Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the user.

Page 60: 10 Principles for Good Design for Mobile
Page 61: 10 Principles for Good Design for Mobile

PROFILE - FOLLOWERS PROFILE - FOLLOWING PROFILE - FAVORITES

CHOOSE FILTER

CAMERA - CAPTION / SHARE

VIDEO - RECORDFIND FRIENDS (opt 2)

PROFILE - PICTURES

SPLASH

SPOTIGORYLOGO

LOGIN

SIGN UP

USERNAME

LOGIN WITH FACEBOOK

LOGIN

RESET

FORGOT PASSWORD?

PASSWORD

EMAIL ADDRESS

SPOTIGORYLOGO

USERNAME

LOGIN WITH FACEBOOK

LOGIN

FORGOT PASSWORD?

PASSWORD

LOGIN

LOGIN - FORGOT PASSWORD

SIGN UP

LOGIN WITH FACEBOOK

CREATE ACCOUNT

FIRST NAME LAST NAME

CHOOSE A USERNAME

CHOOSE A PASSWORD

EMAIL ADDRESS

Consider 3 dots instead of long press for menu.

Dark overlay or blurred photo when share / report options come up.

Press filter once for pre-view. Checkmark / “Okay”

text will appear in filter box, and second press will

apply the filter.

Share options could also be set from “settings” once and applied until changed again in settings (free up space for other options).

Could be icons or text.

If video was recorded, take the user back to a copy of

their video, still editable.

Click on person to see message, “Follow?”

Check indicates that you are following that user. If you click on a user you are already following, the text “follow” changes to “unfollow”

Same action as “Find Friends” when clicking on

profile image.

SETTINGSSEARCH LOGOUT - ACCEPT

CHANGE UN / PW / EMAIL / ABT

HOME SCREEN

COMMENTS / FAVORITES

SINGLE PHOTO

HOLD DOWN PHOTO CAMERA - RECORD

AT&T 11:56 AM

LOGO 3

FLASH ON VID / CAMTAKEPIC

GRID ?FRONTCAMERA

AT&T 11:56 AM

LOGO 3

CAPTION

LOCATION (necessary?)

FBOOK TWITTER

DONE

EMAIL

FBOOK TWITTER EMAIL

TTER EMAIL

[email protected]

AT&T 11:56 AM

LOGO 3

HOME FRNDS CMRA FAVS PRFL

X MINS AGO

USERPIC

USERNAMEUSER LOCATION

USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.

11 45

REPORT

SHARE

AT&T 11:56 AM

LOGO 3

GRID ?

DELETE

FRONTCAMERA

RECVIDEO

VID / CAM

AT&T 11:56 AM

LOGO

FILTER

3

ROTATE FRAMEBRIGHTEN

FILTER FILTER FILTER

AT&T 11:56 AM

HOME FRNDS CMRA FAVS PRFL

LOGO 3

USERNAMEDallas, TexasA few sentences and up to two lines about the user and their interests.

Following

Following

PICTURES FOLLOWERS FOLLOWING FAVORITES

500 1,241 1,088 226

John SmithDallas, Texas

FollowingJohn SmithDallas, Texas

FollowingJohn SmithDallas, Texas

FollowingJohn SmithDallas, Texas

FollowingJohn SmithDallas, Texas

AT&T 11:56 AM

HOME FRNDS CMRA FAVS PRFL

LOGO 3

USERNAMEDallas, TexasA few sentences and up to two lines about the user and their interests.

Following

PICTURES FOLLOWERS FOLLOWING FAVORITES

500 1,241 1,088 226

FollowingJohn SmithDallas, Texas

FollowJohn SmithDallas, Texas

FollowJohn SmithDallas, Texas

FollowJohn SmithDallas, Texas

FollowJohn SmithDallas, Texas

AT&T 11:56 AM

HOME FRNDS CMRA FAVS PRFL

LOGO 3

USERNAMEDallas, TexasA few sentences and up to two lines about the user and their interests.

Following

PICTURES FOLLOWERS FOLLOWING FAVORITES

500 1,241 1,088 226

AT&T 11:56 AM

LOGO 3

X MINS AGO

USERPIC

USERNAMEUSER LOCATION

USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.

11 45

HOME FRNDS CMRA FAVS PRFL

AT&T 11:56 AM

LOGO 3

HOME FRNDS CMRA FAVS PRFL

USERPIC

USERNAMEUSER COMMENTS GO HERE AND WILL GO HERE ALSO.

USERPIC

USERNAMEUSER COMMENTS GO HERE AND WILL GO HERE ALSO.

USERPIC

USERNAMEUSER COMMENTS GO HERE AND WILL GO HERE ALSO.

USERPIC

USERNAMEUSER COMMENTS GO HERE AND WILL GO HERE ALSO.

COMMENT HERE

AT&T 11:56 AM

LOGO 3

HOME FRNDS CMRA FAVS PRFL

FACEBOOK TWITTER CONTACTS

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAME USERNAME USERNAME

USERNAMELOCATION

FOLLOW

PROFILE

Show x number of likes and x number of com-ments. The rest can be seen by clicking the like or comment button.

AT&T 11:56 AM

LOGO 3

X MINS AGO

USERPIC

USERNAMEUSER LOCATION

USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.

11 45

HOME FRNDS CMRA FAVS PRFL

AT&T 11:56 AM

HOME FRNDS CMRA FAVS PRFL

USERNAMEDallas, Texas

LOGO 3

A few sentences and up to two lines about the user and their interests.

Following

PICTURES FOLLOWERS FOLLOWING FAVORITES

500 1,241 1,688 226

SPOTIGORYLOGO

Slight parallax move-ment with the logo.

NOTIFICATIONS

AT&T 11:56 AM

LOGO 3

USERNAME has commented on your photo

USERNAME has commented on your photo

USERNAME has commented on your photo

USERNAME has commented on your photo

USERNAME has commented on your photo

USERNAME has commented on your photo

AT&T 11:56 AM

USERNAME

FIND & INVITE FRIENDS

PRIVACY POLICY

TERMS OF USE

SUPPORT TEAM

LOGOUT ACCEPT

AT&T 11:56 AM

LOGO 3

USERNAME

NEW PASSWORD

SAVE CHANGES

CHANGE EMAIL

CHANGE USERNAME

ABOUT ME

FACEBOOK TWITTER

PHOTO PRIVACY PUBLIC

NOTIFICATIONS ON

AT&T 11:56 AM

USERNAME

SAVE CHANGES

CHANGE PASSWORD

CHANGE EMAIL

CHANGE USERNAME

ABOUT ME

FACEBOOK TWITTER

PHOTO PRIVACY PUBLIC

NOTIFICATIONS ON

HOME SCREEN - DRAWER

AT&T 11:56 AM

USERNAME

FIND & INVITE FRIENDS

PRIVACY POLICY

TERMS OF USE

SUPPORT TEAM

LOGOUT

SEARCH

AT&T 11:56 AM

PHOTOSPEOPLE

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAME USERNAME USERNAME

SEARCH - PHOTOS

USERNAMEFOLLOWING

SEARCH

AT&T 11:56 AM

PHOTOSPEOPLE

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

DRAWER

PROFILE DRAWER DRAWER DRAWER

TAKE PIC

TOGGLE

COMMENTS FAVORITES

HOME SCREEN

2 STATE BUTTON

TOGGLE

TOGGLE

TOGGLE

TOGGLE

TOGGLE

ACCOUNT LOGIN & CREATION

LINKS & LOCATIONS

MAIN APPLICATION

FACEBOOK LOGIN API

FACEBOOK LOGIN API

HOME SCREEN

HOME SCREEN

2 STATE BUTTON

2 STATE BUTTON

BOTTOM BAR OPTIONS

TOGGLES & ACTIONS

LONG PRESS

SPOTAGORY Wirereframes Diagram v1.0

PROFILE - FOLLOWERS PROFILE - FOLLOWING PROFILE - FAVORITES

CHOOSE FILTER

CAMERA - CAPTION / SHARE

VIDEO - RECORDFIND FRIENDS (opt 2)

PROFILE - PICTURES

SPLASH

SPOTIGORYLOGO

LOGIN

SIGN UP

USERNAME

LOGIN WITH FACEBOOK

LOGIN

RESET

FORGOT PASSWORD?

PASSWORD

EMAIL ADDRESS

SPOTIGORYLOGO

USERNAME

LOGIN WITH FACEBOOK

LOGIN

FORGOT PASSWORD?

PASSWORD

LOGIN

LOGIN - FORGOT PASSWORD

SIGN UP

LOGIN WITH FACEBOOK

CREATE ACCOUNT

FIRST NAME LAST NAME

CHOOSE A USERNAME

CHOOSE A PASSWORD

EMAIL ADDRESS

Consider 3 dots instead of long press for menu.

Dark overlay or blurred photo when share / report options come up.

Press filter once for pre-view. Checkmark / “Okay”

text will appear in filter box, and second press will

apply the filter.

Share options could also be set from “settings” once and applied until changed again in settings (free up space for other options).

Could be icons or text.

If video was recorded, take the user back to a copy of

their video, still editable.

Click on person to see message, “Follow?”

Check indicates that you are following that user. If you click on a user you are already following, the text “follow” changes to “unfollow”

Same action as “Find Friends” when clicking on

profile image.

SETTINGSSEARCH LOGOUT - ACCEPT

CHANGE UN / PW / EMAIL / ABT

HOME SCREEN

COMMENTS / FAVORITES

SINGLE PHOTO

HOLD DOWN PHOTO CAMERA - RECORD

LOGO 3

FLASH ON VID / CAMTAKEPIC

GRID ?FRONTCAMERA

LOGO 3

CAPTION

LOCATION (necessary?)

FBOOK TWITTER

DONE

EMAIL

FBOOK TWITTER EMAIL

TTER EMAIL

[email protected]

AT&T 11:56 AM

LOGO 3

HOME FRNDS CMRA FAVS PRFL

X MINS AGO

USERPIC

USERNAMEUSER LOCATION

USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.

11 45

REPORT

SHARE

LOGO 3

GRID ?

DELETE

FRONTCAMERA

RECVIDEO

VID / CAM

LOGO

FILTER

3

ROTATE FRAMEBRIGHTEN

FILTER FILTER FILTER

HOME FRNDS CMRA FAVS PRFL

LOGO 3

USERNAMEDallas, TexasA few sentences and up to two lines about the user and their interests.

Following

Following

PICTURES FOLLOWERS FOLLOWING FAVORITES

500 1,241 1,088 226

John SmithDallas, Texas

FollowingJohn SmithDallas, Texas

FollowingJohn SmithDallas, Texas

FollowingJohn SmithDallas, Texas

FollowingJohn SmithDallas, Texas

HOME FRNDS CMRA FAVS PRFL

LOGO 3

USERNAMEDallas, TexasA few sentences and up to two lines about the user and their interests.

Following

PICTURES FOLLOWERS FOLLOWING FAVORITES

500 1,241 1,088 226

FollowingJohn SmithDallas, Texas

FollowJohn SmithDallas, Texas

FollowJohn SmithDallas, Texas

FollowJohn SmithDallas, Texas

FollowJohn SmithDallas, Texas

HOME FRNDS CMRA FAVS PRFL

LOGO 3

USERNAMEDallas, TexasA few sentences and up to two lines about the user and their interests.

Following

PICTURES FOLLOWERS FOLLOWING FAVORITES

500 1,241 1,088 226

AT&T 11:56 AM

LOGO 3

X MINS AGO

USERPIC

USERNAMEUSER LOCATION

USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.

11 45

HOME FRNDS CMRA FAVS PRFL

AT&T 11:56 AM

LOGO 3

HOME FRNDS CMRA FAVS PRFL

USERPIC

USERNAMEUSER COMMENTS GO HERE AND WILL GO HERE ALSO.

USERPIC

USERNAMEUSER COMMENTS GO HERE AND WILL GO HERE ALSO.

USERPIC

USERNAMEUSER COMMENTS GO HERE AND WILL GO HERE ALSO.

USERPIC

USERNAMEUSER COMMENTS GO HERE AND WILL GO HERE ALSO.

COMMENT HERE

AT&T 11:56 AM

LOGO 3

HOME FRNDS CMRA FAVS PRFL

FACEBOOK TWITTER CONTACTS

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAME USERNAME USERNAME

USERNAMELOCATION

FOLLOW

PROFILE

Show x number of likes and x number of com-ments. The rest can be seen by clicking the like or comment button.

LOGO 3

X MINS AGO

USERPIC

USERNAMEUSER LOCATION

USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.

11 45

HOME FRNDS CMRA FAVS PRFL

HOME FRNDS CMRA FAVS PRFL

USERNAMEDallas, Texas

LOGO 3

A few sentences and up to two lines about the user and their interests.

Following

PICTURES FOLLOWERS FOLLOWING FAVORITES

500 1,241 1,688 226

SPOTIGORYLOGO

Slight parallax move-ment with the logo.

NOTIFICATIONS

LOGO 3

USERNAME has commented on your photo

USERNAME has commented on your photo

USERNAME has commented on your photo

USERNAME has commented on your photo

USERNAME has commented on your photo

USERNAME has commented on your photo

AT&T 11:56 AM

USERNAME

FIND & INVITE FRIENDS

PRIVACY POLICY

TERMS OF USE

SUPPORT TEAM

LOGOUT ACCEPT

AT&T 11:56 AM

LOGO 3

USERNAME

NEW PASSWORD

SAVE CHANGES

CHANGE EMAIL

CHANGE USERNAME

ABOUT ME

FACEBOOK TWITTER

PHOTO PRIVACY PUBLIC

NOTIFICATIONS ON

AT&T 11:56 AM

USERNAME

SAVE CHANGES

CHANGE PASSWORD

CHANGE EMAIL

CHANGE USERNAME

ABOUT ME

FACEBOOK TWITTER

PHOTO PRIVACY PUBLIC

NOTIFICATIONS ON

HOME SCREEN - DRAWER

AT&T 11:56 AM

USERNAME

FIND & INVITE FRIENDS

PRIVACY POLICY

TERMS OF USE

SUPPORT TEAM

LOGOUT

SEARCH

PHOTOSPEOPLE

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAME USERNAME USERNAME

SEARCH - PHOTOS

USERNAMEFOLLOWING

SEARCH

PHOTOSPEOPLE

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

DRAWER

PROFILE DRAWER DRAWER DRAWER

TAKE PIC

TOGGLE

COMMENTS FAVORITES

HOME SCREEN

2 STATE BUTTON

TOGGLE

TOGGLE

TOGGLE

TOGGLE

TOGGLE

ACCOUNT LOGIN & CREATION

LINKS & LOCATIONS

MAIN APPLICATION

FACEBOOK LOGIN API

FACEBOOK LOGIN API

HOME SCREEN

HOME SCREEN

2 STATE BUTTON

2 STATE BUTTON

BOTTOM BAR OPTIONS

TOGGLES & ACTIONS

LONG PRESS

SPOTAGORY Wirereframes Diagram v1.0

Page 62: 10 Principles for Good Design for Mobile

PROFILE - FOLLOWERS PROFILE - FOLLOWING PROFILE - FAVORITES

CHOOSE FILTER

CAMERA - CAPTION / SHARE

VIDEO - RECORDFIND FRIENDS (opt 2)

PROFILE - PICTURES

SPLASH

SPOTIGORYLOGO

LOGIN

SIGN UP

USERNAME

LOGIN WITH FACEBOOK

LOGIN

RESET

FORGOT PASSWORD?

PASSWORD

EMAIL ADDRESS

SPOTIGORYLOGO

USERNAME

LOGIN WITH FACEBOOK

LOGIN

FORGOT PASSWORD?

PASSWORD

LOGIN

LOGIN - FORGOT PASSWORD

SIGN UP

LOGIN WITH FACEBOOK

CREATE ACCOUNT

FIRST NAME LAST NAME

CHOOSE A USERNAME

CHOOSE A PASSWORD

EMAIL ADDRESS

Consider 3 dots instead of long press for menu.

Dark overlay or blurred photo when share / report options come up.

Press filter once for pre-view. Checkmark / “Okay”

text will appear in filter box, and second press will

apply the filter.

Share options could also be set from “settings” once and applied until changed again in settings (free up space for other options).

Could be icons or text.

If video was recorded, take the user back to a copy of

their video, still editable.

Click on person to see message, “Follow?”

Check indicates that you are following that user. If you click on a user you are already following, the text “follow” changes to “unfollow”

Same action as “Find Friends” when clicking on

profile image.

SETTINGSSEARCH LOGOUT - ACCEPT

CHANGE UN / PW / EMAIL / ABT

HOME SCREEN

COMMENTS / FAVORITES

SINGLE PHOTO

HOLD DOWN PHOTO CAMERA - RECORD

LOGO 3

FLASH ON VID / CAMTAKEPIC

GRID ?FRONTCAMERA

LOGO 3

CAPTION

LOCATION (necessary?)

FBOOK TWITTER

DONE

EMAIL

FBOOK TWITTER EMAIL

TTER EMAIL

[email protected]

AT&T 11:56 AM

LOGO 3

HOME FRNDS CMRA FAVS PRFL

X MINS AGO

USERPIC

USERNAMEUSER LOCATION

USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.

11 45

REPORT

SHARE

LOGO 3

GRID ?

DELETE

FRONTCAMERA

RECVIDEO

VID / CAM

LOGO

FILTER

3

ROTATE FRAMEBRIGHTEN

FILTER FILTER FILTER

AT&T 11:56 AM

HOME FRNDS CMRA FAVS PRFL

LOGO 3

USERNAMEDallas, TexasA few sentences and up to two lines about the user and their interests.

Following

Following

PICTURES FOLLOWERS FOLLOWING FAVORITES

500 1,241 1,088 226

John SmithDallas, Texas

FollowingJohn SmithDallas, Texas

FollowingJohn SmithDallas, Texas

FollowingJohn SmithDallas, Texas

FollowingJohn SmithDallas, Texas

AT&T 11:56 AM

HOME FRNDS CMRA FAVS PRFL

LOGO 3

USERNAMEDallas, TexasA few sentences and up to two lines about the user and their interests.

Following

PICTURES FOLLOWERS FOLLOWING FAVORITES

500 1,241 1,088 226

FollowingJohn SmithDallas, Texas

FollowJohn SmithDallas, Texas

FollowJohn SmithDallas, Texas

FollowJohn SmithDallas, Texas

FollowJohn SmithDallas, Texas

AT&T

HOME FRNDS CMRA FAVS PRFL

LOGO 3

USERNAMEDallas, TexasA few sentences and up to two lines about the user and their interests.

Following

PICTURES FOLLOWERS FOLLOWING FAVORITES

500 1,241 1,088 226

AT&T 11:56 AM

LOGO 3

X MINS AGO

USERPIC

USERNAMEUSER LOCATION

USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.

11 45

HOME FRNDS CMRA FAVS PRFL

AT&T 11:56 AM

LOGO 3

HOME FRNDS CMRA FAVS PRFL

USERPIC

USERNAMEUSER COMMENTS GO HERE AND WILL GO HERE ALSO.

USERPIC

USERNAMEUSER COMMENTS GO HERE AND WILL GO HERE ALSO.

USERPIC

USERNAMEUSER COMMENTS GO HERE AND WILL GO HERE ALSO.

USERPIC

USERNAMEUSER COMMENTS GO HERE AND WILL GO HERE ALSO.

COMMENT HERE

AT&T 11:56 AM

LOGO 3

HOME FRNDS CMRA FAVS PRFL

FACEBOOK TWITTER CONTACTS

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAME USERNAME USERNAME

USERNAMELOCATION

FOLLOW

PROFILE

Show x number of likes and x number of com-ments. The rest can be seen by clicking the like or comment button.

AT&T 11:56 AM

LOGO 3

X MINS AGO

USERPIC

USERNAMEUSER LOCATION

USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.

11 45

HOME FRNDS CMRA FAVS PRFL

AT&T 11:56 AM

HOME FRNDS CMRA FAVS PRFL

USERNAMEDallas, Texas

LOGO 3

A few sentences and up to two lines about the user and their interests.

Following

PICTURES FOLLOWERS FOLLOWING FAVORITES

500 1,241 1,688 226

SPOTIGORYLOGO

Slight parallax move-ment with the logo.

NOTIFICATIONS

AT&T

LOGO 3

USERNAME has commented on your photo

USERNAME has commented on your photo

USERNAME has commented on your photo

USERNAME has commented on your photo

USERNAME has commented on your photo

USERNAME has commented on your photo

AT&T 11:56 AM

USERNAME

FIND & INVITE FRIENDS

PRIVACY POLICY

TERMS OF USE

SUPPORT TEAM

LOGOUT ACCEPT

AT&T 11:56 AM

LOGO 3

USERNAME

NEW PASSWORD

SAVE CHANGES

CHANGE EMAIL

CHANGE USERNAME

ABOUT ME

FACEBOOK TWITTER

PHOTO PRIVACY PUBLIC

NOTIFICATIONS ON

AT&T 11:56 AM

USERNAME

SAVE CHANGES

CHANGE PASSWORD

CHANGE EMAIL

CHANGE USERNAME

ABOUT ME

FACEBOOK TWITTER

PHOTO PRIVACY PUBLIC

NOTIFICATIONS ON

HOME SCREEN - DRAWER

AT&T 11:56 AM

USERNAME

FIND & INVITE FRIENDS

PRIVACY POLICY

TERMS OF USE

SUPPORT TEAM

LOGOUT

SEARCH

AT&T 11:56 AM

PHOTOSPEOPLE

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAME USERNAME USERNAME

SEARCH - PHOTOS

USERNAMEFOLLOWING

SEARCH

AT&T 11:56 AM

PHOTOSPEOPLE

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

DRAWER

PROFILE DRAWER DRAWER DRAWER

TAKE PIC

TOGGLE

COMMENTS FAVORITES

HOME SCREEN

2 STATE BUTTON

TOGGLE

TOGGLE

TOGGLE

TOGGLE

TOGGLE

ACCOUNT LOGIN & CREATION

LINKS & LOCATIONS

MAIN APPLICATION

FACEBOOK LOGIN API

FACEBOOK LOGIN API

HOME SCREEN

HOME SCREEN

2 STATE BUTTON

2 STATE BUTTON

BOTTOM BAR OPTIONS

TOGGLES & ACTIONS

LONG PRESS

SPOTAGORY Wirereframes Diagram v1.0

Page 63: 10 Principles for Good Design for Mobile

PROFILE - FOLLOWERS PROFILE - FOLLOWING PROFILE - FAVORITES

CHOOSE FILTER

CAMERA - CAPTION / SHARE

VIDEO - RECORDFIND FRIENDS (opt 2)

PROFILE - PICTURES

SPLASH

SPOTIGORYLOGO

LOGIN

SIGN UP

USERNAME

LOGIN WITH FACEBOOK

LOGIN

RESET

FORGOT PASSWORD?

PASSWORD

EMAIL ADDRESS

SPOTIGORYLOGO

USERNAME

LOGIN WITH FACEBOOK

LOGIN

FORGOT PASSWORD?

PASSWORD

LOGIN

LOGIN - FORGOT PASSWORD

SIGN UP

LOGIN WITH FACEBOOK

CREATE ACCOUNT

FIRST NAME LAST NAME

CHOOSE A USERNAME

CHOOSE A PASSWORD

EMAIL ADDRESS

Consider 3 dots instead of long press for menu.

Dark overlay or blurred photo when share / report options come up.

Press filter once for pre-view. Checkmark / “Okay”

text will appear in filter box, and second press will

apply the filter.

Share options could also be set from “settings” once and applied until changed again in settings (free up space for other options).

Could be icons or text.

If video was recorded, take the user back to a copy of

their video, still editable.

Click on person to see message, “Follow?”

Check indicates that you are following that user. If you click on a user you are already following, the text “follow” changes to “unfollow”

Same action as “Find Friends” when clicking on

profile image.

SETTINGSSEARCH LOGOUT - ACCEPT

CHANGE UN / PW / EMAIL / ABT

HOME SCREEN

COMMENTS / FAVORITES

SINGLE PHOTO

HOLD DOWN PHOTO CAMERA - RECORD

LOGO 3

FLASH ON VID / CAMTAKEPIC

GRID ?FRONTCAMERA

LOGO 3

CAPTION

LOCATION (necessary?)

FBOOK TWITTER

DONE

EMAIL

FBOOK TWITTER EMAIL

TTER EMAIL

[email protected]

AT&T 11:56 AM

LOGO 3

HOME FRNDS CMRA FAVS PRFL

X MINS AGO

USERPIC

USERNAMEUSER LOCATION

USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.

11 45

REPORT

SHARE

LOGO 3

GRID ?

DELETE

FRONTCAMERA

RECVIDEO

VID / CAM

LOGO

FILTER

3

ROTATE FRAMEBRIGHTEN

FILTER FILTER FILTER

HOME FRNDS CMRA FAVS PRFL

LOGO 3

USERNAMEDallas, TexasA few sentences and up to two lines about the user and their interests.

Following

Following

PICTURES FOLLOWERS FOLLOWING FAVORITES

500 1,241 1,088 226

John SmithDallas, Texas

FollowingJohn SmithDallas, Texas

FollowingJohn SmithDallas, Texas

FollowingJohn SmithDallas, Texas

FollowingJohn SmithDallas, Texas

HOME FRNDS CMRA FAVS PRFL

LOGO 3

USERNAMEDallas, TexasA few sentences and up to two lines about the user and their interests.

Following

PICTURES FOLLOWERS FOLLOWING FAVORITES

500 1,241 1,088 226

FollowingJohn SmithDallas, Texas

FollowJohn SmithDallas, Texas

FollowJohn SmithDallas, Texas

FollowJohn SmithDallas, Texas

FollowJohn SmithDallas, Texas

HOME FRNDS CMRA FAVS PRFL

LOGO 3

USERNAMEDallas, TexasA few sentences and up to two lines about the user and their interests.

Following

PICTURES FOLLOWERS FOLLOWING FAVORITES

500 1,241 1,088 226

AT&T

LOGO 3

X MINS AGO

USERPIC

USERNAMEUSER LOCATION

USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.

11 45

HOME FRNDS CMRA FAVS PRFL

AT&T 11:56 AM

LOGO 3

HOME FRNDS CMRA FAVS PRFL

USERPIC

USERNAMEUSER COMMENTS GO HERE AND WILL GO HERE ALSO.

USERPIC

USERNAMEUSER COMMENTS GO HERE AND WILL GO HERE ALSO.

USERPIC

USERNAMEUSER COMMENTS GO HERE AND WILL GO HERE ALSO.

USERPIC

USERNAMEUSER COMMENTS GO HERE AND WILL GO HERE ALSO.

COMMENT HERE

AT&T 11:56 AM

LOGO 3

HOME FRNDS CMRA FAVS PRFL

FACEBOOK TWITTER CONTACTS

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAME USERNAME USERNAME

USERNAMELOCATION

FOLLOW

PROFILE

Show x number of likes and x number of com-ments. The rest can be seen by clicking the like or comment button.

LOGO 3

X MINS AGO

USERPIC

USERNAMEUSER LOCATION

USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.

11 45

HOME FRNDS CMRA FAVS PRFL

HOME FRNDS CMRA FAVS PRFL

USERNAMEDallas, Texas

LOGO 3

A few sentences and up to two lines about the user and their interests.

Following

PICTURES FOLLOWERS FOLLOWING FAVORITES

500 1,241 1,688 226

SPOTIGORYLOGO

Slight parallax move-ment with the logo.

NOTIFICATIONS

LOGO 3

USERNAME has commented on your photo

USERNAME has commented on your photo

USERNAME has commented on your photo

USERNAME has commented on your photo

USERNAME has commented on your photo

USERNAME has commented on your photo

AT&T 11:56 AM

USERNAME

FIND & INVITE FRIENDS

PRIVACY POLICY

TERMS OF USE

SUPPORT TEAM

LOGOUT ACCEPT

LOGO 3

USERNAME

NEW PASSWORD

SAVE CHANGES

CHANGE EMAIL

CHANGE USERNAME

ABOUT ME

FACEBOOK TWITTER

PHOTO PRIVACY PUBLIC

NOTIFICATIONS ON

AT&T 11:56 AM

USERNAME

SAVE CHANGES

CHANGE PASSWORD

CHANGE EMAIL

CHANGE USERNAME

ABOUT ME

FACEBOOK TWITTER

PHOTO PRIVACY PUBLIC

NOTIFICATIONS ON

HOME SCREEN - DRAWER

AT&T 11:56 AM

USERNAME

FIND & INVITE FRIENDS

PRIVACY POLICY

TERMS OF USE

SUPPORT TEAM

LOGOUT

SEARCH

PHOTOSPEOPLE

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAME USERNAME USERNAME

SEARCH - PHOTOS

USERNAMEFOLLOWING

SEARCH

PHOTOSPEOPLE

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

DRAWER

PROFILE DRAWER DRAWER DRAWER

TAKE PIC

TOGGLE

COMMENTS FAVORITES

HOME SCREEN

2 STATE BUTTON

TOGGLE

TOGGLE

TOGGLE

TOGGLE

TOGGLE

ACCOUNT LOGIN & CREATION

LINKS & LOCATIONS

MAIN APPLICATION

FACEBOOK LOGIN API

FACEBOOK LOGIN API

HOME SCREEN

HOME SCREEN

2 STATE BUTTON

2 STATE BUTTON

BOTTOM BAR OPTIONS

TOGGLES & ACTIONS

LONG PRESS

SPOTAGORY Wirereframes Diagram v1.0

Page 64: 10 Principles for Good Design for Mobile

PROFILE - FOLLOWERS PROFILE - FOLLOWING PROFILE - FAVORITES

CHOOSE FILTER

CAMERA - CAPTION / SHARE

VIDEO - RECORDFIND FRIENDS (opt 2)

PROFILE - PICTURES

SPLASH

SPOTIGORYLOGO

LOGIN

SIGN UP

USERNAME

LOGIN WITH FACEBOOK

LOGIN

RESET

FORGOT PASSWORD?

PASSWORD

EMAIL ADDRESS

SPOTIGORYLOGO

USERNAME

LOGIN WITH FACEBOOK

LOGIN

FORGOT PASSWORD?

PASSWORD

LOGIN

LOGIN - FORGOT PASSWORD

SIGN UP

LOGIN WITH FACEBOOK

CREATE ACCOUNT

FIRST NAME LAST NAME

CHOOSE A USERNAME

CHOOSE A PASSWORD

EMAIL ADDRESS

Consider 3 dots instead of long press for menu.

Dark overlay or blurred photo when share / report options come up.

Press filter once for pre-view. Checkmark / “Okay”

text will appear in filter box, and second press will

apply the filter.

Share options could also be set from “settings” once and applied until changed again in settings (free up space for other options).

Could be icons or text.

If video was recorded, take the user back to a copy of

their video, still editable.

Click on person to see message, “Follow?”

Check indicates that you are following that user. If you click on a user you are already following, the text “follow” changes to “unfollow”

Same action as “Find Friends” when clicking on

profile image.

SETTINGSSEARCH LOGOUT - ACCEPT

CHANGE UN / PW / EMAIL / ABT

HOME SCREEN

COMMENTS / FAVORITES

SINGLE PHOTO

HOLD DOWN PHOTO CAMERA - RECORD

LOGO 3

FLASH ON VID / CAMTAKEPIC

GRID ?FRONTCAMERA

AT&T 11:56 AM

LOGO 3

CAPTION

LOCATION (necessary?)

FBOOK TWITTER

DONE

EMAIL

FBOOK TWITTER EMAIL

TTER EMAIL

[email protected]

LOGO 3

HOME FRNDS CMRA FAVS PRFL

X MINS AGO

USERPIC

USERNAMEUSER LOCATION

USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.

11 45

REPORT

SHARE

LOGO 3

GRID ?

DELETE

FRONTCAMERA

RECVIDEO

VID / CAM

LOGO

FILTER

3

ROTATE FRAMEBRIGHTEN

FILTER FILTER FILTER

HOME FRNDS CMRA FAVS PRFL

LOGO 3

USERNAMEDallas, TexasA few sentences and up to two lines about the user and their interests.

Following

Following

PICTURES FOLLOWERS FOLLOWING FAVORITES

500 1,241 1,088 226

John SmithDallas, Texas

FollowingJohn SmithDallas, Texas

FollowingJohn SmithDallas, Texas

FollowingJohn SmithDallas, Texas

FollowingJohn SmithDallas, Texas

HOME FRNDS CMRA FAVS PRFL

LOGO 3

USERNAMEDallas, TexasA few sentences and up to two lines about the user and their interests.

Following

PICTURES FOLLOWERS FOLLOWING FAVORITES

500 1,241 1,088 226

FollowingJohn SmithDallas, Texas

FollowJohn SmithDallas, Texas

FollowJohn SmithDallas, Texas

FollowJohn SmithDallas, Texas

FollowJohn SmithDallas, Texas

HOME FRNDS CMRA FAVS PRFL

LOGO 3

USERNAMEDallas, TexasA few sentences and up to two lines about the user and their interests.

Following

PICTURES FOLLOWERS FOLLOWING FAVORITES

500 1,241 1,088 226

LOGO 3

X MINS AGO

USERPIC

USERNAMEUSER LOCATION

USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.

11 45

HOME FRNDS CMRA FAVS PRFL

LOGO 3

HOME FRNDS CMRA FAVS PRFL

USERPIC

USERNAMEUSER COMMENTS GO HERE AND WILL GO HERE ALSO.

USERPIC

USERNAMEUSER COMMENTS GO HERE AND WILL GO HERE ALSO.

USERPIC

USERNAMEUSER COMMENTS GO HERE AND WILL GO HERE ALSO.

USERPIC

USERNAMEUSER COMMENTS GO HERE AND WILL GO HERE ALSO.

COMMENT HERE

LOGO 3

HOME FRNDS CMRA FAVS PRFL

FACEBOOK TWITTER CONTACTS

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAME USERNAME USERNAME

USERNAMELOCATION

FOLLOW

PROFILE

Show x number of likes and x number of com-ments. The rest can be seen by clicking the like or comment button.

LOGO 3

X MINS AGO

USERPIC

USERNAMEUSER LOCATION

USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.USERNAME: USER COMMENTS GO HERE AND WILL TAKE UP 2 LINES MAX.

11 45

HOME FRNDS CMRA FAVS PRFL

HOME FRNDS CMRA FAVS PRFL

USERNAMEDallas, Texas

LOGO 3

A few sentences and up to two lines about the user and their interests.

Following

PICTURES FOLLOWERS FOLLOWING FAVORITES

500 1,241 1,688 226

SPOTIGORYLOGO

Slight parallax move-ment with the logo.

NOTIFICATIONS

LOGO 3

USERNAME has commented on your photo

USERNAME has commented on your photo

USERNAME has commented on your photo

USERNAME has commented on your photo

USERNAME has commented on your photo

USERNAME has commented on your photo

USERNAME

FIND & INVITE FRIENDS

PRIVACY POLICY

TERMS OF USE

SUPPORT TEAM

LOGOUT ACCEPT

LOGO 3

USERNAME

NEW PASSWORD

SAVE CHANGES

CHANGE EMAIL

CHANGE USERNAME

ABOUT ME

FACEBOOK TWITTER

PHOTO PRIVACY PUBLIC

NOTIFICATIONS ON

USERNAME

SAVE CHANGES

CHANGE PASSWORD

CHANGE EMAIL

CHANGE USERNAME

ABOUT ME

FACEBOOK TWITTER

PHOTO PRIVACY PUBLIC

NOTIFICATIONS ON

HOME SCREEN - DRAWER

USERNAME

FIND & INVITE FRIENDS

PRIVACY POLICY

TERMS OF USE

SUPPORT TEAM

LOGOUT

SEARCH

PHOTOSPEOPLE

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAMELOCATION

USERNAME USERNAME USERNAME

SEARCH - PHOTOS

USERNAMEFOLLOWING

SEARCH

PHOTOSPEOPLE

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

USERNAMEFOLLOWING

Dallas, Texas

DRAWER

PROFILE DRAWER DRAWER DRAWER

TAKE PIC

TOGGLE

COMMENTS FAVORITES

HOME SCREEN

2 STATE BUTTON

TOGGLE

TOGGLE

TOGGLE

TOGGLE

TOGGLE

ACCOUNT LOGIN & CREATION

LINKS & LOCATIONS

MAIN APPLICATION

FACEBOOK LOGIN API

FACEBOOK LOGIN API

HOME SCREEN

HOME SCREEN

2 STATE BUTTON

2 STATE BUTTON

BOTTOM BAR OPTIONS

TOGGLES & ACTIONS

LONG PRESS

SPOTAGORY Wirereframes Diagram v1.0

Page 65: 10 Principles for Good Design for Mobile

DIGITAL CADDIES APPWEATHER SCREEN UPDATES | 2013.07.18

LABS

ROBOTO CONDENSED 18 PX #E9E9E9

ROBOTO BOLD CONDENSED 30 PX #E9E9E9

CENTER TEXT

16 PX

40 PX

ROBOTO BOLD CONDENSED 48 PX #E9E9E914 PXROBOTO CONDENSED 30 PX #E9E9E9

ROBOTO BOLD CONDENSED 24 PX #E9E9E9

ROBOTO CONDENSED 24 PX #E9E9E9

40 PX

28 PX

40 PX

32 PX

14 PX

ROBOTO BOLD CONDENSED 160 PX #E9E9E9

44 PX

32 PX

32 PX

42 PX

“TICK” WEATHER ICONS

14 PX

STYLESIZETEXT

Digital Caddies: Spec Sheet

Page 66: 10 Principles for Good Design for Mobile

F R I E ND L Y9. Good design is environmentally

Page 67: 10 Principles for Good Design for Mobile

Design makes an important contribution to the preservation of the environment. It conserves resources and minimizes physical and visual pollution throughout the lifecycle of the product.

Page 68: 10 Principles for Good Design for Mobile

Nike Making

Page 69: 10 Principles for Good Design for Mobile

Nike Making

Page 70: 10 Principles for Good Design for Mobile

Nike Making

Page 71: 10 Principles for Good Design for Mobile

POSS I B L E10. Good design is as little design as

Page 72: 10 Principles for Good Design for Mobile

Clear

Gesture based interactions eliminate the need for superfluous interface elements.

Page 73: 10 Principles for Good Design for Mobile

Connecting Dots