$30 off During Our Annual Pro Sale. View Details »

Quick tips for porting your iOS designs to Android

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.

Hervé Mischler

October 16, 2012
Tweet

More Decks by Hervé Mischler

Other Decks in Design

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. 48
    48
    48
    48
    48
    48
    48
    48
    48
    48
    48
    16
    16
    16
    16

    View Slide

  23. 48

    View Slide

  24. 40

    View Slide

  25. 56

    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