Stay close to the final pixels
The lines between design and code are becoming more and more blurred. You can choose to ignore it or start embracing that code will make you a better designer.
One day I suddenly became a better designer. I had worked with CSS for multiple years, but a workshop with Harry Roberts in the cold city of Zurich changed my relationship to design and code forever. We got a task to review a design and look for patterns and similar elements. The idea behind the exercise was to simplify the code and find objects and abstractions we could reuse. I was struck about the parallel to how this also made the design better: Do these elements have different border radius? Why do I have five different font sizes when I easily could have only two instead?
Understanding code forces you to think about reusability and modularity in your designs. Design isn’t just impacting the styling anymore – it also lives in code. This means that designers who can think like developers will have a vast lever as we advance. Design tools now have components with variants, color variables, and flexible layout systems emulating real-world code. Design is suddenly starting to play a role in how codebases and components are structured.
I was bored of being bored. The teacher in front of me had been going on for three hours about how paper is created and what defines the fiber direction of the paper. He continued about offset printing, digital printing, and gravure. We couldn’t care less. In the middle of the room stood an old Heidelberg Windmill printing press, and the teacher had promised that we would try it out. This was a once-in-a-lifetime opportunity! Our teacher was retired but came to talk to us out of his love for paper and this printing press. No one else knew how to operate the noisy monster, so it was a matter of time before the school would have it removed.
After lecturing for four hours, he finally fired up the Heidelberg machine. It looked like an octopus sucking up a sheet of paper, laying it elegantly on a metal plate, and rolling ink over. It was a hypnotic, meditative, and noisy dance taking place right before us. We each got a turn letterpressing our name and controlling the beast. The prints were crisp, and you could see the subtle imprint on the letters.
We were all ecstatic when we bound small leaflets of papers with all our names to conclude the day. There was only one problem: our booklets wouldn’t lay flat, making it hard to see our printing results. Our teacher smirked when he once again could lecture us on the magnificent world of papers: We hadn’t considered the paper’s fiber direction when we printed, causing the paper to rise rather than lay flat.
Just like any material, screens have affordances. [..] The grain is what gives the material its identity and tells you the best way to use it. Figure out the grain, and you know how to natively design for screens.
As a print designer, you’ll want to understand paper, fiber directions, ink, and printing processes. As a software UI designer, you’ll want to understand computers and code.
A designer’s job is not just about how things look but also the intangible. What happens between the screens? How does the solution behave in response to interaction? Some of these states are impossible to adjust or communicate without touching code.
Designing the way elements adapt and morph in the in-between moments is half of your work as a designer. You’re crafting the interstitials.
One of these intangible features of user experience is speed. A website can be beautiful and have great UX, but that doesn’t help if half of the visitors won’t use the site because of performance issues. It is dependent on everyone’s decisions, from designer to front-end to back-end.
Your design choices directly impact the code, so it’s time you get your hands dirty and understand how it’s used! After all, the users are seeing the result of the code, not your elaborate Figma sketches. The lines between design and code will become more and more blurred over the coming years. You can choose to ignore it, or you can start thinking like a developer and stay close to the final pixels!