I recently came across a killer article from the brains of the TUTS chain of websites (psdTUTS, flashTUTS etc). It’s a rather in depth look at the components of Web Design. For better or for worse some of these components have been assigned to other roles such as Solutions Architects. The problem with doing this though, as I’ve alluded too in previous posts, is that you run the risk of looking at a site from the inside out.  We don’t build sites for the sake of it, and we don’t build them simply to exercise feats of technical problem solving. We build them for 2 people. The first being the end user, and the second the client (or if you’re that way inclined, you can be the second person in this scenario).

I’ll condense the general gist of the article for those who are time poor or prefer life broken in to bullet points. I highly recommend though for anyone with the time or thirst (and especially other designers) to follow the link at the end of this rant for the full article. You’ll find that this is actually part of a long running series on web design and I’ll do my best to bring these to your attention as well.

First, to illuminate the 3 components (and in no particular order), the author presents us with this diagram.

The 3 Components of Good Web Design

Now let’s look at these components in some detail.

Aesthetic Design

Aesthetic design is all about getting the look right. If you are good at this it means you will be able to design sites that not only look good but are appropriately designed. Different designs convey different messages to an end user, so it’s essential that a design matches the site’s message.

Out of the three components of web design, aesthetic design is surely the one that people most identify as being design. One thing I find interesting about aesthetic design is that it is deceptively difficult. I remember once designing a poster and showing it to a friend who commented “oh it’s just a few lines and some text, you must have done this in about ten minutes” – ah the joys of being a designer!

Information Design

Information design is about preparing the information on a website in the best possible way, so that users can efficiently and effectively find and digest information. In larger sites, just finding information becomes challenging, but in sites both large and small, processing it is always a design problem.

A quick example of information design is in how you organise and format text on a page. Because people tend to skim through content on a screen, it’s much better to organise it with headings and subheadings, diagrams and visual hooks, and general variation for the eye. Techniques like these make the information on a page much easier to digest. But information design isn’t limited to what’s on a single page, it is also about what structures you use to house the site’s parts, how you lay out the menus and sub-menus and how you cross link different sections.

Interface Design

Interface design is the arrangement and makeup of how a user can interact with a site. The word interface means a point or surface where two things touch. So a web user interface is where a person and a website touch – so menus, components, forms, and all the other ways you can interact with a website.

Good interface design is about making the experience of using a website easy, effective and intuitive. It’s actually much easier to demonstrate bad interface design because that’s when you really notice it. A simple example of interface design is the use of icons. Have you ever looked at an icon and thought “what is that meant to represent?!” – well that would be bad interface design. Using icons to label and signify different types of content or actions is just one part of interface design.

Wrapping Up

Now for those of you lucky unfortunate challenged enough to know me I’m all for standing club in hand and side by side my fellow designer forever at war with the dark-side, otherwise referred to as development. Some of you though, those that really know me, know that what I’m really seeking is far from this. I imagine a world where both disciplines are given equal standing. I don’t feel that real progress can be made until this lies at the fundamentals of any great company or studio. It’s at the crossroads of these 3 components that we can all really come together. I’m a peace keeper at heart, a stinking hippy pacifist who just wants us all to get along. Did I mention I have a club.

As I said the actual article expands on the above in more detail however the author does finish with this important comment.

“Now you may be thinking, that’s all very well and good Collis but where does CSS fit into this? Or what about Flash? Well as I say, these are the three non-technical aspects of web design. On the flip side there are all those technologies and skills like HTML/CSS, Flash, Javascript and so on. But I tend to think they are more a part of web development than web design. In the same way that it’s important to separate HTML and CSS to keep information and presentation separate, you could argue that how you make a design come into reality is separate from the design itself. In simpler terms, is knowing a specific CSS hack anything to do with design?

Don’t get me wrong, you need to know how to build things in order to design them appropriately. However when it comes to saying what makes up web design, my answer remains Interface Design, Information Design and Aesthetic Design.”

Read the full article here.