Mobile beneath-the-sheets

514 views

Published on

Rodney walks us through the mobile design processor from paper mockups to implemented design. Along way we learn tips, standards, nomenclature and some great resources

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
514
On SlideShare
0
From Embeds
0
Number of Embeds
40
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile beneath-the-sheets

  1. 1. Mobile Design: Rodney Azarmi UX Designer, Mobile rodney@mylife.com Beneath the Sheets Monday, July 22, 13
  2. 2. Paper Prototypes1 Small investment in time Easy to edit and change Allows group participation Cut and paste user flows Monday, July 22, 13
  3. 3. Paper Prototypes1 Small investment in time Easy to edit and change Allows group participation Cut and paste user flows Monday, July 22, 13
  4. 4. Monday, July 22, 13
  5. 5. Wireframe to Pixels2 Monday, July 22, 13
  6. 6. Baseline 320x480 - 1x 640x960 - 2x Monday, July 22, 13
  7. 7. Use Vectors & Smart Objects Monday, July 22, 13
  8. 8. 44 Points iOS - minimum 48 DP Android - minimum Finger Tip Sized 7-9 mm Design for Touch 44 points Monday, July 22, 13
  9. 9. Change Size based on Use 110 points Use larger controls for better UX Monday, July 22, 13
  10. 10. Style Appropriately Entertainment Utility HighlyVisual Fun Immersive Useful Efficient Reliable Monday, July 22, 13
  11. 11. PreviewYour Design Preview in real time.Walk around with your work. Monday, July 22, 13
  12. 12. Rapid Prototype3 Shows interaction and flow Short development time Easy to Distribute Monday, July 22, 13
  13. 13. Mobile UI Lingo4 Understand the terminology How elements work developer.android.com developer.apple.com Portkit: UX Translation Monday, July 22, 13
  14. 14. Mobile UI Lingo4 Understand the terminology How elements work developer.android.com developer.apple.com Portkit: UX Translation Monday, July 22, 13
  15. 15. Mobile UI Lingo4 Understand the terminology How elements work developer.android.com developer.apple.com Portkit: UX Translation Monday, July 22, 13
  16. 16. Mobile UI Lingo4 Understand the terminology How elements work developer.android.com developer.apple.com Portkit: UX Translation Monday, July 22, 13
  17. 17. Mobile UI Lingo4 Understand the terminology How elements work developer.android.com developer.apple.com Portkit: UX Translation Monday, July 22, 13
  18. 18. Phone Densities5 iOS 1x & 2X - retina Android - 1x, 1.5x, 2.0x, 3.0x MDPI, HDPI, XHDPI, XXHDPI Monday, July 22, 13
  19. 19. Phone Densities iPhone, 3G, 3GS 480 pixels 320 pixels 960 pixels 640 pixels iPhone 4 & 4S Monday, July 22, 13
  20. 20. iPhone 5 Screen Change 1136 pixels 640 pixels +176 pixels Monday, July 22, 13
  21. 21. Phone Densities Samsung Galaxy 480 pixels 320 pixels 1280 pixels 720 pixels Samsung S III Monday, July 22, 13
  22. 22. Phone Densities5 iOS 1x & 2X - retina Android - 1x, 1.5x, 2.0x, 3.0x MDPI, HDPI, XHDPI, XXHPDI non-retina retina Monday, July 22, 13
  23. 23. Resources & Kits6 Monday, July 22, 13
  24. 24. Resources & Kits6 Monday, July 22, 13
  25. 25. Resources & Kits6 developer.android.com developer.apple.com Portkit: UX Translation Android Asset Stuido teehanlax.com/tools/ Monday, July 22, 13

×