From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
A few years ago my family went on a little trip down to southern California to hit all the theme parks and the beach. We spent a day at the Wild Animal Park, a day at Legoland, three days at the mighty Disneyland and a day at Universal Studios California. All the park were great, except Universal Studios. Maybe it was because we were tired of walking around but Universal Studios was awful. We got there early, parked and migrated with a couple dozen other people through the narrow hallway of the outdoor mall that leads to the entrance of the park.
Once we finally got there, we were kindly greeted by a gang of employees trying to sell us bags or something. After ignoring them like you would ignore a solicitor on your doorstep, we managed to make it down to a couple of the ride entrances. A couple hours later, after standing in narrow waiting areas, being squooshed into small ride cars and constantly bumping into other tourists we decided to leave – total time spent at Universal Studios: three hours.
The real kicker for us to leave the park was not the constant solicitation by the employees or the fact that they make you walk through a mall to get there, it was more the feeling of being trapped that bothered us. That was my first glimpse into what hell is probably like. In contrast, the three days spent in Disneyland were great. They have all the same types of cheesy rides, long lines, employee solicitations and a mall (downtown) to walk through but the one thing Disneyland did have was space – no not Tomorrow Land, actual physical space. Space between buildings, space between restaurant tables, space between bathroom stalls, space between ride lines, space to park your butt when your legs got tired – space.
Disneyland has negative space built into their park where you could step out of the traffic for a second and breath if you needed to. Web design should be no different. The user needs a little bit of room to breathe, your design needs a little bit of room to breathe and we all know the importance of negative space in design – you don’t want your site to feel cluttered, cramped and disorganized (like Universal Studios). But with increasing display constraints and the amount of content most sites and apps have, is there any room for negative space in web design anymore? The answer is yes, but it’s time we get a little more creative in today’s small mobile display age.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
Frame Your Subjects
Every piece of content on your page is important right? So you want to frame it like you would a beautiful art piece hanging on your wall in your living room. But framing your subjects doesn’t mean adding a border around every box of content, instead use some empty space to frame your subjects.
If you have been to modern art museum you’ll notice that most of the art pieces do not have frames around them like the art that hangs on the wall in Grandparents’ hallways. This is because the empty space around the piece of art will focus your eyes on the piece and not the distracting frame. However, in web design we don’t have the option of a forty foot wall to hang our content on, but even a few extra pixels of padding can make a huge difference, screens are smaller, so even a small amount of empty space around your subject can frame it quite nicely.
ThemeForest.net is a really great example of framing your content areas
Use the Empty
Just because there are some empty spaces in your design doesn’t mean that you should fill them up with something. Leave the space empty. The point of negative space is to allow the filled content areas to naturally flow in the entire design area – your display. Pour yourself a bowl of cornflakes cereal and eat a few until you see the milk start to show through, then just watch how the cornflakes naturally rest on top of the milk. So cornflakes will naturally stick together while others will pull apart, but notice the shapes between the cornflakes and notice how it’s almost hard to focus on the space.
This is because this space between cornflakes forces your eyes to focus on the cornflakes, not the space. When laying out your content areas, let them flow naturally and when empty spaces occur, use them by not filling them up. Stand back and let your eyes float your elements to their natural positions.
A great example of using negative space to let a web layout flow naturally is AIGA.org
Allow Your Words to Breathe
Text areas are the most neglected content areas on the web. Most designers and developers completely overlook body copy but these areas consume a huge portion of physical space on the web and most web users spend most of their time online reading. Adding more empty space around lines of text, paragraphs and even characters will go along way to making your text more readable. Add a bit more line-height to your paragraph tags, indent your paragraphs so that you can separate them from other content areas and leave plenty of space on top and bottom of each paragraph.
TechCrunch.com is a great example of a heavy content site that has added plenty of spacing in and around paragraphs to allow the words to breathe.
Also, allow the text on your buttons to breathe a little bit as well. I see too many buttons out there where the text is being scrunched and trapped inside the buttons. If you don’t want to make the buttons larger to create more room for the text just make your text smaller. You want people to read what’s on the button so they know what to do and making the text smaller will allow you text to stand out more than if its crammed inside the confines of the button.
Negative Space is Not Just for Tricky Logos
Negative space is most commonly associated with logos or compositions where the empty space creates a unique shape or represents something – like the arrow in the FedEx logo. But negative space in web design may not be that cool or sexy, but its still very important to the overall design. Just remember that you don’t want your design to feel cramped or cluttered, you want your users to enjoy the experience. If anything, just add a little bit more padding.
Patrick thanks for the solid advice. I agree line height on body copy should always be enlarged from the standard.
Totally agree, lets all make more room for white space !!
Thank you Patrick for that good reminder about the power of space. It’s a principle I was already familiar with but don’t practice enough.
I guess in order to have space when you have lots of content, the content flows longer vertically with the space going horizontally?
Negative space is absolutely important when designing a website! Try to keep it simple, get rid of anything that isn’t absolutely necessary and learn to embrace the white space.
web designer: “We need some white space around that element.”
client: “Can’t you just give it a color, i’m not so fond of white.”
web designer: “No, with white space, I mean negative space.”
client: “Oh… okay, but our company is always positive towards our customers. so we certainly don’t want to be negative on our website?”
web designer: “No no… negative space is positive”
client: ???
Ralph… very good comment! And yes, thanks for another article!
Great article, Patrick; I particularly loved the emphasis on utilizing negative space beyond logo design.
[thanks corrected]
I was told by a great artist that “all art needs a place within it for the eyes to rest”
The problem is that not everybody thinks the way a webdesigner does. For some people it doesn’t matter if there’s space for an image to breathe and look good, and that’s the problem. But I generally tend to have rather more padding and margin than less. 😉
Thanks for all the great compliments and I’m glad you all liked the article.
MMOVZ – I am currently working on a project that contains a lot of content and the PM really just wants everything crammed in to the “fold”. But as a designer its takes everything I have to bite my tongue and fight the urge to yell out the importance of negative space… but I’ve learned that even in that situation, there is still little things you can do to add some breathing room.
Kevin L – Its true, the only time you ever see someone talking about negative space is when it pertains to logo design. I felt like it needed its due in web design.