10 principles for good design for mobile
DESCRIPTION
TRANSCRIPT
DES I GN10 principles for good
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.
Vsco
Rdio
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.
Dots
VS.
DotsBubblet
for the wine connoisseur
Plonk
A periodic table of...
WINE
MUSIC
Timbre
LOCAL
DISCOVERY
Could easily be standard/native list screens, but focus on aesthetics makes the interaction with the product more memorable and meaningful.
Timbre Plonk
Jiffy
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.
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.
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...
VS.
...
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
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
FBOOK TWITTER EMAIL
TTER EMAIL
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
FBOOK TWITTER EMAIL
TTER EMAIL
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
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
FBOOK TWITTER EMAIL
TTER EMAIL
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
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
FBOOK TWITTER EMAIL
TTER EMAIL
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
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
FBOOK TWITTER EMAIL
TTER EMAIL
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
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
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
Nike Making
Nike Making
POSS I B L E10. Good design is as little design as
Clear
Gesture based interactions eliminate the need for superfluous interface elements.
Connecting Dots