UI and UX
Monday, February 17, 2020
“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.
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).
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.
The Adventures of Button Placement and the Prisoner White Space
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.
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!
Pretty simple right? We kept this one short and sweet, just like you 😘
Keep your design simple too while you’re at it.
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? Unlike anyone else in our industry, we can turn it around in less than 10 days, no matter the size of the project, and still cost 70% less than the national average creative agency price. Oh and all of our prices are up front, final, and transparent. So there’s no random agency fees that we can sneakily add on overnight unfortunately. Let’s not forget the 100% refund guarantee policy if you’re unhappy with the work. Strictly located in the USA. Beat that and we’ll get on the next shuttle SpaceX off of this planet.