S

o
m
e

uic

for porting your iOS designs to

ANDROID
/ ondon 2012
m a Mac fanboy
love
ROBOTS
ello m
Herv Mischler
@Dstroii
Eclise
Im not going to talk about
Android sers
desserve 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 your
ASSETS
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 Desin
Screea ccahgarat|cas ara|la|le |rc ealatcr s||as |a t|e Aa1rc|1 SK
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
Roboto
12sp
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 Inspect
Preview & inspect web designs on devices.
In
Make Your Own
|ttjllwww.ct|lla.crgleaUSlhre|ctcsl
http://speakerdeck.com/u/dstroii