Negative space (white space) is an important element in making website layouts and logos although it is very tricky to combine white space in designing but once you are able to do it, it is not something to be overlooked or avoided. I usually call it white space, and to be honest many new designers usually make a mistake of creating chunky websites with too much information in it and without any spacing.
But believe me spacing does wonders, for even young designers – you can look professional quickly with minimal website..just put less content use white space and you’ll be more successful than others starting just out.
But note – great design takes all the space available into consideration, both used and unused elements.
Table of Contents:
- What is Negative Space?
- Negative Spaces Revealed! – Examples
- Negative Space in Web Designing
- Negative Space in images
- Considering Negative space in Making logos
- Negative Is Actually Positive!
- The Labyrinth Effect In Good Looking Designs
What is Negative Space?
White space are spaces without content although they are called white space, it doesn’t have to be white. It can be in any color, it just doesn’t have any content. This space is also a design factor although it is not easily recognizable, basically the use of white space is to add symmetry to your layout and make it look clean, natural for visitors.
Even if your website has great content but will have a poorly designed layout, it just won’t work – you will fail to create effective website, I think good layout design and native navigation through it is even more important than content!
Negative Spaces Revealed! – Examples
Here’s an example of an optical illusion that uses white space.
It’s a chalice but with the white space you see the faces of two people facing each other. This is how you spot negative space, with only 1 object but can be interpreted as two or more different things.
Negative Space in Web Designing
Designing a webpage layout includes objects, text and images in an attractive manner. This also includes negative space – the spacing of objects from one another.
You don’t make a webpage layout with images that overlaps with another image right? That is how negative space is used. It keeps the viewer’s eyes focused on the objects. Negative space should be used to balance or align objects in a design to make it more appealing to the viewers.
Filling your navigation with big fat buttons might be a good idea but just because there is a space that could be filled doesn’t mean you should place something in it. For navigation I would suggest just to use small icons with little but noticeable text just to make it sleek, simple..and don’t forget to use nice spacing.
Here are two images that I made to demonstrate how negative space can affect web page layouts. It’s a typical webpage template that has a navigation bar/buttons, logo, content area, and Latest News part. I simplified it to black and white so that we can easily spot negative space.
Let’s identify the parts:
- The upper left black box is where you put your page title or logo.
- The three boxes are your navigation buttons
- The rectangle on the left is where your main content are.
- The rectangle on the right is where your latest news are.
Here is a negative-spaced layout.
See the consistency of the spacing? You can see the objects neatly and can focus on them with ease. The spacing between the objects is consistent, producing a good design.
Now here is the not-so-negative-spaced design, although a bit exaggerated. The navigation boxes aren’t aligned on anything below, the part where you put your page title or logo is a little large and occupies the upper left of the page, the main content occupies the left to the center portion of the page and the latest news part might be distracting for the scrollbar.
This is just an example of how negative space can destroy a web layout. You can easily spot the inconsistencies in the spacing of objects, it might create distractions to viewers.
Negative Space in images.
Here are two images that I also made, one with much negative space and the other not so much.
You can focus on “the box” easily on this image because the object is not occupying the whole page.
You find it difficult to focus on “the box” since you can’t look at the square and the text at the same time because the object is too large and it occupies the page completely.
That is how negative space works, it should help viewers focus on the objects that they should see instead of making their eyes look all over the place. If that happens they might not see what they are looking for in the website making them close their browser tab or go to another website.
Considering Negative space in Making logos
Nothing can beat a logo with a clever mix of design and negative space, you include 2 or more objects in only 1 logo.
See the negative space between the E and x that looks like an arrow ?
Here are some logos that uses negative space effectively.
Two wine glass combined forms a shape of a house.
Image by EBrown
2. Wooden House
A tree with a negative space shaped like a chimney and a roof.
Image by iskender
An upside down tack and a triangular white space forming a letter A.
Image by Logomotive
Letter B with a white space in the middle that is cleverly shaped to look like a fish.
Image by Rokac
White space that is shaped like skyscrapers while the red color forms the shape of a bucket.
Image by HitByReindeer
The shape of Australia’s territory/map is formed inside the leg and the arched back.
Here shows the shape of pony and a cat in green portion, a dog and a bird formed by the white space.
Image by PixelJuice
Piano keys that forms the letters W and M.
Image by NEXQUNYX
9. Spartan Golf
An arc that looks like what’s on the top of a Spartan helmet and a golfer that forms a Spartan face.
Image by Lexlogo40513
Single opening quote and a single closing quote combined to form a face.
Image by tabithakristen
Negative Is Actually Positive!
Negative space can be really tricky to incorporate in designs and especially in logos but once you are able to pull it off it can really make your website easier to view or help you in advertising your product.
What’s your experience designing layouts using white space, some valuable tricks you learned you would like to share here? Open to discussion!
Now let’s take a look at labyrinth effect in good design and how to avoid bad design.
The Labyrinth Effect In Good Looking Designs
Great designers are always trying to push boundaries, creating and experimenting with new ideas, some of them resulting in revolutionary trendy design types that keep appearing in the constant shifting web design industry.
One thing I do every day is save 30 to 45 minutes to check my favourite design galleries. After a long time analyzing and creating designs, I came to the conclusion that when you push too hard trying to revolutionize your layout, you eventually forget about the end-user. But believe me…”that guy” must be your number one concern. If you’re going to invest your time building a completely innovative design, please do yourself a favour and do not forget about structure and usability.
Below I’ll give a list with tips and examples of pages which I consider suffering from the labyrinth effect… meaning all of them are greatly designed but usability was not considered as it should. The point of this article is to transmit the idea that design must be just part of the equation.
It’s tempting to think that a website with a cutting edge look will be enough to reign in the business and call the attention of users and possible clients, however, reality reveals itself to be far more complicated. You need to balance an attractive design with an easy-to-follow user experience.
Every designer should strive to create order and balance within a page which is achieved through a moderated use of the content’s weight. Colors, shape and size gives that weight to an element and when it’s not correctly measured and in a suitable position the web page will look messy and confusing to the end-user. It’s important to say that you can have the most efficient use of white-space and still make the user feel overwhelmed if you don’t prioritize balance and order.
When design is a sky-rocket but you don’t know where to look first, it’s a clear indicator that it suffers from a labyrinth of information that makes the user feel lost and overwhelmed, it suffers from what I call the labyrinth effect.
How to avoid
The labyrinth effect is directly related to balance, not only balance associated to each element’s position but also balance associated to quantity and repetition. Like I’ve said above, the overall weight must be correctly measured.
The one rule I consider to be important in order to avoid having an overwhelming design type is to always make use of wireframes. Wireframes are the representation of the website’s content and type of elements (not the design) which can provide you the possibility of testing the overall weight and balance of your page. Although very simple, I’ve gathered a few points that I consider to be of extreme importance.
It’s not really a surprise is it? As said above, white-space is not bullet proof, but it’s definitely a good start if you plan to have usability as the first concern. Space between elements isa step forward towards better readability, usage and aesthetics. Even if you have too much content, never forget to consider and test several spaces between the different elements in your page.
There are two important concepts in balance – symmetrical and asymmetrical balance. In symmetrical balance elements have equal weight which leads to the traditional design type, meaning that in asymmetrical balance elements have a different weight. The labyrinth effect tends to appear more often when using symmetrical balance, since elements have equal weight you won’t see a more prominent element to which you will look first.
With the above being said one thing that can clearly help avoid the labyrinth effect is to make good use of order while using symmetrical balance. Since the elements have equal weight, you need to build a hierarchy (most important elements starting from the top) while displaying a low number of elements.
The problem with asymmetrical balance happens when the heavier elements are used in the wrong places. Be sure to place the heavier elements where you would like the user to look first.
Although I’m not a big fan of using stock images with people in it, I feel obligated to admit that using that kind of imagery or photography is very efficient when you need to tell the user where to look. Using a person or an animal pointing to a spot on the page will somehow “force” the user to look at it.
There is one style type that will never be a victim in this matter. Minimalism as the word implies makes use of the simplest and fewest elements in order to achieve a greater effect. Less is more and in this case that is an absolute truth.
Minimalism is efficient because it only make use of the most important elements which in most cases represents what the visitor wants to know.