Newsletter

Subscribe to our mailing list

February 21, 2017
Designing an Elegant Website using Whitespace

Designing an Elegant Website using Whitespace


Written By Jessie Martin of 10 Pound Gorilla

As website viewers, we typically don’t read content, we scan it. Who has ever experienced the sudden discomfort of a blaringly cluttered website? I think it’s safe to say everyone has. One second you’re searching Google to find the perfect recipe, and the next moment the link you clicked on, with great anticipation, appears, screaming at you in a splattered collage of words and images. It’s all you can do to click out of there quickly as possible.

To ensure you never commit such an offense to your own website visitors, pay attention to the whitespace in web design. Whitespace is the “empty” spaces of a website — clear of all text, pictures, graphics, etc. These spaces can exist between lines of text, between columns, surrounding images, in margins, and throughout menus. Essentially, if there is a part of your web page left unmarked, it is whitespace.

Why is Whitespace Important?

Simple layouts are more appealing to the eye than complex layouts. In order to minimize elements that distract from a website’s objective, remove excess content from the page. Perhaps some content would be more appropriate on a different page, or perhaps, after asking, “What is this element’s purpose?” you realize some content is better off removed completely. An organized website will utilize whitespace effectively. Organization brings about a more pleasant user experience because it draws attention to specific areas of the website that are calling for attention, causing viewers to focus on what is most important.

Too often the value of whitespace is diminished. Right now, any misconceptions you have lingering about the value of whitespace, lock those away. These refreshing spaces are used to:

  • Improve website readability
  • Generate a purposed flow throughout a web page
  • Create balance
  • Deliver a clear message
  • Direct viewers toward call-to-action elements
  • Ultimately lead to conversions!

So, How Can Whitespace Be Utilized Effectively?

Use white space to create visual hierarchy within the text; let it show the readers what the need-to-know is. The size of type should correlate to the space available around it. Consider this for gaps between lines of text as well, so each sentence is more easily digested. This is so important that Human Factors International conducted a study, and the results showed whitespace between paragraphs and in the margins increased reader comprehension by nearly 20 percent. Another tip, let these spaces rid the website of overcrowding and information overload. Think of it this way, will a salesperson be more successful when loud and in your face, or will a salesperson be more successful when welcoming and presenting a clear, concise message. Most websites are for-profit in one way or another, so design a website that approaches visitors how you would like to be approached. And one more thing, whitespace does not mean empty and white. It can be any color, or even a background image, like the Pivotal Innovation website, so use that imagination!

Utilizing White Space Properly

Pivotal Innovation Whitespace

10 Pound Gorilla designed this web page for Pivotal Innovation. It clearly shares the company’s message and is easily scannable. The whitespace is not actually empty space, but it helps to tell a little bit more about the company, visually, as it leads the viewer’s eyes to the down arrow where they can continue to view more of the site.


Google's Whitespace

Google is an excellent example of successful use of whitespace. There are hardly any actions available on the site (unless you have a login), so it’s clear to the viewer the purpose of Google as a search engine. Completing the call-to-action is intuitive, and there is an organized hierarchy of content on the page.

Finding the Right Balance

Too much space relays a message that a website is lacking content, and not enough space is a burden on the eyes. Ask the team at 10 Pound Gorilla to help you design a perfectly balanced website that is sure to boost web visitor interaction and conversions!

Read our next post...

Marketing 5 “Must Do” Items to Enhance Your Marketing

Marketing Retargeting: Never Lose Sight Of Your Website Visitor

Web Dev Quality Websites Need Quality Typography

Marketing Web Development Meets Web Analytics: The Knowledge Gap

Web Dev Responsive Design: It's More Than Just Design

Marketing Economic Summit 2017

Marketing Mary Meeker's Global Interent Trends

Marketing, Web Dev A/B Testing: Getting the Most out of Your Site

Marketing, Web Dev Upping the Ante: Interactive Content

Marketing, Web Dev Google’s SEO Best Practices: A Starter Guide

Marketing Creating Timeless Content to Boost SEO

Marketing, Web Dev 2017 Research Recognizes 10 Pound Gorilla as a Leader in SEO

Marketing, Web Dev Designing an Elegant Website using Whitespace

Marketing, Web Dev Test Your Website’s Success Using Heat Maps

Marketing Start Fresh, & Advertise with Facebook!

