Making a “Good” Layout Better

Web design is not always a simple matter of knocking something together in Notepad, putting pretty pics with it, and uploading it. Sometimes, as we well know, layouts just end up looking…blah on the page.

Take the following layout, which I was trying to craft for my upcoming webdesign tutorials page.


(click for larger size image)

This, in terms of a layout’s pure functionality, works. It displays what it’s supposed to; nothing’s out of place, misspelled, or obviously buggy. And yet it just looks…blah. The icons look too small, being dwarfed by the text and the header image. Not to mention there’s a lot of open, unfilled green space. It’s just…empty.


(click for larger size image)

This was my first attempt at fixing the emptiness and too-small icons of the first layout. I resized the icons and tried to reposition them where they wouldn’t just be hanging out in the middle of nowhere…and yet, again, I ended up with a problem. This time, the issue is that the layout looks cluttered–there is nowhere for the visitor’s eye to rest, because the icons stick out like sore thumbs and the header image looks off-center. And again, the layout has a bunch of empty space, especially on the left side. Sigh…


(click for larger size image)

Third time is the charm, I believe! This time, I centered the header image over the two-column layout below, leading to a more symmetrical look. I also included the navigation icons WITHIN the image div itself, and, After much tussling with HTML and CSS, got them to be positioned where I wanted them. (Who would have thought margins and padding would kick up such a fuss?) But the result is a much cleaner and more understandable look. It might not be “the BEST LAYOUT EVAR OMG,” but it’s much better than the one I had when I started out!

Sprucing Up a “Blah” Layout

If you’re having similar difficulties with a layout of yours, you might not need to go back to the drawing board completely. Instead, you might benefit from just reworking a section or two, as I did with my troublesome layout. Here are some general tips:

Change the Positioning of Graphic Elements

If the visual balance of your layout looks off, or it feels cluttered with graphics, try moving some of your images/icons around a bit. Try them positioned in a completely different place on the page, or even going a different direction (like vertically instead of horizontally, or vice-versa). You’d be surprised how much a little strip of icons can affect a page, as I found out!

Take Away Text, Add Icons

If, however, your layout feels heavy with text, you may be able to transform some of those words (especially textual navigation) into iconic navigation. (In my example layout, I challenged myself not to use text links in my navigation unless it was absolutely necessary, so that it wouldn’t detract from my content.) It may not seem like text is overwhelming your page, but it can easily swamp your visitor with information overload. An icon, by contrast, looks simple and neat.

Experiment with Content Positioning

Does that old left-aligned sidebar look dated and tired? Then maybe all it needs to do is flip over to the right side! Placing content in slightly-unexpected areas can change the look of the whole layout; moving smaller blocks of content around within your layout can also affect your users’ experience. Keep this thought in mind every time you design: “What do I want my users to see/click first?” This should be closest to the top of the page, and your header should “point” toward it, drawing their eyes to it.

Work With Your Fonts

Sometimes, a layout can seem too crowded simply with a too-small font, or a font that isn’t very clear. If you’re having difficulty displaying content attractively, as I was, a font change may be in order. Trying a bigger point size, a clearer font, or even a different class of font altogether may help clear away the “text-cluttered” look.

Summary

You may feel like scrapping a layout that you feel is too ugly to save, but don’t be so hasty! Experimenting and reworking just bits and pieces may just save you a lot of time and hassle designing a totally new look. I was about to give up on that example layout of mine, till I experimented around and found a clean, simple new way to put the same elements together.

Leave a Reply

Your email address will not be published. Required fields are marked *