32
Bridging the Gap Between Android Developer and Designer Prepared by Bilal Sammour bilalsammour@ gmail.com http://jo.linkedin.com/ in/bilaljo /

Bridging the gap between android developer and designer

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

Page 1: Bridging the gap between android developer and designer

Bridging the Gap Between Android

Developer and Designer

Prepared byBilal Sammour

[email protected]://jo.linkedin.com/in/bilaljo/

Page 2: Bridging the gap between android developer and designer

Bridging the Gap Between Android Developer and Designer

Designer• Great design• Cool road

Developer• Great development• Platform limitation

Page 3: Bridging the gap between android developer and designer

Gap between developer and designer leads to

Page 4: Bridging the gap between android developer and designer

Gap between developer and designer leads to• 30 - 50 % extra time and effort• Gap between design and the real implementation• A lot of changes

Page 5: Bridging the gap between android developer and designer

Supporting Multiple Screens

Page 6: Bridging the gap between android developer and designer

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

Page 7: Bridging the gap between android developer and designer

Px <=> Dp

px => dp• dp = px / (dpi / 160)

dp => px• px = dp * (dpi / 160)

dpi = 480dp = 16

px = 16 * (480 / 160)= 48px

Page 8: Bridging the gap between android developer and designer

A set of generalized densities

Page 9: Bridging the gap between android developer and designer

Padding and Margin

• Predefined spaces have to be used• Spaces must be device independent• Examples• Horizontal padding• Vertical padding• Margins between widgets (objects)

Page 10: Bridging the gap between android developer and designer

Green: 16dpRed: 16dp

Red: 16dp for 10 inch tablets in landscape

Blue: 8dp

Padding and Margin

• Predefined spaces• New spaces can be defined

Page 11: Bridging the gap between android developer and designer

Action Bar & Navigation

No Tabs

• Don’t put tabs in detail screen

Page 12: Bridging the gap between android developer and designer

Generalized sizes

Page 13: Bridging the gap between android developer and designer

Preferred Size

S41080 X 1920

XXHDPI

Feb 2014

Page 14: Bridging the gap between android developer and designer

Virtual Buttons

• Some devices have virtual buttons, for example Nexus 4

• Some devices don’t, for example S4

Page 15: Bridging the gap between android developer and designer

Tablet and Phone

Page 16: Bridging the gap between android developer and designer

Tablet and Phone

Page 17: Bridging the gap between android developer and designer

Text Overlapping (In Localization)

The same word takes more space in different languages

Page 18: Bridging the gap between android developer and designer

Widgets

Page 19: Bridging the gap between android developer and designer

Edit Text

Focused; App color

Page 20: Bridging the gap between android developer and designer

Buttons

• At least two states must be provided• Default• Pressed

• Change color, stroke ...

• In ImageButton, at least two images must be provided

Page 21: Bridging the gap between android developer and designer

Widgets Sizes

Page 22: Bridging the gap between android developer and designer

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

Page 23: Bridging the gap between android developer and designer

Icons

Action Small / Contextual Icons Notification

Page 24: Bridging the gap between android developer and designer

Welcome to Sliding Menu

Page 25: Bridging the gap between android developer and designer
Page 26: Bridging the gap between android developer and designer

Don't mimic UI elements from other platforms

Page 27: Bridging the gap between android developer and designer

Don't carry over platform-specific icons

Page 28: Bridging the gap between android developer and designer

Don't use bottom tab bars

Page 29: Bridging the gap between android developer and designer

Don't hardcode links to other apps

Page 30: Bridging the gap between android developer and designer

Don't use right-pointing carets on line items

Page 31: Bridging the gap between android developer and designer

Progress