Great, you found the Side Area. Need some news?
  • On the Path to Giving Back

    Why engaging in corporate philanthropy really makes a difference for us? “What we have done for ourselves alone dies with us. What we have done for others and the world — remains and is immortal.” Albert Pike Has a nice ring to it, doesn’t it? The truth is, if you turn on the news, listen to the radio on your way to work, follow social media, or browse a newspaper with your morning coffee, chances are, you will come across actions of goodwill at least once in your day. And although we hear about famous philanthropists and companies launching their new CSR (Corporate......

  • Whitespace in Web Design: What It Is and Why You Should Use It

    In a time when we’re sounded by information, it is extremely important for designers to think about being clear with their layouts. We must remember to deliver a page that will get viewers’ attention, whether they’re purchasing something from a e-commerce site, reading a blog or just browsing news. The design must be readable, easy to understand, and easy to like. We need to remember that going for a simple layout instead of a complex one is the key to keeping readers interested. A lot of elements, images, colors and different shapes in a page can make your site look......

  • Pat Perry @ the office

    Being distracted at work is not a bad thing, if the object of your distraction is a work of art! We became big fan of the art of Pat Perry Art . His Sunday Orchestrator is has arrived and will inspire our team and enrich our workspace!...

  • What Marketers Need to Think About Before They Make Their Hail Mary Play

    The modern economy thrives on risk. Without it, there would be no innovation, the stock market would be flat and entrepreneurs would be far less common. Risk is also a crucial consideration for marketers. Every day, marketing professionals need to factor in reputational and brand risks, as well as financial risks from failing strategies. But how can marketers approach risk in a way that allows them to be creative and seize opportunities without betting the farm and losing it all? Here are some ways to strike a balance between risk and reward.  Are You In Control of Your Risks? Before......

  • Distinguished Gentleman’s Ride on SUNDAY 25TH SEPTEMBER 2016

    On Sunday September 25th 2015, more than 38,000 smartly-dressed gentlefolk in 475cities from 90 countries straddled the saddles of their café racers, bobbers, scramblers and other marvellous custom motorcycles to raise awareness and help fund the cure for prostate cancer. ....

Whitespace in Web Design: What It Is and Why You Should Use It

In a time when we’re sounded by information, it is extremely important for designers to think about being clear with their layouts. We must remember to deliver a page that will get viewers’ attention, whether they’re purchasing something from a e-commerce site, reading a blog or just browsing news. The design must be readable, easy to understand, and easy to like. We need to remember that going for a simple layout instead of a complex one is the key to keeping readers interested. A lot of elements, images, colors and different shapes in a page can make your site look more like an infomercial and causes your readers to leave because they’re uncomfortable.   A good way to deliver an enjoyable experience on the web is to understand more about whitespace and how you can use it to create a nice, simple and elegant design. Whitespace is actually really important to web design because you can use it to improve readability and website performance. Not to mention, white space is part of the “less is more,” “make it simple,” mantra that has been proven to be effective when designing for the web. There are some very simple ways of explaining what whitespace is, but my favorite one is a quote from Mark Boulton’s Whitespace article: “whitespace is empty space.”

What is Whitespace?

Whitespace, many times referred to as negative space, is the portion of a page left unmarked, the portion that is left blank, or (as Mark would quote) the empty space in a page. In web design terms, it’s the space between graphics, columns, images, text, margins and other elements. It is the space left untouched in order to smooth things out and transform a page into something elegant. It is also the blank space that reminds us that simpler designs are beautiful and that we don’t need to create a layout filled with text and graphical elements to deliver a clear and direct message. Even though we call it white space, it doesn’t mean the actual space must be white. The blank space may be filled with any color as long as it is free of any elements like text or images. Whitespace is also associated with elegance and sophistication since it is a way to organize text, organize elements and guide users attention to certain elements. An example of great usage of whitespace that we are all familiar with is Google. Their homepage is filled with whitespace so we can focus on what is important: search. White space in web design, what is it and why you should use it To include more whitespace in your designs and deliver a better result, start thinking about every detail of a page. Think about margins, header, footer, menus, images and captions, items in a list, words and letters. Think about all of these elements and start leaving more space between them, always keeping in mind that you want to create something elegant and clear while improving user experience. A good experience means having space to breathe between elements and letting your reader’s eyes relax. Placing text in an 11px font and cramming it into the bottom of the page just won’t deliver the experience your readers crave.

How to Use Whitespace

Here is an example from Mark Buton’s article showing the difference between using more white space in a direct mail piece. As you can see, the result is nice and elegant. Whitespace in web design, what is it and why you should use it Another good example of an interesting use of whitespace is the Made by Sofa website. Their website commands attention through its simple and clear design. Their site’s layout shows that you can get a nice result by tastefully positioning elements while leaving blank space between them. White space in web design, what is it and why you should use it Below you can find more examples of websites taking advantage of whitespace and that provide layouts which explore space between text, images, margins, menus and other elements:

nudge

White space in web design, what is it and why you should use it

Philip House

White space in web design, what is it and why you should use it

NV Interactive

White space in web design, what is it and why you should use it

By Association Only

White space in web design, what is it and why you should use it

Squarespace

White space in web design, what is it and why you should use it

Handiemail

White space in web design, what is it and why you should use it

Type/Code

White space in web design, what is it and why you should use it

Lapka

White space in web design, what is it and why you should use it

Diehl Group Architects

White space in web design, what is it and why you should use it

Jac in a Box

White space in web design, what is it and why you should use it

A Designer’s Goal

The thing to remember about designing for the web is that you always want to deliver a great product to your clients. The way to do this is to properly use whitespace to give your client’s readers the best experience you can so that they keep coming back for more. If your project is a e-commerce site, you want the user to be able to navigate the site easily so that they keep buying products. If your project is a blog or news website, you want the user to enjoy reading so they can browse the articles without leaving the page. No matter what type of content the website is intended for, it’s important to use whitespace to keep the navigation clear and smooth, and to make sure the reader’s experience continues to “flow” properly. A designer’s main goal is to make the web look simple and to un-clutter the visual frenzy that often pollutes the web. We need to develop layouts that are easy on the eyes and that make people want to keep reading. Designers need to create simple designs, even if the task of creating something simple is very complex. Remember to use whitespace wisely to improve your designs. Keep in mind that to make text readable you need more space between letters and headers. Remember that instead of stacking tons of information to take advantage of the all of the space you have, you can have two or three nicely spaced columns showcasing only what is truly important to the readers.

Conclusion

In conclusion, I believe that the a good approach to using whitespace is to think about what you would like to see in a page. For example, would you like to read something that is squeezed in the page or you rather read something that is well-spaced? Would you like to have several different kinds of information taking up the whole page or would you rather have something that is properly organized? Thinking about improving user experience and focusing on content is always a good way to go when designing a website. Whitespace can certainly help you deliver the experience that your client’s readers will enjoy, which usually leaves your client happy with the work you’ve done. Source: http://blog.teamtreehouse.com/white-space-in-web-design-what-it-is-and-why-you-should-use-it
No Comments

Sorry, the comment form is closed at this time.