The document discusses collaboration between designers and developers. It suggests that designers should understand limitations of different mediums and explore capabilities. Developers and designers work best when they communicate effectively through shared vocabulary, deliverables and deciding issues together in the browser. The result is higher quality products when both parties have input.

1. DESIGNERS &
DEVELOPERS
ANDRÉ LUÍS | LEIHLA PINHO

2. ANDRÉ LUÍS
@andr3
meet.andr3.net
Software Engineer @ Seedrs

3. LEIHLA PINHO
@leihla
twitter.com/leihla
Design Director @ Seedrs

4. WHAT ARE WE
DOING HERE?
c Randall Munroe (xkcd)

6. JD Lasica
ERIK SPIEKERMANN
THE PROCESS

7. DESIGN
DEVELOPMENT
JD Lasica

8. DESIGN
DEVELOPMENT
JD Lasica

9. DEVELOPERS
DESIGNERS
BETTER TOGETHER
+
=

10. DEVELOPERS
ACT I
Jason Scott

11. NOT ALL
DEVELOPERS
ARE CREATED
EQUAL
Jason Scott

12. BACK END FRONT END
DEVELOPER D E V E LO P E R

13. Ruby on Rails
MySQL (DATABASES)
Nginx (WEBSERVER)
HTML
CSS
JAVASCRIPT
IN THE BROWSER
BACK END FRONT END
DEVELOPER D E V E LO P E R
EXAMPLE

14. Ruby on Rails
MySQL (DATABASES)
Nginx (WEBSERVER)
HTML
CSS
JAVASCRIPT
IN THE BROWSER
BACK END FRONT END
DEVELOPER D E V E LO P E R
EXAMPLE

15. Ruby on Rails
MySQL (DATABASES)
Nginx (WEBSERVER)
HTML
CSS
JAVASCRIPT
IN THE BROWSER
BACK END FRONT END
DEVELOPER D E V E LO P E R
EXAMPLE

16. Ruby on Rails
MySQL (DATABASES)
Nginx (WEBSERVER)
HTML
CSS
JAVASCRIPT
IN THE BROWSER
BACK END FRONT END
DEVELOPER D E V E LO P E R
EXAMPLE

17. Ruby on Rails
MySQL (DATABASES)
Nginx (WEBSERVER)
HTML
CSS
JAVASCRIPT
IN THE BROWSER
BACK END FRONT END
DEVELOPER D E V E LO P E R
EXAMPLE

18. THE OLD DAYS…
barkbud

19. “WE’RE GONNA DO THIS!”
© 2015 Disney/Lucasfilms
NOWADAYS…

20. Wireframes and mockups
are orientations — never the
full puzzle.
Developers will find holes that
need to be filled. How will they
be filled?

21. DESIGNERS
ACT II

22. KNOW YOUR
MEDIUM
brad_frost

23. • Should designers code?
• Understand the limitations
• Explore capabilities
brad_frost

24. DESIGN THE
INVISIBLE

25. • Design for the ugly
• Design the edge cases
• Explain flows & interactions

26. SCOTT HURFF
AWKWARD UI
© Scott Hurff / Twitter

27. SCOTT HURFF
Awkward UI is a missing loading
indicator. It's forgetting to tell your
customer where something went
wrong… It's a graph that looks weird
with only a few data points.
© Scott Hurff / Twitter

28. THE UI
STACK
Ideal State
Empty State
Error State
Partial State
Loading State
© Scott Hurff / Twitter

29. BETTER
TOGETHER
ACT III

30. LET’S TALK

31. “HELP ME UNDERSTAND”
Help me understand why
that’s a problem for you?
You see… high density screens
need bigger images, so we can’t
use just one image. We need multiple
sizes (…)
Oh! Ok…

32. Use an app
that allows
notes and
feedback.
invisionapp.com

33. SHARED
VOCABULARY

34. • Define your own language
• Design a system
• Build a common styleguide

35. 0.5rem
1rem
1.5rem
2.5rem
extra-small
small
medium
large
“Large margin after that box.”
@include after-margin(large);

36. DELIVERABLES

37. LOW-FIDELITY
WIREFRAMES
HI-FIDELITY
MOCKUPS
INTERACTIVE
PROTOTYPE
TIME
SPENT
FIDELITY

38. JOHN GRUBER
linkletter
THE AUTEUR
THEORY OF DESIGN

39. linkletter
Quality of any creative collaborative
endeavour, approaches the level of
taste of who has control.
JOHN GRUBER

40. linkletter
RESULT
TASTE

41. linkletter
RESULT
TASTE

42. CO-OWNERSHIP

44. DESIGNING IN THE BROWSER

45. DECIDING IN THE BROWSER
DAN MALL

46. • Animations for Form
Validation Messages
• Use Flexbox or limit
characters in description?
• Minor breakpoints on
layout quirks.

47. DEVELOPMENTDESIGN

48. DESIGN & DEVELOPMENT
PRODUCT

49. THANK YOU
Leihla Pinho
André Luís
me@andr3.net
leihla@gmail.com
C bnaLICENSED UNDER

50. PHOTOS REUSED UNDER
https://www.flickr.com/photos/barkbud/5200856828/
C
https://www.flickr.com/photos/jdlasica/10723373716
https://www.flickr.com/photos/zeldman/16553808072
https://www.flickr.com/photos/54568729@N00/9636183501
https://www.flickr.com/photos/brad_frost/10413043603/
https://www.flickr.com/photos/linkletter/15129966789/