The art of design - I

Some forms of art are modes of self-expression that rarely take into account the beholder. Most painters paint because they want to express something only their mind has seen, poets write because they want to give words to their inner feelings - if at all some/most viewers or audience appreciate their work, that seems to be more of a side-effect than an intention.

The art of design however, must be counter selfish since its primary aim is to satisfy certain usability and aesthetic criterion depending mostly on/for whom the design is made. However, there is a certain signature creativity that often marks good design which distinguishes the artist behind the design - that comes only from experience and is a subtle expression.

Product, document and interface design have long been my subjects of interest and I'd like to share my take on this art through a set of commandments.

1. Thou shall standardize style.

Lets take a website design for example. The first step is to create a set of standards that would be used consistently across the entire product. That involves breaking down the layout into a set of components and defining each such component. The following are the usual elements involved:

a. Layout
Fixed size/ vertical flowing/ two column/ portrait/ landscape? Depending on how much information needs to be presented to the user at a time and how much screen/interface real estate is available, various options can be worked out. For instance, mobile interfaces generally prefer a vertical scroll only display. This fact has been beautifully exploited by the Opera Mini browser.

b. Margins
Not only the page, individual elements within a page too need to have a standard margin. Neither too much nor too less. Some designers prefer a uniform margin throughout while some prefer more space on top than on sides - again, the display real estate is an important consideration here. The folks at Apple are masters in design and it shows on all their products. For an sample of wonderful margins just checkout their website!

c. Fonts and spacing
I have come across many a document with headings written arched 3d and in psychedelic colors. While this might impress your junior school peers, its mostly a no-go as far as serious designs are concerned. A document rarely needs more than two fonts, three at the most and the fonts must gel. A 'Comic Sans' heading and a 'Helvatica' body-text simply do not go together. Spacings are the margins for the text. Again, the main purpose must be easy readability. A good example is the BBC World news site.

d. Color scheme
There are many resources available on the web which allow you to create a color scheme based on a base color. Pictured here is one such tool on siteprocentral. The purpose of a color scheme is to present visual information in a highly visible fashion. Some font colors are extremely readable over some background colors. Some colors signify the level of importance of a text of display. However, there must be a coherent bond among the colors used.

e. Shapes and edges
Squarish / rounded/ bold/ 3d/ raised/ beveled? The simpler the better. Elegant design does not overemphasize borders which tends to give the interface a rather larger and an open feel. Edges and corners, if used must be consistent. If you want semi-hexagonal corners, so be it! but ensure that all similar regions are similarly cornered. Take for instance the Adobe homepage - its all rectangular boxes for now :).

f. Links, buttons
The clickable items design philosophy is this - try to make it as obvious as possible without being irritating. That is, the buttons should not need additional advertisement stickers saying - 'This is a button here, please use your finger to press'. Also, using standard icons help a lot. For instance, the power button has a standard icon, used throughout the product world. While you are free to come up with your own, it could spare a user a trip down the manual just to locate the power button, if you follow the global standard. Ensure also that there is enough space in and around the place so that you do not end up pressing the wrong buttons. Providing a tactile feel for the button helps tremendously, especially for people who have a problem with accessibility. Except for the lack of tactility, the iPhone buttons and icons are a class apart.

g. Information display regions
If there is an area for the user to log in providing his username and password, make sure it is prominently accessible and not hidden on the bottom of the page where the user would need to scroll down to reach it. The weather information display on the HTC Touch mobile for instance is simple, clear and serves its purpose well. It almost conveys what you might feel if you step out on the London street.



h. Images and graphics - color tone, characters, ethnicity
The images/ graphics must blend in to the the general design. This can be achieved through careful selection of the subject, the color tones and backgrounds.

So how do you choose/ set these options? This requires a thorough study of the target group for whom the design is being made for. For instance, is this a corporate website? If yes, the style must match the corporate profile. Which age group is this product being targeted at? If it is a young crowd - make sure the colors are vibrant and youthful. Most of the time you will find that you need to spend significant time with them and materials related to them to be able to draw your conclusions.

The key phrase here is homogeneity.

2. Thou shall strive towards symmetry.

Many studies have shown that human beings perceive beauty through symmetry. A symmetric face is more likely to be marked attractive than an asymmetric one. There are many designers who wish to experiment with the exact opposite of this theory. While in some cases, it 'might' work - stark asymmetry tends to draw more attention from onlookers as the brain automatically tries to find a justifiable explanation for the imbalance. Some people find faces with a mole/ beauty-spot on one cheek highly attractive! Symmetry is however, still a safe bet as far as interface design is concerned.

3. Thou shall simplify.

While it might be true that some geeky users might root for an interface full of push buttons, blinking LEDs, scrolling texts and beeping alarms the rest of the human folk would rather have it simple. I good example quoted often in this direction is Apple's iPod interface. The iPod interface is almost always a list. The only possible options with a list (as we all know) are go up/ down/ select or back - theres nothing more to it. There are no additional buttons which pop up other sets of 'options' or any such bells and whistles. All you need is a finger to operate it. Brilliant! Simplicity sells.

However, it must be noted that simplifying does not mean cutting down on features! It merely envisages packaging and presenting these features in an easy standard way.

(To be continued in part II)