The problem with white space (And what you need to know about design)

by Craig McBreen · 48 comments · Branding, Design


If you think about simple tweaks you can make to your website design, what comes to mind?

What changes can you make to generate more sales? Or get people to read your content?

We’re talking design here, folks.

And design isn’t just about the latest font or the trendiest theme. It’s also about making an impression and pointing your readers in the right direction, whether it’s to make a sale or simply get them to read your content.

And there’s one mistake that just might put a dagger in your efforts.

You guessed it. A complete lack of respect for our friend, white space.

You know? The space between elements on your nifty little page?

Effective use of white space is one of the fundamental elements of graphic design, but it’s so often forgotten.

It’s about positioning that call to action or new post so it stands out from its neighbors, letting the space surrounding it work for you.

That space allows your viewers’ eyes to focus on that one element, directing total and complete attention to your killer content.

And you want to direct total and complete attention to your star content, right?

The good news is. if you’re willing to make a few small changes, it’s an easy peasy fix.

All good, but what’s the problem here, Craig?

First you need to know a bit about Hick’s Law. Hick’s what? … Let me explain. William Edmund Hick was a British psychologist who dabbled in the fine art of experimental psychology, and his gift was this little piece of wisdom, actually called the Hick-Hyman Law.

Here’s a concise definition: “The time it takes to make a decision increases as the number of alternatives increases.”

So basically, the more options you present to the end-user the more difficult you make it for them to pick one. And the less likely they are to do what you what them to do.

Common sense, but the goal here is to get you to put it into practice on your site.

And you now see this isn’t only about all that space between your stuff. It’s also about cleaning house and reducing the clutter, so Mr. Hicks won’t turn over in his grave.

Fact: Our wee noggins often have trouble choosing between options, unless one is clearly front and center.

Fact: Reducing choices makes it easier for the reader. It also creates a better experience, so they might come back. And most importantly, there’s a better chance visitors will do what you want.

But why are there so many cluttered sites out there, when a few simple changes will make all the difference in the world?

I don’t know, but I can provide a bit of actionable advice in my own feeble way.

1. You have to create more “negative space” in your design.
And by “negative space” I mean white space. The. Space. Between. Your. Stuff.

For great examples of what I mean > check out this post or look here or here or here.

2. But you also have to limit the number of choices. A great place to start is with your sidebar. I know, you’ve heard this before, but have you eliminated anything? If not, it might be time to start whittling away.

With the plethora of WordPress plug-ins, it’s easy to junk up your sidebar, so evaluate what you currently have, then decide what you need and what you can toss in the bin.

Again: The goal is to eliminate choices. Do you need social media icons? If so, maybe it’s a good idea to tuck them away (I do), get rid of them altogether, or use a monotone color scheme for them. Many child themes have this built in.

If an opt-in is your focus, it might be fighting for attention with everything around it.

3. And while we’re at it, I would be remiss if I didn’t address color.

Blogs that use fewer colors stick in the viewer’s mind. People often buy or click based on emotion. And color triggers emotional responses, but is much more effective in small doses. Check out the 60-30-10 rule here.

To sum it up:

1. Embrace the white space
2. Declutter (the sidebar is a good start)
3. And limit those colors for a most crackin’ site.

More white space, less clutter and a limited color palette help individual elements stand out.

These practices have worked for me and my clients. They’re not that difficult to implement, but it really is a 1-2-3 punch that will help.

Design is really about crafting effective navigation that makes your audience happy and does what it needs to do for you.

If you’re interested in building something special or are simply looking for a community of business owners who are unanimous in their desire to create their own little dent in this space, join us.

There’s plenty more coming and it’s all about You, your business and how you will rock it online in your own special way.

I’ve only just begun and so have you. Let’s get started together.

I’d love to know if you plan on making any design changes. Or if you have, how they are working out?

Also: Are you in love with Genesis? Thesis? Or some other framework?

 

Sign-up Today to Get Your FREE eBook.

I take your privacy very seriously

{ 44 comments… read them below or add one }

Barrett Rossie October 28, 2012 at 9:05 pm

Hey, have you been poking around my website? I’m taking some of your remarks personally!

Very good point of view Craig. I’m planning a new design, this is all very helpful.

Reply

Craig McBreen October 28, 2012 at 11:34 pm

Hi Barrett,

Well … I do want to help ;) Seriously though, I like the header in your design. What WP theme is it?

