UX Magazine

Defining and Informing the Complex Field of User Experience (UX)
Article No. 36 February 23, 2006

The Layers of Design: the style layer

Designing for the Web, as I see it, is a multi-layered process. It’s a process in which each layer addresses specific design needs related to client aims, brand characteristics and site user habits and expectations. Sadly, the last of these layers to be applied in the process, the application of style, is an oft-maligned element of design. Style for its own sake or by itself is not design, certainly, but stylistic concerns are important to successful design.

Even so, any day of the week you can find designers in online forums criticizing web page graphic designs for having style. Prime targets for criticism these days include rounded corners, gradients, drop shadows, large buttons, fat icons or a worn look. Some designs garner criticism simply because the title font is Trebuchet MS.

Much of this criticism is explained, ostensibly, by relegating these graphic elements into the dreaded and cliche Web 2.0-look category of graphic design. It seems that once a cliche is defined, all of its characteristics must be persecuted without thought or consideration for context; at least by those who lack relevant understanding.

Now certainly these or other graphic elements can be ill-used and irrationally applied to design. But like all graphic elements, each of these has communicative value and contributes to the message conveyed by the page design. A designer must know what each of these and other graphic elements communicates and use them where and how it’s most appropriate. Indiscriminate use of stylistic elements in design does indeed amount to needless affectation or embellishment. Nevertheless, style is an important layer in the design process and must not be neglected.

Layering

Breaking the design process up into layers is a useful mechanism for ensuring that the effort is comprehensive and contextual. By starting with the most fundamental factors in the design and designing them to be contextually appropriate, you can build successive layers of the design on the right sort of foundation.

Once you’ve got a clear picture of the client aims and desires, brand considerations, site and specific page purposes, target user habits and expectations and the different pages’ contents you can begin with the most fundamental layer. Different designers might categorize the layers differently, but my basic suggestion for layering would be:

  • Information architecture Start by deciding and/or planning for what information is available where, when, and under what conditions throughout the site.
  • Interface behaviors Specific behaviors are sometimes required or advisable for certain interface elements. These often affect the design effort from both a functional and visual standpoint.
  • Visual hierarchy of the content It’s often beneficial to provide clues to what’s most important on the page, next important, and so on.
  • Layout The fundamental visual framework to support the previously mentioned elements.
  • Style The look and feel of the page/site must support all of the above and tie things together neatly.

Each layer is important and, done well, contributes to the wholeness of the design. Leave out one layer and the design will fail to reach its potential. One could go so far as to say, as I have on a few occasions, that designs that ignore one of these layers are simply poor designs.

Elements of Style

The application of style to the design might be subtle or heavy-handed, according to the context, but no amount of stylistic application can be said to be too little or too much in and of itself. Context matters in every aspect of design and this is certainly true of stylistic concerns.

Let’s take a couple of those much-maligned interface cliches for example. Note that both Blogger and Sprint use rounded corners in their page designs. However, these sites don’t use the same sort of rounded corners, and for good reason. Each is chosen for specific effect. Do you know what that effect is? These sites’ designers did.

Both Blogger and WordPress are weblog software application websites. However, Blogger uses lots of gradients, drop shadows, fat icons and rounded text in its main page interface while WordPress does not. Know why? These sites’ designers do.

There’s no two ways about it; style matters. And style applied to a web page design is not always just style for its own sake. It’s often a vital supporting element in effective design. Competent designers understand this. The nattering nabobs and little design generals of the online forums do not. Which is why there’s a difference between getting paid and getting comments in a forum.

So don’t mistake the presence of style for a lack of substance. Don’t forget context when evaluating or applying design. And don’t work for comments by doing what’s popular – work for clients and get paid for doing what’s effective.

ABOUT THE AUTHOR(S)

Add new comment

Comments

58
60

When we are talking about web design I think there is much factors to consider. Like this article reveals there are many layers to think about when engaging in web design. Some clients like flash or heavy graphic effects on their websites. I find this article helpful as it guides one on what to do for layering.

69
62

