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
2. ’m a Mac fanboy
3. love ROBOTS
4. ello ’m Hervé Mischler @Dstroii
5. Ecli se I’m not going to talk about
9. Android sers desserve a different experience
17. Vertical Rythm
18. 44 48
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
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
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
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
42. Roboto.ttf http://developer.android.com/design/downloads/
45. Test Earl Test Often
46. http://www.zambetti.com/projects/liveview/
47. http://code.google.com/p/android-ui-utils/
48. Extend you
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
59. Make Your Own
60. .::6GTT===J35@/22'J58-T+4IT¿8+,5>59T
62. http://speakerdeck.com/u/dstroii