Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Quick tips for porting your iOS designs to Android

F18bf1157e905ffa6346e42c79e15953?s=47 Hervé Mischler
October 16, 2012

Quick tips for porting your iOS designs to Android

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.

F18bf1157e905ffa6346e42c79e15953?s=128

Hervé Mischler

October 16, 2012
Tweet

Transcript

  1. Some uic i for porting your iOS designs to ANDROID

    / ondon 2012
  2. ’m a Mac fanboy

  3. love ROBOTS

  4. ello ’m Hervé Mischler @Dstroii

  5. Ecli se I’m not going to talk about

  6. None
  7. None
  8. None
  9. Android sers desserve a different experience

  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. Vertical Rythm

  18. 44 48

  19. None
  20. None
  21. 16 4 8 8 8 48 4 16 16 Button

  22. 48 48 48 48 48 48 48 48 48 48

    48 16 16 16 16
  23. 48

  24. 40

  25. 56

  26. How to prepare your ASSETS

  27. btn_default.9.png

  28. btn_default_pressed.9.png

  29. btn_default_focused.9.png

  30. btn_default_disabled.9.png

  31. btn_default_disabled_focused.9.png

  32. None
  33. None
  34. Drawable-ldpi Drawable-mdpi Drawable-hdpi Drawable-xhdpi 0.75x 1x 1.5x 2x

  35. Think Responsive Desi n

  36. )8++4)54¿-;8':/549'<'/2'(2+,853+3;2':5891/49/4:.+4*85/* 

  37. se the ight Font

  38. None
  39. The quick brown fox jumps over the lazy dog The

    quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog e.g.: Navigation Bar / Cell Text Label e.g.: Detail Disclosure Button e.g.: Cell Text Label e.g.: Button Item e.g.: Tab Bar Item e.g.: Label e.g.: Rounded Rectangle Button e.g.: Text View / Cell Subtitle e.g.: Table View Item 20pts 18pts 17pts 12pts 9pts Max Min The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog 17pts 15pts 14pts 12pts Max Min Helvetica Bold Helvetica regular
  40. Text Size Micro Roboto 12sp Text Size Small 14sp Text

    Size Medium 18sp Text Size Large 22sp
  41. None
  42. Roboto.ttf http://developer.android.com/design/downloads/

  43. None
  44. None
  45. Test Earl Test Often

  46. http://www.zambetti.com/projects/liveview/

  47. http://code.google.com/p/android-ui-utils/

  48. Extend you

  49. None
  50. None
  51. https://build.phonegap.com

  52. Adapt ou CSS TO THE PLATFORM

  53. http://sass-lang.com/

  54. /* ===================================== 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
  55. /* ===================================== 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
  56. http://html.adobe.com/edge/inspect/ Adobe Edge Inspect Preview & inspect web designs on

    devices. In
  57. None
  58. None
  59. Make Your Own

  60. .::6GTT===J35@/22'J58-T+4IT¿8+,5>59T

  61. None
  62. http://speakerdeck.com/u/dstroii