SlideShare a Scribd company logo
Things Designers and Developers Should KnowThings Designers and Developers Should Know
Ben Buchanan
@200okpublic, designops.expert
Things designers and developers should know (WDS18)
Things designers and developers should know (WDS18)
Things designers and developers should know (WDS18)
Things designers and developers should know (WDS18)
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...The inevitable question...
Should designers code?
Should developers design?
It's nonsense!It's nonsense!
Design and development are interlinked.
Would we ask...?Would we ask...?
Should we be good at our jobs?
Should we build empathy with coworkers?
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
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
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
Opinions...Opinions...
Data!Data!
Surveyed 176 people on design
and development collaboration.
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
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
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
What should you learn, then?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)
ResultsResults
How important is it to understand history and schools?
1 (not important) 2 3 4 (critical)
We are part of historyWe are part of history
Recent historyRecent history
SchoolsSchools
Design Movements Programming Paradigms
Minimalism, Bauhaus, Modernism,
Postmodernism
Procedural, Literate, Object
Oriented, Functional
Back to roles, process, basics
1 (not important) 2 3 4 (critical)
Roles & ProcessRoles & Process
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
https://uxdesign.cc/the-spectrum-of-digital-design-roles-in-2018-3286390a9966
Things designers and developers should know (WDS18)
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
Would you believe developers haven't produced lovely infographics about their roles?
ProcessProcess
While every team differs,
there are common shapes.
Things designers and developers should know (WDS18)
thedesignsquiggle.com
Things designers and developers should know (WDS18)
https://medium.com/@awilkinson/skateboard-bike-car-6bec841ed96e
The Basics™ for designersThe Basics™ for designers
The medium HTML, CSS, JS
Where design breaks code accessibility, performance
Working together versioning
HTMLHTML
CSS layoutCSS layout
JavaScriptJavaScript
AccessibilityAccessibility
PerformancePerformance
"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
"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
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
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
Cloud systems need versions tooCloud systems need versions too
Then...Then...
Keep learning code!
CLI basics
Data structures
AI concepts
The Basics™ for developersThe Basics™ for developers
Design is not random fundamentals
Design language fundamentals
Design as problem solving research, Design Thinking
Colour theoryColour theory
Colour psychologyColour psychology
TypographyTypography
Type psychologyType psychology
C.R.A.P.C.R.A.P.
AnimationAnimation
Voice & ToneVoice & Tone
Then...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.Thank you.
Thanks to all those who shared the joy of design with me.
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/
LinksLinks
Understanding colour theory
Canva: learn design
The illusion of life (animation)
Voice and Tone
Voice and Tone guides
Spectrum of design roles
Image creditsImage 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 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.

More Related Content

Things designers and developers should know (WDS18)