DNN, Marketing, Web Dev 2017 DNN Summit Sessions

Marketing, Web Dev Web Design: The Past, The Present, & The Future

Marketing, Web Dev Intrusive Pop-Ups to be Penalized by Google

Marketing The New Wave of Advertising: Native Ads

DNN, Web Dev Proud Sponsor of DNN Summit 2017

Marketing Moving to Mobile

Marketing, Video Power of Video

DNN If you’re a DNN user, your site could be vulnerable to hackers

Marketing, Video The Art of Retargeting: How it works and Why You Should Retarget

DNN, Marketing, Web Dev 10 Pound Gorilla Named Top Ten Denver Web Development and Digital Marketing Agency by Clutch.co

Marketing 10 Tips to Design Your Website for Lead Generation

DNN, Marketing, Modules, Web Dev DNNCON: Thank You!

Marketing 10 Ways to Incorporate Direct Response Marketing with Print Media

DNN, Marketing, Web Dev 10 Pound Gorilla... One of Denver's Top 10 Digital Marketing Agencies

Marketing How to Turn Social Media Fans Into New Customers

Marketing Your Facebook Likes No Longer Matter!

Web Dev Is Google Going to Penalize Non-Mobile-Friendly Websites?

DNN DNNCON: Thank You!

DNN, Modules, Web Dev From Ordinary To Extraordinary

DNN, Marketing, Modules How to Sell, Quote or Budget for a DNN E-commerce Website

Web Dev Getting Users to "Respond" to Your Mobile Menu Designs

DNN, Web Dev DNNCON: Editor.css

Marketing Getting The Conversion

Marketing Tips for Writing Effective Newsletters

Marketing Why Should You Have a Newsletter?

Marketing Writing Copy That Will Actually Be Read

DNN Editor.css: Giving You & Your Clients Less Headaches

DNN, Web Dev Connall Cosmetic Surgery: Case Study

Web Dev Making the Case for a Responsive Site

DNN, Modules, Web Dev March Module Madness: Dynamic Forms

DNN, Modules, Web Dev March Module Madness: Ventrian News Articles

DNN, Modules, Web Dev March Module Madness: Form & List

Marketing 5 Tips to Online Marketing

Marketing How the Name "10 Pound Gorilla" Came to Be

Marketing Creative Online Marketing: Groupon & Living Social

Marketing Promoting Your Business With Instagram

Marketing Using Your Blog to Boost SEO

Marketing Suprising Social Media Facts & What You Should Do

DNN, Web Dev DNN Con 2013: Mobile Navigation

DNN, Web Dev DNN Con 2013: Determining What Makes the Mobile Cut

DNN, Modules, Web Dev DNN Con 2013: DDR And JQuery. More Than Just Hover And Drop Down.

Web Dev A Mobile-First Approach to the Web

DNN Southern Fried DNN: Best of both worlds: Great Design and Flexibility

DNN Southern Fried DNN: Different skin designs from just one skin file

Web Dev The Future of the Web: HTML5

DNN Dot Net Nuke World 2012 Speakers & Sponsors

Marketing Google Places is now Google+ Local

DNN, Marketing Day of DNN - Using DNN to Feed Data to Several Social Portals

DNN, Marketing Day of DNN - Easy to Use Strategies for Writing & Submitting Articles to Increase Inbound Links

DNN, Marketing Day of DNN - How to Optimize Your Socialization

DNN Guest Speakers at Day of DNN!

Marketing Enticing Your Followers with Fresh Content: A How To Guide

DNN, Web Dev What Can Website Templates Do For You?

Marketing Getting Up in the Ranks Through SEO

DNN, Modules Best DNN Shopping Cart

Marketing Enter into the "Timeline"

Marketing Making Your Facebook Business Page Secure

Marketing Get Your Tweet-Face On

DNN, Marketing Google Analytics and DNN

Marketing What is Social Media and What Can It Do for You

DNN Advantages of DotNetNuke

Web Dev 8 Ways to Increase Website Speed

Marketing Beyond Facebook and Twitter, Get "In" with Social Media

Web Dev 8 Great Website Development Tools

Web Dev Your Website & Internet Explorer

Marketing What is Google +1

Web Dev What is "The Cloud"?

Succeed

Contact 10 Pound Gorilla Today
for Your Free Consultation

or Call {970} 726.5144 or Connect