11 Comments Written by Anders on May 6, 2008 – 7:33 am

You can not hope to specialize if you don’t have your basics right. After all what you build on a shaky base is doomed to shatter. Let me illustrate three very basic, but often undermined principles of web design. It will give you an idea what to look for when browsing templates or portfolios and will help you distinguish between good and bad work.

Contrast
The most important tool to highlight areas of the site is contrast. Without the correct application of contrast a site often appears haphazard and difficult to read. By using the correct amount of contrast in your fonts, backgrounds, objects and styles you will incorporate a much more professional looking design. Despite what most people think contrast is more about difference than it is about colors. Use whatever tools you have to make text contrast including text tricks like bold, caps and underline where necessary so that your page has obvious “hot spots” for people to review.

A great example of this is hyperlinks inside text. Always set your style to underline and change the color of hyperlinks (preferably the default blue) so that people’s eyes are drawn to them inside blocks of text. Use color contrast between menus, logos and the main part of the page so that people can easily break these components up inside their minds. Be careful not to over do it though! High contrast pages are difficult to read (white text on a black background or purple and green are complete non no) so remember to consider practicality before creative expression.

Balance

The most important factor in a website design is the way the elements of a design are balanced on a page. The abstract layout will instantly convey a basic message about your site. Symmetrical or simply balanced sites will create a calming tone while asymmetrical or complex designs will create an excited feeling. A website is a dynamic entity, so maintaining the balance becomes all the more difficult. Your screen may view it perfectly balanced in 1280×1024 but someone’s 800×600 screens may throw it totally off. It is always a good idea to use a tool or plug-in to view your design in different resolutions before you purchase or deploy the site.

Common solutions to help you overcome balancing a site including using the “float” attribute and centering text or objects. If you want to achieve a symmetrical look be careful not to just center all elements. You will end up with a boring or flat design that they are not eye-catching and look extremely amateurish. If you are attempting to create an asymmetrical design then remember that it’s into just about piling everything onto one side, you must still create a feel of balance despite the fact your site is not symmetrical. You can do this either by placing smaller items opposite large items or even by pitting images against text or solid, dark colors against transparent or light objects.

Rhythm
Rhythm is sometimes called repetition and is a vital part of constructing a website as it helps your website flow between pages. It gives your visitors an easier and more fulfilling browsing experience as the brain will recognize the repetition in the template and focus on the new parts of a page. This is very important as if you keep disorientating the visitor they will quickly become fatigued and are likely to leave the site. Moreover, if your have successfully associated the website appearance with a brand then marketing have a whole new area to explore. It also means a redesign will have a big impact on the site in the future, a service that will likely swing back round to you if you did a good job in the first place.

This article is written by LeXolution IT Services Pvt. Ltd