Defining White Space
The main active element in any good web design is the effective incorporation of White Space; which is also referred to as “negative space”. White Space continually occurs within a design, beginning from the moment the user opens up a blank document – the design has begun with white-space.
Usability & Legibility
There are basically two varying types of white-space, one is the undefined white-space, which is what one is presented with when they open a new document; and, active white space, which occurs when an object is placed within an undefined white space. From a legibility level, whitespace also plays a pivotal factor within typography as well as usability and readability. When text ends up being cramped with minimal line height / spacing, it tends to become very difficult to read. Therefore, by adding more white-space between lines of text, content becomes easier to scan and absorbed by the user/reader.
Using An Adequate Amount Of White Space
There are several elements which define great web design, however- one of the most overlooked elements within this is effective whitespace. Most web designers tend to utilise a sufficient amount of whitespace within their design, however not every design possesses enough. This is mainly due to the fact that novice designers or their clients tend to perceive white space as being empty space and therefore a waste of valuable screen space. On the contrary however, whitespace happens to be one of the most valuable and effective parts of good web design.
White space does not imply that it has to be white- because it can be any color a design is comprised of, whether it is black, brown or white. It was given the name of “white space” during the advent days of graphic design where most printing was done on white paper. Therefore, the term White Space denotes the empty space between and around the elements of a design or page layout. It is up to the designer who must make it an important element of their overall design, strictly because if “white space” is not incorporated properly it will be misconstrued as being nothing more than wasted space.
White Space & Web Design
When it comes to white space withIn print design, paper has always been considered a valuable resource and clients usually require a designer to make use out of every square inch of it- since paper costs money and the client demands to get what they pay for. The very same value is demanded when it comes to screen real estate in web design. Both have an equal set of dimensions and both require a limited amount of space in which a message or content can be presented by displaying text and graphics. Thus, being generous with your white-space can speak volumes about your brand. Through using generous amounts of white-space within web design, you are telling the end user that your content is far more important than the screen real estate that it rests upon, and that you can afford to sacrifice that space in order to better present your message to the masses.
There are basically no set guidelines or rules by which to calculate the proper amount of whitespace within web design, since every design is different and varies, therefore- the amount one decides to incorporate will vary for each design project. The only way to discover what will work best is through experimentation and to study the work of other designs which have managed to utilise it effectively. Eventually through practice perfection will be achieved and you will develop a keen eye and feel for what the right amount of white-space is. For this article, we are showcasing web sites which have made good use of white space within their designs. Enjoy !
1. Sidigital.co
[zilla_button url=”http://sidigital.co/” style=”red” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
2. Lars Tornoe
[zilla_button url=”http://larstornoe.com/” style=”red” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
3. Knock Knock Factory
[zilla_button url=”http://www.knockknockfactory.com/” style=”red” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
4. Builtbybuffalo
[zilla_button url=”http://builtbybuffalo.com/” style=”red” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
5. Inky
[zilla_button url=”http://inky.com/” style=”red” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
6. Amy Woodside
[zilla_button url=”http://amywoodside.com/” style=”red” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
7. Mixpanel
[zilla_button url=”https://mixpanel.com/” style=”red” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
8. Peachey Photography
[zilla_button url=”http://peacheyphotography.co.uk/” style=”red” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
9. Kippt
[zilla_button url=”https://kippt.com/” style=”red” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
10. Urbotip
[zilla_button url=”http://www.urbotip.com/” style=”red” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
11. Andreaskleiberg
[zilla_button url=”http://www.andreaskleiberg.no/” style=”red” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
12. FoundryCollective
[zilla_button url=”http://www.foundrycollective.com/” style=”red” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
13. Tapmates
[zilla_button url=”http://tapmates.com/” style=”red” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
14. Snowbird
[zilla_button url=”http://www.snowbird.com/” style=”red” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
15. Shun Kaiusaltd
[zilla_button url=”http://shun.kaiusaltd.com/” style=”red” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
16. Thankful
[zilla_button url=”https://thankfulregistry.com/” style=”red” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
17. Oli Llisher
[zilla_button url=”http://lisher.net/” style=”red” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
18. Shane Prendergast
[zilla_button url=”http://www.shaneprendergast.co.uk/” style=”red” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
19. Studio Brun
[zilla_button url=”http://www.studiobrun.nl/” style=”red” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
20. Jamiegregory
[zilla_button url=”http://www.jamiegregory.co.uk/” style=”red” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
21. Datavinci
[zilla_button url=”http://www.datavinci.sk/” style=”red” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
