Things designers and developers should know

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.