Simple vs. Plain
The secret between simple and bare lies in the details. The details make all of the difference. I mentioned this back in my old article, Simplicity Done Right:
"Simplicity is not supposed to mean 'bare'. It's not enough to choose a nice color scheme and add some bullets. I like to think of simplicity as trimming off the excess. Getting rid of the bulk and concentrating on cleanliness and detail."
By 'bare' I mean:
- Lack of details
- Basic divs and navigation (the usual formula for web 2.0 that's been done so many times before -- example)
- Lack of color
- No definition in links, headings, text, etc. (a.k.a. it's not distinguished from the regular text)
It's not necessarily a lack of images, a monochromatic color scheme, or using basic backgrounds in a page. Again, it's all in the details, the little things that make a layout that much more interesting. Things like decorative headings, bullets, icons, patterns, gradients (although not too many), interesting navigation, creative footers, etc.
As always, I browsed a bit and came up with a few screenshots of good simplicity versus not-so-good simplicity so that you can tell the difference. If yours so happens to be in the not-so-good pile, please don't be offended. This is, after all, my opinion, and if you're into your layout, then more power to you.
Good Simplicity
She doesn't have images in her layout, save for top strip with the different colored squares, but there's a lot going on. The color scheme is bright, her links are defined, and her headings are distinguished from the default text. She's also styled a little dotted border under her dates. You can't see the footer in the screenshot, but it matches the header and has a cute border thing going on at the top. You look at this layout, and you know that it took some thought to create.
The background is great for this layout, in my opinion. The header image is nice and simple. Just a couple of simple shapes with some shading. She could have gone crazy with the text and background, but she didn't, and it works. I love the sidebar and how the clouds seem to cover the top, drawing your eye immediately to the sidebar and the navigation. The navigation links have a nice gradient background, making them stand out nicely. She could have just left the links a nice white with some bullets, but then it wouldn't have been as unique or interesting. The rest of her text/headings are simple, but that's all right, because the header and the navigation compensate for the lack of detail there.
The background of the header has a nice pattern on it. The site name is nice and creative, with a playful font and a custom shape. The navigation is pretty basic, but she spruces it up with a little letter spacing and color. Same goes for the search bar. It's nice and bright, and sticks out from the sidebar. Simple bullets complete the lists, making them stand out a bit.
The first thing that stands out is the background, and the top bar with the little squares giving the layout a little splash of color. Like tormentosa.org, the site name and logo are different and creative. What's so good about this layout is the integration of color. There's a different color for the sidebar links, the default links, and the headings, bringing everything together. The footer is nice and simple, but a little image of the site logo wraps everything up.
Bad Simplicity
This layout has very basic divs, a very plain navigation menu, and a very bland custom shape behind some very basic text. The links are a little styled, but not only is it distracting, it is not enough to make this layout stand out. The footer is bright green, and if there would have been more green at the top instead of the background, it might have made everything look a little nicer, but it just doesn't work in this instance.
This layout has too much white. It would have worked if there were some images placed somewhere, maybe bullets, or a more interesting navigation. The search bar could have been styled a bit as well. There was an attempt at using color in the blog titles and the sidebar links, but there is so much white that it doesn't seem like enough.
This layout looks like it was made with tables, rather than dividers. The header is a rather large picture with nothing on it. At first I thought I had come across a photoblog (it isn't). The headings are very plain; they could have been styled a bit better (maybe a different font, color, or a nice border-bottom). The sidebar links just blend in with the text how they are now. The site title is too simple -- a different font would have worked better. Same goes for the navigation. It's just green text on a white background. I would have made the content background color white, and changed the background color of the navigation to a nicer green. The footer is plain, and doesn't stand out or wrap anything together.
This layout has a lot of potential. There's splashes of color going on, but it could have been done a bit better. The sidebar background just stops halfway down the page, making it look incomplete. A rounded corner could have gone nicely here. The navigation looks very plain, almost as if there was not much thought going into it. When you hover on the links, only the color changes, and that's a bit disappointing. The site title could do with a different font, or maybe a nice logo image somewhere up there, maybe in black, green, lime green, and red to wrap up the seemingly random color scheme that's up now. The headings seem to clash with the sidebar background color, as well as the border-bottom on the date and subject of the entries, and they're a bit bland as well. A nice background would add to this layout, as well as more of a play with fonts. Maybe even a few bullets on the sidebar. At the moment is just basic circles on the lists. There is no footer, which is a shame because a nice black footer would have gone nicely here.
Those are my picks for good simplicity vs. bad simplicity. It really just boils down to the details, use of color and images, and basic CSS styling. There are so many options out there, it's a shame that they aren't being used to their full potential. Little details and images add so much to a layout, as you can see above, making all the difference.
I took the liberty of searching for some CSS styling techniques and resources to help anyone who wants to spruce up their layouts:
- CSS Round Corners
- Listamatic
- Web 2.0 Layer Styles
- RSS Icons
- Website Icons
- Bullet Madness
- Squidfinger Patterns
Hopefully those help.