Presented at PHP Benelux, in Antwerp, Belgium

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

25. Wireframing
Objectives Research
Style guide
Prototype

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

44. Photo credit:
ArtifactUX

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