Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Evgeny Belyaev@30PP0Designer, Mail.RuAndroidDesign Integration
App design (psd)
Implemented app
?
Of course, DEVELOPERS!!!
Of course, DEVELOPERS!!!
IncorrectDesign Specification!
Design specification- dimensions- gaps- UI colors- sizes- styles- colors and text styles- spacingsMetrics- assetsFonts Res
metricsClose attention should be paidto the integration of design.Because end user sees it on the devicescreen, not the de...
Android
One does not simply integrate your app designfor Android.
Device screens:- resolution- screen sizescreen densitydip (dots per inch)Densities:- ldpi (240x320)- mdpi (320x480)- hdpi ...
Density-independent pixel (dp)1 dp = 1 px at 160 dpi (mdpi)- ldpi (0.75x)- mdpi (x)- hdpi (1.5x)- xhdpi (2x)
metrics
Metrics
Metricsxhdpi: 1 dp = 2 pximage size: 50%1 dp = 1 px
PNG EXPRESS (pngexpress.com)
PNG EXPRESS1. 2. 3.1 dp = 1 px
PNG EXPRESS1. 2. 3.1 dp = 1 px
fonts
Fonts
FontsScale-independent pixels (sp)An SP is scaled by the users preferred text size, so youshould use this measurement unit...
PNG EXPRESS1. 2. 3.1 dp = 1 px
res
Res
Cut&Slice me (cutandslice.me)
Cut&Slice me1. 3.2. 4.xhdpi
Resbutton.png
Resbutton.png button.9.png
Nine Patch Editor
Nine Patch Editor“Stretch”in vertical“Stretch”in horizontalContentContent
And now we know how to integrate designinto android apps!
Thanks for watching!Evgeny Belyaev@30PP0Designer, Mail.Ru
Android Design Integration
Upcoming SlideShare
Loading in …5
×

Android Design Integration

6,529 views

Published on

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

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

×