Spontaneous Navigation:

The most important aspect of a good web site is that the main navigation block should be clearly visible on the page, and each link should have a descriptive title. A navigation structure should not only change appearance on mouse hover, but also indicate the active page or section. The menu must help users recognize where they are, and how to get where they want to go.

Secondary navigation, search fields, and outgoing links should not be dominant features of the page. If we make these items easy to find, and separate them visually from the content, we allow users to focus on the information, though they'll know where to look when they're ready to move on to other content.

Users recognize each page as belonging to the site

Even if there's a visible difference between the layout of the homepage and the rest of the site, a uniform theme or style should exist across all the pages of a site to help hold the design together.

Although there would be content blocks on pages which are divided differently, there are several visual indicators that let users know that these are pages from the same site. Much of this unity is due to the repetition of the identity and navigation blocks. The consistent use of a very limited color palette (black, white, green, and cyan) also helps to unify the pages.

Container Block

Every web page has a container. This could be in the form of the page's body tag, an all-containing div tag, or a table. Without some sort of container, we would have no place to put the contents of our page. The elements would drift beyond the bounds of our browser window and off into empty space. The width of the container can be liquid, meaning it expands to fill the width of the browser window; or fixed, so that the content is the same width no matter what size the window is.

Logo

When designers refer to an identity, they're referring to the logo and colors that exist across a company's various forms of marketing, such as business cards, letterhead, brochures, and so on.

The identity block that appears on the web site should contain the company's logo or name, and sit at the top of each page of the web site. The identity block increases brand recognition and lets users know that the pages they're viewing are part of a single site.

Navigation

It's essential that the site's navigation system is easy to find and use. Users expect to see navigation right at the top of the page. Whether you plan to use vertical menus down the side of the page, or a horizontal menu along the page's top, the navigation should be as close to the top of the layout as possible. At the very least, all main navigation items should appear "above the fold."

Content

Content is the ultimate key to a successful web design. A typical web site visitor will enter and leave a web site in a matter of seconds. If visitors can't find what they're looking for, they will undoubtedly close the browser or move on to another site. It's important to keep the main content block as the focal point of a design so that precious seconds aren't wasted as surfers browse the page for the information they need.

Footer

Located at the bottom of the page, the footer usually contains copyright, contact, and legal information, as well as a few links to the main sections of the site.

By separating the end content from the bottom of the browser window, the footer should indicate to users that they're at the bottom of the page.

White space

The graphic design term white space (or negative space) literally refers to any area of a page that's not covered by type or illustrations. While many amateur web designers (and most clients) feel a need to fill every inch of a web page with photos, text, tables, and data, having empty space on a page is every bit as important as having content. Without carefully planned white space, a design will feel closed in, like a crowded room. White space helps a design to "breathe" by guiding the user's eye around a page, but also helps to create balance and unity. Initially even if we don't have actual content, we can use the standard blocks of web page anatomy to start developing a layout. Although other site-specific blocks are worked into the designs of many web site layouts, the web page anatomy works to summarize the most common blocks.

Now that we have this information, how can we use it to create a functional layout for our client?  It's time for some grid theory.

Grid theory:

When most people think about grids, they think about engineering and architecture. However, the grid is an essential tool for graphic design as well.

Using a grid is not just about making things square and line up: it's about proportion as well. That's where the "theory" comes into grid theory. The classical grid theory has influenced successful artistic efforts for thousands of years. The concept of dividing the elements of a composition extends back to the mathematical ideas established by Pythagoras and his followers, who defined numbers as ratios rather than single units.

The Pythagoreans observed a mathematical pattern that occurred so often in nature that they believed it to be divinely inspired. They referred to this pattern as the golden ratio or divine proportion. A line can be bisected using the golden ratio by dividing its length by 1.62. This magical 1.62 number is really 1.6180339 ... It's an irrational number that's usually represented as Ö (pronounced phi). So just what does this ratio have to do with graphic design? In general, compositions divided by lines that are proportionate to the golden ratio are considered to be aesthetically pleasing. The artists of the French Revolution used divine proportion to design their paintings, sculpture, and architecture, just as designers today often employ this ratio when creating page layouts, posters, and brochures. Rather than relying on artistic notion, divine proportion gives us logical guidelines for producing appealing layouts.

The Rule of Thirds

