White Space 101 for Developers
What is it, why should you care, and some tips to scale-up your game.
White Space. What is it?
In a website is the space left unused: margins around elements, spacing between lines of text or pictures, padding on buttons. Basically, everything that is not an element, is white space.
Why is important?
It helps to group elements, divide components and give hierarchy. It also helps people to read better the elements, and remember where things are and give some elegance to the site.
The better the white space is used the nicer and easier to read your site will look, and more users will stay around.
It sounds like designer stuff. Why should I care?
Well whenever you develop for humans, you’ll probably require a user interface. See white space as a tool to achieve your goal.
If well used, white space will simplify your life, improve usability and increase visits.
Bad used or not used at all will induce user error, visits will drop, and there will be more space to fill it with content, which means more programming.
When and how to use white space?
There are many ways to use white space. One way to use it is the amount of white space should be similar to the importance of the element.
What’s the main object you want to focus on? That should be surrounded with heavy white space. The more important the object the more white space is needed. The bigger the object you use, the more white space you should add.
Once your main item is defined and properly placed, add secondary elements… fewer white space for these elements and smaller in size… And so goes on.
Here are some tips:
- Use it to help you group content without the need of extra components
2. Empathize elements and focus user attention
3. Improve Readability
4. White space doesn’t have to be white
Got extra tips or questions? Follow Akurey stories!