The layer work up you mention is much like that in GIMP and dream weaver done for text of word press, this is not done by most but it is very effective, I like your post on the subject, I found out things that I never knew.

61
62

Fantastic write up. I love working for clients that give me full creative control and trusting my design taste.

63
62

Top-notch stuff. You’re preaching to the choir.

68
59

Hi. I am writing a thesis on the usability of Blogware and Weblogs. I am researching the comparison between Blogger and Wordpress.com, amongst others. I'd be very interested on your views on why Blogger uses lots of gradients, drop shadows, fat icons and rounded text in its main page interface while WordPress does not and what you think the designers were thinking.

65
68

Great article, I’ve recently switched from high graphic web design sites to usable sites,a nd this article outlines everything I’ve been trying to tell the designers in the community I run. They don’t understand that putting the product out there and cutting out the nonsense is what matters.

62
74

rounded corners are design elements that help bound areas together. Its not just a style thing, considered rounded corners can support the full range of layers you talk about above. Highly modular design, with each module containing a number of functional elements can only be helped by the simple grouping and massing elements like rounded corners help define. The usual styling of widgets is a good example. Don’t underestimate the role of so called stylistic elements in improving usability

68
62

Very well said Andy. The kick back against “Web2.0” style is a funny phenomenon, to my mind. I’ve watched this style emerge over the past 18 months, and I’m now certain that it represents the best layout/visual-layer design that we’ve ever seen on the web.

I analyse its typical visual characteristics at http://www.webdesignfromscratch.com/curren-style.cfm, and link to a (random) selection of sites that do it well.

I’ve been singing the praises of things like simplicity, white space, and the power of text for a long time. I think what we’re seeing is web design at large getting up to speed on good graphic design principles. Of course there’s a backlash, because there’s a freaky kind of reactive element in web design that derides anything that’s popular.

“If you’re in jazz, and more than ten people like you, you’re labelled commercial” (Herbie Mann)

62
63

Great write up. I am currently fortunate enough to be working for a client that is practially giving me full creative control and trusting my design decesions. Now if only more clients would let the designer do their job.

64
74

Great article Andy, really great point(s) and an enjoyable read!

62
70

I’m glad you articulated that there’s definitely a “Web 2.0” style around. What I can’t figure (and never could, though I’m a designer myself) is why it’s okay to copy. Why should it be acceptable for an original composition to be endlessly ripped-off all around the web within a matter of months?

It’s almost as though the idea that we should embrace open-standards in technology (which is great – the more RSS, AJAX etc. the better) has extended to an acceptable sharing of design styles. If these designs were intended to be shared then that’s one thing (but then what does that say about us as designers?), but I suspect more likely design elements start from more notable designers, and through the cult of their celebrity disseminate down; the impact becoming more diluted as the design approaches ubiquity.

I know you could probably argue that designers have always copied/stole, or that there’s really no new ideas under the sun. But I do think that Web 2.0 has brought with it an alarming level of creative homogeneity, and while that’s probably good from a UX perspective I do wonder what it says about us as designers.

65
81

Mike, if we openly copy, share, extend, and enhance web standards and design or application toolkits, why not also do the same thing with design? If a stylistic element or approach works, use it and adapt it to the situation at hand. Not every designers has to be one of the (very) few who comes up with something completely unique.

Design — including the style layer — is about solving problems in a functional way. “Impact”, as you put it, is not really one of its goals.

62
63

Nice write up. And, in many cases style is what ultimatley convinces the client that they “like” your work. (From a Design perspective that is) Generally speaking, IMO Style is not the most important layer (it IS important though ;)), but it is usually the layer that’s noticed first.

66
69

Top-notch stuff. You’re preaching to the choir. I’ve tired of Web site designs that look as though someone with cool sofftware but no real design sense composed the whole affair. Keep up the good work, Andy.

69
64

An interesting and enlightening article.

I find that if a site/application does not have a solid design then I will leave and probably never use it again. I especially find that small inconsistencies will drive me away.

Paul D makes an excellent point about the re-use of stylistic elements. The yellow fade from Basecamp is a great example of design that has been re-used by others to enhance applications.

