Take a look at this awesome website:
A common way to design websites.
Aside from the nice use of contrast and alignment, impeccable taste in high quality stock photography, and intricate combinations of words related to bacon, this website design is extremely generic. You might have a lot of problems with how it looks, but what I want to rant about specifically is the overuse of boxes in this boxy design.
How many boxes can you count on this one page? I count at least 20. In case you actually took the time to count them up, I highlighted the ones you probably missed:
Don’t forget the huge empty white columns on either side of the main column in the middle.
Maybe you missed some others, but the point is that there are way too many boxes on this single page. This is not an uncommon design – now that I’ve pointed it out, you’re likely to spot it all over the internet.
There are still two more boxes that we are forgetting that are present on every webpage. Can you think of what they are? I’ll give you a hint, you can see them right now (I mean before you look at the picture)…
It’s a box within a box within a box within a…
The edges of your monitor form a box around everything on your screen. That’s one box you can always count on being there, whether you’re on a PC, a Mac, tablet, smartphone, or whatever. The browser window also forms a box around everything in your browser. Granted, you won’t have one if you’re on a tablet or smartphone, but otherwise you will. This renders the main column above (the huge box in the middle groups that everything on the page together) rather pointless.
So I have to ask: Why is boxy design still so common? Let’s get rid of some of those boxes already!
A few less boxes makes a big difference.
Why does this work? The purpose of the boxes that were in the background was to group the content together, but the content is already grouped together because related content is in close proximity to each other! We know that picture of the squirrel goes with the text beside it, and that “A Chunk of Content” goes with the text beneath it. Further, we can tell that it is the title of the article because of how the information is arranged – the title is bigger, and it’s at the top. Our brains are wired to disseminate information like this, so the boxes really didn’t add anything to help us.
Notice that I didn’t remove all of the boxes on the page, only the ones that were totally unnecessary. I still like the contrast provided by the black buttons, so I left those alone.
Also, notice that there aren’t as many things cluttering up the background of the page, so I freed up the color palette. I can use the color I was using in the background as the color of my headers, which adds another dimension of contrast.
Now I’ll be the first to point out that this still isn’t a great looking page, but it looks a lot better than it did when we started. If you’ve got other ideas that could improve this design even further, I’d love to see them!
Slightly fewer boxes, slightly more creative flair.
By the way, I’ve mentioned this before, but almost all of my good design ideas came from The Non-Designer’s Design Book by Robin Williams. Even though I make nothing from advertising, I highly recommend this book to anyone who even occasionally has to do design stuff.
DaveDen 