White Space: Speaking Volumes by Saying Nothing
BY Kristen Friend
White space is everywhere. People enjoy it everyday, often without even realizing it. It is in the wide aisles and clean displays of a high-end retail store, the quiet park nestled between crowded city streets and the welcoming row of empty seats in a theater or a busy subway car. It is in the clearing in the middle of the woods during a relaxing walk.
At its most basic, white space is simply unoccupied space. It provides a break for the senses, helping people process all of the stimuli that bombards them each day. It is calming and gives the eyes a necessary break. White space is essential to our ability to see and understand the world around us.
The same principles hold true for white space in web design. White space makes a website easier to scan and read. It helps organize and display information for the benefit of the user (and your firm). Out of necessity, every design will contain white space, but many do not contain enough. As valuable as white space is – and it is one of the most valuable parts of a design – it is too often ignored, unappreciated and even resisted by designers and clients alike.
Imagine someone speaking continuously without pauses for emphasis, carrying on an entire conversation loudly with no variation in tone. Social interaction would be difficult if not unbearable. Most people would start looking for a way out as soon as possible. When your website tries to fill every space, crowding content into every pixel, this is the conversation you are asking users to have with your firm. It becomes far easier to click away from an overwhelming website than it is to get away from someone with whom you are speaking face to face.
What is White Space?
White space is simply negative space. It does not have to be white, only empty. Calling it white space is actually just a throwback to pre-web times when most graphics were printed on white paper. On a macro level, it is the space between large design elements, like pictures and blocks of text. On a micro level, it is the space between small items, like individual letters, list items and lines of text. Striking the right balance with both micro and macro white space can make or break a design.
AdAge.com has compiled a list of the top 100 advertising campaigns of the 20th century. Coming in at number one is the classic 1959 “Think Small” Volkswagen ads. The most famous one features a tiny VW Beetle, off-center in the top left of the page surrounded by inches upon inches of white space. It is coupled with the simple headline: Think Small. The reader’s eyes are instantly drawn to the car, then led down by the unexpected headline and enticed into reading the actual ad copy. The ad helped to redefine an industry’s understanding of effective advertising.
Of course, in practical terms, that much white space is not a luxury available to attorneys who want to actually get prospects from their websites. But it is one of the more critically acclaimed examples of why white space works.
For many people, however, white space is scary. As it sits there staring back from the page or the screen, the natural urge is to fill it. But why? Experience tells us that clean design sets a professional, high-end tone and that properly spaced text is more legible and pleasing to the eye. It is something that consumers and clients understand on a subconscious level through the different emotional reactions they have to open versus cluttered spaces and simple versus overdone marketing. This understanding is also evident in the way consumers expect products that use a lot of clean, open design to be higher quality, designer brands. When feeling the urge to crowd too much into a space, remember these implicit reactions and the stress and distraction that comes from being crowded by too much stuff, and embrace the possibilities of simple, negative space.
Bringing these concepts from abstract to concrete, law firms can benefit from embracing white space, and not just from the perspective of having a pretty website. Negative space helps delineate different sections of a design and can be used to direct prospects to the most important elements of a page, like a contact form or call to action button. It can be used as a tool to help turn users into clients.
Increase Legibility and Ease of Use
A good use of white space can be helpful in attorney website design in several ways. On a micro level, it makes the page more readable. Navigation that bumps right up against the page border and titles, headers that are too close to the text above or below them, and body copy that is scrunched together put a strain on the user. They are simply difficult to read. People are not patient enough to sort through semi-legible text to find out how you can help them and how to contact your firm.
Think of the most important pieces of information your firm would like to convey to users. Perhaps there are certain practice areas that are the most profitable and therefore the most appealing in terms of acquiring new cases. Obviously contact information and contact forms are critical. Maybe your firm has expertise in a unique area or partnerships with other professionals that provide real, added value to clients.
These are all items that need to attract the attention of users. The question is finding the best way to do so, and negative space can be a big helper. If the most profitable practice areas are jumbled in with all the others in a long, unformatted list, prospects cannot be expected to notice them. If contact information or information about a specialized service is squeezed in with less relevant content or next to distracting graphics, prospects will not recognize its value and may miss it altogether.
Set the Right Tone
Law firms can also benefit from the white space by using it to set the right tone for the firm’s brand. Clean, simple design conveys a more professional, sophisticated feel. This adds value to firm’s brand, positioning it as up-market and deserving of respect.
When asked about the most important concepts or feelings a firm would like their website to convey, some of the most common answers are professional, experienced and knowledgeable. These are up-market qualities. Think of the difference between a direct mail piece and an ad in a publication like Glamour, Vogue or GQ. The direct mail piece is mostly content whereas the ad is mostly space. This look is carried over into retail stores, with higher-end retailers generally using widely spaced displays and showing only a few items at a time. This stands in stark contrast to discount stores crowded with displays and merchandise.
It is easy to take shots at direct mail design, but it does have its place. It intentionally appeals to a certain audience with the goal of luring customers in with deals – and it works. But these customers are rarely loyal and also unlikely to refer others to any one brand over another. Many law firms rely on word of mouth marketing; it is the nature of a service business. Attracting clients who are willing to pay for a quality service, who may use the firm for more than one legal issue and who will refer others has real value in both the short and long term.
Clean design is an exercise in both selflessness and confidence. Selflessness, in this sense, requires the recognition that not everything about a firm or company is important to clients. Confidence, in this context, conveys the message that a brand, or firm, has value in and of itself and can stand on its own without clutter. It is like saying, “Here is what I have to offer, I understand that it is a quality service, and I respect you enough to present you with a clear, gimmick-free, compelling reason to contact me.” Giving a website design room to breathe, picking the most important information and organizing it in an uncluttered layout conveys a sense of confidence and professionalism. It makes your firm look bigger (and better).
Use a Few Simple Tools
Web designers have more control than ever over website layouts and styling, but giving a website room to breathe can be accomplished with a few basic tools.
- Employ ample margins and padding. Margins and padding define the space between large blocks of content or between images, menus and text. Make sure everything is assigned margins or padding to avoid cramped, cluttered layouts.
- Pay attention to line height and the space between list elements. Line height is a style property (CSS) that defines how far apart one line of text is from the next. A good rule of thumb is that text should be spaced at about one and a half times the size of the text. If a layout is using 13 point text, the space between the lines should be around 19 points for maximum legibility.
- Give headers appropriate spacing both before and after blocks of text. Headers should be separated from body copy both by size and spacing. There should be variation in spacing between the header, the text beneath it, and the text above it. Adding more space at the end of a paragraph before the next header gives the page a good flow.
- Give your menus room to breathe. With menus, the trend is bigger and simpler. Do not give users too many options. Distill your main menus to the most important items and put space between menu links. Make sure menus are appropriately separated from other content blocks for emphasis. A good designer will be able to create an effective layout and plan a good sitemap with intuitive navigation to avoid throwing everything at a user at once.
Do not fear white space. Understand its benefits and recognize its value. Used properly, it can help distinguish you from the competition and add value to your brand – both important steps on the road to building a bigger law firm.
The Knowledge Graph uses the information on the web to understand real-world connections between the data it collects.
Content guidelines with stated direction let writers, designers, and contributors know what they need to focus on.