android design integration
DESCRIPTION
Here is a part of my presentation from Russia Dribbble Meetup 2013. It's about design integration. My process and tools.TRANSCRIPT
![Page 1: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/1.jpg)
![Page 2: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/2.jpg)
Evgeny Belyaev@30PP0Designer, Mail.Ru
AndroidDesign Integration
![Page 3: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/3.jpg)
App design (psd)
![Page 4: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/4.jpg)
Implemented app
![Page 5: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/5.jpg)
?
![Page 6: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/6.jpg)
Of course, DEVELOPERS!!!
![Page 7: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/7.jpg)
Of course, DEVELOPERS!!!
![Page 8: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/8.jpg)
Incorrect Design Specification!
![Page 9: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/9.jpg)
Design specification
- dimensions- gaps- UI colors
- sizes- styles- colors and text styles- spacings
Metrics- assets
Fonts Res
![Page 10: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/10.jpg)
metrics
Close attention should be paid to the integration of design. Because end user sees it on the devicescreen, not the designer's layout.
fonts res
![Page 11: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/11.jpg)
Android
![Page 12: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/12.jpg)
One does not simply integrate your app design for Android.
![Page 13: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/13.jpg)
Device screens:- resolution- screen size
screen densitydip (dots per inch)
Densities:- ldpi (240x320)
- mdpi (320x480)
- hdpi (480x800)
- xhdpi (720x1280)
- xxhdpi (1080x1920)
*
* — popular display resolutions
![Page 14: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/14.jpg)
Density-independent pixel (dp)
1 dp = 1 px at 160 dpi (mdpi)
- ldpi (0.75x)
- mdpi (x)
- hdpi (1.5x)
- xhdpi (2x)
![Page 15: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/15.jpg)
metrics
![Page 16: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/16.jpg)
Metrics
![Page 17: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/17.jpg)
Metrics
xhdpi: 1 dp = 2 px
image size: 50%
1 dp = 1 px
![Page 18: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/18.jpg)
PNG EXPRESS (pngexpress.com)
![Page 19: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/19.jpg)
PNG EXPRESS
1.
2. 3.
1 dp = 1 px
![Page 20: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/20.jpg)
PNG EXPRESS
1.
2. 3.
1 dp = 1 px
![Page 21: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/21.jpg)
fonts
![Page 22: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/22.jpg)
Fonts
![Page 23: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/23.jpg)
Fonts
Scale-independent pixels (sp)
An SP is scaled by the user's preferred text size, so you should use this measurement unit when defining text size (never for layout sizes).
![Page 24: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/24.jpg)
PNG EXPRESS
1.
2. 3.
1 dp = 1 px
![Page 25: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/25.jpg)
res
![Page 26: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/26.jpg)
Res
![Page 27: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/27.jpg)
Cut&Slice me (cutandslice.me)
![Page 28: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/28.jpg)
Cut&Slice me
1. 3.
2. 4.
xhdpi
![Page 29: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/29.jpg)
Res
button.png
![Page 30: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/30.jpg)
Res
button.png button.9.png
![Page 31: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/31.jpg)
Nine Patch Editor
![Page 32: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/32.jpg)
Nine Patch Editor
“Stretch”in vertical
“Stretch”in horizontal
Content
Content
![Page 33: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/33.jpg)
And now we know how to integrate design into android apps!
![Page 34: Android Design Integration](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d634a7959f23d8b45dc/html5/thumbnails/34.jpg)
Thanks for watching!
Evgeny Belyaev@30PP0Designer, Mail.Ru