Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
DESIGNERS & DEVELOPERS ANDRÉ LUÍS | LEIHLA PINHO
ANDRÉ LUÍS @andr3 meet.andr3.net Software Engineer @ Seedrs
LEIHLA PINHO @leihla twitter.com/leihla Design Director @ Seedrs
WHAT ARE WE 
 DOING HERE? c Randall Munroe (xkcd)
JD Lasica ERIK SPIEKERMANN THE PROCESS
DESIGN DEVELOPMENT JD Lasica
DESIGN DEVELOPMENT JD Lasica
DEVELOPERS DESIGNERS BETTER TOGETHER + =
DEVELOPERS ACT I Jason Scott
NOT ALL DEVELOPERS ARE CREATED EQUAL Jason Scott
BACK END FRONT END DEVELOPER D E V E LO P E R
Ruby on Rails MySQL (DATABASES) Nginx (WEBSERVER) HTML CSS JAVASCRIPT IN THE BROWSER BACK END FRONT END DEVELOPER D E V E ...
Ruby on Rails MySQL (DATABASES) Nginx (WEBSERVER) HTML CSS JAVASCRIPT IN THE BROWSER BACK END FRONT END DEVELOPER D E V E ...
Ruby on Rails MySQL (DATABASES) Nginx (WEBSERVER) HTML CSS JAVASCRIPT IN THE BROWSER BACK END FRONT END DEVELOPER D E V E ...
Ruby on Rails MySQL (DATABASES) Nginx (WEBSERVER) HTML CSS JAVASCRIPT IN THE BROWSER BACK END FRONT END DEVELOPER D E V E ...
Ruby on Rails MySQL (DATABASES) Nginx (WEBSERVER) HTML CSS JAVASCRIPT IN THE BROWSER BACK END FRONT END DEVELOPER D E V E ...
THE OLD DAYS… barkbud
“WE’RE GONNA DO THIS!” © 2015 Disney/Lucasfilms NOWADAYS…
Wireframes and mockups are orientations — never the full puzzle. Developers will find holes that need to be filled. How wi...
DESIGNERS ACT II
KNOW YOUR MEDIUM brad_frost
• Should designers code? • Understand the limitations • Explore capabilities brad_frost
DESIGN THE INVISIBLE
• Design for the ugly • Design the edge cases • Explain flows & interactions
SCOTT HURFF AWKWARD UI © Scott Hurff / Twitter
SCOTT HURFF Awkward UI is a missing loading indicator. It's forgetting to tell your customer where something went wrong… I...
THE UI STACK Ideal State Empty State Error State Partial State Loading State © Scott Hurff / Twitter
BETTER TOGETHER ACT III
LET’S TALK
“HELP ME UNDERSTAND” Help me understand why
 that’s a problem for you? You see… high density screens
 need bigger images, ...
Use an app that allows notes and feedback. invisionapp.com
SHARED VOCABULARY
• Define your own language • Design a system • Build a common styleguide
0.5rem 1rem 1.5rem 2.5rem extra-small small medium large “Large margin after that box.” @include after-margin(large);
DELIVERABLES
LOW-FIDELITY WIREFRAMES HI-FIDELITY MOCKUPS INTERACTIVE PROTOTYPE TIME SPENT FIDELITY
JOHN GRUBER linkletter THE AUTEUR THEORY OF DESIGN
linkletter Quality of any creative collaborative endeavour, approaches the level of taste of who has control. JOHN GRUBER
linkletter RESULT TASTE
linkletter RESULT TASTE
CO-OWNERSHIP
DESIGNING IN THE BROWSER
DECIDING IN THE BROWSER DAN MALL
• Animations for Form Validation Messages • Use Flexbox or limit characters in description? • Minor breakpoints on layout ...
DEVELOPMENTDESIGN
DESIGN & DEVELOPMENT PRODUCT
THANK YOU Leihla Pinho André Luís me@andr3.net leihla@gmail.com C bnaLICENSED UNDER
PHOTOS REUSED UNDER https://www.flickr.com/photos/barkbud/5200856828/ C https://www.flickr.com/photos/jdlasica/10723373716...
Designers & Developers
Designers & Developers
Upcoming SlideShare
Loading in …5
×

