Does Your Layout Make Great Use of White Space?

White space, negative space, l’espace blanc, call it what you want — we’re talking about it this week in the most savagely fun and purely informational, yet comical, satirical, and eloquently lyrical way possible. All of which is probably completely off, or — completely a home run.

Breathing with White Space

Nice deep breath in. And out. And in. And o- you get the point. Believe it or not, your users are “visually” breathing when they look at your interface. And sometimes they simply can’t. Why? Because of white space — it’s missing! One very quick scenario that we see all the time is in the paragraph text.

‍Since body text usually should be a minimum of 16px, make sure the spacing between lines is 23px. Difficult to remember? No problem, just take the font size and multiply it by 1.5. Yes, 16 multiplied by 1.5 is 24. But 23 looks better. Let’s not make a scene here. And besides its Apple approved when it comes to accessibility.

So what ever the value is after multiplying, round it, and that is what should be line spacing. Keep in mind, this is only for body text. Not for title line spacing. This has shown to display the cleanest, legible, and breathable, formatting for body text.

The spacing between your title and body? Fibonacc-ify it. Choose numbers like 15px, 25px, or even 40px. Rarely have we come across situations that used more than 40px for between a Heading and it’s next line of text (subheading or body copy).

Attention!

You can also use white space to help your users focus their attention on specific things that are on the screen.

So where do you, or rather, where should you, have white space in your designs? Plan it accordingly, don’t be wasteful with it. Yeah, sure Google’s homepage is practically white space with a less than 40% space in the center that lets you search — but thats the beauty of white space. It draws users to that center area and helps guide their eyes to focus on a specific part of the screen.

Is there a wrong way to use white space to grab attention? Of course, as no one once said: “where there can be a right, there can be a wrong.” Let’s talk about it.‍

White Space When It Comes to Buttons

Let’s take a look at an example where white space can be harmful. Is there an add to cart button on your screen? It’s probably the most important button on your screen too if so. Does it make sense to have other clickable links that are visually prominent at the same time that the “Add to Cart” button is present on the screen? Of course not. How does white space play a part in this? Well, the situation we come across is that the “Add to Cart” button will be nicely spaced apart from the secondary visually compelling button. Or, dramatically spaced apart. In both of these cases, note how you are still drawing attention to that second button. Don’t do it.

Don’t be that guy. Or actually, don’t create that guy.

With great UI, comes great responsibilities.

‍By placing two visually compelling buttons, you are creating this user. Spiderman’s quote was inspired by ours. Just saying.

Bottom line — by having competing interaction elements at the same time on a screen with the presence of breathable white space, you are not allowing the primary closing button to do its job properly.

There’s an Ap- Solution for That.

Remember the iPod Touch? Ah good times. There was always an app for something.

And luckily for you — there’s a solution for conflicting white space and button placements. Keep the white space. It looks good. Feels good. Change the buttons. Lessen the competing visual treatment for the secondary actions.

‍Let’s talk button design too just a little bit while we’re at it. Yes, you can even use white space to create gorgeous buttons. Have a look below. In these examples, the spacing between the button label or text “Le Button” is horizontally equidistant and vertically equidistant. Clockwise from the left side of the button label in this example, is as follows: 100px, 50px, 100px, 50px. A great rule of thumb that proves to be useful is, once again from the left side of the button label: 2x, x, 2x, x. Whatever you make X, double it for the horizontal distance.

‍Grouping

Another quick n’ easy way to add white space is to use it to differentiate between components on a screen. For example, if you want to create a section on your screen that is just for “Featured Podcasts” and one that is for “Top Songs”, create the component and plan the information architecture accordingly with the presence of some space between it. Users should be able to easily distinguish sections immediately when looking on a screen.

‍Step One: D-Day

We’re not talking World War II. We’re talking “Declutter Day”. What is it? So you have a website, or app, or platform, that you’ve built out or designed. Great. You stare at your masterpiece and admit it, the spacing for some items are kind of off. You let out a sigh. Well, not all hope is lost just yet for your cause.

Spend a day or a handful of hours on running through the information architecture of your platform. Flip a switch ( metaphorically of course) and make some decisions or notes on whether certain items are repetitive or can be consolidated. There’s a really good chance that if you think your interface is too busy or cluttered, it’s because the layout contains things that can be hidden away elsewhere or removed.

The result of D-Day leads to the liberation of unnecessary elements that did not need to belong on your interface. White space will appear on it’s own while you do this. And finally, the best part, your interface will finally get to breathe.‍

You Are Where You Work

Take another look at your application or website. Still seem a bit cluttered? Now go sit on the chair at the exact same location where you spent most of your time designing the platform. Is it noisy around you? Look at what is around your laptop or computer. Is it kind of messy? Are there a row of pencils lined up but one pencil is out of place? Believe it or not, these all can be factors that influence your design choices when you made them. A cluttered space leads to a cluttered mind which can lead to creating a cluttered design. So yes, in a world thats gone digital, things still apply in the physical world!

‍The Takeaway

Pretty simple right? God is in the details. And so is spacing. So use white space wisely and improve the user experience for your platform significantly! And thats all there’s to it. Enjoy the improvement of conversions and engagements with your new space!

And remember, at the end of the day, bad design will always cost more than good design! 😉

Ready to create something awesome or transform your platform? Check out the link in my bio to learn more! If you’re interested — let’s talk!