As someone who is in the process of learning how to create solid designs for the web I find there are too many “little design generals” out there.

63
63

Nice article. We know that we have a diferent way to think about websites than the simple users. It’s because of that, we need to improve the web to the max we can, with all 5 topics you mentioned. Keep the good job!

66
75

Nice article. We know that we have a diferent way to think about websites than the simple users. It’s because of that, we need to improve the web to the max we can, with all 5 topics you mentioned. Keep the good job!

67
73

An interesting and enlightening article.

I find that if a site/application does not have a solid design then I will leave and probably never use it again. I especially find that small inconsistencies will drive me away.

Paul D makes an excellent point about the re-use of stylistic elements. The yellow fade from Basecamp is a great example of design that has been re-used by others to enhance applications.

As someone who is in the process of learning how to create solid designs for the web I find there are too many “little design generals” out there.

66
68

Top-notch stuff. You’re preaching to the choir. I’ve tired of Web site designs that look as though someone with cool sofftware but no real design sense composed the whole affair. Keep up the good work, Andy.

64
59

Nice write up. And, in many cases style is what ultimatley convinces the client that they “like” your work. (From a Design perspective that is) Generally speaking, IMO Style is not the most important layer (it IS important though ;)), but it is usually the layer that’s noticed first.

65
71

Mike, if we openly copy, share, extend, and enhance web standards and design or application toolkits, why not also do the same thing with design? If a stylistic element or approach works, use it and adapt it to the situation at hand. Not every designers has to be one of the (very) few who comes up with something completely unique.

Design — including the style layer — is about solving problems in a functional way. “Impact”, as you put it, is not really one of its goals.

59
65

I’m glad you articulated that there’s definitely a “Web 2.0” style around. What I can’t figure (and never could, though I’m a designer myself) is why it’s okay to copy. Why should it be acceptable for an original composition to be endlessly ripped-off all around the web within a matter of months?

It’s almost as though the idea that we should embrace open-standards in technology (which is great – the more RSS, AJAX etc. the better) has extended to an acceptable sharing of design styles. If these designs were intended to be shared then that’s one thing (but then what does that say about us as designers?), but I suspect more likely design elements start from more notable designers, and through the cult of their celebrity disseminate down; the impact becoming more diluted as the design approaches ubiquity.

I know you could probably argue that designers have always copied/stole, or that there’s really no new ideas under the sun. But I do think that Web 2.0 has brought with it an alarming level of creative homogeneity, and while that’s probably good from a UX perspective I do wonder what it says about us as designers.

70
58

Great article Andy, really great point(s) and an enjoyable read!

66
64

Great write up. I am currently fortunate enough to be working for a client that is practially giving me full creative control and trusting my design decesions. Now if only more clients would let the designer do their job.

67
64

Very well said Andy. The kick back against “Web2.0” style is a funny phenomenon, to my mind. I’ve watched this style emerge over the past 18 months, and I’m now certain that it represents the best layout/visual-layer design that we’ve ever seen on the web.

I analyse its typical visual characteristics at http://www.webdesignfromscratch.com/curren-style.cfm, and link to a (random) selection of sites that do it well.

I’ve been singing the praises of things like simplicity, white space, and the power of text for a long time. I think what we’re seeing is web design at large getting up to speed on good graphic design principles. Of course there’s a backlash, because there’s a freaky kind of reactive element in web design that derides anything that’s popular.

“If you’re in jazz, and more than ten people like you, you’re labelled commercial” (Herbie Mann)

63
67

rounded corners are design elements that help bound areas together. Its not just a style thing, considered rounded corners can support the full range of layers you talk about above. Highly modular design, with each module containing a number of functional elements can only be helped by the simple grouping and massing elements like rounded corners help define. The usual styling of widgets is a good example. Don’t underestimate the role of so called stylistic elements in improving usability

68
61

Great article, I’ve recently switched from high graphic web design sites to usable sites,a nd this article outlines everything I’ve been trying to tell the designers in the community I run. They don’t understand that putting the product out there and cutting out the nonsense is what matters.