@philohme mobilemojitos.com
The mobile design uprising
Phil Ohme 27 July 2013
Design Strategist & Interaction Designer, In...
@philohme mobilemojitos.com
What do you want to get out of this workshop?
• What are some words you use when in the “weeds...
@philohme mobilemojitos.com
My Mobile Journey
3
Ericsson R520m
Motorola RAZR
Nokia 6800Sony Ericsson T68i
Motorola A630 No...
@philohme mobilemojitos.com
My Mobile Journey (cont’d)
4
iPhone 3G
HTC One X
iPhone 4
Samsung Galaxy SIII iPhone 5
@philohme mobilemojitos.com
Client List Screen
5
@philohme mobilemojitos.com
Changes E-File Status View
(Swipe also changes)
Toggles Individual
On / Off
Toggles Business
O...
@philohme mobilemojitos.com
7
@philohme mobilemojitos.com
Standard Quick-Contact Screen
8
@philohme mobilemojitos.com
Menu Button Pressed
9
@philohme mobilemojitos.com
Refresh button Settings button
10
@philohme mobilemojitos.com
11
@philohme mobilemojitos.com
Search Activated
12
@philohme mobilemojitos.com
Voice dictation button
13
@philohme mobilemojitos.com
14
@philohme mobilemojitos.com
Search Query Added
15
@philohme mobilemojitos.com
Clear Query button
16
@philohme mobilemojitos.com
Client Overview Screen
17
@philohme mobilemojitos.com
18
@philohme mobilemojitos.com
What the heck is “dp” though?
• Density-independent pixel (dp)
• A virtual pixel unit that you...
@philohme mobilemojitos.com
but why?
• To make objects appear roughly the same size on various
screen sizes
• A set of fou...
@philohme mobilemojitos.com
More Weeds and the dirty work of mobile
21
@philohme mobilemojitos.com
22
Launch Image (aka Splash Screen)
@philohme mobilemojitos.com
22
Launch Image (aka Splash Screen)
@philohme mobilemojitos.com
Launch Image (aka Splash Screen)
23
@philohme mobilemojitos.com
Launch Image (aka Splash Screen)
24
@philohme mobilemojitos.com
App Icons / Launcher Icons
• iOS - name it whatever you want
• Android - must be the same name...
@philohme mobilemojitos.com
Ratings and Reviews
26
@philohme mobilemojitos.com
Ratings and Reviews
26
@philohme mobilemojitos.com
Ratings and Reviews
27
@philohme mobilemojitos.com
Pop Quiz: Android Versions
28
@philohme mobilemojitos.com
Pop Quiz: Android Versions
28
@philohme mobilemojitos.com
Pop Quiz: Android Versions
28
@philohme mobilemojitos.com
Pop Quiz: Android Versions
28
@philohme mobilemojitos.com
Pop Quiz: Android Versions
28
@philohme mobilemojitos.com
Pop Quiz: Android Versions
28
@philohme mobilemojitos.com
Pop Quiz: Android Versions
28
@philohme mobilemojitos.com
Pop Quiz: Android Versions
28
@philohme mobilemojitos.com
Pop Quiz: Android Versions
28
@philohme mobilemojitos.com
iOS Human Interface Guidelines (HIG)
29
http://bit.ly/higapple
@philohme mobilemojitos.com
Android Design Guidelines
30
http://developer.android.com/design
@philohme mobilemojitos.com
31
@philohme mobilemojitos.com
In Summation
• iOS and Android matter
• Specs & getting into the nitty-gritty
• iOS uses pixel...
@philohme mobilemojitos.com
The mobile design uprising
Thank You!
33
Video at bit.ly/mobdupweeds
Upcoming SlideShare
Loading in …5
×

Mobile Design in the Weeds @MobdUP

679 views

Published on

From The Mobile Design Uprising (http://mobdup.com) Conference at San Diego State University -- Video of this talk (with these slides interwoven) is available at http://bit.ly/mobdupweeds -- From when the Apple AppStore first launched back in 2008, we have had the official HIG (Human Interface Guidelines, http://bit.ly/higapple) for mobile apps. It told us what to do to ensure that your app would not only pass Apple screeners to be on the AppStore, but also what really makes a killer app -- so killer that Apple would think about featuring it. But what gems are hidden in the HIG? It is after all a daunting 219 pages. Do you know the mistake 95% of companies make in regards to the launch image (aka "splash screen") in iOS apps)? Do you know exactly how many icons and how many pixels in dimension need to be provided just to submit an app? In the last year, Google has published their version of the HIG, called Android Design http://developer.android.com/design, that goes a long way towards taming the "wild west" of Android apps. Is it enough? What's a "dp" (density-independent pixel) and what does that mean for the actual pixels of assets I need to submit to Google Play for my app? -- Besides all of that, what even makes a good mobile icon? What metaphor should I use for navigating through my app? Can I design the next Instagram for Video superstar app? Get the answers to all of these questions and more at the "Mobile Design in the Weeds" workshop at Mob'd Up with @philohme. -- 27 July 2013

Published in: Design, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
679
On SlideShare
0
From Embeds
0
Number of Embeds
137
Actions
Shares
0
Downloads
42
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile Design in the Weeds @MobdUP

  1. 1. @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
  2. 2. @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
  3. 3. @philohme mobilemojitos.com My Mobile Journey 3 Ericsson R520m Motorola RAZR Nokia 6800Sony Ericsson T68i Motorola A630 Nokia E61i
  4. 4. @philohme mobilemojitos.com My Mobile Journey (cont’d) 4 iPhone 3G HTC One X iPhone 4 Samsung Galaxy SIII iPhone 5
  5. 5. @philohme mobilemojitos.com Client List Screen 5
  6. 6. @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
  7. 7. @philohme mobilemojitos.com 7
  8. 8. @philohme mobilemojitos.com Standard Quick-Contact Screen 8
  9. 9. @philohme mobilemojitos.com Menu Button Pressed 9
  10. 10. @philohme mobilemojitos.com Refresh button Settings button 10
  11. 11. @philohme mobilemojitos.com 11
  12. 12. @philohme mobilemojitos.com Search Activated 12
  13. 13. @philohme mobilemojitos.com Voice dictation button 13
  14. 14. @philohme mobilemojitos.com 14
  15. 15. @philohme mobilemojitos.com Search Query Added 15
  16. 16. @philohme mobilemojitos.com Clear Query button 16
  17. 17. @philohme mobilemojitos.com Client Overview Screen 17
  18. 18. @philohme mobilemojitos.com 18
  19. 19. @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
  20. 20. @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
  21. 21. @philohme mobilemojitos.com More Weeds and the dirty work of mobile 21
  22. 22. @philohme mobilemojitos.com 22 Launch Image (aka Splash Screen)
  23. 23. @philohme mobilemojitos.com 22 Launch Image (aka Splash Screen)
  24. 24. @philohme mobilemojitos.com Launch Image (aka Splash Screen) 23
  25. 25. @philohme mobilemojitos.com Launch Image (aka Splash Screen) 24
  26. 26. @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
  27. 27. @philohme mobilemojitos.com Ratings and Reviews 26
  28. 28. @philohme mobilemojitos.com Ratings and Reviews 26
  29. 29. @philohme mobilemojitos.com Ratings and Reviews 27
  30. 30. @philohme mobilemojitos.com Pop Quiz: Android Versions 28
  31. 31. @philohme mobilemojitos.com Pop Quiz: Android Versions 28
  32. 32. @philohme mobilemojitos.com Pop Quiz: Android Versions 28
  33. 33. @philohme mobilemojitos.com Pop Quiz: Android Versions 28
  34. 34. @philohme mobilemojitos.com Pop Quiz: Android Versions 28
  35. 35. @philohme mobilemojitos.com Pop Quiz: Android Versions 28
  36. 36. @philohme mobilemojitos.com Pop Quiz: Android Versions 28
  37. 37. @philohme mobilemojitos.com Pop Quiz: Android Versions 28
  38. 38. @philohme mobilemojitos.com Pop Quiz: Android Versions 28
  39. 39. @philohme mobilemojitos.com iOS Human Interface Guidelines (HIG) 29 http://bit.ly/higapple
  40. 40. @philohme mobilemojitos.com Android Design Guidelines 30 http://developer.android.com/design
  41. 41. @philohme mobilemojitos.com 31
  42. 42. @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
  43. 43. @philohme mobilemojitos.com The mobile design uprising Thank You! 33 Video at bit.ly/mobdupweeds

×