View profile

Designing nothing OR why White Space is important 🤍 | Grab a Coffee ☕️ #26

Grab a Coffee ☕️
Have you ever been to an art museum or gallery? Often the walls there are simply white. No fancy stuff, just a white wall and a single picture on it. 
All attention is drawn to this one image and nothing gets in the way. 
Our world is full of things that scream for our attention. That’s why this blank wall with the one image works so well. There is nothing there to distract us and that is the only reason why we concentrate fully on this particular object. 
But this concept works not only in an art gallery, but also digitally in UI design. But how exactly? 🤨
Here’s all you need to know about whitespace.

🔳 What is Whitespace?
To say it short: Whitespace is empty space in the layout.
But even if the space is empty, it is not without meaning. On the contrary, whitespace plays an extremely important role in the design of user interfaces.
Whitespace thus influences what users perceive as related, or as a group, in an interface and what they do not.
Benefits of Whitespace
Attention
Whitespace around a single element like a CTA makes it more eye-catching. It also helps to re-organize software interfaces and reduce visual overload for the users.
Relations & visual hierarchy
Whitespace does not just separate elements, it also can connect them.
A smaller size of whitespace connects heading and text while separating this text-block with the help of bigger whitespace from the next text-block.
Unique Characteristic
Next to optimization, whitespace can be art as well. Using lots of empty space makes it easier to set (creative) highlights.
How to use Whitespace in digital design?
Whitespace is not (necessarily) white
When you work with whitespace, it’s not about your design containing a lot of white. Rather, whitespace means that individual elements have plenty of room to “breathe”, are separated from each other and thus attract the necessary attention. 
Whether this is a colored button on a white background or a single headline on a background photo, as here for example at beanywhere.ch, does not matter.
Using lots of whitespace to get most attraction to the headline in the hero section.
Using lots of whitespace to get most attraction to the headline in the hero section.
Line height and text spacing
Text becomes more readable if you use whitespace correctly. In the image below, you can see that the line height on the left and the spacing between the two headings is far too small. The text is extremely difficult to read. 
Whereas on the right, the design looks very loose. It is clear from it that the individual text blocks do belong to a coherent text, but the line height is adjusted in such a way that you can easily decipher and read everything. 
Left: Line height & text spacing too small. Right: Adjusted line height for better readablility.
Left: Line height & text spacing too small. Right: Adjusted line height for better readablility.
Relationship in forms
When designing forms, whitespace is especially useful for clarifying which elements belong together and which do not. This applies, for example, to the spacing of labels and input fields.
Labels and input fields belong together whereas the space between input fields has to be bigger.
Labels and input fields belong together whereas the space between input fields has to be bigger.
If all elements in the form have the same spacing, you can’t tell which label belongs to which field. If, on the other hand, you move the label and the input field closer together and increase the spacing between the input fields, the difference is clearly visible and users can find their way around more easily.
⬜️ To make some space...
… I will make a hard cut here.
Thanks for reading so far and I hope you learned something new today.  Because that’s the goal I want to achieve: sharing with others to grow together 🚀 (and drinking good coffee). 
Would you like to get more confident in your design work? If you need a mentor, feel free to book some time with me HERE
Need more insights? Follow me on Twitter or Instagram and please share the Grab a Coffee ☕️ newsletter with your friends, colleagues and all other people who could be interested.
See you next week with new topics and an amazingly good cup of coffee. ☕️
Marina 👋
*****
How about converting your white walls at home into a private art gallery and adding some “white space”?
Buy fine art print Winter forest in gallery quality — beAnywhere
Did you enjoy this issue? Yes No
Marina
Marina @marina_kdot

Grab a coffee and read weekly news on UX and UI Design, breaking into tech and remote work.

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Created with Revue by Twitter.
Ch. de la Plâtrière 3 | 1981 Vex |Switzerland 🇨🇭