In the category of ‘incredibly important things I learned this year’ comes the concept that this post is based on. Now, people seem to fall into one of two camps: those who have a grasp of this idea, and those who don’t. Until early on this year, I was among the latter of these, and today I would like to share what this concept means to me.
Real quick, I want to define what ‘whitespace’ is. First, it doesn’t have to be ‘white’; it’s not a color thing. This is the space on a given web page or website that has no content. It’s empty and seemingly does nothing. However, it does do something: it helps your content stand out. It does this by giving it room and eliminating competition for the user’s attention.
I’ll give you an example of a page the uses white space poorly, and one that makes good use of it:
Take a look at that thing; no free space whatsoever! What should you look at? Can you even focus on something in there? It’s crazy; the eye gets overwhelmed.
Now, let’s take a look at a site that effectively uses white space:
Yup! it’s a shameless plug, I know. However, the point stands: you see the logo, the menu, some content and a footer, but that’s it! The eye doesn’t get overwhelmed, and only needs a few seconds to kind of identify the page’s parts.
“…The eye doesn’t get overwhelmed, and only needs a few seconds to kind of identify the page’s parts.”
Now, as web developers and designers, we want to utilize the real estate a given view port provides us; it’s almost instinctive. If I have 1920 x 1080 pixels, I will have a natural want to put 1920 x 1080 pixels worth of content on that screen. Hell, even when we design for mobile, our default width for a given element is 100%. This makes for easier scrolling, cleaner layouts on small screens, and it uses everything.
Doing this on mobile is one thing, since it’s keeps the layout clean and easy to read on small media, but on larger screens, we shouldn’t be jamming the whole thing full just for the sake of it.
“As web developers and designers, we want to utilize the real estate a given view port provides us…”
When someone first relayed the concept of ‘using white space’ to me (I think it was roughly 6 or so months ago?) I didn’t get it straight away. My thought was ‘Yeah, of course,’ and I didn’t think much else of it. Later that week, I was putting together one of the pages for this website (I think it was the Process Page), and I didn’t force enough spec between the rows. I took a look at that page, thought to myself that it looked too cramped, and needed to be spaced more. After I did that and took another look at the page, those words kind of slapped me in the back of the head. If you watch NCIS, you probably just pictured Gibbs smacking Tony.
“…After I [added space between rows] and took another look at the page, those words kind of slapped me in the back of the head.”
Okay; story time over. The crux of what I’m trying to say here is this: use that white space, give your content some breathing room. Remember, you want people to feel invited and comfortable. Keep that page simple. Until next time!