Welcome to the Web - Rocketface(R) Workshop Webmaster's Tutorial - "How to Design a Website" Rocketface(R) Home - Welcome to the Web
Webmaster's Tutorial -------------- Webmaster's Tutorial Index -------------- Article Archive -------------- Sitemap -------------- Privacy -------------- About

Webmaster's Tutorial
About Domain Names
About Web Hosts

Analyze Website
Analyze Audience
Target Audience
Demographics
Website Goals

Organize Website
Website Basic Layout
Website Structure
Website Sections
Website Content
Website Navigation

Develop Website
Website Construction
Sitemap Construction
Webpage Construction

Implement Website
FTP Website
Fine Tune Website
Upload Organization
User Interaction

Maintain Website
Maintenance Plan
Website Optimization
Optimize Website
Website Promotion
Website Traffic Analysis

Resources
Main Site Index
Article Archive

Balanced Webpage
Webpage balance, organization and focus

The importance of webpage balance, organization and focus

The image below shows how a well balanced webpage should look. Here we have balance, organization and focus. The page has a pleasing uniformity, the information is strategically placed and the main body area is prominent.

If all the pages of your website follow this type of pattern it will have that clean, uniform appearance that most web designers shoot for. Each webpage will be a canvas for your content. Don't underestimate the power of your webpage layout it will make or break a website.


An example of balanced webpage layout


Example of a balanced and focused page

A balanced webpage that is well organized and focused

Balance your webpage content

Balancing the content of your webpages is more that just producing an attractive layout. Providing a means for your visitors to easily scan your webpages is far more important. People coming to your website are looking for some specific information and/or product details and the sooner they find it the better your website's performance will be.

Producing a well balanced webpage layout entails presenting your visitor with a pleasant visual experience. The above example demonstrates this effect. The minute your eye perceives it there is a sense of order and balance. Your eye can grasp this type of layout as a pleasant pattern, uncluttered and organized.

The above example makes good use of white space to lead the eye around the page. It also emphasizes the main features of the page with a logical organization of both text and graphics. Be sure your webpage is properly balanced and organized into logical information zones. Avoid clutter that will cause a distraction.

Page title, header text and body copy

Information, presented on a webpage, follows its own rules of balance and organization is the key. The main focus of the page should be the most obvious thing a visitor sees. This would be in the title of the page and the header text. Next follows the content or body copy. Placed at the heart of the webpage your main content text will be naturally seen by the visitor as a natural progression of the title and they will read on.

Focus on your main message

Avoid placing navigation bars, ads and links in inappropriate places on your page. (e.g. most clicks on ads come from the ones that are embedded in the content of the page anyway) They should never detract from the main focus of your webpage.
These should always be treated as supporting elements only, never as points of focus or allowing them to become distractions from your main content.The focus of a webpage should always be its main message. Other elements, even necessary ones, should be seen as framing the content and must never be allowed to overpower it.

Your content must have value

Keep your supporting material unobtrusive and present your message as the focus of your webpage. Using white space and headers will present a clean layout for your visitors while providing focus for your webpage.

Remember, your content must have value for your visitors or they will leave!



BACK: Unbalanced Layout NEXT: Focal Point


Copyright© 1999 - 2011
Rocketface® Graphics
Rocketface® Workshop Analyze Organize Develop Implement Maintain Site Map Index