demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Aesthetics triangleProject triangleStakeholder triangle

Web Site Design: The Triple Challenges

design / sites

Estimated reading time: 2 minutes, 18 seconds

Of all the real-world disciplines that could be used as a guide to web design and development, the practice of architecture is perhaps the best comparison.

Like web developers, every architect is faced with three demands when designing a structure. These demands are often contradictory, and balancing them is part of the art of great design in any practical field. The primary considerations are:

Aesthetics

The look of the work. How does the building appear from different aspects? Is its profile, texture, use of shadow and light pleasing to the eye?

Structure

How will the building be constructed? What materials will be used? Will it stay up? Can it easily be expanded and modified later?

Utility

Does it fulfill the basic function required? (i.e. to house people in relative comfort, keeping the elements at bay).

Everyone who builds things, from architects with fees of millions of dollars to the person living under a bridge with a plastic sheet, has the same basic concerns.

For a website these demands are expressed the same way: does the site look good? (Is it proportional, does it use colours and fonts well?). Is the site constructed in a way that makes sense? (Is the code valid and commented? Does it use semantic markup?) And can the customer / reader do what they need to do on the site quickly and easily? (Find information, add content, order a book – whatever the goal(s) of the website are).

These demands are limited by three factors: time, money, and quality: the familiar “good, fast, or cheap: pick any two” project triangle.

Finally, there are three people in the process, again with competing goals: the contractor/designer, the client, and the customer. The contractor – the architect, in this case – is the designer; the client is likely to be a property developer, and the customer buys the completed house. Both the customer and client are interested in getting the highest quality possible at the lowest cost, but long-term satisfaction and use rests with the customer, no-one else. The designer, on the other hand, wants to fulfill the needs of both the client and the customer, charge a fair amount, and create something he can take pride in.

The primary goal of both the designer and client is to produce something that the end-user wants and can use. To this end, it is very important to divorce your ego from the design process. You are designing what the customer can use, not what “looks cool” (it is possible for a design to be both “cool” and usable, but successful examples are rare).

Be aware that no-one in this relationship may be able to express their desires for what they want to website to be: customers tend to be fickle and reactionary, clients simultaneously over-ambitious and parsimonious, and designers driven by ego.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.