('�)

Effective Color Schemes

A successful color scheme is key to building the mood and atmosphere for any kind of design. A common mistake that is often made by web designers is that they overlook the importance of a well-planned out color scheme. The choice of color not only affects the aesthetic appeal but also user experience of the target audience.

Many experienced web-designers have learned that colors should be relevant to the purpose of the design and correspond to the mood of the content. For example Feed Stitch uses bright and vivid colors from the spectrum to illustrate a lively and fun mood, which is directly linked to its purpose of combining different syndication feeds into one unified feed.

There are times and situations where there is a need to hold back and put a restraint on using bright and eye-catching colors as it is just not appropriate for the design. There are other ways of achieving quality with less exaggerated color schemes. Ploc Media is a fine example for this – The aqua marine blue emphasizes the product/service on the dark grey design. The designer effectively highlighted the primary focus of the website by creating this contrast.

Deciding on a color scheme can be difficult so designers should constantly experiment and find out which hues go well together, but at the same time making sure the colors are relevant to the product/service the website is promoting.

Spacing and Negative Space

Just because there is an empty area, doesn’t mean it has to be filled. Design elements should be spread out and clear. Even the space between text can make a huge difference to the overall appearance of the website.

White space on a page is often called negative space (and isn’t always white). It balances the overall layout and adds contrast to the page. Magazine adverts for luxury items like expensive cars and watches laid over a 2-page spread often make use of empty space to accentuate the product making it appear more elegant and chic. The Digital Mash website is an example of a well spaced design. The header navigation and the links at the bottom are well spaced, yet the elements are not too far away from each other making it a very practical design also. The main graphic exhibits a lot of empty space which doesn’t appear to be wasteful at all.

Another example of an excellently spaced design is the front page of Cultured Code. At the top you can see a user-friendly navigation bar with each and every item appropriately divided. Then, following a big gap is the heading and the 2 large icons that are also spaced evenly within each other. This creates a very welcoming yet simple front page.

Like color, spacing is really just another thing designers should experiment and play around with. The trial and error method can be used to find out what looks the best. Negative space also forces designers to display only the important content without cramming large amounts of information in a small space. Also, designing with a grid system or css frameworks such as 960 and blueprint gives designers the opportunity to learn more about spacing and understand the importance of it in quality design.

Typography

The appearance of the content is defined by the typographic choices made by the designer. It is up to the designer to make sure the text content is legible and easy to follow. Many people think typography is just about fonts but it is actually much more complicated than that. You also have to consider about the font spacing, the font sizes, and spacing (yes, here comes spacing again).

The Netsetter is a brilliant example of good typography in web design. Its combination of sans-serif and serif typefaces is outstanding. The paragraphs are well structured and each line is clear and readable. A heavy and bold font style used in the headings and titles give emphasis to the article. The spacing between each line and paragraph is optimal and makes the articles very comfortable to read.

Generally, the default values for font styles are not enough. For example the default line spacing is too little and doesn’t make large chunks of text very readable. The technique of changing the line spacing is called leading which originates from the printing press process where they placed lead bars of varying thickness between lines. Keep this in mind as it significantly affects the overall structure and legibility of the content.

Detail and Subtlety

Subtle additions to a web design can make such a big difference to an overall appearance. Web designers often focus on adding small, subtle details such as gradients, shadows, and inset pixel dividers. The following are examples of web designs that use these extra elements to enhance the overall design.

If you take a closer look at the borders and edges in Tutorial 9’s design you can see the designer added a 1 pixel highlight to the edges to make each section stand out on its own. It draws attention to the content inside the box and gives a sense of 3D and realism.

Deaxon and MetaLab Design are also great examples of design with pixel-perfect details. Especially with MetaLab, the user interface feels very interactive and slick.

Engage in best web design practices only at web design school Cincinnati.