This article was written in 2012. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

What would a web design tool look like?

A tool to design websites should be based on the web stack, which actually closely resembles the classic Graphic Design stack. Instead of the arbitrary layers we see in tools like Photoshop, we would need (at least four) base layers that need to be touched by the designer. The content layer, the typography layer, the layout layer and finally the paint layer.

The Content Layer

The content layer could be filled with real content. Or the tool could provide some common content types to work with. Articles with common patterns, forms, widgets, things like that.

The Typography layer

Typography is the base of a design. Typography defines the rhythm and it can help you in finding clever breakpoints. So force the designers to first define the typography before they move on. Typography is also something almost all your users will see: even on small screens, with a one column layout, the typography is just there. It should be really good.

The Layout

Layout on the web is different. It’s fluid. One grid is probably not enough for a website. This tool should make it easy to work with different grids. It should show the content while working on your layouts and grids. Grids can be defined by the typography: things like measure and white-space can be based on the base font size. It should be possible to link the grid layer to the typography layer. When you decide to change a font, the grids should adapt.

The Paint

Right now the web design tools we have stimulate you to start painting as soon as possible. Paint should really be the last thing you add to your website. I’m not sure how to enforce this, but maybe the decorative tools only work when the content, the typography and the layout layers are done.

Of course a web design tool would need much, much more. But I think these basic principles of the web, the web stack, should be the core of all web designers tools. Yes, this does look a bit like InDesign. Just replace the paper sized fixed document size with the fluid nature of web and you’re done. You are more than welcome to build this tool, I’d love to beta test it and help you out with ideas. I would appreciate it if someone else than Adobe built it, they need some serious competition.