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. 6.
  2. 7.
  3. 8.
  4. 10.
  5. 11.
  6. 12.
  7. 13.
  8. 14.
  9. 15.
  10. 16.
  11. 18.
  12. 19.
  13. 20.
  14. 22.
  15. 23.

    48

  16. 24.

    40

  17. 25.

    56

  18. 32.
  19. 33.
  20. 38.
  21. 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
  22. 40.

    Text Size Micro Roboto 12sp Text Size Small 14sp Text

    Size Medium 18sp Text Size Large 22sp
  23. 41.
  24. 43.
  25. 44.
  26. 49.
  27. 50.
  28. 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
  29. 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
  30. 57.
  31. 58.
  32. 61.