Mobile Design in the Weeds @MobdUP

@philohme mobilemojitos.com
The mobile design uprising
Phil Ohme 27 July 2013
Design Strategist & Interaction Designer, Intuit
Mobile Design
in the
1
Video at 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

My Mobile Journey
3
Ericsson R520m
Motorola RAZR
Nokia 6800Sony Ericsson T68i
Motorola A630 Nokia E61i

My Mobile Journey (cont’d)
4
iPhone 3G
HTC One X
iPhone 4
Samsung Galaxy SIII iPhone 5

Client List Screen
5

Changes E-File Status View
(Swipe also changes)
Toggles Individual
On / Off
Toggles Business
On / Off
Activates Search
Activates Quick-
Contact Views
6

Standard Quick-Contact Screen
8

Menu Button Pressed
9

Refresh button Settings button
10

11

Search Activated
12

Voice dictation button
13

14

Search Query Added
15

Clear Query button
16

Client Overview Screen
17

18

What the heck is “dp” though?
• Density-independent pixel (dp)
• A virtual pixel unit that you should use when deﬁning 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 deﬁning your application's UI, to ensure
proper display of your UI on screens with different densities.
19

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 (ﬁgures are not
exact):
20
http://developer.android.com/guide/practices/screens_support.html

More Weeds and the dirty work of mobile
21

22
Launch Image (aka Splash Screen)

23

24

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

Ratings and Reviews
26

Ratings and Reviews
27

Pop Quiz: Android Versions
28

iOS Human Interface Guidelines (HIG)
29
http://bit.ly/higapple

Android Design Guidelines
30
http://developer.android.com/design

31

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

The mobile design uprising
Thank You!
33
Video at bit.ly/mobdupweeds

Mobile Design in the Weeds @MobdUP

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (11)

Último

Último (20)

Mobile Design in the Weeds @MobdUP