Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

B4d11519ef93fbb9a8013fa932dc5b11?s=128

Leapfrog Technology

May 18, 2019
Tweet

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
  9. None
  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.
  25. None
  26. Technical Awareness 3

  27. Technical Research Feature Testing

  28. None
  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

  37. None
  38. Communication Screenflow Prototyping

  39. None
  40. None
  41. 6. Proper Project Management

  42. None
  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?