Developers and designers usually struggle to understand each other’s mindset and procedure. However, there are several processes, tools, and checklists that help in bridging this gap. Learn about the seven ways designers and developers can help each other to achieve better collaboration and understanding.

1. Sabu Koirala
7 ways a developer and
designer can make each
other's lives better.
Frontend Re-United Kathmandu
Saturday 18 May, 2019

2. Sabu Koirala
UI Engineer

3. Jerry is a designer.

4. Tom is a front-end
developer.
Jerry is a designer.

5. Expectation RealityVS

6. Expectation RealityVS

7. Common Tom! This does not look right,
does it?
● The app does not look as good as the
mock-up that I built
● You are missing accessibility details
● The interactions are messy and
meaning less
● It's not optimized for Search Engines
● It does not look consistent in all my
browsers and devices
Expectation RealityVS

8. Really I think the app looks fine.
Oh, wait Jerry! I know what happened.
● Your designs were not feasible for
our tech stack too
● You didn't provide me any style
guide right? Neither any UI
interactions.
● Did you forget last minute changes
the client requested for?
● And where were you lost after
handing me over those designs?
Expectation RealityVS

10. So how do we
work together to
make each
other's life easier?

11. 7
points for peace

12. 1.
Standard
Checklist for
HTML/CSS
Look Tom!!!
Our app has a messy
styling and semantics,
no accessibility, neither
it is optimized for SEO.

13. Standard Checklist for HTML/CSS
A. Semantics
1

14. Standard Checklist for HTML/CSS
B. Accessibility
1

15. Standard Checklist for HTML/CSS
B. Accessibility
1

16. Standard Checklist for HTML/CSS
B. Accessibility
1

17. Standard Checklist for HTML/CSS
C. Standard Naming Conventions
1
.rm123 {} ???????

18. Standard Checklist for HTML/CSS
C. Standard Naming Conventions
1
BEM naming convention:
[block]__[element]--[modifier]
Example:
1. .accordion
2. .accordion__link
3. .accordion__link--active
.rm123 {} ???????

19. Standard Checklist for HTML/CSS
D. Make use of different tools
1
W3C
validation
Linting Preprocessors
Browser
support

20. 2.
Understand
UX Process
Seems like we need
to invest more time
to code this design.
Can we tweak or
change the design?

21. Why are the
designs so
complicated?
2

22. 2
Proper UX
Process

23. Discover Ideate MeasureCreate
Research
Interviews
Pain points
Competitive/
Comparative
Analysis
Brainstorming
User Journey
Wireframes
Hi-fi Mockup
Prototyping
Usability Test
Feedback

24. 3.
Technical
Awareness
Hey Tom!!! I don’t think
the design of the charts
are implemented as it is
supposed to be.

26. Technical Awareness
3

27. Technical
Research
Feature
Testing

29. 4.
Thorough
Design
Yo man, where are all the
states for my form?
What if I have an ugly data?
I am totally confused. Not cool
man, not cool !

30. Thorough Design
4

31. Thorough Design
4

32. Thorough Design
4

33. Thorough Design
4
Style guide

34. 5.
Conveying
Designer’s
Mindset
Hey Jerry I did not get
what you are actually
trying to do.
How the user journey
starts and end.

35. Communication

36. Communication Screenflow

38. Communication Screenflow Prototyping

41. 6.
Proper Project
Management

43. Development Design
At least 2 sprints ahead

44. Proper
Estimation

45. Buffer
Time

46. PM

47. 7.
Design Verification
or Design QA

48. What? Why?When? Who?

49. 7 points for peace 1. Standard Checklist for HTML/CSS
2. Understand UX Process
3. Technical Awareness
4. Thorough Design
5. Conveying Designer’s Mindset
6. Proper Project Management
7. Design Verification/Design QA

50. Agreement

51. or... will they?