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.

Things designers and developers should know (WDS18)

1,768 views

Published on

My talk from Web Directions Summit 2018, about things designers and developers should know about each other. If you've ever asked or been asked "should designers code", this talk is for you :)

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Things designers and developers should know (WDS18)

  1. 1. Things Designers and Developers Should KnowThings Designers and Developers Should Know Ben Buchanan @200okpublic, designops.expert
  2. 2. Design Dev Creativity, problem solving ⬌ Creativity, problem solving Design critique ⬌ Code review Sketching, discovery ⬌ Spikes, PoC Oh it's easy, my nephew designed a website! ⬌ Oh it's easy, my nephew built a website!
  3. 3. Knowing to understand empathy and respect Knowing to do execution
  4. 4. 初心
  5. 5. Golden rule of collaborative knowledge Learn about others as you'd have them learn about you.
  6. 6. Corollary Be a guide for others to find the joy you found.
  7. 7. The inevitable question...The inevitable question... Should designers code? Should developers design?
  8. 8. It's nonsense!It's nonsense! Design and development are interlinked.
  9. 9. Would we ask...?Would we ask...? Should we be good at our jobs? Should we build empathy with coworkers?
  10. 10. To what level should you code/design?To what level should you code/design? None at all Understand but don't do Do to non-production standard Do to production standard
  11. 11. Levels of knowledgeLevels of knowledge None at all part of the job Understand but don't do Do to non-production standard Do to production standard
  12. 12. Levels of knowledgeLevels of knowledge None at all part of the job Understand but don't do Do to non-production standard Do to production standard career change
  13. 13. Opinions...Opinions...
  14. 14. Data!Data! Surveyed 176 people on design and development collaboration.
  15. 15. ResultsResults How much code should designers know or do? 2.8%2.8% 52.3%52.3% 42%42% 2.8%2.8% None at all Know how code works, but not write any code Be able to write code, but not to production standard Be able to code to production level
  16. 16. ResultsResults How much design should developers know or do? 1.1%1.1% 47.7%47.7% 48.3%48.3% 2.8%2.8% None at all Know how design works, but don't do any design Be able to do some design, but not to production standard Be able to design to production level
  17. 17. LevelsLevels (now with data for extra shine!)(now with data for extra shine!) None at all Understand but don't do Do to non-production standard Do to production standard
  18. 18. What should you learn, then?What should you learn, then? Roles and process 'The basics' History and schools of the craft
  19. 19. How important is it to understand roles, process and principles? 1 (not important) 2 3 4 (critical)
  20. 20. ResultsResults How important is it to understand history and schools? 1 (not important) 2 3 4 (critical)
  21. 21. We are part of historyWe are part of history
  22. 22. Recent historyRecent history
  23. 23. SchoolsSchools Design Movements Programming Paradigms Minimalism, Bauhaus, Modernism, Postmodernism Procedural, Literate, Object Oriented, Functional
  24. 24. Back to roles, process, basics 1 (not important) 2 3 4 (critical)
  25. 25. Roles & ProcessRoles & Process
  26. 26. Design RolesDesign Roles Research does it solve the problem? UX how it feels and flows Interaction design how it behaves Visual design how it looks
  27. 27. https://uxdesign.cc/the-spectrum-of-digital-design-roles-in-2018-3286390a9966
  28. 28. Development RolesDevelopment Roles Frontend/UI code for rendering things Backend/Application code to apply business rules Data code to supply content DevOps code to deploy the other code QA code to make sure the other code is still working
  29. 29. Would you believe developers haven't produced lovely infographics about their roles?
  30. 30. ProcessProcess While every team differs, there are common shapes.
  31. 31. thedesignsquiggle.com
  32. 32. https://medium.com/@awilkinson/skateboard-bike-car-6bec841ed96e
  33. 33. The Basics™ for designersThe Basics™ for designers The medium HTML, CSS, JS Where design breaks code accessibility, performance Working together versioning
  34. 34. HTMLHTML
  35. 35. CSS layoutCSS layout
  36. 36. JavaScriptJavaScript
  37. 37. AccessibilityAccessibility
  38. 38. PerformancePerformance
  39. 39. "Versions""Versions" draft_2.psd draft_2_right-font.psd final.psd final_fixed-colour.psd final_fixed-colour_updates-from-client.psd first_draft.psd
  40. 40. "Versions""Versions" draft_2.sketch draft_2_right-font.sketch final.sketch final_fixed-colour.sketch final_fixed-colour_updates-from-client.sketch first_draft.sketch
  41. 41. DatestampsDatestamps 20181020_first_draft.sketch 20181021_draft_2.sketch 20181022_fix-font.sketch 20181023.1_final.sketch 20181023.2_fixed-colour.sketch 20181023.3_client-updates.sketch
  42. 42. SemVerSemVer project_0.1.0.sketch project_0.2.0.sketch project_0.2.1.sketch project_1.0.0.sketch project_1.0.1.sketch project_1.2.0.sketch
  43. 43. Cloud systems need versions tooCloud systems need versions too
  44. 44. Then...Then... Keep learning code! CLI basics Data structures AI concepts
  45. 45. The Basics™ for developersThe Basics™ for developers Design is not random fundamentals Design language fundamentals Design as problem solving research, Design Thinking
  46. 46. Colour theoryColour theory
  47. 47. Colour psychologyColour psychology
  48. 48. TypographyTypography
  49. 49. Type psychologyType psychology
  50. 50. C.R.A.P.C.R.A.P.
  51. 51. AnimationAnimation
  52. 52. Voice & ToneVoice & Tone
  53. 53. Then...Then... User research Sketching Design Thinking
  54. 54. Golden rule of collaborative knowledge Learn about others as you'd have them learn about you. Corollary Be a guide for others to find the joy you found.
  55. 55. Lead by understanding Lead by doing
  56. 56. Thank you.Thank you. Thanks to all those who shared the joy of design with me.
  57. 57. LinksLinks Learn to Code HTML & CSS Chris Coyier: Hey designers, if you only know one thing about JavaScript, this is what I would recommend WAI: Accessibility for designers Webaim: Accessibility for designers Paciello Group CCA Yesenia Perez-Cruz: Design decisions through the lens of performance Brad Frost: performance budget builder https://www.performancebudget.io/
  58. 58. LinksLinks Understanding colour theory Canva: learn design The illusion of life (animation) Voice and Tone Voice and Tone guides Spectrum of design roles
  59. 59. Image creditsImage credits Created by Adrien Coquet from the Noun Project Created by Lakshisha from the Noun Project
  60. 60. Created by BomSymbols from the Noun Project Created by Aly Dodds from the Noun Project Created by B Barrett from the Noun Project
  61. 61. Created by Nikita Kozin from the Noun Project Created by Grégory Montigny from the Noun Project Created by Trevor Dsouza from the Noun Project
  62. 62. Created by Maxim Kulikov from the Noun Project Created by GD Creativ from the Noun Project
  63. 63. Image creditsImage credits https://fstoppers.com/education/how-color-theory-improves-your-photography-and- retouching-215697 https://thelogocompany.net/blog/infographics/psychology-color-logo-design/ https://material.io/design/typography/understanding-typography.html https://www.crazyegg.com/blog/psychology-of-fonts-infographic/ https://paper-leaf.com/blog/2012/10/principles-of-design-quick-reference-poster/ Squiggle from https://thedesignsquiggle.com/ Some I could not find a definitive source to credit.

×