My main point here is limiting choices. Some sites are simply overwhelming and people stuff everything but the kitchen sink in the sidebar. And I think some simple changes can help quite a bit. It starts with eliminating items.

Reply

Ryan Hanley October 28, 2012 at 9:30 pm

Craig,

This is great advice… I especially like the Limit Colors piece. There is nothing worse than getting to a website and having it filled with confusing colors. I will almost immediately leave.

Some websites actually hurt your eyes with all the different colors.

Thanks

Hanley
Ryan Hanley recently posted..Content Warfare Podcast #7 – with Craig McBreen on the Art of Breaking OutMy Profile

Reply

Craig McBreen October 28, 2012 at 11:36 pm

Hey Ryan,

Thanks! Yes, some sites do hurt the eyes, and you often don’t know where to go either.

A good mix of white space and a limited color palette are really simply changes most people can apply in no time at all.

Reply

Josh October 29, 2012 at 12:07 am

Too many choices- you just described why I hate taking my family to certain restaurants. Too many choices make everyone crazy and it takes forever to figure out what we want to eat.

I can see how it applies here too.
Josh recently posted..Does Your Blog Need A Mission Statement?My Profile

Reply

Craig McBreen October 29, 2012 at 7:06 pm

Hi Josh,

Agreed! If you’ve ever seen Gordon Ramsay’s Kitchen Nightmares this is usually the first thing he focuses on – giving him good reason to call the owner an F-ing Donkey or worse ;) Okay, I just admitted watching another mindless TV show.

Reply

Adam October 29, 2012 at 1:10 am

Nice post Craig, and I appreciate the link. Rafal did a great job with the design.

It’s funny because I kept this principal in mind when giving feedback on his designs, which were already clean and tight. Similar to Hick’s Law, there is research from the business environment that shows that the more choices you have the less likely you are to make a choice and, less obviously, the less happy you are with whatever choice you do make.

I think about this when I see the pages that have 30 social buttons on them. I’m down to 6 now… not sure I will make it to 3 like you did!
Adam recently posted..7 Secret Customer Service Techniques Every Expert Knows: Our eBook is Here!My Profile

Reply

Craig McBreen October 29, 2012 at 7:10 pm

Hi Adam,

Thanks! I love your new design and plan to feature it as part of another post.

The more choices you have the less likely you are to make a choice is indeed true and thanks for pointing out, “the less happy you are with whatever choice you do make.”

Many blogs I read don’t even feature the social icons. I like to keep them for now, but often wonder if they are even necessary.

Reply

Brent Carnduff October 29, 2012 at 4:27 am

Great post Craig – advice that is simple, actionable, and easy to implement (with lots of white space), and something that is probably 2nd nature to you, but great for us non-design guys to hear!

I think that this is why I liked the look of your site so much – but I couldn’t have told you why exactly before. All about the white space baby! : )
Brent Carnduff recently posted..Coming Soon!My Profile

Reply

Craig McBreen October 29, 2012 at 10:37 pm

Hi Brent,

Thanks! 2nd nature to me, and I sometimes get carried away, with less, that is ;)

It really can make all the difference though.

Thank for stopping in!

Reply

Jens P. Berget October 29, 2012 at 7:56 am

This is very interesting stuff Craig. I can relate it to buying a new Mac. I have been thinking about buying a new laptop from Apple for several months now. But I didn’t want to buy it before the announcements last week. I was going to buy a MacBook Air, now after the announcement of the 13″ MacBook Pro with Retina display, I just can’t decide what to do :)
Jens P. Berget recently posted..Do you need to use images in blog posts?My Profile

Reply

Craig McBreen October 29, 2012 at 10:42 pm

Hi Jens,

Had the same dilemma with the Air and iPad. Woe is me, huh ;)

I’d vote for the Pro just because of the retina display. It’s like comparing the display of the iPhone 3 with the 4. That old phone is hard on the eyes.

Thanks for stopping in and let me know what you decide on, Mr. indecisive.

Reply

Jens P. Berget October 30, 2012 at 1:38 pm

I have just bought the 13″ MacBook Pro Retina, and I’m very satisfied. Now I just have to buy the 27″ Cinema Display :)
Jens P. Berget recently posted..My 3 best relationship marketing tipsMy Profile

Reply

Craig McBreen October 30, 2012 at 11:59 pm

Congrats! A new baby ;)

Reply

