Save 37% off PRO during our Black Friday Sale! »

Designers & Developers

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.

3de5aa25b59d3680fcbfd5d78bb984c8?s=128

André Luís

March 03, 2016
Tweet

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)

  5. None
  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

  43. None
  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/