Académique Documents
Professionnel Documents
Culture Documents
It’s hard to beat a clever use of negative space in logo design. Here are 35 or so logos I enjoy that
use white space well, along with the designers/agencies responsible.
WWF
By Sir Peter Scott, modified by Landor
FreemanWhite logo
By Malcolm Grear Designers
Human logo
By Social UK
Dolphin House logo
By Ico Design
Eaton logo
By Lippincott (thanks, Brendan)
Elefont logo
By Logo Motive Designs
Carrefour logo
Original design examined by Miles Newlyn (thanks Rianna)
Henri Ehrhart monogram (shameless, aren’t I?)
View the design process on David Airey dot com
Sinkit logo
By smashLAB
Guild of Food Writers logo
By 300million
ED logo
By Gianni Bortolotti
Blade logo
By Subversive Design
FedEx logo
By Lindon Leader while at Landor
Knoll logo
By NB: Studio
Via Logolog
Conception logo
By The Chase
Yoga Australia logo
By Roy Smith Design
NBC logo
By Steff Geissbuhler while at Chermayeff & Geismar
New Bedford Whaling Museum logo
By Malcolm Grear Designers
Mouse logo
By Johnson Banks
•
•
•
•
• 10
Negative space is an important element in making website layouts and logos although it is very
tricky to combine negative 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 negative 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.
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!
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.
See the negative space between the E and x that looks like an arrow ?
Here are some logos that uses negative space effectively.
1. Martini House
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
3. ATACK
An upside down tack and a triangular white space forming a letter A.
Image by Logomotive
4. Babelfish
Letter B with a white space in the middle that is cleverly shaped to look like a fish.
Image by Rokac
Image by HitByReindeer
6. Yoga Australia
The shape of Australia’s territory/map is formed inside the leg and the arched back.
Image by RoySmith
Image by PixelJuice
8. Wiesinger Music
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
10. Quotekid
Single opening quote and a single closing quote combined to form a face.
Image by tabithakristen
What’s your experience designing layouts using white space, some valuable tricks you learned you
would like to share here? Open to discussion!