Design-Engineering Workflow

As UI engineers on Android, we spend a lot of time interacting with designers. Android currently lacks the tools that would make the translation from design (mockups, assets, specs) to implementation (layouts, drawables, code) a lot smoother. In this talk, I'll share some thoughts on the core components of what I'd consider an ideal design-engineering tooling/workflow on Android (where dspec is just a tiny piece of the puzzle).

Presented at the Festive Londroid meetup in London.

Transcript

1. DESIGN↔ ENGINEERING WORKFLOW Festive Londroid, 2014
2. LUCAS ROCHA +LucasRocha | @lucasratmundo
9. THE GAP * Mockups Specs ... Code Layout ... DESIGN DESIGN DEV DEV
10. UNNATURAL Translation from design to implementation.
11. DISCONNECTED Visual reference not usable in the dev tools.
12. JUMP! Code generation, visual tools, unicorns.
13. CODE MATTERS i.e. you'll have to maintain this thing.
14. TOOLS MATTER It takes time to master design and developer tools.
15. COMPLEXITY Codegen and visual tools fall apart in complex projects.
16. DOMAIN Assets, layout & motion.
17. BRIDGE ↔ Mockups Specs ... Code Layout ... DEV DESIGN
18. I/O Designers deliver native input for developer tools.
19. dspec Define and render UI specs on top of Android UIs. http://github.com/lucasr/dspec
20. WORKFLOW ↔ Specs Code Layout Spec file DEV DESIGN
21. SPEC FILE Computer and human readable. Leans on the resource system.
22. SPEC FILE { "baselineGridVisible": true, "baselineGridCellSize": 8, "keylines": [ { "offset": 16, "from": "LEFT" }, { "offset": 16, "from": "RIGHT" } ], "spacings": [ { "offset": 0, "size": 16, "from": "LEFT" }, { "offset": 0, "size": 16, "from": "RIGHT" } ] }
23. DESIGN SPEC Drawable that can be overlaid on any part of the UI.
25. ANDROID STUDIO Maybe a design-time attribute? tools:designSpec=”@raw/myspec”
26. ASSETS Scalable atlas to autogenerate drawables in multiple densities? State list drawable in Sketch/PS? http://github.com/lucasr/dspec
27. MOTION The trickiest one. Lots of green field for exploration.
28. DEV TOOLS ↔ DESIGN DEV
29. DEV TOOLS ↔ DESIGN DEV
30. What other bridges can we build?
31. QUESTIONS? +LucasRocha | @lucasratmundo http://thelayout.cc