Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Bridging the designer-developer gap
Similar to Bridging the designer-developer gap (20)
Recently uploaded
Recently uploaded (20)
Bridging the designer-developer gap
- 1. Bridging the designer-developer gap BY NICOLE SAIDY |
- 2. Bridging the designer-developer gap @nicolesaidy @nicolesaidy UI/UX Designer Design Teacher
- 3. Bridging the designer-developer gap @nicolesaidy Creative Artistic Persistent Optimistic Designer Technical Analytic Pragmatic Patient Developer
- 4. Bridging the designer-developer gap @nicolesaidy Time spent Discussing requirements Waiting for mockups Attempting to implement Explaining problem to designer Actually implementing
- 5. Bridging the designer-developer gap @nicolesaidy What causes problems?
- 6. Bridging the designer-developer gap @nicolesaidy Different priorities Lack of commitment Budget constraints Miscommunication Timeline constraints Different philosophies
- 7. Bridging the designer-developer gap @nicolesaidy What do we all want? To make the user happy
- 8. Bridging the designer-developer gap @nicolesaidy Designers and developers are divided teams LACK OF EMPATHY
- 9. Bridging the designer-developer gap @nicolesaidy Designers and developers are not on the same page LACK OF COMMUNICATION
- 10. Bridging the designer-developer gap @nicolesaidy End result after production is different from design LACK OF COLLABORATION
- 11. Empathy
- 12. Bridging the designer-developer gap @nicolesaidy Learn each other’s language
- 13. Bridging the designer-developer gap @nicolesaidy Work closely with the designer Learn design principles & typography Go to conferences and read books
- 14. Bridging the designer-developer gap @nicolesaidy Designers should learn how to code
- 15. Bridging the designer-developer gap @nicolesaidy Develop an eye for design
- 16. Bridging the designer-developer gap @nicolesaidy Design is not art.
- 18. Bridging the designer-developer gap @nicolesaidy Browse design inspiration Practice looking Develop your taste for design
- 19. Bridging the designer-developer gap @nicolesaidy Understand the design process
- 20. Bridging the designer-developer gap @nicolesaidy Brief and objectives Requirements, plan, user objectives and business objectives of the project. STEP 1
- 21. Bridging the designer-developer gap @nicolesaidy Research Brainstorming ideas, compiling inspiration and competitor analysis STEP 2
- 22. Bridging the designer-developer gap @nicolesaidy Wireframing Information architecture, element placement, functionality & interactivity STEP 3
- 23. Bridging the designer-developer gap @nicolesaidy Style guide Brand guidelines, UI components, typography, dos and don’ts STEP 4
- 24. Bridging the designer-developer gap @nicolesaidy Prototype Design mockups, interactive prototypes, testing STEP 5
- 26. Bridging the designer-developer gap @nicolesaidy Know the types of designers
- 27. Bridging the designer-developer gap @nicolesaidy
- 28. Communication
- 29. Bridging the designer-developer gap @nicolesaidy Be involved early on
- 30. Bridging the designer-developer gap @nicolesaidy Join the design process Define goals together Work together closely
- 31. Bridging the designer-developer gap @nicolesaidy Think responsive from the start
- 32. Bridging the designer-developer gap @nicolesaidy Start by the smallest and largest Discuss layout breakpoints Have an image asset strategy early
- 33. Bridging the designer-developer gap @nicolesaidy
- 34. Bridging the designer-developer gap @nicolesaidy Use management tools
- 35. Bridging the designer-developer gap @nicolesaidy
- 38. Collaboration
- 39. Bridging the designer-developer gap @nicolesaidy From UX UI DEV UX UI DEV To
- 40. Bridging the designer-developer gap @nicolesaidy Join the wireframing sessions
- 42. Bridging the designer-developer gap @nicolesaidy Balsamiq Mockups
- 43. Bridging the designer-developer gap @nicolesaidy Interactive wireframes
- 45. Bridging the designer-developer gap @nicolesaidy Marvel demo
- 46. Bridging the designer-developer gap @nicolesaidy Know the scope of project Start coding the components and database Avoids time wasting on code Stakeholder and user testing
- 47. Bridging the designer-developer gap @nicolesaidy We’re not designing pages, we’re designing systems of components. Stephen Hay
- 48. Bridging the designer-developer gap @nicolesaidy “A set of guidelines to the design language of a digital product.” Style guide
- 56. Bridging the designer-developer gap @nicolesaidy Atomic Design by Brad Frost
- 63. Bridging the designer-developer gap @nicolesaidy Why atomic design? Flexibility Consistency Scalability
- 64. Bridging the designer-developer gap @nicolesaidy Pattern Lab
- 65. Bridging the designer-developer gap @nicolesaidy Customize your framework
- 68. Bridging the designer-developer gap @nicolesaidy Collaboration tools
- 69. Bridging the designer-developer gap @nicolesaidy Source: João Guerra
- 72. Bridging the designer-developer gap @nicolesaidy
- 73. Bridging the designer-developer gap @nicolesaidy Empathy Communication Collaboration
- 74. Bridging the designer-developer gap @nicolesaidy Learn the principles of design Develop an eye for design Understand the design process Be involved early on Think responsive from the start Use management tools Create wireframes Collaborate with style guides Think atomic design Use collaboration tools Wrap up
- 76. Bridging the designer-developer gap @nicolesaidy Inspiration Designer & developer communication - Google I/O 2016 Learning to speak Designer - Google I/O 2016 5 ways to bridge the designer-developer gap on responsive web projects - Nick Schaden 7 ways to bridge the gap between design and development - Stephanie Hager Designers vs. Developers: 5 Tips to Give Peace a Chance - João Guerra How To Effectively Communicate With Developers - Ryan Scherf Bridging the divide - Jon Yablonski Front-End Style-Guides - Page Laubheimer
- 77. Bridging the designer-developer gap @nicolesaidy Thanks! joind.in/20225 nicolesaidy.com