10 principles for good design for mobile

DES I GN10 principles for good

I N NOVAT I V E1. Good design is

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.

Facebook

Feedly

Facebook Vsco Rdio Feedly

iOS 7 Native Photos

iOS 7 Native Calendar

US E FU L2. Good design makes a product

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.

Clear hierarchy of information, most important content front and center

Consistent size, stroke weightYahoo! Weather

Concise and accurate secondary information

Yahoo! Weather

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

Google Now

Weather conditions available to golfers at all times.

Digital Caddies

Chat with other golf carts and staff at any time.

A ES TH E T I C3. Good design is

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.

DotsBubblet

for the wine connoisseur

A periodic table of...

Timbre

DISCOVERY

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

Timbre Plonk

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

4. Good design makes a product

UNDERSTANDAB L E

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

iMessages

Speech bubble graphic convention borrowed from comics is universally understood.

“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

UNOBTRUS I V E5. Good design is

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.

SimpleAndroid Notifications

Simple

HONEST6. Good design is

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.

VS.iOS 7 iOS 6

uh oh...

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

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

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.

Minecraft

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

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

PROFILE - FOLLOWERS PROFILE - FOLLOWING PROFILE - FAVORITES

CHOOSE FILTER

CAMERA - CAPTION / SHARE

VIDEO - RECORDFIND FRIENDS (opt 2)

PROFILE - PICTURES

SPLASH

SPOTIGORYLOGO

SIGN UP

USERNAME

LOGIN WITH FACEBOOK

FORGOT PASSWORD?

PASSWORD

EMAIL ADDRESS

SPOTIGORYLOGO

USERNAME

LOGIN WITH FACEBOOK

FORGOT PASSWORD?

PASSWORD

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

FBOOK TWITTER EMAIL

TTER EMAIL

EMAIL@GMAIL.COMEMAIL

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.

REPORT

AT&T 11:56 AM

LOGO 3

GRID ?

DELETE

FRONTCAMERA

RECVIDEO

VID / CAM

AT&T 11:56 AM

FILTER

ROTATE FRAMEBRIGHTEN

FILTER FILTER FILTER

AT&T 11:56 AM

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

John SmithDallas, Texas

FollowingJohn SmithDallas, Texas

AT&T 11:56 AM

LOGO 3

Following

500 1,241 1,088 226

FollowJohn SmithDallas, Texas

AT&T 11:56 AM

LOGO 3

Following

500 1,241 1,088 226

AT&T 11:56 AM

LOGO 3

X MINS AGO

USERPIC

AT&T 11:56 AM

LOGO 3

USERPIC

USERNAMEUSER COMMENTS GO HERE AND WILL GO HERE ALSO.

USERPIC

COMMENT HERE

AT&T 11:56 AM

LOGO 3

FACEBOOK TWITTER CONTACTS

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

AT&T 11:56 AM

USERNAMEDallas, Texas

LOGO 3

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

Following

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

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

NOTIFICATIONS ON

HOME SCREEN - DRAWER

AT&T 11:56 AM

USERNAME

PRIVACY POLICY

TERMS OF USE

SUPPORT TEAM

LOGOUT

SEARCH

AT&T 11:56 AM

PHOTOSPEOPLE

USERNAMELOCATION

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

ACCOUNT LOGIN & CREATION

LINKS & LOCATIONS

MAIN APPLICATION

FACEBOOK LOGIN API

HOME SCREEN

2 STATE BUTTON

BOTTOM BAR OPTIONS

TOGGLES & ACTIONS

LONG PRESS

SPOTAGORY Wirereframes Diagram v1.0

CHOOSE FILTER

PROFILE - PICTURES

SPLASH

SPOTIGORYLOGO

SIGN UP

USERNAME

LOGIN WITH FACEBOOK

FORGOT PASSWORD?

PASSWORD

EMAIL ADDRESS

SPOTIGORYLOGO

USERNAME

LOGIN WITH FACEBOOK

FORGOT PASSWORD?

