Crear ASSETS y no morir en el Intento

#materialfest #android #material

Transcript

1. CREAR ASSETS y no morir en el intento* *How to survive being a designer
2. Who is going to talk? Yo me lo guiso, yo me lo como…Y de Cádiz picha! – Daniel Mota · @icebeat
3. Brown dispatcher* @Tuenti *Lead Designer UI DEV – Management & quality
4. Lead Designer* @Localistico *Me and Myself
5. Why I am going to talk about this topic? Aquí no veras teoría, sólo practica hablando desde la experiencia. ¿En donde? En Cádiz. – Material Fest
6. 1+1 *Jorgito, Miguel & Piotr Once upon a time… 3 years ago (2012) * Me Ready? Launch!
7. 120+15 *30 Android Engineers **4 UI Developers but now… 1 year ago (2014) * ** 1 release every 2 weeks. 8-10 branches per release
8. Naming conventions
9. Dude, Where are the mocks?! /projects/final.final.v2.psd
10. icon_navbar_search_dimmed.9.png TYPE COMPONENT NAME STATE EXTENSION
11. Drawables, dimensions & magic number
12. A Drawable is a general abstraction for “something that can be drawn.”* *What the fu..! res/drawable/… <… android:src="@drawable/filename" />
13. /drawable-ldpi (low) ~120dpi /drawable-mdpi (medium) ~160dpi /drawable-hdpi (high) ~240dpi /drawable-xhdpi (extra-high) ~320dpi /drawable-xxhdpi (extra-extra-high) ~480dpi /drawable-xxxhdpi (extra-extra-extra-high) ~640dpi http://developer.android.com/guide/practices/screens_support.html /drawable/… Language, Screen size, Screen orientation, etc.
14. /drawable-ldpi (low) ~120dpi 50% /drawable-mdpi (medium) ~160dpi 100% /drawable-hdpi (high) ~240dpi 150% /drawable-xhdpi (extra-high) ~320dpi 200% /drawable-xxhdpi (extra-extra-high) ~480dpi 300% /drawable-xxxhdpi (extra-extra-extra-high) ~640dpi 400% /drawable/… 1MDPI* = 1px *The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a “medium” density screen
15. /drawable-ldpi (low) ~120dpi 25% /drawable-mdpi (medium) ~160dpi 50% /drawable-hdpi (high) ~240dpi 75% /drawable-xhdpi (extra-high) ~320dpi 100% /drawable-xxhdpi (extra-extra-high) ~480dpi 150% /drawable-xxxhdpi (extra-extra-extra-high) ~640dpi 200% /drawable/… Can’t design anymore! Liveview & Skala Preview
16. 8* *Magic Number Rule of thumb “Ojo de buen cubero”
17. Material design – Metrics & keylines All components align to an 8dp square baseline grid. Type aligns to a 4dp baseline grid. Iconography in toolbars align to a 4dp square baseline grid. This applies to mobile, tablet, and desktop. www.google.es/design/spec/layout/metrics-keylines.html
18. Workflows* PNG, Icon Font & SVG *How to export Icons
19. + PNG Workflow Photoshop & Slicy
20. Photoshop Slicy naming convention
22. res/drawable-xhdpi/icon_dropdown_like_normal.png <… android:src=“@drawable/ icon_dropdown_like_normal" /> http://developer.android.com/guide/topics/resources/drawable-resource.html#Bitmap
23. + Icon Font Workflow Illustrator & GruntJS
24. Artboards Size 512x512 Base grid 32
25. templates/android.xml <?xml version="1.0" encoding="UTF-8"?> <!-- Android Strings File --> <!-- Language: en_US --> <resources><% if (iconsStyles) { %><% for (var glyphIdx = 0; glyphIdx < glyphs.length; glyphIdx++) { %> <string name="<%= glyphs[glyphIdx] %>">\u<%= (61696+glyphIdx).toString(16) %></string><% } } %> </resources> Gruntfile.js grunt 1) Export SVG files (Save as…) 2) Font and XML Output Generator
26. <?xml version="1.0" encoding=“utf-8"?> <!-- Android Strings File --> <!-- Language: en_US --> <resources> <string name="icon_like">\uf101</string> </resources> res/values/icons.xml <… android:text="@string/icon_like" /> @string/string_name http://developer.android.com/guide/topics/resources/string-resource.html
27. + SVG Workflow Sketch & GulpJS
28. sketch.sh sketchtool export artboards src/ android.sketch --output=dist/android/svg --formats="svg" --compact="true" gulpfile.js gulp export 1) gulp.src(‘./dist/android/svg/*.svg'); 2) Optimize with SVGo 3) Create XML files 4) Deploy
29. <vector xmlns:android=“http://schemas.android.com/apk/res/android" …> <path android:fillColor=“#8fff" android:pathData="M20.5,9.5 c-1.955,0,-3.83,1.268,-4.5,3 c-0.67,-1.732,-2.547,-3,-4.5,-3 C8.957,9.5,7,11.432,7,14 c0,3.53,3.793,6.257,9,11.5 c5.207,-5.242,9,-7.97,9,-11.5 C25,11.432,23.043,9.5,20.5,9.5z" /> </vector> res/drawable/icon_like.xml @drawable/filename <… android:src="@drawable/icon_like" /> https://developer.android.com/training/material/drawables.html
30. Magic
31. Any questions?
32. Thanks! @icebeat