Mobile Design in the Weeds @MobdUP
description
Transcript of Mobile Design in the Weeds @MobdUP
![Page 1: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/1.jpg)
@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
![Page 2: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/2.jpg)
@philohme mobilemojitos.com
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
![Page 3: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/3.jpg)
@philohme mobilemojitos.com
My Mobile Journey3
Ericsson R520m
Motorola RAZR
Nokia 6800Sony Ericsson T68i
Motorola A630 Nokia E61i
![Page 4: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/4.jpg)
@philohme mobilemojitos.com
My Mobile Journey (cont’d)4
iPhone 3G
HTC One X
iPhone 4
Samsung Galaxy SIII iPhone 5
![Page 5: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/5.jpg)
@philohme mobilemojitos.com
Client List Screen
5
![Page 6: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/6.jpg)
@philohme mobilemojitos.com
Changes E-File Status View(Swipe also changes)
Toggles Individual On / Off
Toggles Business On / Off
Activates Search
Activates Quick-Contact Views
6
![Page 7: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/7.jpg)
@philohme mobilemojitos.com
7
![Page 8: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/8.jpg)
@philohme mobilemojitos.com
Standard Quick-Contact Screen
8
![Page 9: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/9.jpg)
@philohme mobilemojitos.com
Menu Button Pressed
9
![Page 10: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/10.jpg)
@philohme mobilemojitos.com
Refresh button Settings button
10
![Page 11: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/11.jpg)
@philohme mobilemojitos.com
11
![Page 12: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/12.jpg)
@philohme mobilemojitos.com
Search Activated
12
![Page 13: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/13.jpg)
@philohme mobilemojitos.com
Voice dictation button
13
![Page 14: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/14.jpg)
@philohme mobilemojitos.com
14
![Page 15: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/15.jpg)
@philohme mobilemojitos.com
Search Query Added
15
![Page 16: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/16.jpg)
@philohme mobilemojitos.com
Clear Query button
16
![Page 17: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/17.jpg)
@philohme mobilemojitos.com
Client Overview Screen
17
![Page 18: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/18.jpg)
@philohme mobilemojitos.com
18
![Page 19: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/19.jpg)
@philohme mobilemojitos.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
![Page 20: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/20.jpg)
@philohme mobilemojitos.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
![Page 21: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/21.jpg)
@philohme mobilemojitos.com
More Weeds and the dirty work of mobile21
![Page 22: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/22.jpg)
@philohme mobilemojitos.com
22Launch Image (aka Splash Screen)
![Page 23: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/23.jpg)
@philohme mobilemojitos.com
22Launch Image (aka Splash Screen)
![Page 24: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/24.jpg)
@philohme mobilemojitos.com
Launch Image (aka Splash Screen) 23
![Page 25: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/25.jpg)
@philohme mobilemojitos.com
Launch Image (aka Splash Screen)24
![Page 26: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/26.jpg)
@philohme mobilemojitos.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
![Page 27: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/27.jpg)
@philohme mobilemojitos.com
Ratings and Reviews26
![Page 28: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/28.jpg)
@philohme mobilemojitos.com
Ratings and Reviews26
![Page 29: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/29.jpg)
@philohme mobilemojitos.com
Ratings and Reviews27
![Page 30: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/30.jpg)
@philohme mobilemojitos.com
Pop Quiz: Android Versions28
![Page 31: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/31.jpg)
@philohme mobilemojitos.com
Pop Quiz: Android Versions28
![Page 32: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/32.jpg)
@philohme mobilemojitos.com
Pop Quiz: Android Versions28
![Page 33: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/33.jpg)
@philohme mobilemojitos.com
Pop Quiz: Android Versions28
![Page 34: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/34.jpg)
@philohme mobilemojitos.com
Pop Quiz: Android Versions28
![Page 35: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/35.jpg)
@philohme mobilemojitos.com
Pop Quiz: Android Versions28
![Page 36: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/36.jpg)
@philohme mobilemojitos.com
Pop Quiz: Android Versions28
![Page 37: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/37.jpg)
@philohme mobilemojitos.com
Pop Quiz: Android Versions28
![Page 38: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/38.jpg)
@philohme mobilemojitos.com
Pop Quiz: Android Versions28
![Page 39: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/39.jpg)
@philohme mobilemojitos.com
iOS Human Interface Guidelines (HIG)29
http://bit.ly/higapple
![Page 40: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/40.jpg)
@philohme mobilemojitos.com
Android Design Guidelines30
http://developer.android.com/design
![Page 41: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/41.jpg)
@philohme mobilemojitos.com
31
![Page 42: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/42.jpg)
@philohme mobilemojitos.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
![Page 43: Mobile Design in the Weeds @MobdUP](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c82d884a795927518b457e/html5/thumbnails/43.jpg)
@philohme mobilemojitos.com
The mobile design uprising
Thank You!
33
Video at bit.ly/mobdupweeds