Three Pillars of Good Web Design
Here are three general areas that in my opinion need to be achieved to create a good web design. Aesthetics, functionality and quality code.
In general there is a human trait that seems to like symmetry and balance in things. Visual harmony. We like pretty things and elegant things. We like to appreciate the divine proportion in things. We don’t like jumble and mess (also known as bad design is good design). The visual layout and quality of images, the use of white space and other visual design elements has a lot to do with creating a good web design but it is far from the only player in the game. Aesthetics is often mistaken by people coming from print to the web as the primary force behind the design. Say after me… visual design is a player, visual design is a player, but a website is not a poster or a book!
The second pillar of a good web design is its functionality. Does it achieve the tasks users require it to achieve for them? Unlike print, the web is an interactive environment with a swathe of complex interaction constraints such as browsers, users personal abilities, bandwidth constraints and differing mental models. How many people walk up to a poster and click a link or scroll or post comments? None. Web designs have to be functionally usable and accessible to the various user agents and applications. They need to interact with humans, databases and third party plug-ins if necessary. The web is becoming less about people talking to machines and more about machines talking to machines. Say after me… the web is not print, the web is not print, and my job is to accommodate users interactions!
The third pillar is therefore technical correctness (or quality code). The value of developing websites using web standards is quite elegantly explained by Paul Boag in his Business Benefits of Web Standards video so I won’t labour the point here. Let’s suffice to say that with all the benefits of writing quality code it always amazes me that 99 per cent of web designers out there seem to still be working with tag soup to the detriment of their projects and clients interest. This pillar is strongly related to the previous one of functionality. Say after me… quality code is critical, quality code is critical, so I will not write invalid tag soup for anyone’s consumption again! This is not a soup kitchen!
Of course beyond these three pillars of web design content remains king. You need to design your website to meet the content rather than vice-versa. But at its core I see those three elements at work - aesthetics, functionality and technical correctness (quality code). Without getting those three correct the content is under-represented by the design.
January 22nd, 2008 at 11:03 pm
[...] Steven Clark wrote an excellent article on The Three Pillars of Good Web Design, and I couldn’t agree more with what he has to say. A web site is not a poster, or a [...]
January 23rd, 2008 at 9:05 am
How about storytelling and good web design? Have you read http://www.blueflavor.com/blog/design/the_template_dilemma.php what are your thoughts on that
January 23rd, 2008 at 10:07 am
Yes I read the Khoi Vinh article on storytelling and narrative when it was published a few weeks ago. I suppose when I called my first pillar of design aesthetics what I really should have called it was visual interaction design… that part of the design which is visually apparent and should lead us through the functionality of the site. If that makes sense. Each of these three pillars basically interacts with and supports the others (rather than being independent which is a common perspective out there at present).
I think D Keith Robinson’s template dillemma article hits a few points (one being Khoi on storytelling)… but my point is really that all these things interrelate - visual design, functionality and technical quality. For example there is a graphic designer I can think of who designs jaw dropping sites I could never dream of achieving - but only on one pillar and therefore I wouldn’t call them great web design. Functionally and technically they fall apart because with JavaScript off, for example, there is no way into the subpages of the site.
The same applies to people who are just about technical excellence but have no concept of the effect a strong graphic designer can bring to a project. What use is a quality coded website which looks like crap and has no understanding of user psychology or interaction? Which is why I referred to these as pillars.
I think visual design is the most obvious naturally because our eyes can instantly assess the layman’s aesthetic appreciation. Functionality and quality of code are less obvious but equally as important when the design has to operate for real users on the web.
January 26th, 2008 at 8:44 am
Yes, the whole is extremely important. Currently I’m working on a database project and it one of those few moment where I’m being technically challenged. I starting to think that maybe part of the key to this is more than type of person being involved. Most of the time good code designers are not good visual designer, maybe type of work to be done well has be to cross disciplines.
January 26th, 2008 at 9:17 am
I’d agree that not everyone can be everything in this field. When you take graphic design, for example, it would be much cheaper to employ someone to do the job efficiently and correctly than to struggle myself in Photoshop for a week over what should be one day’s work. Plus I’d only have 1/10th the final product (optimistic I admit).
What I am a big believer in is that everyone should have some appreciation of the whole skillset - for example, be an expert graphic designer but understand good code from bad, a little about back end programming issues, database design and SQL, and about the underlying technologies.
I’m always wary of the one man band advertisements because its almost impossible nowdays to be an expert across the board with web technologies. You may find its more economical in the long run to fish out the database work and take a slice of the price off the top for yourself for managing it. Maybe…