Ralph October 29, 2012 at 11:15 am

White space is not unlike clean, efficient space planning.

When a space is well laid out and the user innately understand the function and is naturally lead through the space then it is effective. Sight lines and signage are key elements to provide intuitive flow and I assume that is what a well designed website does as well.

Cluttered space design – too many options packed into a space – confuses the occupant. “Less is more” is, FWIW, a difficult edict to follow but when executed well inherently enhances the elegance of a space.

Design is almost like a universal language, huh?
Ralph recently posted..The Studio: Ep3: Working within the extremes of Iteration and Passion.My Profile

Reply

Craig McBreen October 29, 2012 at 11:12 pm

Hi Ralph,

Yes, indeed!

It’s like the very first time I went to Vancouver, BC. (It’s only 150 miles from here). Anyway I was impressed by the street signs and how easy it was to navigate around the city. (These were pre-GPS days, mind you). Something in the water up there I guess. Seattle still pales in comparison.

But back to cluttered space design. Yes, I completely agree and it’s amazing when you see a public space, retail outlet whatever and they don’t get this.

Design is a universal language for sure. And less is indeed more!

Reply

Erin Feldman October 29, 2012 at 2:20 pm

I am a huge fan of white space, probably because of my art and poetry background. White space is crucial.

I think my site is where I want it for the moment. Minimal colors, minimal sidebar, and quite a bit of white space thanks to a Genesis child theme.

To white space!
Erin Feldman recently posted..Death to Busy WorkMy Profile

Reply

Craig McBreen October 29, 2012 at 11:14 pm

Hi Erin,

Me too ;)

I really like the look of your site and I’d say you are in very good shape. Is the Genesis child theme fairly easy to work with? You dabble in a bit of CSS, right?

Reply

Erin Feldman October 30, 2012 at 1:09 am

I’m using the Balance theme, and it’s fairly easy to use. It has additional items for the home page that I don’t use because I wanted the focus to be on the posts. I did tweak the CSS some. The hardest part was getting my image sprites to work. I also used a little bit of CSS with the subscriber box. It’s a lot of testing, probably because I don’t have a really strong background in CSS. I do track the changes I’ve made, though, in case I get myself into a hairy situation. That happened twice when I first installed the theme. I had to start from scratch twice.
Erin Feldman recently posted..Death to Busy WorkMy Profile

Reply

Craig McBreen October 30, 2012 at 2:40 am

Hi Erin,

I like the simple elegance of the Genesis products … toying with switching, but will probably stick with Thesis.

There are so many resources out there, it’s fairly easy to teach yourself even more CSS, but there usually comes a point when you want to bring in an expert and stick to what you do best. But it certainly looks like you have everything under control at your place. Good going!

Reply

Carolyn @ Wonder of Tech October 29, 2012 at 2:46 pm

Hi Craig, Well, I had to go to my blog dashboard and change my settings before I could comment. You’re right, just look at the sites that are trying to emulate Pinterest: StumbleUpon and eBay most recently adopted the clean look of Pinterest.

I discovered that my skin doesn’t allow for a total white space but I got rid of the color at least. Now I’m trying to decide between two looks for the side space. At least I can get rid of the color and adopt a minimalist gray.

I am always surprised when I arrive at a blog with a cluttered pattern in the sides. Sometimes the articles are difficult to read because the patterns are so distracting.

Thanks for bringing our attention to this, Craig!
Carolyn @ Wonder of Tech recently posted..Boo! Halloween Apps for Fun and Safety!My Profile

Reply

Craig McBreen October 29, 2012 at 11:24 pm

Hi Carolyn,

It’s a nice trend isn’t it. Then think back to something like MySpace. Yikes! Talk about hard on the eyes!

I like the direction you’re going in, and I don’t think you have to go with white of course, it’s more about “negative space.” In fact, I think with the way your site is laid out it might benefit you to go with a light gray on one side. That’s part of another principle, figure ground, I’ll get into down the road ;)

Yes, a cluttered side bar is often a reason people leave or don’t do what the site owneer would like them to … stay ;)

You’re welcome. Thank you for coming by.

Reply

Carolyn @ Wonder of Tech October 30, 2012 at 11:36 pm

Great. Light gray it is, then. :-)
Carolyn @ Wonder of Tech recently posted..SkyMotion – Never Get Caught in the Rain Again!My Profile

Reply

Craig McBreen October 30, 2012 at 11:59 pm

