Web Design for Web Developers

Or code-aware design for design-agnostic coders.


My friends always tell me that, as a soccer player, I’m a very good developer. That’s fine, I don’t really need to be good at it, and I don’t have plans to play the World Cup anytime soon. But I think it’s important to do things even if you’re not very good at them, specially if they’re somehow related to what you actually do well.

One of the other things I’m bad at, is web design. I don’t suck at it, my user interfaces are not particularly ugly, but they’d never reach more than 5 likes in Dribbble or get me the Awwward’s Site Of The Day. And that’s OK as well. I’m a front-end developer, and when I open Photoshop and start moving pixels around and playing with font faces, my goal is not to master the world of design, but to better understand the process of how the web is built, and hence, improve my skills as a web developer.

Like I said, I’m no designer, but I can tell their job is not an easy one. For starters, they have to deal with the whole “creative” part of it, which is some sort of black magic for us developers. Then there’s the complex set of tools they have to master in order to transfer their drawings from a piece of paper to the screen. With that in mind, they have to comply with other areas of design, like User Experience and Interaction Design (which require a very different set of skills), because creating things that just “look good” won’t do the job anymore. And as if they didn’t have enough in their plate, web designers have to learn to code.
Now, we can discuss a little about whether HTML & CSS should be responsibility of designers or not. But the reality is that the bar for them is a lot higher now than what it used to be a few years back, and it’s not because someone asked the question “how many designers you need to change a lightbulb?”, but because they discovered that by learning more about the process of building and delivering a web site, they were able to do a better job.

Code-agnostic design and the dream of the 90s

Markup and stylesheets are not the only skills in a modern designer’s toolkit; things like preprocessors, template engines, some basic JavaScript, using text editors and even managing task runners are now part of many web designer’s workflows.
And that’s a good thing not only because they can perform better, but also because it helps them create designs that are more code-aware. They know what can and should be done with code, they care about performance and have concerns about browser compatibility; and as a result, pointless discussions and even arguments with the development team can be avoided when both sides are on the same page.

That’s why I strongly believe that web developers should also learn how to design. Not to master it, not to be able to do everything on their own; but to understand why the widget they’re coding is placed at the top of the screen and not at the bottom, and how that small detail that might take a few hours to develop impacts on the end user. Hopefully avoiding pointless arguments, engaging in more interesting discussions, and at the end of the day, building a better web.