PASSWORD

SIGN UP

LOGIN WITH FACEBOOK

CREATE ACCOUNT

CHOOSE A USERNAME

CHOOSE A PASSWORD

EMAIL ADDRESS

apply the filter.

profile image.

HOME SCREEN

SINGLE PHOTO

LOGO 3

GRID ?FRONTCAMERA

LOGO 3

CAPTION

FBOOK TWITTER

FBOOK TWITTER EMAIL

TTER EMAIL

AT&T 11:56 AM

LOGO 3

X MINS AGO

USERPIC

REPORT

LOGO 3

GRID ?

DELETE

FRONTCAMERA

RECVIDEO

VID / CAM

FILTER

LOGO 3

Following

500 1,241 1,088 226

LOGO 3

Following

500 1,241 1,088 226

LOGO 3

Following

500 1,241 1,088 226

AT&T 11:56 AM

LOGO 3

X MINS AGO

USERPIC

AT&T 11:56 AM

LOGO 3

USERPIC

COMMENT HERE

AT&T 11:56 AM

LOGO 3

USERNAMELOCATION

FOLLOW

PROFILE

LOGO 3

X MINS AGO

USERPIC

LOGO 3

Following

500 1,241 1,688 226

SPOTIGORYLOGO

NOTIFICATIONS

LOGO 3

AT&T 11:56 AM

USERNAME

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

NOTIFICATIONS ON

AT&T 11:56 AM

USERNAME

SAVE CHANGES

CHANGE PASSWORD

CHANGE EMAIL

CHANGE USERNAME

ABOUT ME

FACEBOOK TWITTER

NOTIFICATIONS ON

AT&T 11:56 AM

USERNAME

PRIVACY POLICY

TERMS OF USE

SUPPORT TEAM

LOGOUT

SEARCH

PHOTOSPEOPLE

USERNAMELOCATION

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

TAKE PIC

TOGGLE

COMMENTS FAVORITES

HOME SCREEN

2 STATE BUTTON

TOGGLE

LINKS & LOCATIONS

MAIN APPLICATION

FACEBOOK LOGIN API

HOME SCREEN

2 STATE BUTTON

BOTTOM BAR OPTIONS

TOGGLES & ACTIONS

LONG PRESS

CHOOSE FILTER

PROFILE - PICTURES

SPLASH

SPOTIGORYLOGO

SIGN UP

USERNAME

LOGIN WITH FACEBOOK

FORGOT PASSWORD?

PASSWORD

EMAIL ADDRESS

SPOTIGORYLOGO

USERNAME

LOGIN WITH FACEBOOK

FORGOT PASSWORD?

PASSWORD

SIGN UP

LOGIN WITH FACEBOOK

CREATE ACCOUNT

CHOOSE A USERNAME

CHOOSE A PASSWORD

EMAIL ADDRESS

apply the filter.

profile image.

HOME SCREEN

SINGLE PHOTO

LOGO 3

GRID ?FRONTCAMERA

LOGO 3

CAPTION

FBOOK TWITTER

FBOOK TWITTER EMAIL

TTER EMAIL

AT&T 11:56 AM

LOGO 3

X MINS AGO

USERPIC

REPORT

LOGO 3

GRID ?

DELETE

FRONTCAMERA

RECVIDEO

VID / CAM

FILTER

AT&T 11:56 AM

LOGO 3

Following

500 1,241 1,088 226

AT&T 11:56 AM

LOGO 3

Following

500 1,241 1,088 226

LOGO 3

Following

500 1,241 1,088 226

AT&T 11:56 AM

LOGO 3

X MINS AGO

USERPIC

AT&T 11:56 AM

LOGO 3

USERPIC

COMMENT HERE

AT&T 11:56 AM

LOGO 3

USERNAMELOCATION

FOLLOW

PROFILE

AT&T 11:56 AM

LOGO 3

X MINS AGO

USERPIC

AT&T 11:56 AM

LOGO 3

Following

