Designers & Developers

For DribbbleLX'16 meetup. Co-authored and co-presented with Leihla Pinho (https://twitter.com/leihla).

Designers. Engineers. Usually they come with a vs. in-between. It doesn't—and shouldn't—be that way, but we all know too well it's easy to fall into the pits of despair when you're not understand and your work is not valued by your colleague on the "other side" of the barricade.

Let's bury the hatchet and talk this out. We'll cover why it's important to strive for balance between these two worlds and how it can be achieved with simple tools.

Transcript

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. DEVELOPMENT DESIGN
48. DESIGN & DEVELOPMENT PRODUCT
49. THANK YOU Leihla Pinho André Luís me@andr3.net leihla@gmail.com C bna LICENSED 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/