So you want a great looking, eye appealing website? Here are four basic principles of design that you should consider: rhythm, balance, unity and emphasis. Each one is essential and complement each other as they combine the various visual elements necessary to achieving a great web design. This in turn is an imperative step towards your website to succeed. The following examines each of the principles, and tips on how you can incorporate them into your Website design for optimal visual results.
Rhythm in website design is known as repetition. Which is a pattern that’s created by repeating certain elements which are varied, thus allowing your website design to develop a certain internal consistency which makes it easier for your site visitors to understand. Once the brain engages by recognizing a familiar pattern, it will then relax and associate the entire design. Repetition (repeating elements consistently) and variation (subtle changes in the form, sizing or position of elements) are keys to excellent visual rhythm. Placing these elements in a web layout at regular and routine intervals results in creating a smooth even rhythm, along with a relaxing mood.
If you use sudden changes either in the size or spacing of the elements, that will create for a faster, livelier rhythm as well as an exciting mood. Gestalt generally describes concepts that makes variety and unity possible in good design. The mind has the unique ability to visualize unified “wholes” from the sum of at times, more complex visual parts. Some of the primary principles of gestalt are: similarity, proximity, closure, continuance, and uniform connectedness.
Using different colors, sizes and shapes will create different degrees of “visual interest” on a Website design. It’s vitally important that your pages are designed to hold your visitors interest without trying to overwhelm them, or causing some type of distraction away from the main elements, most importantly conversion.
So the distribution of viewer interest needs to be balanced and controlled by considering individual elements in a web design layout, along with it’s “visual weight”. This is determined by it’s shade, the size and the thickness of the lines used, etc. Symmetrical balance is then achieved by placing these elements in the design evenly. If you place say a large or heavy element on the right side of the page, you should then also have a matching heavy element on the left. Centering the site is the easiest way to get your site symmetrically balanced.
Be careful however, as it may be difficult creating a centered design that doesn’t look too flat. To get a symmetrically balanced design, it’s better creating a balance using different elements, such as: a large block of text on the left, and an image on the right, or vice-verse. Asymmetrical balance is unlike objects which are of equal weight on each side of the design page. Elements such as value, shape, color, texture and size are used as balancing elements. Creating asymmetrically balanced website can be more difficult to design, as the elements may not be matched across the center-line of the web design.
For instance, you may have a larger element placed close to the center line of the design. In order to balance it asymmetrically, you’ll need to place an element farther away from center. If you prefer your design to have a ‘seesaw’ effect, then a lighter element may balance a heavier one by it being further away from the center.
You can also use different textures or colors to balance an asymmetrical design. At times, the sole purpose of the website itself will make an off-balance design the proper choice. Designs that are usually a bit off balance will suggest action and motion. They may also make your online visitors a little uncomfortable or uneasy. If the entire content of your web design is intended to be uncomfortable as well, or designed to just make people think, then an off balanced design can work well.
Unity Or Proximity
Unity helps all the web design elements look like they all belong together. Your visitors need visual cues to tell them that an article is an individual unit, as well as the text, the headline, the images, and captions all combine together. The elements which are positioned closely together are usually related, while those elements that’s farther apart are less so. Unity can be achieved using the following methods:
• Consistency with the type of font, consistent style and sizes for the headings, subtitle, the captions, the headers and the footers throughout the entire website.
• Positioning the elements so that the one’s close to each another are related, while the elements that may be farther apart, will have less of a relationship.
• Using just one or two type styles and using various sizes or different weight for contrast throughout the website.
• Repeating colors, textures or shapes in the different areas throughout the website.
• Choosing visuals sharing similar colors, themes or shapes.
Web visitors will rely heavily on visual clues when they make their decisions about liking a website, or whether to just click and explore further. But most importantly to consider if they will make a purchase or sign up for a service. This is especially important for first-time visitors to your site, when the decision to stay or abandon it is made within a few seconds.
Placing Dominant Emphasis
Emphasis in website design provides the key focal point for the piece, enabling your most important web design element to stand out. To draw your reader to the most important part of the your site, each layout needs a distinct focal point. Generally, focal points are created when one of the elements are different from the rest.
To maximize emphasis, it’s important you avoid too many of the focal points, to not dilute the dominant effectiveness. When all the various elements are given similar emphasis, it can then make the piece appear too busy, or at best, boring and not very appealing. Emphasis on your site can can be achieved in the following ways:
• Use semantic markup to provide emphasis, even without using styles.
• Change the size of fonts or the images to emphasize or de-emphasize them.
• Use bold, black font type for all headings, subheadings, while much lighter text should be used for all other content. Place a large image next to a small bit of text.
• Use contrasting colors. For instance: use a series of evenly spaced, images next to an outlined image with an unusual shape.
• Place a relevant piece of text on an angle or curve while keeping the rest in straight columns.
• Use colored type or unusual font to highlight the most important information.
If you follow these 4 design principles, you should be able to make your website visitors to stay… relevant unique content however is another issue altogether.