Designers & Developers

923 views

Published on

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.

Published in: Design
no profile picture user

  • Be the first to comment

Designers & Developers

  1. 1. DESIGNERS & DEVELOPERS ANDRÉ LUÍS | LEIHLA PINHO
  2. 2. ANDRÉ LUÍS @andr3 meet.andr3.net Software Engineer @ Seedrs
  3. 3. LEIHLA PINHO @leihla twitter.com/leihla Design Director @ Seedrs
  4. 4. WHAT ARE WE 
 DOING HERE? c Randall Munroe (xkcd)
  5. 5. JD Lasica ERIK SPIEKERMANN THE PROCESS
  6. 6. DESIGN DEVELOPMENT JD Lasica
  7. 7. DESIGN DEVELOPMENT JD Lasica
  8. 8. DEVELOPERS DESIGNERS BETTER TOGETHER + =
  9. 9. DEVELOPERS ACT I Jason Scott
  10. 10. NOT ALL DEVELOPERS ARE CREATED EQUAL Jason Scott
  11. 11. BACK END FRONT END DEVELOPER D E V E LO P E R
  12. 12. 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
  13. 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. 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. 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. 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. 17. THE OLD DAYS… barkbud
  18. 18. “WE’RE GONNA DO THIS!” © 2015 Disney/Lucasfilms NOWADAYS…
  19. 19. Wireframes and mockups are orientations — never the full puzzle. Developers will find holes that need to be filled. How will they be filled?
  20. 20. DESIGNERS ACT II
  21. 21. KNOW YOUR MEDIUM brad_frost
  22. 22. • Should designers code? • Understand the limitations • Explore capabilities brad_frost
  23. 23. DESIGN THE INVISIBLE
  24. 24. • Design for the ugly • Design the edge cases • Explain flows & interactions
  25. 25. SCOTT HURFF AWKWARD UI © Scott Hurff / Twitter
  26. 26. 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
  27. 27. THE UI STACK Ideal State Empty State Error State Partial State Loading State © Scott Hurff / Twitter
  28. 28. BETTER TOGETHER ACT III
  29. 29. LET’S TALK
  30. 30. “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…
  31. 31. Use an app that allows notes and feedback. invisionapp.com
  32. 32. SHARED VOCABULARY
  33. 33. • Define your own language • Design a system • Build a common styleguide
  34. 34. 0.5rem 1rem 1.5rem 2.5rem extra-small small medium large “Large margin after that box.” @include after-margin(large);
  35. 35. DELIVERABLES
  36. 36. LOW-FIDELITY WIREFRAMES HI-FIDELITY MOCKUPS INTERACTIVE PROTOTYPE TIME SPENT FIDELITY
  37. 37. JOHN GRUBER linkletter THE AUTEUR THEORY OF DESIGN
  38. 38. linkletter Quality of any creative collaborative endeavour, approaches the level of taste of who has control. JOHN GRUBER
  39. 39. linkletter RESULT TASTE
  40. 40. linkletter RESULT TASTE
  41. 41. CO-OWNERSHIP
  42. 42. DESIGNING IN THE BROWSER
  43. 43. DECIDING IN THE BROWSER DAN MALL
  44. 44. • Animations for Form Validation Messages • Use Flexbox or limit characters in description? • Minor breakpoints on layout quirks.
  45. 45. DEVELOPMENTDESIGN
  46. 46. DESIGN & DEVELOPMENT PRODUCT
  47. 47. THANK YOU Leihla Pinho André Luís me@andr3.net leihla@gmail.com C bnaLICENSED UNDER
  48. 48. 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/

×