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
   

   View Slide

2. LUCAS ROCHA
   +LucasRocha | @lucasratmundo
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. THE GAP
   *
   Mockups
   Specs
   ...
   Code
   Layout
   ...
   DESIGN
   DESIGN DEV DEV
   

   View Slide

10. UNNATURAL
    Translation from design to
    implementation.
    

    View Slide

11. DISCONNECTED
    Visual reference not usable in the dev
    tools.
    

    View Slide

12. JUMP!
    Code generation, visual tools,
    unicorns.
    

    View Slide

13. CODE MATTERS
    i.e. you'll have to maintain this thing.
    

    View Slide

14. TOOLS MATTER
    It takes time to master design and
    developer tools.
    

    View Slide

15. COMPLEXITY
    Codegen and visual tools fall apart in
    complex projects.
    

    View Slide

16. DOMAIN
    Assets, layout & motion.
    

    View Slide

17. BRIDGE
    ↔
    Mockups
    Specs
    ...
    Code
    Layout
    ...
    DEV
    DESIGN
    

    View Slide

18. I/O
    Designers deliver native input for
    developer tools.
    

    View Slide

19. dspec
    Define and render UI specs on top of
    Android UIs.
    http://github.com/lucasr/dspec
    

    View Slide

20. WORKFLOW
    ↔
    Specs Code
    Layout
    Spec file
    DEV
    DESIGN
    

    View Slide

21. SPEC FILE
    Computer and human readable.
    Leans on the resource system.
    

    View Slide

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" }
    ]
    }
    

    View Slide

23. DESIGN SPEC
    Drawable that can be overlaid on
    any part of the UI.
    

    View Slide

24. View Slide

25. ANDROID STUDIO
    Maybe a design-time attribute?
    tools:designSpec=”@raw/myspec”
    

    View Slide

26. ASSETS
    Scalable atlas to autogenerate
    drawables in multiple densities?
    State list drawable in Sketch/PS?
    http://github.com/lucasr/dspec
    

    View Slide

27. MOTION
    The trickiest one. Lots of green field
    for exploration.
    

    View Slide

28. DEV TOOLS
    ↔
    DESIGN DEV
    

    View Slide

29. DEV TOOLS
    ↔
    DESIGN DEV
    

    View Slide

30. What other bridges can
    we build?
    

    View Slide

31. QUESTIONS?
    +LucasRocha | @lucasratmundo
    http://thelayout.cc
    

    View Slide