23 Examples Of Active Space In Web Design and Logos

About a month ago I posted how to activate space in a design. The post explained the difference between passive and active space and offered reasons why active space was important as well as how to create more active space in your designs. What that post lacked was real world examples using active space. This post aims to correct that failing.

As Peter commented on that earlier post and said

I understand and love the concept but only on a more abstract level. Could you add some real-web examples.

I agreed some examples would be helpful and thus this post. Hopefully you’ll find these examples along with my thoughts on why I think the space has been activated helpful in understanding the topic.

You can click most of the example images below and be taken to the site or logo shown.

Web Design with Active Space

There are a few consistencies when talking about active space. Though I won’t specifically mention these about every design below, they all activate space by planning the space. The space didn’t just happen in any of the designs below. The designers consciously considered the space as much as they considered the positive forms.

In so doing the designs create unequal and uneven space which helps to make them both interesting and active. Space like form is seen as a shape to be molded. The space as much as the forms is integral to the designs and the space influences our perception of the positive elements.

You’ll also notice that the designs feature asymmetry more than symmetry, which is where we’ll start.

Active Space Through Asymmetry

The image above is from an article about using whitespace at A List Apart. The site uses asymmetrical balance in its design to create some interesting shapes. Notice the graphic to the right of the article. It’s lack of border and uneven shape generates an equally interesting shape to the space around it.

Above is (or was) the home page of Cameron Moll’s site. Again note the asymmetrical design. Ample space exists to move in and about each of the positive elements. A texture has been placed in the upper left further activating the space in that area of the design.

One small detail I particularly like is the space around the links at the top of the sidebar. Note the curved shape. The links could have been listed in any order, but clearly their shape and the space around them make was a consideration in how the links were ordered.

The above is a recent post from Elliot Jay Stocks. Once again we have an asymmetrical design with ample space to allow your eye to flow through that space and in and around the elements on the page. Again we have a subdued texture helping make the space more interesting. Notice how the image at the top of the article breaks out of the content area and into the space to the left, which leads us to the next section of designs.

Carving Space To Activate It

Andy Rutledge often activates space in articles with a simple pull quote. The quote encroaches on the space and carves into it, thus activating it. Notice how much more interesting this is than were the entire article left with a hard edge.

Similar is the article above from Jason Santa Maria. The heading and content below carves into the space on the left usually left empty. While not shown in the image, the comments below the post also carve into this space placing the usual biographical information about the commenter there.

The screenshot above is from another article on using whitespace, this time by Mark Boulton for the Think Vitamin site. As with the other designs in this section notice how the images within the article carve into the space to the left as does the horizontal black line at the top of the article.

Throughout this design both the positive elements and the space around them is non-uniform which creates many interesting shapes within the design.

This article from Trent Walton’s site continue our exploration of letting positive elements carve into the surrounding space. The page heading also forms an interesting shape on it’s own creating interesting space around it. Note here that meta information about the post moves even further into the space carved into by both page heading and logo.

Not only does the orange bar reach into the surrounding space, but by leading off the page it pulls the space we don’t see into the design. It also divides the space on the left in half forcing your eye to move through the space around the center of the page. The space around the design is now an active channel through which your eye moves.

Activating Space From Outside the Design

On Veerle Pieters’ home page she uses an illustration of herself in the upper right. The illustration carves into the space below, but it also reaches into the space outside the design activating both. Resting her arms on the main content area gives it a very solid feeling.

This article from Jason Santa Maria also uses an illustration to carve into space. The illustration reaches outside the design on the left and into the comments section below, connecting both to the article above. The illustration also leads to interesting shapes around the article itself.

Space Forcing Form to the Edge

Space has a great influence over the positive elements in the design for the Pocket Hercules home page. Space appears to be actively forcing the positive forms to the edges, so much so that the company logo sits partly off the page. Most of the design is empty space, which gets filled little by little as you click the links in the menu.

Similar is the design of Jacey Braband’s home page. Again space is influencing the elements forcing them to the edge. If you click through to the site and click on some of the links you’ll see that the space to the right of the navigation is used a little differently on each page. Many create interesting space shapes within the area.

