Design for the web

While catching up my my RSS feed, I read through Brad Frost’s recent post Should Designers Code? I’ve always agreed with the overall sentiment of the article, especially this bit:

Designers need to understand and work with the grain of the medium for which they’re designing. For the web, that means understanding important concepts related to how things play out in the browser.

I’m not sure if there’s something in the water, or if it’s just that time in the cycle of discourse, but it feels like this topic has come back to the front of a number of conversations recently. Last month I published The Box Model for Design after having a few discussions with peers and coworkers, similarly Nathan Curtis tweeted about how designers struggling with auto layout, “Designers don’t understand the box model and hierarchically nested layout techniques.”

Similarly, I feel like there’s been more conversations recently about what it means to be a web designer, the concept of a design engineer, and how we work together to build digital products in general.

I cut my teeth on the web right as the era of responsive design was taking off. Having a background in design and development was incredibly valuable when it came to understanding how we could shift and adjust layouts on the fly for mobile sites, and even more so when responsive became the norm and the mobile-first methodology became the norm. I could quickly take a design done by someone else and understand how to shift elements and layouts between sizes and devices.

In this modern era of design it feels like we’ve lost this sort of thinking.

I still see many designers working on their own, in a tool that tries it’s best to imitate what the web does, but ultimately falls short. I’ve had conversations about convoluted solutions to problems that would have been much easier to solve for the designer if they had just had a quick chat with a developer, or understood how elements on the web worked.

I have tremendous respect for the team at Figma, and think they’ve done a wonderful job of bringing design and dev closer with the release of things like Figma Variables and Auto Layout, but at the end of the day a design in Figma is still just a simulacrum of a finished web product. While Auto Layout allows designers to guild in a way that is similar to Flexbox, there is no analogy within the tool for CSS Grid, and even with the new typography variable support released this week, we still cant do “true” responsive or fluid type scales within a design.

As design tools stand today there is still no better way to see how an actual web product behaves than to load it up in a browser, interact with it, and resize the window.

I don’t believe that designers should know (or be required) to write production-ready code, but I do think we need to begin asking for, and expecting more, our of our designers. If there is a lack of understanding of the basic principles of web development, we’re inevitably going to see designs that don’t align, our designers are going to continue to struggle to understand how to use features like auto layout, and we’re going to continue down the road of slow arduous handoffs or updates.

What can we do about it?

I think that as designers and developers we need to have more conversations. I think we can hold ourselves and our peers to a higher standard, designers don’t want to “just make it pretty,” so lets take the time to work with our partners in development to understand how our designs are actually coming to life, and how we can put those designs together in a way that can take advantage of that understanding.

If you’re a designer and you want to learn how to code I think that’s phenomenal, you’re going to be an incredible partner and asset to those you end up working with. If you have no desire to learn how to code, please, at least understand how the building gets put together.