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.

of

Designers & Developers Slide 1 Designers & Developers Slide 2 Designers & Developers Slide 3 Designers & Developers Slide 4 Designers & Developers Slide 5 Designers & Developers Slide 6 Designers & Developers Slide 7 Designers & Developers Slide 8 Designers & Developers Slide 9 Designers & Developers Slide 10 Designers & Developers Slide 11 Designers & Developers Slide 12 Designers & Developers Slide 13 Designers & Developers Slide 14 Designers & Developers Slide 15 Designers & Developers Slide 16 Designers & Developers Slide 17 Designers & Developers Slide 18 Designers & Developers Slide 19 Designers & Developers Slide 20 Designers & Developers Slide 21 Designers & Developers Slide 22 Designers & Developers Slide 23 Designers & Developers Slide 24 Designers & Developers Slide 25 Designers & Developers Slide 26 Designers & Developers Slide 27 Designers & Developers Slide 28 Designers & Developers Slide 29 Designers & Developers Slide 30 Designers & Developers Slide 31 Designers & Developers Slide 32 Designers & Developers Slide 33 Designers & Developers Slide 34 Designers & Developers Slide 35 Designers & Developers Slide 36 Designers & Developers Slide 37 Designers & Developers Slide 38 Designers & Developers Slide 39 Designers & Developers Slide 40 Designers & Developers Slide 41 Designers & Developers Slide 42 Designers & Developers Slide 43 Designers & Developers Slide 44 Designers & Developers Slide 45 Designers & Developers Slide 46 Designers & Developers Slide 47 Designers & Developers Slide 48 Designers & Developers Slide 49 Designers & Developers Slide 50
Upcoming SlideShare
Dr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivas
Next
Download to read offline and view in fullscreen.

3 Likes

Share

Download to read offline

Designers & Developers

Download to read offline

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.

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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/
  • eribeiro

    Apr. 22, 2019
  • sfcmiguel

    Jul. 21, 2016
  • s3rgiosan

    Mar. 15, 2016

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.

Views

Total views

1,067

On Slideshare

0

From embeds

0

Number of embeds

15

Actions

Downloads

5

Shares

0

Comments

0

Likes

3

×