» Designing in your proverbial underpants

Designing in your proverbial underpants

Perfection is achieved in design, not when there is nothing more to add, but when there is nothing left to take away.

That quote by Antoine de Saint Exupéry is something that has stuck with me. This post speaks on something simple, but on one design idea that I think is pretty useful for the internet. I was thinking about my own web design evolution today, and about how I tend to approach solving design problems today as opposed to the past.

In the past, I was very likely to use something like this. This was the first official version of my site.

First Version of Information Rain

I’d have the content in the middle, and a background container that was a different color than my content area and various graphics of some sort around it.

When I talk about a container, I’m not talking about some DIV in the XHTML that you’d use to position the content, I’m talking about what the user sees, the large region of color and graphics around content.

My own design trend is heading towards this container-less direction. This is the newest incarnation of this site.

Current Version of Information Rain

Notice there is no surrounding color. The content is surrounded by whitespace, not color or meaningless graphics or whatever.

The courage to be naked

For some great (or actually not so great) examples of web pages that are pretty but suck, or just plain flat out suck, check out Web Pages That Suck.

Designing without lots of graphics and colors is really brave. You have to focus on selecting the best content, quality typography, legibility obviously, and avoid some common usability pratfalls. You can’t hide a poor layout behind pretty vector graphics and loads of stock clip-art and other distractions.

I recently wrote a comment on the 15 Excellent Examples of Web Typography. Part 1 article.

….I like that you picked a black & white site (the Rikcat one) because I think it shows a lot of character when somebody is confident enough in their layout to avoid any colors whatsoever.

John Boardley, the guy who created the I LoveTypography site, responded with this interesting comment.

Yes, none of the examples is perfect. I think the Rikcat design and others that resist all the hues of the rainbow are brave designs. Colour, like so many elements of design can cover a multitude of sins.
However, when your design is standing in nothing but its proverbial underpants, then you really need to have a clean pair. Actually, I sometimes reduce a full colour design to grey scale as part of the testing process; it’s surprising how much this experiment reveals.

Actually John, one of the advantages of working for yourself is that you can design in your literal underpants.

You always try and get better in whatever you do in life and every time I’m thinking about what direction to go in, I think this is the philosophy to follow. Focus on what makes the web work: simplicity, usability, quality typography, and great content.

Reducing Brand Value

So, is designing sites in this way going to lead to a web that is sort of predictable and boring?

I don’t think so. For one thing, a surprising amount of web design is still dominated by companies and individuals that churn out sites with random Dreamweaver Templates instead of handcrafting an ideal site from scratch. Go look at your local craigslist page. You’ll see hordes of folks pimping two-hundred and fifty dollar web designs without any sort of content-management system as the ideal thing for some business.

But beyond that, consider what really makes a website and brand distinctive.

Information Architects JP has written a fascinating point about the interface really being the brand.

Using the common iPod example, there’s not even a logo on the front. You know just by seeing the click-wheel (the interface) what the brand is (an Apple iPod).

The Newest iPod Nano. A little fat, but cute and useful.

Focusing on making sites easier to use: selecting only the information that is valuable to your users instead of throwing everything on the page, making content easy to read, those are the things that good web design seems to really be about.

Yeah, but how can you still make a site distinctive?

If you’re concerned about aesthetics and graphics and “prettiness”, there are tons of very simple things you can do within the context of a lack of a container and simplicity, even if you’re not a sublimely-talented artist.

For one thing, look at color, or rather, a lack of it. Within a sea of black & white, a tiny splash of color can be so much more distinctive than an incredibly colorful and cluttered site. Just look at the renowned film Sin City for this.

Besides Sin City, another famous example of using black and white with just a splash of color in film is the girl in red from Schindler’s List.

Sin City Image

I think Coda is a quality product and I’d recommend experimenting with it to see if you like it, but it doesn’t really fit within my workflow preference as well as other apps like Textmate and CSSEdit.

Or take logo design. A beautifully distinctive logo can make an entire website or product experience very distinctive and memorable. I’m not a logo-designer, but there are a ton of great ones out there. One of the greatest looking logos I’ve seen recently is the one from Coda, a unique website development tool.

coda logo

Or think about what you can do with the peripherary of a site: particularly the top and bottom. Take my site as one example. In this site’s CSS, I have something like this…

border-top: solid 15px #000
border-bottom: solid 15px #000

…that produces a black band along the top and bottom of the site.

This is very simple. No images are needed that slow down site-loading times. Just a tiny bit of clever CSS can add some flavor to the soup. You don’t even need to resort to using any complicated CSS 3 tricks to do this.

Development is easier

Another advantage of simplicity and not relying on graphics for distinctiveness is having less of a struggle getting things to work on every single browser. Development time and headaches can be greatly reduced if you don’t have as many graphics on the screen to worry about positioning errors on the half-dozen or so browsers that really matter.

