Key Principles of Website Designing

Everybody, including their grandfather and dog, seems to have a website this day. As you read this article, the Web is becoming more crowded. There are literally dozens of websites added every day. It’s becoming increasingly difficult to be noticed by the masses.

“Fortunately,” Web designers don’t all understand what makes or breaks a Web site design. Web design can be described as more art than science because it is a creative process. Web design is a medium for presentation. There are rules or at least principles. Anyone should be able to create a visually appealing design and move one step closer towards fame by following these simple tips. Although it is not easy, talent and experience are important, anyone can make their home page look better in a matter of minutes.

1. Your design should be balanced.
It is about making sure your design doesn’t tip to one side or another. This is similar to the balance of weight when achieving symmetry.

Below, you can see the dog in the header graphic for Khoi Vinh’s Subtraction website. This example was taken from The Principles of Beautiful Web Design, Jason Beaird. Jason points out that the cross to the right compensates for the extra visual weight the dog gives on the left. It’s a minor detail, but it is important. You can see it by covering your hand with your other hand.

2. Grids can be used to organize your design.
Grids are closely related to the concept of balance. Grids are a set of horizontal and vertical rulers that can be used to “compartmentalize” designs. Think of columns. Columns make a page easier to read and improve its readability. Spacing and the Rule of Thirds (or a similar Golden Ratio), make things easier for the eyes.

Sidebars are typically about 1/3 of the page’s width. The Golden Ratio and Rule of Thirds explain why the main content area is approximately equal to the width of the design divided by 1.62 (equalling pi in mathematics). This is a common practice, although we won’t go into detail about why it works. Professionally taken photos are often placed at the intersection of a nine-square grid. This is three by three with two horizontal lines and two vertical lines.

3. Choose two to three base colors for your design.
What if the base color of the website The First Twenty (above) was changed to lime green? It would look great. It is unlikely. It doesn’t belong to the same color palette (and lime green isn’t the easiest color for me to work with). ColourLovers is one reason why websites like ColourLovers exist. It’s not enough to pick your colors Rambo-style with guns blazing. Some colors work well together while others are not. There are many theories about colors and how they can be combined, including monochrome and contrast schemes. However, common sense and an intuitive understanding of the subject matter are all that matters.

Discover what colors work together. To get an idea of how colors interact, take a look at as many websites as you can. To expand your palette, you can choose two to three base colors for your design. Then, add tints (which can be mixed with white) or shades (which can be darker and mixed with black).

4. Make sure the graphics are in harmony.
Great design does not require fancy graphics. Poor graphics can make a design look terrible. Graphics enhance the visual message. Websites such as WebDesigner Wall feature impressive illustrations while others are more subtle.

Tim van Damme only uses a few graphics on Max Voltar. But he executes them with great thought and care. Two graphics are included: a non-intrusive background image, and a sophisticated crown. They aren’t too impressive visually, but they add to the overall look and feel of this website.

5. Your website’s typography should be improved.
Because it includes so many elements, the art of typing is difficult to discuss. Although it is a part of the design, you can spend years learning all aspects of it. We are not going to attempt to give you a comprehensive typographic reference. Instead, we will focus on what will be of benefit to you in the near term.

Web typography is more difficult than print typography. Due to the dynamic nature of the Web, the biggest difference is that we don’t have complete control over how type appears on the site. While dynamic rendering is a powerful tool, Web designers don’t have much control over the final results. Web typography can be difficult, if not impossible, due to missing fonts, platform, and browser rendering differences, and subpar CSS support. While Web typography may not reach its full potential until CSS 3 is released, we can make it interesting and beautiful now.

Read more