January 03, 2004

Style vs Substance revisited

There were some interesting comments left over my previous post about blog designs, and some excellent debate via email*.

Madfish Willie and others asked about my thoughts on color in blog design. Without going into a lot of theory about color and how to use it, I'll just mention a few personal opinions and invite your views.

Exceptions can always be found. If I said that blue should never be used in a blog, someone would point out that blue looks quite nice here.

White is cold and sterile, which is good for serious blogs or professional business sites. It makes for a crisp look, and is easily dressed up with a few small graphics and goes with any contrasting color.

Black is the other extreme, and like white any color can be used for contrast. A little more care should be taken here though because using too many bright colors turns the look into something resembling a Lite Bright, which is hard on the eyes.

In both of the above cases, I feel that using an off-color of white or black is often more effective. An extrememly light dove grey or deep charcoal is more interesting, even if it's not instantly obvious to the eye. As an example, when we painted the master bedroom in our home, I used the palest grey I could find on the walls. You couldn't even tell it wasn't white until I painted the window trim and closet doors pure white. The contrast was remarkable.

And that pretty much sums up my feelings on the subject. Less is more and subtle is better.

That said, it is possible to go too soft on the colors. I'll use our home again as an example, this time the kitchen. My wife picked out a very nice wallpaper full of grey-blue and grey-green. Plenty of color without being too dark or gloomy. There were also small bits of pink in the wallpaper, which I decided to use as the highlight color. My wife freaked out when she saw the paint I brought home for the trim in the kitchen, because it was bright bubblegum pink. It was just enough to jump out and catch the eye as a highlight color. Too much of it would make the room look like an explosion in a pepto-bismol factory.

My blog is another example of how I do this. Mostly soft grey and green, but the blues used for the date line and the banner up top are both pretty bright for contrast. Imagine those same blues (and the reds I use for links) on a straight white background. The page would look entirely different.

To my eye, pastels are easier to look at. Even bright colors like yellow and orange should be softened, especially if they're the primary color. Mookie did that on her blog, imagine the difference if she would have used a bright yellow or purple in her color scheme.

Contrast is important, and there are two ways to get it. First is by light on dark - black on white is the most obvious example, but white on dark grey, or dark blue on light blue work well. The second way is by colors - yellow on blue or brown on light grey - the idea in all cases is to make it easy for the eye to distinguish between design elements.

I've always heard that dark green is the most restful color for human eyes, but I've never been able to make it work as an effective background color. And just because this is Rocket Jones, I'll mention that according to government studies, the best visibility is obtained for rockets when painted black, white and red in large areas.

So there it is. I'm pulling on my flame-proof overalls, so feel free to let me have it in the comments.

* Madfish Willie was rather incensed by my opinions, but being men of the world we agreed to settle our differences the next time we're both in Tijuanna. We're going to meet at Rosarita's Cantina for lunch and the pony floorshow, followed by a switchblade duel to first blood. I expect we'll have enough tequila in our systems that the duel ends up in a draw, both of us managing to cut ourselves with our own knifes while trying to impress the working girls.

Posted by Ted at January 3, 2004 12:30 PM
Category: Munuvian Daily Tattler

Actually, Ted, I pretty much agree with everything you said (new Redskins coach notwithstanding). That's why my blog is pretty muted.

Posted by: Victor at January 3, 2004 04:49 PM

"Too much of it would make the room look like an explosion in a pepto-bismol factory."

Ted, I almost died laughing when I saw this line. Several years ago I painted my living room. I thought I had a kind of a dusty rose color based on the paint chip. When I came into the room the next morning, the sunlight streaming in the uncurtained windows, my fiest thought was "Oh, s---, it looks like a Pepto-Bismol factory blew up."
(Once I added curtains, furniture, and grey lampshades, it isn't nearly so violently pink, and I have grown to love it, especially since I am so not a girly girl that a pink room surprises all who see it.)

My next blog face lift will be pink, maybe with some lime green and lots of blinking text. ;-)

Posted by: Nic at January 3, 2004 09:58 PM

Painted my daughter's bedroom pink when she was 4. I painted it 3 times before we got a shade we could stand. Pink takes on a very different look when it's on 4 walls vs a 1 inch paint chip.

I agree with your less is more aproach. And I like to think that I have made decent use of blue as well!

That said, I have probably never not read a well written blog because it was ugly. I will click off of good content for two reasons - anything that moves or flashes and anything that makes noise.

Posted by: StMack at January 4, 2004 09:33 AM

I vote for "non-obnoxious." Nothing should blink. Actually, I used to, back in the early days of the web, point out the "hideous site of the week."

Perhaps I should pick that up again. Non blogs, of course.


Posted by: hln at January 4, 2004 07:32 PM

Never ever ever use blue text on a black background. Possibly the worst combination there is for readability.

Basically, I agree with you. Not that I think that your site (or mine) is the epitome of blog design, just that it's fairly well organised and easy to read.

Acutally, the current incarnation of Madfish Willie's isn't too bad. A bit busy, perhaps. And I don't like having any sort of image behind the text. But otherwise pretty good.

Posted by: Pixy Misa at January 4, 2004 08:05 PM