Ah, let me know how it works out :)

Reply

Lisa Gerber October 29, 2012 at 4:57 pm

I compare this to walking into a department store. I’m a horrible shopper, and hate huge department stores – all the choice becomes overwhelming.

I am a big big fan of white pace, but here’s the problem I often encounter: Clients have too many messages, and this is the enemy of white space. “Oh, but we have to tell them about this…. and our friendly service, and and and… what about the award we just won?” How would you handle that, Craig? I refer to Basecamp.com as a great site to your point – they funnel the prospect through the information, so if you’re “still here” you must be interested in the deeper stuff, and it takes longer to get there.

No need to make everything accessible from the first page.
Lisa Gerber recently posted..Eight Ways to Jump Start Your BusinessMy Profile

Reply

Erin Feldman October 29, 2012 at 7:10 pm

Haha! I think those clients might need a friendly reminder from their neighborhood editor that they don’t have to include everything all at once. It’s okay to hold back information until they have a place to put it. If they never have a place, that’s okay, too.

Reply

Craig McBreen October 30, 2012 at 12:15 am

This is why I like to focus on copy first. Many are focused on getting a site up without having addressed the copy issue.

Reply

Erin Feldman October 30, 2012 at 1:11 am

You would enjoy getting to know my acquaintance Lauren Hug. She’s a speech coach. She and I visit the topic of form and content semi-regularly.

Have I referenced Ben Shahn in any conversations with you? I love his essay about form and content.

I like your response to Lisa. That’s how I would do things, too. List everything, then whittle away until the essentials remain.
Erin Feldman recently posted..Death to Busy WorkMy Profile

Reply

Craig McBreen October 30, 2012 at 2:44 am

I’ll have to look Lauren up on Twitter. Same with Ben.

Yes, clients often want to jump right in, but I often have to say, “wait just a minute here!” ;)

Craig McBreen October 30, 2012 at 12:14 am

Hi Lisa,

I think it’s exactly what you said: “No need to make everything accessible from the first page.”

But really, this is often one of the most difficult things for any client to deal with and one of the very first things I do is get them to list everything they want the site to say, then whittle it all down the the most important elements. But they do want to say everything. I don’t blame anyone for wanting to do that, but less really is more!

Maybe the primary navigation has 2-3 funnels which are also part of the main keyword messaging. Good thing there’s secondary navigation too :)

Deep and interesting stuff, huh? ;)

Reply

Tim Bonner October 29, 2012 at 5:43 pm

Hi Craig

My blog was full of colour and this that and the other until I changed it a few weeks ago.

It could probably do with a bit more tweaking in the sidebar department and I’ll have a think about that over the next couple of days.

Less is more.
Tim Bonner recently posted..Why Customer Experience Means EverythingMy Profile

Reply

Craig McBreen October 30, 2012 at 2:09 am

Hi Tim,

Glad you approve and less is indeed, more!

I think a website or blog is a constant work-in-progress. Hard to leave it alone ;)

Reply

Susan Silver October 29, 2012 at 7:27 pm

Yes, amen. Not a designer by trade, but all these principles were important to me when I redesigned my blog theme.

I think a lot of bloggers miss the concept of large type + space. I think they are afraid that people won’t scroll down. Far from it, make what is above the fold interesting enough and give them a cue that there is more to follow.

Reply

Craig McBreen October 30, 2012 at 2:16 am

Hi Susan,

Glad you liked this. I’m trying to write about the basics of design done right, and this often involves doing less.

I do love the term “above the fold” and think it does still apply on a web page. There are only so many pixels to work with and scanning studies do reveal that what is at the top of your page, particularly top-left is the most scanned. And having some separation or white space will make that above the fold treatment that much more effective.

Thanks for stopping in! :)

Reply

Andrew Stark October 29, 2012 at 9:20 pm

Hi Craig,

The main reason I chose thesis was that it allowed you to strip out everything and give you a blank page to start from. I advertise a lot of traffic exchanges and safelists, so I know that white space is important, my splash page has < 5 seconds to get my message across.

When picking colours google the term hex codes and you should find some good articles about what codes compliment each other so that you're not shouting and making a bad mistake such as yellow on black.

Andrew
Andrew Stark recently posted..Always Look On The Bright Side Of LifeMy Profile

Reply

Craig McBreen October 30, 2012 at 2:20 am

Hi Andrew,

