Effective Use of White Space In Web Design


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

sidigital_co
 
Website
 

2. Lars Tornoe

lars-tornoe
 
Website
 

3. Knock Knock Factory

knockknock-factory
 
Website
 

4. Builtbybuffalo

builtbybuffalo_com
 
Website
 

5. Inky

inky_com
 
Website
 

6. Amy Woodside

amywoodside_com
 
Website
 

7. Mixpanel

mixpanel
 
Website
 

8. Peachey Photography


 
Website
 

9. Kippt

kippt_com
 
Website
 

10. Urbotip

urbotip_com
 
Website
 

11. Andreaskleiberg

andreaskleiberg_no
 
Website
 

12. FoundryCollective

foundrycollective_com
 
Website
 

13. Tapmates

tapmates_com
 
Website
 

14. Snowbird

snowbird_com
 
Website
 

15. Shun Kaiusaltd

shun_kaiusaltd_com
 
Website
 

16. Thankful

thankful
 
Website
 

17. Oli Llisher

olil-llisher
 
Website
 

18. Shane Prendergast

shane-prendergast
 
Website
 

19. Studio Brun

studio-brun
 
Website
 

20. Jamiegregory

jamiegregory_co_uk
 
Website
 

21. Datavinci

datavinci_sk
 
Website
 




Get Our Feeds Delivered To Your Inbox

Like This Post

  1

Leave a Reply