FRU Kathmandu: 7 ways a Designer and Developer can make each other's lives better

Slide from Frontend Re-United Kathmandu.
Date: May 18, 2019

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.

Transcript

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 Reality VS
6. Expectation Reality VS
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 Reality VS
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 Reality VS
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 Measure Create 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?