Web Layout Basics

Web design often refer to the web layout. Organization of elements on a web page means the web layout. First of all, you need to understand the basic web design principles then you can start planning how to place elements on your Web page.

Placement and Position

When designing a new website, Professional web designer will think about:

• what the element is

• where the element fits with the other elements on the web page

• how the element connects to the page objectives

What is the Element You're Placing

There are many common elements on a web page, such as: headlines, navigation, images, textual content, and administration. Understand what an element is can help to decide where it should be placed on the web page. For example, it is unusual to put a web page headline at the very bottom of the page. Navigation is usually found on the left or at the top, and administration is most commonly found at the bottom.

Where are the Other Elements on the Page

In some ways this appears to be the most obvious part of design - after all if you already have a logo in the upper left, you're not going to place content on top of it. But you also need to think about the context of your positions. Placing an ad block in the middle of a text block implies a sense of connection between the two elements. Placing a horizontal line after a headline or by-line can create a sense of disconnect between the title or by-line and the content.

Where you Place Your Elements Can Make a Difference

As they say in real estate, there are three important rules: "Location. Location. Location." Effective placement provides the visual hierarchy and structure to your web page. If you can engage your customers through an interesting and compelling design, your work is halfway done.

How Does the Element Connects to the Page Objectives

Knowing your goals and the goals for the page are key to placement. That's why ads are found in similar places on Web pages. If the goal is to get people to click on them or notice them, then placing them in locations where historically people look and click helsp them to meet their goals.

Find the Points of Interest on Your Page

Points of interest are the central points of a design - the places where your eye is drawn to. By changing the spacing around those points of interest you can affect how those items are viewed on the page.

Space and Whitespace

Use the whole space, but don't be specific in your use. In other words, use relatively sized layout sections on your web pages, so that they expand and contract to fit the browser window.

Keep screen resolution in mind. While the majority of computer users have moved away from 640x480 resolution, keep that in mind when you're designing. Having customers leave because all they can see is a logo on their monitor is not good customer service.

Use color to define spaces. If you want to have a page that's a specific width, why not center it on the browser screen and make the background color of the page a different color? This will help the page appear to resize for different browsers; larger browsers will just have more background color showing, while smaller browsers will have less or none showing.

Text Width

Think about text width. This is often called the "scan length", and refers to how many words are displayed on one line. Most people can comfortably read about 7 to 11 words on a line. Longer than that, and the text is hard to read, shorter than that and it's disjointed and distracting. When designing your layouts make sure that the major text area displays the text in a readable width.

Centering text is inadvisable. One of the first layout techniques that a new designer learns is the center tag, and they center everything on their pages. However, centering is very difficult to do well and it's often hard to read.

Images and Graphics

Align your images. One of the most common newbie layout mistakes is to slap images into a page willy-nilly without thought to layout. If you just use an img tag and then write text to follow it, you'll have the image and then one line of text to the right of it. Using the align attribute will help make your images part of the layout.

Balance the graphics and text on a page. It's easy to get carried away with lots of images and animations, but they can make a page very hard to read. When you're considering your layout, remember that images are a major part of the design, not just afterthoughts.