I’ve been prone to a few boneheaded design/development decisions since I began teaching myself HTML in the fall of 2003. We all have those moments, as webdesigners and as human beings–we all have huge foul-ups that we look back on later and laugh.

But this one, as you’ll see, takes the cake for “dumbest design ever;” it was July 2005, a scant year and a half after I had begun webdesign, and I attempted something I’d never done before (and haven’t done since).

The Infamous “Pink Layout”

This was my fourth layout for my domain, WithinMyWorld.org. Yes, yes, I know, you’re probably recoiling from your screen in horror right now. xD

Why might I consider this the “dumbest” design choice I’ve ever made? There are actually a few reasons:

1. This layout used a color I absolutely abhor. I have hated pink, especially this Barbie shade, since I was a little girl, and I think my hatred for the color bled into the layout.
2. I put in several images on this layout, but they were used in strange places (even underneath the content), which ultimately distracted user attention from the important bits of the site and made content difficult to read.
3. I flung the navigation far to the left in this layout, as if it was in “Time-Out” or something. Users ended up having to hunt for the navigation instead of easily being able to click around my site.
4. The largest text on the screen (specifically, “Within My World” and “Navigation”) used Scriptina, which is a gorgeous font. Unfortunately, I made it very difficult to read, especially the way I have it formatted with drop shadows and the like. Combined with the images and eye-searing color choices, the layout became just too “much.”

Basically, I went overboard with this layout in every way–I tried to stretch my designing wings and ended up about knocking the nest out of the tree, it seems. xD

How Can We Learn from This?

Acknowledging a foul-up is the first step to learning from it. Now that I’ve used this as a negative example, how can we learn better design from this?

Choose colors carefully.

When trying to choose a thematic color for your site, make sure the color fits your site and doesn’t detract from your content. In my case, the pink of this layout was not only an unfavorite color, but was also an overpowering color, taking away the attention that my content deserved.

It also didn’t fit the purpose of my site–this color belongs more on a fashion and beauty site/blog, or a breast-cancer awareness site. Color does more than just sit on a page; it symbolizes your content in ways you may not even be aware of. Making the most of those color associations can help your users categorize and enjoy your site more.

Use layout images to highlight content.

In this layout, I put images everywhere but where they needed to be. Nothing draws the user’s eye to the content–instead, your eye roams all over the place, not finding anywhere to really settle.

Instead, place detailed, eye-catching images within your content to further explain it, or place a few symbolic images in your header to make your site’s purpose clear without being distracting.

Put navigation in a highly-visible spot.

Don’t do what I did and push your site navigation out to the middle of nowhere. Navigation, like content, needs to be readily available so that users can actually USE your site. I kinda forgot about that when I was designing this page, and my site suffered as a result.

Ensure that your fonts are readable (even the decorative ones).

Beautiful fonts are awesome, but only when wisely used and formatted. Like I described earlier, Scriptina looks lovely, but I didn’t format it and use it to the best of its potential. What could have been graceful and light ended up chunky and almost illegible in parts.

When you’re choosing fonts for your site, whether it’s part of a decorative header or part of your page’s font selection, make sure your users can read them and that they won’t detract from the words those fonts are printing on screen. Those fonts are meant to communicate, not just look pretty!