OK, OK, I give in--how does my site measure up to your scrutiny...?

Not that it would change anything, so NYAH! ;-)


Posted by: Denita TwoDragons at January 4, 2004 08:16 PM

Pixy: Thank you for your unsolicited compliment.

Mr Jones: Your whole last paragraph is a misstatement... no, it's a downright, bald-faced lie. I was not incensed with your opinions, you are entitled to your your opinion. However, you damned well bet I'm incensed now. I certainly didn't agree with most of your opinions in the post in question. I thought my comments to your post were well thought out and had strong reasoning behind each point that I made. Apparently you thought so as well, or I would not have recieved such a lengthy private response from you. I had really hoped to continue that discussion on a private basis, but you had to put that little punch in at the last paragraph. As far as I am concerned, you are full of shit. I didn't design my blog for your approval. I didn't design it to solicit or listen to your opinions on whether or not you feel it is a successful design. As previously stated, I designed it for my own personal amusement and entertainment, no one else's. I think as much of your opinion as I do of any other "expert" opinion. They all suck and more often than not, they are totally wrong! Please don't feel obligated to visit my unsuccessfully designed site. You surely are not there for the content, as you yourself have pointed out. I certainly won't feel obligated to return here under any circumstance.

That's about all I care to say right now without getting really shitty about it and possibly stepping on someone else's toes.

Next time, keep your friggin opinions to yourself unless you are asked for them!

Posted by: The Bartender at January 4, 2004 10:47 PM

Denita -

Personally I like your site. The one thing I might change is the background you use with blockquotes... I'd use a simple solid colour instead. It's just that I don't like anything that makes text hard to read, since I spend 12+ hours a day in front of a computer screen.

Posted by: Pixy Misa at January 5, 2004 02:03 AM

Willie, apparently you don't 'get' my humor either. Lighten up.

Posted by: Ted at January 5, 2004 05:16 AM

Denita, I like your design. You've got a lot going on, but everything fits together well and nothing distracts and dominates. It's also well defined between the various bits, which makes it easy to read. I hadn't noticed the texture behind the block quotes before, but I think italics are harder to read in general (and that's coming from someone who uses italics entirely too much myself).

Wow. Can I submit just that last sentence fragment in parens to the Bonfire?

Posted by: Ted at January 5, 2004 09:08 AM

Ted - Good point on italics. At home, with a 1600x1200 display and anti-aliased fonts, they work fine. At work, with a 1280x1024 display and non-anti-aliased fonts, they are noticeable harder to read.

Posted by: Pixy Misa at January 5, 2004 08:22 PM

Since I was a reasonably successful web developer (in my own niche) before I joined the rank and file of this man's (person's?) Air Force, I wanted to weigh in. Even if I am a freaking week late.

I always tackled design from a usability point of view. If a design was clean, simple and intuitive for the user, then it's likely to be (commercially, statistically, whatever) successful. In my work, that always meant having a good, obvious organization of content and then creating a layout that facilitated finding the information the user wants quickly (studies suggest 2 clicks or less).

Balance that against clutter. For all it's strengths and popularity, the common blog format (IN MY OPINION) is too cluttered. Too many lists of links, random graphics, months of posts make a page hard to digest and and a poorly organized archive system makes it even more likely that content will be missed.

On text styles: I like using italics, but I hardly ever use bold. IMO, the important thing is to be consistent with how you use them (links, movie & book titles, etc) and be consistent with your layout. For instance, on my site, if I bold body copy, it looks the same as my headings.

But the original discussion was about colors, no?

I agree with Pixy about the background/text combo. It's OK for highlight text to be a different color (headings, links, anything you want to call out), but copy text should never be anything but black or white (keeping in mind that white text may not print properly on some printers if the browser isn't set up to transvert the color).

And I totally agree with Ted about using subtle shades for the background. light shades of white and black relieve eye strain and make it more likely that a user will get more than 2 paragraphs into your 3 page rant.

One helpful thing I always did was choose a color family before I ever did any layout. Choose a background color, a text color, and 2 or 3 highlight and lowlight colors to use for textboxes, headings, etc. And then stick to your choices. (Incidentally, that's why I was so stoked when style sheets came into being. That also gives you an idea of how long it's been since I was doing this stuff.)

And a word about obnoxious "toys":
There used to be an IBM commercial where the CEO went to the web department of his company. He had seen a website with an animated flame and he kept saying, "Can we get fire?" as though it was atomic technology. Unless you're running The Hamster Dance, nothing animated. It takes attention away from the real content.

And in the name of all that's Holy, no background music. A page could have a picture of tomorrow's lottery numbers tatooed on Brittney's naked body and a background MIDI would still make me click 'back'.

Posted by: Alan at January 6, 2004 05:35 PM

Thanks for the critique, Pixy and Ted! I'll relay the info along to Hubby and see if he can change the background on the blockquotes. I agree with you 100 percent, I think that Eric did it that way to break up things a bit but perhaps it would just be better to use a very pale shade of grey instead.


Posted by: Denita TwoDragons at January 6, 2004 06:56 PM
Post a comment

Remember personal info?

Site Meter