Download as PDF, PPTX
Uploaded byAndré Luís
Designers & Developers
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.
More Related Content
Designers & Developers
- 1. DESIGNERS & DEVELOPERS ANDRÉ LUÍS| LEIHLA PINHO
- 2.
- 3.
- 4. WHAT ARE WE DOING HERE? c Randall Munroe (xkcd)
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12. BACK END FRONTEND 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.
- 19. “WE’RE GONNA DOTHIS!” © 2015 Disney/Lucasfilms NOWADAYS…
- 20. Wireframes and mockups areorientations — never the full puzzle. Developers will find holes that need to be filled. How will they be filled?
- 21.
- 22.
- 23. • Should designerscode? • Understand the limitations • Explore capabilities brad_frost
- 24.
- 25. • Design forthe ugly • Design the edge cases • Explain flows & interactions
- 26. SCOTT HURFF AWKWARD UI ©Scott Hurff / Twitter
- 27. SCOTT HURFF Awkward UIis 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 EmptyState Error State Partial State Loading State © Scott Hurff / Twitter
- 29.
- 30.
- 31. “HELP ME UNDERSTAND” Helpme 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 thatallows notes and feedback. invisionapp.com
- 33.
- 34. • Define yourown language • Design a system • Build a common styleguide
- 35. 0.5rem 1rem 1.5rem 2.5rem extra-small small medium large “Large margin afterthat box.” @include after-margin(large);
- 36.
- 37.
- 38.
- 39. linkletter Quality of anycreative collaborative endeavour, approaches the level of taste of who has control. JOHN GRUBER
- 40.
- 41.
- 42.
- 44. DESIGNING IN THEBROWSER
- 45. DECIDING IN THEBROWSER DAN MALL
- 46. • Animations forForm Validation Messages • Use Flexbox or limit characters in description? • Minor breakpoints on layout quirks.
- 47.
- 48.
- 49. THANK YOU Leihla Pinho AndréLuís me@andr3.net leihla@gmail.com C bnaLICENSED UNDER
- 50.