Once again the logo and menu have been forced to the edge here in Julie Roche’s home page design. The banner to the right is hanging in space, which implies the forces of space at play here. As with Jacey Braband’s site if you click through and click on the links you’ll discover the space holding up the banner is used differently on different pages, each with its own way of shaping and activating space.

Active Space Through Scale

The overall layout of Taylor Carrigan’s home page is symmetrical. We could easily draw a box around the centered layout. However space is activated in a wonderful way through the scale of the graphics below the navigation. The scale creates a depth to the space and implies motion toward and away from the viewer’s eye. You can’t look at this design without feeling this depth of space.

Actively Enclosing Space

The designs above and below from Jason Santa Maria’s site use positive shapes to enclose space. Above the cable graphics create interest shapes by enclosing the space within. Notice how both also carve into the space from off the page and generate a flow through the design.

Parenthesis are generally used to enclose something. Here they enclose space forcing you to look at that space and consider why that space is so important. If you read the post (it’s not very long and a good read) you’ll see the connection, as the post is about eras in time that enclose something that may one day disappear.

Active Space Through Closure

Above is the single page from heresyslair.net. It’s simply a string of text with some letters missing and the words pushed together. The missing letters make use of closure. We as readers need to actively think about what’s missing in the space in order to read the sentence. We also need to add back some space in order to see the separate words.

Without this use of space we’d be reading an ordinary sentences. Ho hum, yawn. We do that all the time. Here though space makes us an active part of the design. The large amount of empty space outside the simple statement lends importance to it.

Again the most important part in activating space in each of the designs above is that the space was planned and considered. The space didn’t just happen as a result of positive elements being placed on the page.

In every case the designer shaped the space as much as shaped the positive forms on the page. Similar and different techniques are used across designs, but ultimately each designer is designing the space as much as the form.

Active Space in Logos

Let’s now look at a few logos that activate space by incorporating that space directly into the logo. In each the negative space helps communicate the brand. I’m sure you’ve seen the first two logos before. The other four have made their way onto lists of logos using negative space.

The FedEx logo activates the space between the “E” and the “x” by shaping it to be an arrow. The space is clearly planned and integral to the logo. It implies a directional motion much like packages being shipped from one location to another.

The BigTen logo creates the number 11 in space to show the conference currently has 11 members. Again the space is integral to the logo and communicates the extra member (I believe Penn State) that the conference added. I also assume this logo will need to change as Nebraska is joining the conference as its 12th member later this year.

I really like the logo above from Jacob Cass. Again the space is integral to our understanding of the design. The space carved out between prongs in the fork (food) are the shape of bottles (wine). Even without the text it’s easy to see what this logo represents. Note too the asymmetry making the surrounding space more interesting.

The logo for 8 Fish (a sushi restaurant I believe) definitely borrows from M.C. Escher, with half the fish being seen as positive space and the other half seen as negative space. As with the logos above the space is planned, integral to the design, and activated as a result.

In the logo for yoga australia above, Roy Smith, uses the space enclosed by the woman in the yoga pose to form the shape of Australia. Again planned and as a result active. The woman is also asymmetrically balanced further activating the space around her.

The above logo is for Matin Newcombe’s property maintenance company. Not only is the space inside the wrench the shape of a simple house, but the positive form (the wrench) acts on the negative space (the house) much the same way this company would provide it’s service to work on your home.

In each of the above the key to activating the space is how it was used in a way that’s integral to the logo. None of the logos would communicate what they do without purposely shaping the space.

Summary

White space is to be regarded as an active element, not a passive background.
—Jan Tschichold

I included the quote above in my previous post on activating space. I include it again here, because it’s the most important aspect in regards to making space active. The first step to creating active space is to actively think about space. See it as another design element at your disposal.

I hope the concrete examples above help make the abstract concepts in my previous post more understandable. There are many, many more examples of active and passive space in design both in print and online. As an exercise when you come across a design you like and even one you don’t, think about the space and decide why you think that space active or not.

I’ll leave you with a few more articles that talk about space in design.

• Negative Space (PDF) – Article by Jacob Cass for Layers Magazine
• Design Rules – Notes and images from a course on layout and design from New York University
• Spatial Relationships – Chapter from Mark Boulton’s book Designing for the Web
• Gestalt Principles of Perception: Figure Ground Relationships – Article from Andy Rutledge

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.