500 1,241 1,688 226

SPOTIGORYLOGO

NOTIFICATIONS

LOGO 3

AT&T 11:56 AM

USERNAME

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

NOTIFICATIONS ON

AT&T 11:56 AM

USERNAME

SAVE CHANGES

CHANGE PASSWORD

CHANGE EMAIL

CHANGE USERNAME

ABOUT ME

FACEBOOK TWITTER

NOTIFICATIONS ON

AT&T 11:56 AM

USERNAME

PRIVACY POLICY

TERMS OF USE

SUPPORT TEAM

LOGOUT

SEARCH

AT&T 11:56 AM

PHOTOSPEOPLE

USERNAMELOCATION

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

TAKE PIC

TOGGLE

COMMENTS FAVORITES

HOME SCREEN

2 STATE BUTTON

TOGGLE

LINKS & LOCATIONS

MAIN APPLICATION

FACEBOOK LOGIN API

HOME SCREEN

2 STATE BUTTON

BOTTOM BAR OPTIONS

TOGGLES & ACTIONS

LONG PRESS

CHOOSE FILTER

PROFILE - PICTURES

SPLASH

SPOTIGORYLOGO

SIGN UP

USERNAME

LOGIN WITH FACEBOOK

FORGOT PASSWORD?

PASSWORD

EMAIL ADDRESS

SPOTIGORYLOGO

USERNAME

LOGIN WITH FACEBOOK

FORGOT PASSWORD?

PASSWORD

SIGN UP

LOGIN WITH FACEBOOK

CREATE ACCOUNT

CHOOSE A USERNAME

CHOOSE A PASSWORD

EMAIL ADDRESS

apply the filter.

profile image.

HOME SCREEN

SINGLE PHOTO

LOGO 3

GRID ?FRONTCAMERA

LOGO 3

CAPTION

FBOOK TWITTER

FBOOK TWITTER EMAIL

TTER EMAIL

AT&T 11:56 AM

LOGO 3

X MINS AGO

USERPIC

REPORT

LOGO 3

GRID ?

DELETE

FRONTCAMERA

RECVIDEO

VID / CAM

FILTER

LOGO 3

Following

500 1,241 1,088 226

LOGO 3

Following

500 1,241 1,088 226

LOGO 3

Following

500 1,241 1,088 226

LOGO 3

X MINS AGO

USERPIC

AT&T 11:56 AM

LOGO 3

USERPIC

COMMENT HERE

AT&T 11:56 AM

LOGO 3

USERNAMELOCATION

FOLLOW

PROFILE

LOGO 3

X MINS AGO

USERPIC

LOGO 3

Following

500 1,241 1,688 226

SPOTIGORYLOGO

NOTIFICATIONS

LOGO 3

AT&T 11:56 AM

USERNAME

PRIVACY POLICY

TERMS OF USE

SUPPORT TEAM

LOGOUT ACCEPT

LOGO 3

USERNAME

NEW PASSWORD

SAVE CHANGES

CHANGE EMAIL

CHANGE USERNAME

ABOUT ME

FACEBOOK TWITTER

NOTIFICATIONS ON

AT&T 11:56 AM

USERNAME

SAVE CHANGES

CHANGE PASSWORD

CHANGE EMAIL

CHANGE USERNAME

ABOUT ME

FACEBOOK TWITTER

NOTIFICATIONS ON

AT&T 11:56 AM

USERNAME

PRIVACY POLICY

TERMS OF USE

SUPPORT TEAM

LOGOUT

SEARCH

PHOTOSPEOPLE

USERNAMELOCATION

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

TAKE PIC

TOGGLE

COMMENTS FAVORITES

HOME SCREEN

2 STATE BUTTON

TOGGLE

LINKS & LOCATIONS

MAIN APPLICATION

FACEBOOK LOGIN API

HOME SCREEN

2 STATE BUTTON

BOTTOM BAR OPTIONS

TOGGLES & ACTIONS

LONG PRESS

CHOOSE FILTER

