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.

Transcript

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

   View Slide

2. ’m a Mac fanboy
   

   View Slide

3. love
   ROBOTS
   

   View Slide

4. ello ’m
   Hervé Mischler
   @Dstroii
   

   View Slide

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

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. Android sers
   desserve a different experience
   

   View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. Vertical
    Rythm
    

    View Slide

18. 44 48
    

    View Slide

19. View Slide

20. View Slide

21. 16
    4
    8
    8
    8
    48
    4
    16
    16
    Button
    

    View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. How to prepare your
    ASSETS
    

    View Slide

27. btn_default.9.png
    

    View Slide

28. btn_default_pressed.9.png
    

    View Slide

29. btn_default_focused.9.png
    

    View Slide

30. btn_default_disabled.9.png
    

    View Slide

31. btn_default_disabled_focused.9.png
    

    View Slide

32. View Slide

33. View Slide

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

    View Slide

35. Think
    Responsive Desi n
    

    View Slide

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

    View Slide

37. se the ight
    Font
    

    View Slide

38. View Slide

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
    

    View Slide

40. Text Size Micro
    Roboto
    12sp
    Text Size Small 14sp
    Text Size Medium 18sp
    Text Size Large 22sp
    

    View Slide

41. View Slide

42. Roboto.ttf
    http://developer.android.com/design/downloads/
    

    View Slide

43. View Slide

44. View Slide

45. Test Earl
    Test Often
    

    View Slide

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

    View Slide

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

    View Slide

48. Extend you
    

    View Slide

49. View Slide

50. View Slide

51. https://build.phonegap.com
    

    View Slide

52. Adapt ou
    CSS
    TO THE PLATFORM
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

56. http://html.adobe.com/edge/inspect/
    Adobe Edge Inspect
    Preview & inspect web designs on devices.
    In
    

    View Slide

57. View Slide

58. View Slide

59. Make Your Own
    

    View Slide

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

    View Slide

61. View Slide

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

    View Slide