Quick tips for porting your iOS designs to Android
62
S o m e u i c i for porting your iOS designs to ANDROID / ondon 2012
-
Upload
herve-mischler -
Category
Design
-
view
3.057 -
download
3
description
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 of Quick tips for porting your iOS designs to Android
Some !uic" #i$%for porting your iOS designs to
ANDROID!"#/!"$% &ondon 2012
!’m a Mac fanboy
loveROBOTS
!ello "’m Hervé Mischler
@Dstroii
Ecli!seI’m not going to talk about
Android !sersdesserve a different experience
Vertical Rythm
44 48
16 4 8
8
8 48
4
16 16
Button
48 48 48 48 48 48 48 48 48 48 48
16 16
16 16
48
40
56
How to prepare yourASSETS
btn_default.9.png
btn_default_pressed.9.png
btn_default_focused.9.png
btn_default_disabled.9.png
btn_default_disabled_focused.9.png
Drawable-ldpi
Drawable-mdpi
Drawable-hdpi
Drawable-xhdpi
0.75x
1x
1.5x
2x
Think Responsive Desi!n
�)8++4�)54¿-;8':/549�'<'/2'(2+�,853�+3;2':58�91/49�/4�:.+��4*85/*���
!se the "ight
Font
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
Text Size Micro
Roboto12sp
Text Size Small 14sp
Text Size Medium 18sp
Text Size Large 22sp
Roboto.ttf
http://developer.android.com/design/downloads/
Test Earl!Test Often
http://www.zambetti.com/projects/liveview/
http://code.google.com/p/android-ui-utils/
Extend you!
https://build.phonegap.com
Adapt !ou" CSS
TO THE PLATFORM
http://sass-lang.com/
/* ===================================== 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
/* ===================================== 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
http://html.adobe.com/edge/inspect/
Adobe Edge InspectPreview & inspect web designs on devices.
In
Make Your Own
.::6GTT===J35@/22'J58-T+4I��T¿8+,5>59T
http://speakerdeck.com/u/dstroii
