Cleaning up an all-centered website

One of the most annoying kind of design flaw is the “all-centered” website layout. You may have seen this before: everything runs centered down the page, no clear distinction between sections, and, in some cases, text in all caps.

Yuck!

In this post, I’ll talk you through the steps to clean up this weak design. To begin, first view the “what not to do” example. (Note: this example uses the Lorem Ipsum text – so don’t try to read it.) Here’s the image:

1

Now let’s clean this mess up!



Get rid of the all-caps

Nothing is more annoying than large blocks of text written using all capital letters. As you may or may not know, all-caps is the text equivalent of shouting. Let’s get rid of that first:

2


Left-aligned text is just “right”

Only in very rare design situations is all-centered text acceptable (and this ain’t one of those times.) Kiss it good-bye:

3


Divide up the heading and the sub headings

Headings to a full article should always be in a large-sized font while the subheadings should always be smaller. Let’s do that next:

Click To Enlarge


The final touch

As you learned in a previous post, one of the four main concepts that make up good design is the concept of proximity (i.e. putting related information close to one another.) Let’s do that now by putting the heading closer to the text right below it and doing the same for the subheadings and their text:

Click To Enlarge


Your homework

Look closely at the websites you find neat, clean, and attractive. Most likely you’ll NEVER see large sections of centered text, all-caps, or content the seems to flow endlessly. And, of course, make sure that you never do the same in your designs as well.

If you enjoyed this post, then how about sharing it
with your friends using these services? Thanks!



3 Responses:

  1. Bret

    Thx! The images really helped me to see the difference. Much better than some of the other blogs I read. -Bret

  2. George

    Guilty as charged! Now that I can see the difference, I’ll never do it again.

    Thanks!

  3. iesha

    Awesome! Im a little late at discovering this website but it’s really helpful!


Share your thoughts below: