The 3 Components of Good Web Design

Good design isn't just about good looks, and nowhere is this truer than in web design. In fact it makes sense to think of web design as being made up of three major non-technical components: aesthetic design, information design and interface design. If you want to be a great web designer it's essential that you have a firm grasp of all three.

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.

The other day I was walking through a supermarket and saw a juice brand that had the visual design of a laundry detergent. There was just something about the way the box was done that I momentarily wondered why there was detergent in the fruit juice aisle. In the same way giving a website an inappropriate package for its content and message - even if it's a really good looking package, is a bad end result. This is why it's very important as a web designer that you don't simply follow fads and trends blindly. You must always be thinking not just how you can make a site design look good, but also look appropriate.

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, itis also about what structures you use to house the site's parts, how you lay out the menus and submenus and how you cross link different sections.

You may be interested to know that in larger and more complex projects and sites, there is in fact an entire profession dedicated to modelling and structuring information called Information Architecture. The most famous Information Architect that I know of is Jesse James Garrett who incidentally coined the term AJAX. He's pretty neat and you can read about him at Wikipedia.

Collis' Awesome Diagram
Since we're talking about information design, it seems like a good opportunity to turn 6 paragraphs of waffley text into a diagram, so I present to you my awesome diagram of the components of web design! Bask in its red and grey awesomeness!

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.

Incidentally another example of interfaces that you will likely encounter as a web designer is Application Programming Interfaces or APIs. An API is the set of functions and protocols by which you (or your program more precisely) can interact with whatever the API is for. So for example Google Maps provides an API which you can use to create applications or sites that work with Google Maps.

What about ...
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.

What's your take? Have I missed some essential part of web design? Or do you think that web development is an essential part of web design itself?

Later this week you'll be able to read more in-depth articles of tips and tricks for each of these three components of web design - interface design, aesthetic design and information design. In fact the first one is going to go up in a few short hours.