The many layers of web design

This week there was a very interesting, very off-topic discussion on my blog. I wrote a a little post about the classic articles for web professionals, and in it I wrote some poorly worded sentences that caused a few reactions. There was one comment by Gertjan, a visual designer, that struck me most, because I think it emphasises exactly the core of what I consider to be the problem with web design. He wrote:

Do you have any idea how hard it is for designers to retrieve actual content to design something with? We spoiled our clients when we showed them Lorem Ipsum.

I do know how hard it is. But that doesn’t mean we can stop trying, because really, we can’t. Web design is about designing content, and not about putting content into a nice picture. If you don’t have any idea about what kind of content you’re dealing with, there is really nothing to design. You can not work without knowing what you’re designing. So the first thing you should do is not creating a wonderful picture that represents the feeling of a company. No. The first thing is sitting down, with the client, and understand what the site is going to be about. It’s not necessary to create the exact content that will be on the site, it’s about understanding the structure of the site, and the structure of the content that will be shown on different parts of the site.

Structure First. Content Always.

Mark Boulton wrote an excellent article called Structure First. Content Always a while ago. You should read it now, and then come back. As you’ve just read, in the article, Mark describes five steps you should take to get a clear view of the structure of the content, to get a clear view of the stuff you will be designing. The stuff you will make beautiful. The stuff you’ll make as easy as possible to use. The stuff your visitors need.

Layers of web design

In his article Mark refers to this article by Relly Annet-Baker about creating so called page tables. These are tools to describe what a page is about, and what items should be on a page, and what priority each item should have. Tools like these are actually pretty handy in getting a clear view of what will be on a page. And when you look closely to this structure you’ve just created, you’ll see the basic outlines of an HTML page. So there you have it. The first step in our visual design is done, we’ve created an actual HTML page. If you stop, you have an ugly, but usable page. You can like the content of this page or hate it, but either way it is a usable page. Some people might think this is a perfect page, but most will agree that it’s not. Not at all. It’s not finished. There’s a lot of room for improvement. But yes, this is definitely a usable page, for everybody, no matter the browser or device.

More layers

So now that we have the content, or at least the structure, we have something to design. Personally I think a logical place to start is with the typography, because it gives you some logical units to work with. Once you’ve created a good typographic scale that works for your content, you can actually distill a logical measure from it, which in turn can help you in creating the grid systems you need for the different break points. And once your typography is done, according to some great designers, your design is 95% done.

More, more!

This, I think is too easy in many cases. Typography is definitely a good, logical starting point, but the web is more that just black words on a white background, it’s not a book. We have colour, texture, images, movies, forms and of course interaction. That’s content too, and we have to fit all that stuff into the grids we distilled from our typography. These might very well change some of the simple design choices we made before. It’s like Mark said:

Content needs to be structured and structuring alters your content, designing alters content. It’s not ‘content then design’, or ‘content or design’. It’s ‘content and design’

So far, so simple

All the design choices I’ve been talking about so far are pretty easy to create. It’s just HTML and CSS, really nothing fancy, and if you haven’t done anything weird, it should still fit within this simple definition of a perfect website. We’ve added typography to our content, which doesn’t break any browser. We’ve added grids, which will make the content much nicer on bigger screens, and we’ve altered the design, based on the content, and we’ve altered the content based on the design so far.

What about the fancy stuff?

On top of this carefully designed structured content we can add the fancy stuff. We might for instance decide that a page transition looks better than a simple page refresh. Technically, this is functionality that can be added to every website with hyperlinks. By adding this extra layer we can simply replace the default functionality with our desired transition. And this is really how all non-default functionality should be designed: as an extra layer on top of an already carefully crafted design. Here’s why. If for whatever reason the fancy feature doesn’t work, the user still gets a good experience. And there are many reasons why features don’t work. For instance, the user might visit your site while travelling on a train in The Netherlands. It happens quite often that the content is loaded, but the scripts are not. If a smooth page transition was designed and developed as a core feature, the site would be unusable. If it’s an added layer, the user probably won’t notice a thing. Another reason might be that along the way we find out that there’s simply not enough money to create a good smooth transition script that doesn’t break expected browser behaviour. If you started out with creating the script instead of designing the content, you might now have a brilliant script but no content to transition. It’s all about priorities.

Change your mind

And a third reason might be that next year we are bored with transitions and we decide that a snappy page refresh is what we want. If transitions were the core of our design and our technical architecture, we’d have a big problem now. If they are just a layer on top of a fully functioning site, we’d just have to remove the script. Or change it to animate differently.

This is not new

Front-end developers have been working exactly like this for years. We’ve always written our HTML first, then added CSS, and on top of that we’ve added JavaScript. We call it separation of concerns and it means that we separate the content from the styling and the functionality. Even if you come up with a super fancy design with all bells and whistles, below the surface we build it with HTML, CSS and JavaScript. Below the surface the site is created as I explained in this whole article. We analyse the design, and create three separate layers. The big difference, and I think this is really important, is that all the different design decisions I described above are now solely made by a front-end developer, who is often a visually impaired person like me. I should not be making these decisions. But all these layers of web design need to be designed. So if a designer doesn’t do it, I’ll have to. I really believe a designer should design all of these layers, and be responsible for how they look.

And the key, of course, as we all know, can be found in working together instead of working separately. By replacing content with front-end, this quote by Mark Boulton suddenly becomes nonsensical gibberish. But somehow, weirdly, it also makes sense.

It’s not ‘content then design’, or ‘content or design’. It’s ‘content and design’

Comments

    • Mallory
    • #

    quote: “The big difference, and I think this is really important, is that all the different design decisions I described above are now solely made by a front-end developer, who is often a visually impaired person like me. I should not be making these decisions.”

    Very, very true. This is just as bad, maybe worse, than being given an image of a web site and told to code it without any idea what it’s supposed to *do* or be *about*.

    The funny thing is, you’re talking as if you get to choose whether or not you’re the one making those decisions. Interesting idea.

    • Gertjan
    • #

    True this. Very insightful. Reminds me also of the ‘content inventory’ Stephen Hay spoke about in his book ‘Web Design Workflow’. Good way to get clients to really start thinking about what their site should communicate.

    Lately i find that if you have a proper grid & a good choice of typography almost the only thing you need is beautiful images and well written, well structured text. Boom: there’s your design, and the rest is up to the front-end developer.

    And that is probably the definition of the graphic designer: the guy who knows how to structure content in a beautiful, conceptual way. In the early days the lithographers, printers and bookbinders took over from there. These days it’s front-enders and developers.

    And i remember standing next to the printing press to check if colors were correct, or if i liked the way the paper handled the ink. You see: collaboration!

    • Gertjan
    • #

    “by a front-end developer, who is often a visually impaired person like me. I should not be making these decisions.”

    One question though: if designers have to learn coding, shouldn’t front-enders have to learn designing?

    • Vasilis
    • #

    @Gertjan: I actually believe we all need to learn some of the important basics of the professions around us. Right now, the borders between visual design and front-end development are unnecessarily strict. Just like the borders between front-end and back-end, and in many cases interaction design and visual design. I’m not saying we should all become all-rounders, but our work would definitely improve if we had some overlap. So to answer your question: yes (-: