A presentation at Web Directions Summit in in Sydney NSW, Australia by Ben Buchanan (200ok)
Things Designers and Developers Should Know Ben Buchanan @200okpublic, designops.expert
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!
Knowing to understand empathy and respect Knowing to do execution
初心
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.
The inevitable question… Should designers code? Should developers design?
It’s nonsense! Design and development are interlinked.
Would we ask…? Should we be good at our jobs? Should we build empathy with coworkers?
To what level should you code/design? None at all Understand but don’t do Do to non-production standard Do to production standard
Levels of knowledge None at all part of the job Understand but don’t do Do to non-production standard Do to production standard
Levels 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
Opinions…
Data! Surveyed 176 people on design and development collaboration.
Results How much code should designers know or do? 52.3% 42% 2.8% None at all 2.8% 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
Results How much design should developers know or do? 47.7% 48.3% 2.8% 1.1% 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
Levels (now with data for extra shine!) None at all Understand but don’t do Do to non-production standard Do to production standard
What should you learn, then? Roles and process ‘The basics’ History and schools of the craft
How important is it to understand roles, process and principles? 1 (not important) 2 3 4 (critical)
Results How important is it to understand history and schools? 1 (not important) 2 3 4 (critical)
We are part of history
Recent history
Schools Design Movements Minimalism, Bauhaus, Modernism, Postmodernism Programming Paradigms Procedural, Literate, Object Oriented, Functional
Back to roles, process, basics 1 (not important) 2 3 4 (critical)
Roles & Process
Design Roles Research does it solve the problem? UX how it feels and flows Interaction design how it behaves Visual design how it looks
https://uxdesign.cc/the-spectrum-of-digital-design-roles-in-2018-3286390a9966
Development 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
Would you believe developers haven’t produced lovely infographics about their roles?
Process While every team differs, there are common shapes.
thedesignsquiggle.com
https://medium.com/@awilkinson/skateboard-bike-car-6bec841ed96e
The Basics™ for designers The medium HTML, CSS, JS Where design breaks code accessibility, performance Working together versioning
HTML
CSS layout
JavaScript
Accessibility
Performance
“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
“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
Datestamps 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
SemVer 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
Cloud systems need versions too
Then… Keep learning code! CLI basics Data structures AI concepts
The Basics™ for developers Design is not random fundamentals Design language fundamentals Design as problem solving research, Design Thinking
Colour theory
Colour psychology
Typography
Type psychology
C.R.A.P.
Animation
Voice & Tone
Then… User research Sketching Design Thinking
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.
Lead by understanding Lead by doing
Thank you. Thanks to all those who shared the joy of design with me.
Links 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/
Links Understanding colour theory Canva: learn design The illusion of life (animation) Voice and Tone Voice and Tone guides Spectrum of design roles
Image credits Created by Adrien Coquet from the Noun Project Created by Lakshisha from the Noun Project
Created by BomSymbols from the Noun Project Created by Aly Dodds from the Noun Project Created by B Barrett from the Noun Project
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
Created by Maxim Kulikov from the Noun Project Created by GD Creativ from the Noun Project
Image credits https://fstoppers.com/education/how-color-theory-improves-your-photography-andretouching-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.
The perennial question “should designers code” is unbalanced without asking “should developers design”. Ask both, and ask to what level. And then you’ll be looking into things designers and developers should know.
The following resources were mentioned during the presentation or are useful additional information.
Requires free-tier Conffab account to access the recording.
Here’s what was said about this presentation on social media.
for free. You
can too.