Designers & Developers
3 likes571 views
The document discusses the collaboration between designers and developers in the context of design and development processes, emphasizing the importance of communication and shared vocabulary. It highlights the challenges in design, such as limitations of coding and creating effective user interfaces, and the necessity for mutual understanding between team members. Various examples and theories related to design are provided to illustrate the complexities of the design and development relationship.
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