Designers & Developers
•
3 likes•1,174 views
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.
Designers & Developers
- 1. DESIGNERS & DEVELOPERS ANDRÉ LUÍS | LEIHLA PINHO
- 4. WHAT ARE WE DOING HERE? c Randall Munroe (xkcd)
- 6. JD Lasica ERIK SPIEKERMANN THE PROCESS
- 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
- 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
- 23. • Should designers code? • Understand the limitations • Explore capabilities brad_frost
- 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
- 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
- 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
- 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
- 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.
- 49. THANK YOU Leihla Pinho André Luís me@andr3.net leihla@gmail.com C bnaLICENSED UNDER