Quick tips for porting your iOS designs to Android

3,435 views

Published on

Head to the session to learn how to adapt standard iOS design patterns to Android, snap your UI to a strong grid system, think of Android design as responsive design, use the right icons and extend this knowledge to mobile web apps. iOS is often the platform of choice when it comes to creating mobile applications, and for good reason. However, this has led us into a design monoculture where skeuomorphism and the Apple Human Interface Guidelines have become the 'angry dictators'. In this current state of affairs, it's easy to overlook the mass of Android users who expect and deserve a different user experience - one where copy-pasting an iOS design to the Android platform simply won't do. Herve will take you through the bare essentials of porting an iOS design to Android while ensuring the whole process is less painful, less costly and simply better all round.

Published in: Design
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
3,435
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
28
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Quick tips for porting your iOS designs to Android

  1. 1. ome Quick TipsS for porting your iOS designs to ANDROID FOM/FOWA London 2012
  2. 2. I’m a Mac fanboy
  3. 3. loveROBOTS
  4. 4. Hello I’mHervé Mischler @Dstroii
  5. 5. I’m not going to talk aboutEclipse
  6. 6. Android Users desserve a different experience
  7. 7. Vertical Rythm
  8. 8. 44 48
  9. 9. 8 4 1648 8 Button 16 16 8 4
  10. 10. 48 48 48 48 48 4816 4816 48 48 48 48 16 16
  11. 11. 48
  12. 12. 40
  13. 13. 56
  14. 14. How to prepare yourASSETS
  15. 15. btn_default.9.png
  16. 16. btn_default_pressed.9.png
  17. 17. btn_default_focused.9.png
  18. 18. btn_default_disabled.9.png
  19. 19. btn_default_disabled_focused.9.png
  20. 20. Drawable-ldpi 0.75xDrawable-mdpi 1xDrawable-hdpi 1.5xDrawable-xhdpi 2x
  21. 21. ThinkResponsive Design
  22. 22. Use the rightFont
  23. 23. Helvetica BoldMax 20pts The quick brown fox jumps over the lazy dog e.g.: Navigation Bar / Cell Text Label 18pts The quick brown fox jumps over the lazy dog e.g.: Detail Disclosure Button 17pts The quick brown fox jumps over the lazy dog e.g.: Cell Text Label 12pts The quick brown fox jumps over the lazy dog e.g.: Button ItemMin 9pts The quick brown fox jumps over the lazy dog e.g.: Tab Bar ItemHelvetica regularMax 17pts The quick brown fox jumps over the lazy dog e.g.: Label 15pts The quick brown fox jumps over the lazy dog e.g.: Rounded Rectangle Button 14pts The quick brown fox jumps over the lazy dog e.g.: Text View / Cell SubtitleMin 12pts The quick brown fox jumps over the lazy dog e.g.: Table View Item
  24. 24. RobotoText Size Micro 12spText Size Small 14spText Size Medium 18spText Size Large 22sp
  25. 25. Roboto.ttfhttp://developer.android.com/design/downloads/
  26. 26. Test EarlyTest Often
  27. 27. http://www.zambetti.com/projects/liveview/
  28. 28. http://code.google.com/p/android-ui-utils/
  29. 29. Extend your
  30. 30. https://build.phonegap.com
  31. 31. Adapt your CSSTO THE PLATFORM
  32. 32. http://sass-lang.com/
  33. 33. /* ===================================== IOS =====================================*/$fontfamily: helvetica, sans-serif;$fontmini: 0.75em; //12px$fontsmall: 0.875em; //14px$fontmedium: 1.0625em; //17px$fontlarge: 1.25em; //20px$baseline: 1em; //16px$baseheight: 2.75em; //44px$navwidth: 20em; //320px
  34. 34. /* ===================================== Android =====================================*/$fontfamily: "roboto","droid-sans", sans-serif;$fontmini: 0.75em; //12px$fontsmall: 0.875em; //14px$fontmedium: 1.125em; //18px$fontlarge: 1.375em; //22px$baseline: 1em; //16px$baseheight: 3em; //48px$navwidth: 20em; //320px
  35. 35. In Adobe Edge Inspect Preview & inspect web designs on devices.http://html.adobe.com/edge/inspect/
  36. 36. Make Your Own
  37. 37. http://speakerdeck.com/u/dstroii

×