A simplified version of the golden ratio is the rule of thirds, or in the native accent of one of my graphic design professors, "rule of thirds." A line bisected by the golden ratio is divided into two sections, one of which is approximately twice the size of the other. Dividing a composition into thirds is an easy way to apply divine proportion without getting out your calculator.

To start the pencil-and-paper version of your layout, draw a rectangle. The vertical and horizontal dimensions don't really matter, but try to keep straight lines and 90-degree angles.

Now, divide your rectangle horizontally and vertically by thirds. As was stated earlier don't start thinking about technology yet.

Next, divide the top third of your layout into thirds again.

Finally, divide each of your columns in half to create a little more of a grid.

You should have a square on your paper that looks similar to the rule of thirds grid in the final diagram. Go ahead and repeat the above steps so that you have a few rules of thirds grids in which to try different layout options.

With this simple grid work in place, we can begin to lay out our elements. The large, main rectangle represents the container which is a part of the "Web Page Anatomy." When using this method of layout design, place the biggest block first. Usually, that block represents the content. In the first rule-of-thirds grid, place the content block within the two-thirds of the layout at the lower right. Next, place your navigation block in the middle third of the left-hand column. Place the text part of the identity block over the left side of the content, and the image part of the identity over the menu. Finally, squash the copyright block below the content, in the right-hand column of the grid. As you experiment with different arrangements, use the lines that create the three main columns as alignment guides for the identity, navigation, content, and footer blocks. It's very tempting to arrange all your elements along one particular line, but try not to let this happen--it's not very interesting visually. Instead, consider pushing part of the block over that line, as you did with the identity block. Another tendency for non-designers working on layouts is to center-align everything on a page. The grid system prevents us from doing that, but there is a reason why we tend to want to center everything. That reason is a desire for balance.

Balance

In a figurative sense, the concept of visual balance is similar to that of physical balance illustrated by a seesaw. Just as physical objects have weight, so do the elements of a layout. If the elements on either side of a layout are of equal weight, they balance one another. There are two main forms of visual balance: symmetrical and asymmetrical.

Symmetrical Balance

Symmetrical balance, or formal balance, occurs when the elements of a composition are the same on either side of an axis line. Although it may not be practical for all designs and clients, this type of symmetry--called horizontal symmetry--can be applied to web site layouts by centering content or balancing it between columns. The two other forms of symmetrical balance are less common in web site design, due to the nature of the medium. However, they're commonly exhibited in logo and print design.

 These are:

• bilateral symmetry, which exists when a composition is balanced on more than one axis
• radial symmetry, which occurs when elements are equally spaced around a central point

Asymmetrical Balance

Asymmetrical balance, or informal balance, is a little more abstract, and generally more visually interesting, than symmetrical balance. Rather than having mirror images on either side of the layout, asymmetrical balance involves objects of differing size, shape, tone, or placement. These objects are arranged so that, despite their differences, they equalize the weight of the page. If you have a large object on one side of a page, and you gel it with several smaller items on the other side, the composition still looks balanced.

Unlike symmetrical balance, asymmetrical balance is very versatile, and as such, it's used much more often on the web. If you take a look at most two-column web site layouts, you'll notice that the larger column is often very light in color--a tactic that creates a good contrast for the text and the main content. The diminutive navigational column is often darker, has some sort of border, or is made to stand out in some other way, in order to create balance within the layout.

Unity

Design theory describes unity as referring to the way in which the different elements of a composition interact with one another. A unified layout is one that works as a whole rather than being identified as separate pieces.

Although it's not such an issue these days, unity is one of the many reasons why web designers do not love HTML frames. It's important that unity exists not only within each element of a web page, but across the entire web page--the page itself must work as a unit. We can use a couple of approaches to achieve unity in a layout (aside from avoiding frames): proximity and repetition.

Proximity

Proximity is an obvious, but often overlooked way to make a group of objects feels like a single unit. Placing objects close together within a layout creates a focal point toward which the eye will gravitate.

Repetition

Any time you bring a set of similar items together, they form a group. It is like a pack of wolves or a herd of cows! In the same way, repetition of colors, shapes, textures, or similar objects helps to tie a web page design together so that it feels like a cohesive unit. Whether you notice it or not, repetition is often used in web site designs to unify elements of the layout. A good example of this concept at work among unmodified HTML elements is the bulleted list. The bullet that precedes each list item is a visual indicator that the bullet items are parts of a whole. Repeated patterns and textures can also help to unify a design.