PROFILE - PICTURES

SPLASH

SPOTIGORYLOGO

SIGN UP

USERNAME

LOGIN WITH FACEBOOK

FORGOT PASSWORD?

PASSWORD

EMAIL ADDRESS

SPOTIGORYLOGO

USERNAME

LOGIN WITH FACEBOOK

FORGOT PASSWORD?

PASSWORD

SIGN UP

LOGIN WITH FACEBOOK

CREATE ACCOUNT

CHOOSE A USERNAME

CHOOSE A PASSWORD

EMAIL ADDRESS

apply the filter.

profile image.

HOME SCREEN

SINGLE PHOTO

LOGO 3

GRID ?FRONTCAMERA

AT&T 11:56 AM

LOGO 3

CAPTION

FBOOK TWITTER

FBOOK TWITTER EMAIL

TTER EMAIL

LOGO 3

X MINS AGO

USERPIC

REPORT

LOGO 3

GRID ?

DELETE

FRONTCAMERA

RECVIDEO

VID / CAM

FILTER

LOGO 3

Following

500 1,241 1,088 226

LOGO 3

Following

500 1,241 1,088 226

LOGO 3

Following

500 1,241 1,088 226

LOGO 3

X MINS AGO

USERPIC

LOGO 3

USERPIC

COMMENT HERE

LOGO 3

USERNAMELOCATION

FOLLOW

PROFILE

LOGO 3

X MINS AGO

USERPIC

LOGO 3

Following

500 1,241 1,688 226

SPOTIGORYLOGO

NOTIFICATIONS

LOGO 3

USERNAME

PRIVACY POLICY

TERMS OF USE

SUPPORT TEAM

LOGOUT ACCEPT

LOGO 3

USERNAME

NEW PASSWORD

SAVE CHANGES

CHANGE EMAIL

CHANGE USERNAME

ABOUT ME

FACEBOOK TWITTER

NOTIFICATIONS ON

USERNAME

SAVE CHANGES

CHANGE PASSWORD

CHANGE EMAIL

CHANGE USERNAME

ABOUT ME

FACEBOOK TWITTER

NOTIFICATIONS ON

USERNAME

PRIVACY POLICY

TERMS OF USE

SUPPORT TEAM

LOGOUT

SEARCH

PHOTOSPEOPLE

USERNAMELOCATION

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

TAKE PIC

TOGGLE

COMMENTS FAVORITES

HOME SCREEN

2 STATE BUTTON

TOGGLE

LINKS & LOCATIONS

MAIN APPLICATION

FACEBOOK LOGIN API

HOME SCREEN

2 STATE BUTTON

BOTTOM BAR OPTIONS

TOGGLES & ACTIONS

LONG PRESS

DIGITAL CADDIES APPWEATHER SCREEN UPDATES | 2013.07.18

ROBOTO CONDENSED 18 PX #E9E9E9

ROBOTO BOLD CONDENSED 30 PX #E9E9E9

CENTER TEXT

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

ROBOTO CONDENSED 24 PX #E9E9E9

“TICK” WEATHER ICONS

STYLESIZETEXT

Digital Caddies: Spec Sheet

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

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.

Nike Making

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

Gesture based interactions eliminate the need for superfluous interface elements.

Connecting Dots

10 principles for good design for mobile

password email

forgot password

facebook create

john smith

password login

good design

username find

find friends

Technology

good mobile messaging good mobile control for microsoft...

principles of good work design€¦ · through good design....

principles of good web design

good practice principles

principles of good corporate governance principles of good...

principles of good print design

good mobile messaging server version 7.2.3 good mobile...

10 principles for good design

good mobile messaging server version 8.1.6 good mobile

principles of good logo design

the principles of good programming

principles good

good governance : concepts and principles

going mobile: mobile application design principles for adf...

principles of good design

2013 good design is good business - mobile

22695 principles of good practice

what is the glp?. glp = good laboratory practice glp = good...

mobile app design principles

oop principles a good book