Web Design Articles - Web Designing Principles 2

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. read more

View More Articles