Ulf Schneider

Dave quotes The Hot Potato Process to give this way of working a name. The name is misleading. Passing a hot potato implies you want to get rid of it because it´s hot. I do not want to get rid of it. I want to get a hold on it, enjoy handling it and playing with it, then passing it to someone else for enrichment and getting it back. As a metaphor, soccer could be more suitable. Passing the ball back and forth to your teammates, enjoying the interaction while crossing the field to achieve a goal, is what I want. I want serious play.

When designing responsive websites by starting with a small screen and introducing a breakpoint when the page layout requires it, you will resize your browser window all the time to see how the page layout works at different sizes.

This design process is impossible to follow by creating static mockups of page layouts in a design tool and then implementing those mockups for the browser.

...When the entire process is relying on the two subsequent steps of designing a polished static mockup with a design tool and then implementing it, you have introduced a nice waterfall process in your workflow and waterfall processes make learning slow and expensive, while you want quick learning in any software project!

I prefer coding and adjusting continuously within a browser, the medium of delivery.

...There are two ways to design with code:

It can be done by a single person able work with both forms of expression, design and code. Jim Nielsen calls this person a design engineer and Jim has an excellent example of the problems being solved by design with code in his text The Case For Design Engineers, Pt. II.

The alternative is two closely collaborating people, a designer and a coder, continuously working together to identify the relevant details, taking decisions and implementing so that it doesn´t feel like designed first and implemented second.

• leonardocolor.io allows to define color palettes and indicates WCAG contrast.
• hihayk.github.io/scale/ allows to take a hex color and create lighter and darker colors with a beautiful and focused user interface. It does not indicate WCAG contrast. The tool is part of hayk.design.
• github.com/primer/prism/ is an experimental GitHub tool for defining accessible color palettes to be used for light mode and dark mode.