Android Design Integration

5,929 views
5,773 views

Published on

Here is a part of my presentation from Russia Dribbble Meetup 2013. It's about design integration. My process and tools.

3 Comments
26 Likes
Statistics
Notes
No Downloads
Views
Total views
5,929
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
138
Comments
3
Likes
26
Embeds 0
No embeds

No notes for slide

Android Design Integration

  1. 1. Evgeny Belyaev@30PP0Designer, Mail.RuAndroidDesign Integration
  2. 2. App design (psd)
  3. 3. Implemented app
  4. 4. ?
  5. 5. Of course, DEVELOPERS!!!
  6. 6. Of course, DEVELOPERS!!!
  7. 7. IncorrectDesign Specification!
  8. 8. Design specification- dimensions- gaps- UI colors- sizes- styles- colors and text styles- spacingsMetrics- assetsFonts Res
  9. 9. metricsClose attention should be paidto the integration of design.Because end user sees it on the devicescreen, not the designers layout.fonts res
  10. 10. Android
  11. 11. One does not simply integrate your app designfor Android.
  12. 12. Device screens:- resolution- screen sizescreen densitydip (dots per inch)Densities:- ldpi (240x320)- mdpi (320x480)- hdpi (480x800)- xhdpi (720x1280)- xxhdpi (1080x1920)** — popular display resolutions
  13. 13. Density-independent pixel (dp)1 dp = 1 px at 160 dpi (mdpi)- ldpi (0.75x)- mdpi (x)- hdpi (1.5x)- xhdpi (2x)
  14. 14. metrics
  15. 15. Metrics
  16. 16. Metricsxhdpi: 1 dp = 2 pximage size: 50%1 dp = 1 px
  17. 17. PNG EXPRESS (pngexpress.com)
  18. 18. PNG EXPRESS1. 2. 3.1 dp = 1 px
  19. 19. PNG EXPRESS1. 2. 3.1 dp = 1 px
  20. 20. fonts
  21. 21. Fonts
  22. 22. FontsScale-independent pixels (sp)An SP is scaled by the users preferred text size, so youshould use this measurement unit when definingtext size (never for layout sizes).
  23. 23. PNG EXPRESS1. 2. 3.1 dp = 1 px
  24. 24. res
  25. 25. Res
  26. 26. Cut&Slice me (cutandslice.me)
  27. 27. Cut&Slice me1. 3.2. 4.xhdpi
  28. 28. Resbutton.png
  29. 29. Resbutton.png button.9.png
  30. 30. Nine Patch Editor
  31. 31. Nine Patch Editor“Stretch”in vertical“Stretch”in horizontalContentContent
  32. 32. And now we know how to integrate designinto android apps!
  33. 33. Thanks for watching!Evgeny Belyaev@30PP0Designer, Mail.Ru

×