I can’t tell you how many hours of sleep I lost trying to solve a simple incompatibility between IE6 and Firefox on some work I did a while back. One cool thing nowadays is that there are a number of free CSS Reset Methods that eliminate a lot of this, but the fact that some browsers like IE still exhibit some difficulties is one of the most galling things about modern web design.

If your focus is on whitespace as opposed to graphics, it wouldn’t look out of place if a few things are slightly different between browsers because you’ll just have a bit extra whitespace there as opposed to graphics not being aligned correctly.

A few examples of quality sites that follow this dictum

Subtraction - Great design and other cool writing. Famous for the grid-system approach to design.

skelliewag - Great content creation advice, focusing on providing value for users. Very simple design.

Rikcat Industries - A website I only recently discovered so I haven’t had a chance to read some of the writing on there, but has a phenomenal black & white design. Way cool!

Information Architects Japan - Great observations on all kinds of fascinating design, internet, and other technology issues. One of my favorite sites ever.

I Love Typography - Contains plenty of humorous and informative articles on typography. Has quickly become a very popular website.

Information Rain - Probably the best website on the internet, if I do say so myself.

Conclusion

Designing this way has a lot of advantages, some of which were mentioned above. But in my opinion there is one more key issue that designing in without a background container provides. More to come in the next article which should be posted on Wednesday.

Posted on September 25th, 2007 by Chris Papadopoulos.

Subscribe to the RSS feed, Trackback, or contact me privately.

Spread the Love These icons link to social bookmarking sites where readers can share and discover new web pages.

Trackbacks & Pingbacks

Pingback by Information Rain » Designing for thinness — September 26, 2007 @ 7:43 pm

Comments

johno (7 comments.) @ Sep 26

What a great article. I never imagined that my response to your comment would be immortalised on IF!

And a big thumbs-up for this:

Focus on what makes the web work: simplicity, usability, quality typography, and great content.
Chris Papadopoulos (5 comments.) @ Sep 26

Thanks John!

But I don’t think you noticed what is truly the most inspiring quote from this article.

“one of the advantages of working for yourself is that you can design in your literal underpants.”

Anyway, I just had to use that phrase of yours. It was really quite amusing and true.
johno (7 comments.) @ Sep 26

Chris
Yes, I had noticed that line. However, as a “work in my underpants designer” myself, I was a little shy about referencing that rather memorable quote of yours.
I have saved your readers the horror of seeing a photograph as proof.
Andrea (1 comments.) @ Oct 11

Interesting read. I had too switched to the “no container” approach time ago for my blog. This gives the layout more breathing space and it has a number of advantages, as you have written in your post.

However I don’t find it effective for every project. I came here from the “Big, Bold Backgrounds” post and there are some very nice use of imagery as backgrounds, they tend to give a lot of personality to a web site. I can think that a certain range of sites like illustrator and painters portfolios, young community sites or kids oriented sites can benefit from that approach.

I want to add something about the the “Sin City” example. The underlining concept there is contrast, and you cannot achieve contrast without context. That is, to highlight the red type you have to paint the surrounding element with black. The more noisy, similar in color or cluttered you made the surrounding the less the red type will stand out.

A good reading on the subject is Andy Rutledge’s “Contast in context” (http://www.andyrutledge.com/contrast-context.php)

Note: The comment box is extremely narrow in Firefox, can we have a bit wider? Thx.
Chris Papadopoulos @ Oct 11

Thanks for the comments Andrea. You’ve brought up a number of good points I either didn’t bring up or hadn’t considered.

You’re right that the container-less approach is not necessarily the best approach for every single project. Some of those illustrator’s sites from that blog post use the colorful background element to display the illustrator’s skill, which helps “illustrate” the point of the site.

I’m not an illustrator and generally work with businesses and things, so my focus is on trying to build really simple sites. Some people like the simplicity, some don’t. I think simplicity in today’s world can be even more distinctive when well-done.

If I had the artistic talent to create the gorgeous backgrounds that other sites had, I’d probably go in the other direction, but I don’t have that talent.

And good description about the contrast needing context. I love the black and white look with perhaps just a tiny splash of color.

Thanks.

PS: You’re right about the comments being really sucky. I’m embarassed about it. There’s a bunch of things that need to be improved with this site that I haven’t had a chance to fix yet.

PPS: I noticed from your blog you live in Italy. Thats great. I haven’t had a chance to visit Europe in years and wish I had more of an opportunity to at least travel, possibly even live abroad someday. Not sure where though.
johno (7 comments.) @ Oct 11

I recommend Italy, Chris; in my opinion, it’s the most beautiful country in Europe.
The West Coast is particularly nice.
Chris Papadopoulos @ Oct 11

John, as a teen I lived in Greece for a few months, but never had the chance to visit Italy.

Who knows? Maybe next summer.