The Elements of Design

To an outsider, the visual aspects of web design seem like a confusing and mystical proposition that involve intuition and an arcane knowledge of Photoshop commands. While this is partly true, it’s also the case that there are readily understood concepts that all high-quality designs share.

The Parts

Any web page design is a combination of parts. Commonly these include a logo, main navigation, the body of the page and a footer. Additionally, the designer might be called upon to integrate some sub-navigation, product imagery, marketing copy, advertising, a search query box, a user login area or other features. Each of these elements has a different value in the mind of the client and they want the relationship between the elements to be recognized. How the designer achieves this, in part, is a result of the following ideas:

Placement

We read from top to bottom and left to right so it makes sense that the company logo often ends up in the top left hand corner of the page. And no one is going to put the main navigation at the bottom of the page where the user would have to scroll down to find it. Therefore navigation is always found either at the top or on the sides of the page. The remaining elements of the site are placed in a weighted order according to their perceived level of importance.

In the world of newspapers, the top headlines are always above the “fold” of the paper. This way, people scanning the newsstand can evaluate their choices quickly and easily. Web designers have co-opted this notion, placing the most important screen elements above a kind of virtual “fold” – the bottom of the screen. Below this fold, users can scroll down to see items of secondary importance.

Since design companies have third-party objectivity, one of their most valuable contributions throughout the development process is helping to combat “information creep,” which is the tendency for business owners to want to display everything about their company right on the homepage. A good designer is able to separate out the truly pertinent information and present it accordingly.

Proportion

In addition to placement, proportion plays a key role in steering the eye around a page. Simply put, large things garner the most attention. Often, the company message is top priority and so that gets the majority of the screen real estate. The remaining elements are scaled and positioned accordingly.

Layout

Sometimes an underlying grid system is used to keep elements aligned (in much the same way that magazine content is conveyed). Other layouts can be more organic and fluid in their presentation (such as Flash web sites).

One of our proposed designs for Education Finance Partners made use of structured grid.

Feel

The “feel” of a company can be hard to quantify and so designers try to get to know what their clients like and dislike. This might mean a list of the client’s favorite web sites or a round of questions such as “if your company was a car, which brand would it be?” Interviewing the client in this way helps the designer better understand whether the design should be streamlined and modern, whimsical and retro or maybe even whimsical AND modern.

Once the designer understands the feeling that the client would like to convey, he selects the “clothes” with which to dress the Web site. These clothes fall into three major categories:

Palette

Color choices go a long way toward defining the feel of a site. Will it be a light or a dark background? Neutral tones or bold primaries? Often, the company logo dictates these decisions since it is the one part of the palette that is fixed; everything else must be in harmony with it.

Typography

If the designer has been able to ascertain that this is a retro project then he is going to look at retro fonts that convey an appropriately historical feeling (such as Rockabilly, Art Deco or Communism, for those who know a little about fonts). Likewise, something classical is going to require a serif or script typeface. But sometimes, the feel is more complicated, like “hip with a classical edge” or “playful yet masculine”. In these cases the type choices have to be based on the designer’s intuition and whether or not the fonts he has selected meet these criteria.

Imagery

While the designer is grappling with color and type choices, he also needs to select and create the imagery for the site. Will it be photographic or illustrated? If photographs are to be used, will they be shot especially for this assignment or will stock photography work? Will be an aggressive, modern style of photography or a classic, traditional style?

If the designer is called upon to create the imagery for a site, he may need to illustrate icons or photograph a product. In either case, the work must perfectly match the overall feel of the web site.

BeHeard wanted to recreate a strong aura of the Russian constructivism art movement around their progressive, online bookstore, so we used the imagery of the fist, bold reds and blues and Cyrillic style typography.

Bring it all together

Contrast

While a great deal of time and effort is devoted to making sure that the elements of the site coalesce and that the typography and the imagery exist together harmoniously, it’s also necessary for the designer to employ contrast within the design itself. Visual contrast allows the elements to appear unified and yet distinct at the same time. Some of the methods used to create this contrast include proportion and color which were mentioned earlier. Other techniques include juxtaposing square vs. curved, plain vs. textured and flat vs. dimensional.

The dramatic oval in the middle of our design for EasyCare360 created a dramatic contrast to the rest of the page, imparting a soft, friendly feel.

Space

The use of space and (negative) space in a design provides visual contrast to the content of the site itself. Negative or empty space might seem like wasted space. However, when used correctly, negative space actually amplifies the presence of content and draws attention to it. Negative space must be used mindfully. Too much and the elements within the design appear to be distinctly separate from one another – like little islands of information floating apart. A good design will appear as a unified whole regardless of the visual contrast (and negative space) used within it.

This proposed design for Education Finance Partners uses negative space to produce a bold effect.

Flow

The best way to create unity in a design is to seek flow within the design. For this to happen, one thing must lead naturally to the next. This a matter of echoing the shape of one border with the next, or perhaps using different shades of the same color throughout the design in diminishing strengths that mirror the visual hierarchy of the information. It’s a subtle concept, but employed correctly it elevates the work to a truly professional level.

One of our designs for a Wells Fargo project used echoes of color and the square shape of the logo to create unity and flow.

The Finished Product

If all of the above elements are designed and implemented correctly, then the resulting design can be said to contain a visual hierarchy. A user looking at this design will find that their eye is being led from one element to the next without necessarily being sure why. It might be something as simple as the size relationship and the placement of the items or it might be something significantly more complicated that has to do with the visual contrast, the negative space and the overall flow of the design.

Good web designers achieve success by negotiating their way through a seemingly contradictory maze of shape, color, type, space and layout choices to create memorable designs that convey the appropriate information effortlessly.

Twitter  Buzz  Delicious  Digg  Reddit  Stumble