I liked that about Thesis as well. And with CSS and hooks it’s not to hard to get up to speed and make some minor tweaks. Looks like you’ve taken care of business at your place.

That’s a great pointer on the hex codes! … Complementary colors are very important and some people create an instant color glass that makes my eyeballs sore ;)

Thanks for popping in and adding that!

Reply

Mary Stephenson October 29, 2012 at 10:18 pm

Hi Craig

I like color, but I understand what you mean. Some sites are so cluttered you don’t know where to look. I have tried to minimize stuff on my sites and remove the busy stuff.

When the writing is in so many different colors in a post I feel the same way as I do looking through clothes in a discount round rack…I want to scream and get an instant headache. Book stores do the same thing to me…I guess it has to do with so many colors in one spot, it confuses the mind.

I like uniformity, things within boxes, but spaces between text is much easier to read. I use Artisteer and love the options and designs to work with, but am totally frustrated with the comment spacing, it just doesn’t seem to stay as entered.

Great information.
Mary
Mary Stephenson recently posted..Imagine The OutcomeMy Profile

Reply

Craig McBreen October 30, 2012 at 2:27 am

Hi Mary,

Yes some are beyond cluttered and they are doing the owners no favors. Removing the busy stuff will help you and your readers. I try to cut as much as I can.

Ha ha, good analogy. Those discount racks are hard to look through, not to mention, they are usually the clothes no one wanted to begin with. But that is a good point for sure.

I like uniformity and creating a grid (or boxes) just with the use of white space. Things like hairline rules are sometimes necessary, but I like to keep all to a minimum.

Not familiar with Artisteer. Do you apply directly to WordPress or do you start with a Theme?

Thanks again for stopping in!

Reply

Mary Stephenson October 30, 2012 at 2:49 am

Hi Craig

Artisteer is a theme builder. You can build a whole design with so many colors, styles, about whatever your imagination can think of. Boxes, sidebars and can vary the size, actually the artist in me has a ton of fun with it. Then you FTP into Wordpress site. They have other places you can FTP it also. They provide you with headers, sheets, backgrounds and you can mix and match. All my sites have been built with it.
Mary
Mary Stephenson recently posted..Imagine The OutcomeMy Profile

Reply

Craig McBreen October 30, 2012 at 2:57 am

Hi Mary,

Very cool, just checked out their site!

Thanks for the details and have a great evening! :)

Reply

Mark October 29, 2012 at 11:40 pm

Hey Craig, after playing around for a few years on the social web, I’ve decided I’m going to build an online based business.

I’ve never built a list, landing pages, wrote calls to action, none of it. There’s been plenty of planted seeds so I have an idea of what to do, but putting into action and learning by doing is something completely different.

I’ve been tinkering with my two sites non-stop the past week and didn’t realize how poorly designed they were… at least for making money, LOL!

It’s completely different mindset when you look at your online assets to monetize.

Tons of work and tons to learn – it’s only been a week, so wish me luck.
Mark recently posted..Who Really Influences You?My Profile

Reply

Craig McBreen October 30, 2012 at 2:33 am

Hey Mark,

Well, I’ll have to keep tabs on you then ;)

Well, there’s certainly a wealth of information out there about all you want to do. And even with list-building, landing pages, etc. I think a “less is more” philosophy is the way to go.

I’ve noticed there’s been a lot of tinkering, so would love to hear your thoughts on what worked and what didn’t one day.

Agreed! I’ll be making a ton of changes over the next 3-6 months so maybe we can share notes. This is a continual learning process after all!

Reply

Sheila Bergquist October 30, 2012 at 9:15 am

I have started making sure I have more white space. However, I think TOO much is a little annoying, in the sense that reading a short paragraph flows better than jumping from one sentence to another. Wonder what everyone else thinks about this.
I agree totally with the sidebar and colors. I like clean simple websites.
Always enjoy your advice and learn a lot from it.
Sheila Bergquist recently posted..Stress Relief: Your Kitty Has the AnswerMy Profile

Reply

Craig McBreen October 30, 2012 at 11:58 pm

Hi Sheila,

Things can get too spartan, no doubt about it! Sometimes designers get a little carried away with small type and white space. And if you’re talking about line spacing, yes, if it’s too big it’s not good for readability.

Glad you enjoyed! Thanks for commenting.

Reply

Leave a Comment

CommentLuv badge

{ 4 trackbacks }

Previous post:

Next post: