A talk about how designer and developer can start work in a more unified flow, breaking the silo between them and get to code as soon as possible when designing UI. This was presented at JSDay Indonesia 2019.

1. Designing with Code
Adityo Pratomo
{UX Designer at Tetrate}

2. About Me
UX Designer at Tetrate
Building service mesh solution for
enterprise, on top of Istio and Envoy.
The company is located in SF, but the
team is distributed around the world
I also enjoy playing Street Fighter V or
developing with Rust when not working

3. gap

5. You love the design, you keep it close to
your heart. You pour all your heart to it.
But you work in silo
Does this generates value for user?

6. You forgot to check how it actually
looks in browser.
Why 2 elements set apart 16px in Sketch
doesn’t rendered like that in Chrome?
What’s that font doing over there?
The layout is missing a fundamental
style
This one generates value to user and
to your org!

7. GAP

8. DESIGN DEV
if 100% done start working

9. “Don't go
chasing
waterfalls”
-TLC-

10. DISCOVER BUILD
If key solution is
identified
start building

11. DISCOVER
Experimenting with tech stack
Testing APIs
Agreeing Customer Journey
Identify Usage Scenario
Designing wireframe
Building prototype
Designers + Developers explore
possible solutions

12. BUILD
Designing UI components
Designing layout
Implementing design
Agreeing on style guide
Design according to API
Designers + Developers focus
on implementing chosen
solution

13. Fall in love with
the medium
Give extra attention to the
implementation on device
Work around the device rule,
not against it
“Oh, hello CSS box!”

14. How to get there?How to get there?How to get there?How to get there?

15. Developers Designers
Front End

16. View layer,
markup and
styling
Routing,
Conditional rendering,
Data fetching,
Auth,
Performance
optimization,
etc.

17. Start from a component or higher order
component that consists of smaller
components
Agree on visual appearance, this can be
done by both designers and developers,
while abstracting other needs (e.g. data)

18. function onDataLoad() {
}
function onButtonPressed() {
}
.
.
.
return(
<div className={‘productImage’}>
<img src={prodImgUrl} />
<div>
<div className={‘producDesc’}>
<h2>{prodName}</h2>
<p className={‘discPrice’}>{prodDiscPrice}</p>
<p className={‘realPrice’}>{prodRealPrice}</p>
</div>
)
Start from this part, abstract away the
logic and focus on how that component
might actually looks

19. Storybook as a nice sandboxed
playground for designers and
developers to see how the
component rendered in browser,
without dabbling in actual app setup

20. Overall Screen
Design
Identify
components
Implement markup
and styling
Test + document
component in
Storybook
Implement code in the smallest working unit
with increasing detail

21. These, provides visibility for
internal team and stakeholders,
so a big picture of the product
can be seen by everyone
These, provides actual
implementation, so user can
use the product
It’s super OK to go back
and forth between these
2 realms

22. Reduce gap by increasing detail
on what to build, while reducing
the scope.
Design it with code.

23. Keep the democracy alive
Thank you @kotakmakan