about iris

smartphone screen showing the number 10

ten guidelines

for mobile app design

i. flow

purpose: make things feel more approachable

disregard the idea of needing "layers"

just fill the screen with content

notes app - home screen mockup

ii. blurry transitions

purpose: give the impression of a natural flow of information

navigation should come naturally, not explicitly

use gaussian blurs for transitions

iii. the grid

purpose: make sizing and spacing feel "just right"

use multiples of 7 for sizing and margins

carefully contain the content

notes app - outlined margins
music app - queue

iv. reachability

purpose: make importance correlate with ease of accessing

invert the traditional top-to-bottom model of relevancy

put the most important stuff near the bottom

v. the action bar

purpose: anchor key actions in a predictable location

use three or four "big" icons for "big" actions

don't include a back button

action bar mock up
music app - now playing mock up

vi. roundness

purpose: reduce any feelings of rigidness

use circles, or at least round corners

avoid sharp angles

vii. careful colors

purpose: let colors from visual content stand out

use color sparingly for highly visual apps

direct focus towards the content

music app - home mock up
messaging app - conversation mock up

viii. pretty text

purpose: make necessary text feel contextually novel

use a sans-serif font like source sans pro

keep text short and readable

ix. nuance

purpose: don’t force thoughts about the design

be appreciable but mostly upon analysis

avoid jarring uniqueness

messaging app - home mock up
three mock ups for notes, music, and messaging apps

X. BREAK THE RULES

WARNING: THESE ARE MERELY GUIDELINES!

Go against them if it means better design.

Ask: how do you design consistently?

about iris →