We’ve all fallen victim to them, as web designers. After a while, a certain style or structure of site layout becomes second nature, and you just begin to design every site the same way regardless of content. Either because it’s easier or because it’s familiar, we can all fall into the “web design cliche” trap…but we don’t have to be trapped by it forever!
Common Webdesign Cliches, Illustrated
Full-size screenshot
While the above image I’ve made is rather tongue-in-cheek, this fairly well describes several of the design cliches I’ve seen in the last few years. (Sadly, some of these are the same ones I find myself relying on, so I’m kind of preaching to myself today, too. :P)
For instance:
900-Pixel Two-Column Layout with Floated Divided Layers
As you see in the above screenshot, the old faithful 900px two-column layout looks sharp and clean, but somehow…a little bland and overly confined, too. In this age of mobile screens and bigger screen resolutions, should we be confined by this limited-width design anymore?
I will admit it’s an easy design to make and it’s very familiar…I almost want to say “if it ain’t broke, don’t fix it.” But then again, it might BE a little broken for our tablet and smartphone age, when it can’t shrink and grow with our various screen sizes.
Blue, Gray, or Black Layout Colors…but Mostly Blue
Don’t get me wrong, I absolutely love blue, and I love using it in layout designs. It’s just that about 70 million other designers apparently love blue, too, and think that it’s a great color for their websites as well.
Along with gray and black, blue is generally overused on the Internet because it’s a “safe” color, a “sleek”-looking color. There are definitely instances where blue, gray, or black may be called for in design, but these days a “safe” color choice can make an otherwise awesomely-structured layout look less than original.
Huge Header Image
I’m as guilty of this as anybody–making a wide, occasionally awesome header image for the top of many of my layouts. I got used to doing this in webdesign about six years ago, and it’s been just plain hard for me to imagine a site which doesn’t use a header image of some sort.
But when you have this much visual space at the top of a layout, even if you’ve got a fairly eye-catching image, you’re not really drawing any attention to your content. Nor is it giving your site a good first impression, graphically speaking. (This has been a very hard lesson to learn for me, but it’s a necessary one from a user’s standpoint.)
Huge, Empty Footer
Footers are great little page-enders. They give your users ways to navigate your page without scrolling all the way back up to the top, as well as including extra links and info that don’t need to be front and center on your page.
Yet many of us web designers have gone a wee bit overboard when it comes to footers, trying to make everything BIG and important-looking, and usually ending up with the above result: a very spacey, empty-looking end to a page. If you’ve got a small site and don’t really have a lot of info that needs to be in a footer, it can even look like an unintended space at the bottom.
Gradient Background Image
|
Ah, gradients! I love them, so much…and yet they, too, can look generic. We designers have often used gradients to give a slightly dimensional effect to our websites, but they can very easily become a design crutch, too. We can begin to depend on them for backgrounds, when perhaps another kind of background effect might look better.
Simpler is better, most of the time, but in this case, it’s almost too simple–it doesn’t brand your site or add much visual interest. And, in the case of mobile browsers, it might never even be seen, not in the way you intended; spacing issues can throw off a gradient background image and make it render strangely behind the text.
|
Left-Aligned, Spaced Out Navigation
|
This style of navigation began life, most likely, as an “ease of use” design choice. It still is very easy to use and easy to look at, especially when you have a lot of links in your main navigation, but you still need your navigation area to look organized.
But what about sites that might not have that much navigation, like this example? For smaller sites, the left-aligned navigation adds almost too much white space, and takes away from the space that the content could expand into as well. You end up with a large dead space in the middle of the layout, if you’re not careful.
|
Moving Away from These Cliches
Making different design choices doesn’t mean you have to completely rethink everything about the cliches I’ve mentioned. Instead, you can make small or medium-sized changes to the cliches themselves, like the ones I describe below:
Instead of A Two-Column Layout…
…Think about a three-column layout (two sidebars, either flanking the content or both out to one side of your content), or even a one-column layout with all your regular sidebar stuff in the footer or across the top. A three-column layout could work well for a big, media/content-driven site; a one-column layout would likely work best for a small personal site.
Instead of Left-Aligned, Spaced-Out Navigation…
…You could try a series of icons for navigation on the right side of the page, or text navigation strung across the top of the page. Maybe even try a navigation bar that scrolls along with the user as they move down the page, especially if you have long pages. You still want to make sure your navigation is very easy to find and use, but making it neater and more tightly-organized can only help the process.
Instead of Blue, Gray, or Black Layout Colors…
…Try other colors, possibly used alongside blue, gray, or black to make it a little less jarring. A dark burgundy could give subtle punch to an otherwise gray layout; a bright splash of pale yellow or green could liven up a black layout.
And if you really want to break out of the color cliche, try “strange” color combinations; recently on my main domain and its subsites, I’ve tried combinations like navy and peach, deep red and bright periwinkle blue, pale green and deep purple, etc., with success. (It all hinges on how much or how little you use each color; using a bright or vibrant color is great for drawing attention to new or featured content, for instance, but it’s not great for dousing the whole layout.)
Instead of a Huge Empty Header or Footer…
…Make your header or footer retractable (with jQuery or a similar language), where the user can “fold” it up out of the way with a click when they don’t need to view it. Or you can use your header as an advertising space for your most accessed/favorited content, and your footer as ad space for other webmasters’ sites. Anything that uses that space as a content holder rather than dead space!
Instead of a Gradient Background Image…
…Check out what kinds of subtle, site-branding patterns you can use instead. You don’t have to have an animated GIF background image (God forbid!); you can try a small tiling symbol that represents your site, done in subtle shades that blend nicely with your overall layout’s colors. (For instance, for my main domain, I could use the stylized sun icon as a small tiling image in a slightly deeper or lighter shade of burgundy than the background color, adding a little design texture but not too much.)
Summary
Safe and familiar designs don’t have to trap us, as designers; sometimes, we just have to be willing to step outside our design “box,” just a little, changing the cliche just enough. Even the tiniest of changes can get our design Muses going again!
