Upload
bilal-sammour
View
566
Download
0
Embed Size (px)
DESCRIPTION
There is a gap between android developer and designer, there are a lot of issues need a lot of time and effort to be implemented while they means nothing for designer, and gap between developer and designer leads to 30 - 50% extra time and effort. This presentation monitors a lot of those things that cause the gap, and suggests the ideal solution.
Citation preview
Bridging the Gap Between Android
Developer and Designer
Prepared byBilal Sammour
[email protected]://jo.linkedin.com/in/bilaljo/
Bridging the Gap Between Android Developer and Designer
Designer• Great design• Cool road
Developer• Great development• Platform limitation
Gap between developer and designer leads to
Gap between developer and designer leads to• 30 - 50 % extra time and effort• Gap between design and the real implementation• A lot of changes
Supporting Multiple Screens
Density-independent pixel (dp)
• A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way• Dp is the main unit, instead of px
Px <=> Dp
px => dp• dp = px / (dpi / 160)
dp => px• px = dp * (dpi / 160)
dpi = 480dp = 16
px = 16 * (480 / 160)= 48px
A set of generalized densities
Padding and Margin
• Predefined spaces have to be used• Spaces must be device independent• Examples• Horizontal padding• Vertical padding• Margins between widgets (objects)
Green: 16dpRed: 16dp
Red: 16dp for 10 inch tablets in landscape
Blue: 8dp
Padding and Margin
• Predefined spaces• New spaces can be defined
Action Bar & Navigation
No Tabs
• Don’t put tabs in detail screen
Generalized sizes
Preferred Size
S41080 X 1920
XXHDPI
Feb 2014
Virtual Buttons
• Some devices have virtual buttons, for example Nexus 4
• Some devices don’t, for example S4
Tablet and Phone
Tablet and Phone
Text Overlapping (In Localization)
The same word takes more space in different languages
Widgets
Edit Text
Focused; App color
Buttons
• At least two states must be provided• Default• Pressed
• Change color, stroke ...
• In ImageButton, at least two images must be provided
Widgets Sizes
Text Size
• Main text categories• Small, 14 sp, 42 px for S4 (XXHDPI)• Medium, 18 sp, 54 px for S4 (XXHDPI)• Large, 22 sp, 66 px for S4 (XXHDPI)
• Avoid using text sizes smaller than 12sp
Icons
Action Small / Contextual Icons Notification
Welcome to Sliding Menu
Don't mimic UI elements from other platforms
Don't carry over platform-specific icons
Don't use bottom tab bars
Don't hardcode links to other apps
Don't use right-pointing carets on line items
Progress