When you’re starting a new design, no matter what your design methodology is, you start with a blank page. There is nothing on the Web page – so the first thing you’ll do is put something up on the page.
But do you think about the placement of those elements or do you just throw them onto the page willy nilly? Good designers don’t allow the position and placement of their designs to occur randomly. They think about:
- what the element is
- how the element relates to the page goals
- where the element fits with the other elements on the page
What is the Element You’re Placing
There are many common elements on a Web page, such as: headlines, navigation, images, textual content, and administrativa. Knowing what an element is helps determine where it should be placed on the page. For example, you typically wouldn’t put a Web page headline at the very bottom of the page. Navigation is usually found on the left or at the top, and administrativa is most commonly found at the bottom.
How Does the Element Relate to the Page Goals
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.
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.” If the Mona Lisa were stored in my aunt’s garage, it wouldn’t have the effect on people that it does hanging in the Louvre. It’s still the same painting, but if it were sitting next to cans of old paint, a dirty lawn mower, and a dust covered junker car it takes on the aspect of its surroundings.
Now, I don’t think that most people have a “ghetto” location on their Web pages, but effective placement provides the visual hierarchy and structure to your Web page. If you can engage your customers through an interesting and compelling design, you’ve done half the work.
Variety is the Spice of Life
One of the easiest design techniques is to center elements on the page. And many beginning designers start with that as their goal – all their design elements start in the middle, usually horizontally, but sometimes vertically as well. Centering appeals to many people because it’s easy. You know you’ve “done it right” because half the page elements are on one side of the screen and the other half is on the other.
But centering is boring. Centering things makes them look very flat on the screen and there is nothing for your eye to catch and hang onto. Centering is very rare in nature. In fact, even things that appear to be centered, like leaves (see picture) have small imperfections that lead the eye.
The dot in the image has been positioned so that it’s completely not centered. Each of the horizontal and vertical measurements from the edges of the page are different. You can see this on a Web page, too. By playing with the placement of the dot (and by extension, other elements of a Web page) you provide variety to your designs. You can apply this to more than one element on the page by spacing them unequally from each other as well as the page edges. Here’s an example of unequal spacing with two dots.
Find the Points of Interest on Your Page
Points of interest are the focal 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.
For example, an image might be the focal point of your Web page. You could choose to center the image on the page, but that’s boring and flat. Instead look at the other elements on the page and change the margins around your image to create a design that heightens the interest in that picture.
On this sample page, I placed three elements: a headline, a photo, and a caption. I could choose to center all the elements, but it’s a boring layout and there is no clear visual hierarchy. Your eye is drawn to the image because it’s an image, not because of the position it has in the layout.
By just making a couple small changes to the position of the elements and the margins around the image, the resulting layout is more visually appealing and the eye is drawn from the headline, through the photo, to the caption. Because the spacing between the headline and the image is different from the caption and image space, you get a sense that the caption belongs with the image. I could add more photos to this page and it would be clear they were about Shasta, but the captions would go with each image separately.
More Design Positioning Information
The dot image is not my idea – I found it in a great design basics book called Design Basics Index by Jim Krause (compare prices).
web design, cong ty thiet ke web 