20 Examples of White Space Properly Used in Web Design | Ozone Eleven

20 Examples of White Space Properly Used in Web Design

By

September 24, 2010ShowCases9 Comments

When it comes to web design, think of white space as one of the most powerful tools you have in your design arsenal. It’s the key to creating a professional, slick, stylish site that’s a hit with visitors. If your site’s spacious, visitors can navigate around more easily and scan pages more quickly, boosting your conversion rates, keeping everyone happy.

You need to make sure that text on your site is properly spaced, margins have sufficient room and that there’s plenty of separation between images, text and other page elements. Having lots of white space on your site sends a clear message to customers and competitors that your goods/services speak for themselves and a hard sell is not necessary.

There are no strict rules when it comes to how much white space to leave on your site, or where to leave it. You need to play around with different designs, check out how other companies are using white space to their advantage, and see what looks best. Below, we explore 20 sites that are using white space properly. Hopefully they’ll provide a source of inspiration for you.

1. Google.com

Google’s homepage is a wonder of modern web design and the best example of how to employ white space to create a clean, clear and clinical layout which exudes confidence. You’d expect nothing less from a search engine with a market share of over 70% in the USA.

2. Toy

White space (also called “negative space”) doesn’t have to be white; it can be any color of the rainbow. Toy incorporates bright-orange white space into its website for a daring, minimalist effect.

3. Ultra16

Ultra16 uses white space on its homepage to add definition to large images. Straightforward and plain, yet really stylish, it’s easy for visitors to get a handle on the design work this company performs.

4. Silverback

Silverback is a fantastic usability testing app that’s extremely high-tech, but really easy for anyone to use. By using lots of white space, Silverback manages to make its website as approachable as the app itself.

5. Pottery Barn

It’s often the case that high-end brands use more white space in their web designs than companies selling inferior products. Pottery Barn lets its products speak for themselves with a roomy design and well spaced navigation bar.

6. Apple

Think white and you instantly think Apple. Its electrical goods are every bit as functional and well designed as its mighty-white website. Apple lets its products do the talking with large images and very little accompanying text.

7. Surfstation

Surfstation, an online magazine for the art and design community, uses white space for a cool, slick-looking website. Images stand out really well against the uncluttered, monotone background.

8. Fat-Man Collective

Barcelona- and London-based web development and design agency, Fat Man Collective, is renowned the world over for its creativity. Its unsurprising, therefore, that its website utilizes white space in a highly imaginative way, making you explore to find out more about the company.

9. Anthropologie

Like other companies in this list, Anthroplogie uses white space to add definition to a main, central image/slideshow. Its navigation bar, spacious and inviting, is backed with paper textures for extra clarity.

10. Dropbox

Dropbox is one of the most simple, but effective apps available to download right now. Its website is just as straightforward and functional. There’s an introductory video and a Download button, but almost everything else is white space. When a design’s this uncomplicated, it’s easy to get visitors to do what you want them to.

11. StudioWEBER

Romanian design agency, StudioWEBER, lists screenshots from its previous projects on its homepage. With so much information, this page could easily appear cluttered, but solid bands of white space make it approachable and attractive.

12. APC

French clothing label APC is the epitome of modern design. Plain and uncluttered, APC’s website shares the same design aesthetic as its clothing. If APC thinks that white space looks cool- you can be pretty sure that it does!

13. Remember the Milk

Remember the Milk is yet another wonderful app that’s incredibly easy to download and use. Like Mailchimp and Dropbox, Remember the Milk uses plenty of white space to reflect the simplicity of its app and help visitors navigate their way around its site with a minimum of confusion.

14. Karl Lagerfeld

No man on Earth is more “high fashion” than Karl Lagerfeld. Everything he touches screams style and sophistication. Just as you’ll never see him walking down the street in sweatpants, you’ll never see a cluttered design on his website. Spacious and sleek, his site is a pleasure to explore.

15. Vera Wang

Like her wedding gowns, Vera Wang’s website is beautifully crafted. Understated, yet bold, each element of its design sits in its own panel, surrounded by brilliant white.

16. 280 Slides

280 Slides is a browser-based app designed to help professionals work together on presentations. Its homepage makes the app appear so easy to use. There’s lots of information on the, with each of the apps features explored in detail, but the spacious layout makes it easy to scan.

17. The White Company

With a name like The White Company, it comes as no surprise that this UK-based clothing and accessories supplier has a minimal, monotone website. Its black-and-white color scheme is fresh and elegant.

18. Nintendo

Perhaps influenced by Apple, computer games giant, Nintendo, has adopted a white color scheme since the arrival of its Wii in 2006. The machine and has done wonders for the brand, placing it above rivals PlayStation and Xbox when it comes to seventh generation consoles. There’s a lot going on over at Nintendo.com, but plenty of white space in the layout lets this site breathe.

19. Urban Outfitters

Urban Outfitters combines classic fonts with cutting edge web design on its homepage. Each page contains plenty of information, but it’s broken up with white space to maintain a fashionable, legible look.

20. British Airways

British Airways is quite unlike the other companies in this list. It’s a huge multinational with revenues in excess of £8.9 billion. Its website offers everything from flights to hotels, car hire, insurance and credit cards. With so much going on, it could easily be overwhelming. However, everything is held in a distinct area surrounded by white space, making it far less confusing.

About the Author

James Adams writes about productivity for an online specialist in office supplies and office furniture from the UK.

9 Responses to “20 Examples of White Space Properly Used in Web Design”
  1. pausleal

    What a great resource!

  2. ICYGEN

    Nice Post, I would like to exchange links with your site.Is this possible?

  3. admin

    please let me know your blog to exchange links

  4. Paul

    nice post

  5. Lyle

    Great writing! Maybe you could do a follow up to this topic!

    -Warm regards,
    Lyle

  6. zerodtkjoe

    Thanks for the info

  7. roclafamilia

    Helpful blog, bookmarked the website with hopes to read more!

  8. branchenverzeichnis online

    There is obviously a lot to know about this. I think you made some good points in Features also.
    Keep working ,great job!

  9. Danyel Scheidegger

    Hey , i would like to say thank you about this awesome article, very useful to me, Thank You.

Leave a Reply

You must be logged in to post a comment.