Good & Bad Page Layout

Here are a couple examples of good and bad page layout I found on the web.  Let’s start with the bad one first (so we can end on a good note).

Um, yikes.  I think I can find all the information I would want from this ad, but a good page layout shouldn’t make viewers have to find anything.  All the text and images should be arranged such that important information is neatly given to the viewer.

Some of the most obvious problems in this image are the text and background. The background is a bit complex with all the palm leaves, and the text with its curls and toothed edges does not separate itself from this image.  Evidence of this lack in contrast is shown by the addition of a drop shadow to all the text.  I’m not against text with drop shadows, but sometimes their use indicates a problem in the design (e.g. bad background providing little contrast.)

The text, aside from having some complicated letter forms, is close to the same size throughout the image.  It is also not organized in the most logical fashion.  I had trouble discerning what was important in this ad, what the viewer is supposed to learn from it.  Also, between the logo, the statements, and the info at the bottom, the fonts do not match, adding to the confusion in this image.

I could say more about this example of bad page layout, but I’ll give it a rest now.  (Just one more thing though, why is there a lizard skateboard on Miracle the pure white buffalo?  Maybe it was thrown there in attempt to address an issue of visual balance.)

Now for the good stuff.  I suppose I could be a little bias to this image because it shows a nice gaming computer and a strand of big bullets in the same image, but I do honestly see it as an example of simple but good page layout.

One of the first things to notice (besides the pretty photograph and glossy text) is the color scheme of black, red, gray, and white.  Consistent use of color really helps unify the entire image and give it that “professional look.”

The next thing to notice is the structure of information.  The viewer’s attention is grabbed by good aesthetics with the pretty picture of the computer and bullets as centerpiece.  The bullets draped across the case lead upward to the main text while the strong vertical line towards the front of the case brings viewers to the information at the bottom of the image.  The text at the top gives a strong message in just a few words.  Then at the bottom the company’s logo appears with a short explanation beneath it.  All this text uses a similar sans serif typeface and is set on simple monochrome backgrounds rendering the type clearly legible.

This layout is further strengthened by subtle elements which help unify and balance the entire image.  A 45-degree angle present in the company’s S-like logo is echoed in the angles of the photographed computer and the trimmed corner of the gray box.  This trimmed corner also counters the long top edge of the computer to provide balance.

This web ad demonstrates good layout as all its elements combine to communicate clearly and quickly its message to the intended audience of serious computer gamers.

Leave a comment