Mobile Design in the Weeds @MobdUP

@philohme mobilemojitos.com

The mobile design uprising

Phil Ohme 27 July 2013Design Strategist & Interaction Designer, Intuit

Mobile Designin the

1

Video at bit.ly/mobdupweeds

http://twitter.com/philohme


http://mobilemojitos.com/


http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://bit.ly/mobdupweeds

http://bit.ly/mobdupweeds


What do you want to get out of this workshop?

• What are some words you use when in the “weeds”?• Pixels

• AppStore submission

• AppStore rejection

• Detailed horror stories

• Platform use of audience (phone):• iPhone - 90%

• Android - 10%

• Windows Phone - 0%

• Blackberry - 0%

• Feature Phone - 0.01% (1 person)

2





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


My Mobile Journey3

Ericsson R520m

Motorola RAZR

Nokia 6800Sony Ericsson T68i

Motorola A630 Nokia E61i





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


My Mobile Journey (cont’d)4

iPhone 3G

HTC One X

iPhone 4

Samsung Galaxy SIII iPhone 5





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


Client List Screen

5





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


Changes E-File Status View(Swipe also changes)

Toggles Individual On / Off

Toggles Business On / Off

Activates Search

Activates Quick-Contact Views

6





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


7





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


Standard Quick-Contact Screen

8





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


Menu Button Pressed

9





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


Refresh button Settings button

10





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


11





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


Search Activated

12





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


Voice dictation button

13





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


14





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


Search Query Added

15





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


Clear Query button

16





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


Client Overview Screen

17





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


18





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


What the heck is “dp” though?

• Density-independent pixel (dp)

• A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.

• The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities.

19





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


but why?• To make objects appear roughly the same size on various

screen sizes

• A set of four generalized sizes: small, normal, large, xlarge

• A set of four generalized densities: ldpi (low), mdpi (medium), hdpi (high), xhdpi (extra high)

• Illustration of how Android roughly maps actual sizes and densities to generalized sizes and densities (figures are not exact):

20

http://developer.android.com/guide/practices/screens_support.html





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://developer.android.com/design/index.html#





More Weeds and the dirty work of mobile21





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


22Launch Image (aka Splash Screen)








http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


22Launch Image (aka Splash Screen)









Launch Image (aka Splash Screen) 23





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


Launch Image (aka Splash Screen)24





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


App Icons / Launcher Icons

• iOS - name it whatever you want

• Android - must be the same name (just in different folders)• Over-invest• Don’t reuse your iOS icon for Android• Same but different

25





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


Ratings and Reviews26





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/







http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/







http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


Pop Quiz: Android Versions28





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/







http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/







http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/







http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/







http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/







http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/







http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/







http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/







http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


iOS Human Interface Guidelines (HIG)29

http://bit.ly/higapple





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/




Android Design Guidelines30

http://developer.android.com/design





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/




31





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


In Summation

• iOS and Android matter• Specs & getting into the nitty-gritty• iOS uses pixels (px)

• Android uses density independent pixels (dp)

• Don’t make a splash, use natural launch images• The app icon - over-invest, for each platform• A better way for getting Ratings and Reviews• Android version numbers and “Tasty Treat” nicknames• User Interface Guidelines• Apple HIG

• Android Design

• Flat vs. Deep, Skeuomorphic vs. Stylized

32





http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/

http://mobdup.com/


The mobile design uprising

Thank You!

33

Video at bit.ly/mobdupweeds