Bridging the gap between android developer and designer

1,320 views

Published on

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.

Published in: Technology
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total views
1,320
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
19
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

Bridging the gap between android developer and designer

  1. 1. Bridging the Gap Between Android Developer and Designer Prepared by Bilal Sammour bilalsammour@gmail.com http://jo.linkedin.com/in/bilaljo/
  2. 2. Bridging the Gap Between Android Developer and Designer Designer Developer • Great design • Cool road • Great development • Platform limitation
  3. 3. Gap between developer and designer leads to
  4. 4. Gap between developer and designer leads to • 30 - 50 % extra time and effort • Gap between design and the real implementation • A lot of changes
  5. 5. Supporting Multiple Screens
  6. 6. 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
  7. 7. Px <=> Dp px => dp dp => px • dp = px / (dpi / 160) • px = dp * (dpi / 160) dpi = 480 dp = 16 px = 16 * (480 / 160) = 48px
  8. 8. A set of generalized densities
  9. 9. Padding and Margin • Predefined spaces have to be used • Spaces must be device independent • Examples • Horizontal padding • Vertical padding • Margins between widgets (objects)
  10. 10. Padding and Margin Green: 16dp Red: 16dp Red: 16dp for 10 inch tablets in landscape Blue: 8dp • Predefined spaces • New spaces can be defined
  11. 11. Action Bar & Navigation No Tabs • Don’t put tabs in detail screen
  12. 12. Generalized sizes
  13. 13. Preferred Size S4 1080 X 1920 XXHDPI Feb 2014
  14. 14. Virtual Buttons • Some devices have virtual buttons, for example Nexus 4 • Some devices don’t, for example S4
  15. 15. Tablet and Phone
  16. 16. Tablet and Phone
  17. 17. Text Overlapping (In Localization) The same word takes more space in different languages
  18. 18. Widgets
  19. 19. Edit Text Focused; App color
  20. 20. Buttons • At least two states must be provided • • Default Pressed • Change color, stroke ... • In ImageButton, at least two images must be provided
  21. 21. Widgets Sizes
  22. 22. 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
  23. 23. Icons Action Small / Contextual Icons Notification
  24. 24. Welcome to Sliding Menu
  25. 25. Don't mimic UI elements from other platforms
  26. 26. Don't carry over platform-specific icons
  27. 27. Don't use bottom tab bars
  28. 28. Don't hardcode links to other apps
  29. 29. Don't use right-pointing carets on line items
  30. 30. Progress
  31. 31. Thank you! Prepared by Bilal Sammour bilalsammour@gmail.com http://jo.linkedin.com/in/bilaljo/

×