Balance, proportion, harmony; does your site have visitors saying “Namaste”? Creating a peace amongst your white space, graphics and text connects your site and brings it back to its wholeness—composing an overall Zen.
Not all industries have equal purposes, thus the correspondence between graphics, text and white space varies for websites depending on their objectives. For instance e-commerce sites are presented with the challenge of incorporating a large amount of textual content paired with graphics to appropriately describe products. Although e-commerce sites aim to display a large amount of information, a well balanced e-commerce site should consist of 40% white space, 30% text and 30% graphics.
Let’s compare the e-commerce sites of the leading outdoor clothing companies, Patagonia and The North Face. Although they both sell yoga apparel, which company provides the best balanced design on their storefronts?
White Space
White space/negative space is a rather positive design element. It’s the area around text and graphics that provides users clarity as it helps organize pathways on a site. E-commerce sites that sacrifice white space can result in a cluttered appearance.
Print design allows for more freedom with the use of white space, where as web design is more sensitive to the application of white space. There are some “no zones” for white space, such as directly above and below the fold of a website. If your white space shadows the fold you may fool your visitors into thinking they’ve reached the bottom of your site, causing them to miss out on all of your content located below your misleading fold. Both Patagonia.com [figure 1] and TheNorthFace.com [figure 2] consist of nearly 40% white space and respect the white space fold rule.
Text
Typography is crucial, but web fonts aren’t the only concern when designing with text—it’s important to think about contrast, hierarchy, space and size.
Patagonia’s storefront has minimal text, which off the bat seems to be attractive, but unfortunately their less is more approach weakens usability. Online shoppers expect direct routes for sales and Patagonia doesn’t even provide direct action paths for shopping categories, such as “Men’s”, “Women’s”, “Jackets”, “Sale”, etc. Users must mouse over “Shop Clothing & Gear” in order to view a drop down menu of shopping categories. If Patagonia’s main navigation’s [Refer to figure 1] design included clearer shopping action paths, users could spend more time shopping and less time searching for products. The company created a clear action path by placing contact information [Refer to figure 2] in a location that’s accessible and familiar to users. Their customer service is recognizable as the “Live Chat” text is given hierarchy—the color and position (upper right corner). Patagonia’s storefront also incorporates a store locator [Refer to figure 3] providing users with convenience and its placement doesn’t take away from the overall look and feel. Lastly the company provides concise product details [Refer to figure 4] informing online customers with the latest products.
The North Face incorporates text on their storefront without causing chaos. The company provides users with action paths in their main navigation [Refer to figure 1], which includes shopping categories (“Men’s”, “Women’s”, “Kid’s”, “Equipment”, etc.). Like Patagonia.com, TheNorthFace.com provides a store locator [Refer to figure 2], however, the company fails to display contact information on the upper half of the page. The white text on black background does offer contrast, but studies have shown this application choice is more difficult to read than the standard black text on white background. Not only does The North Face’s main navigation include specific shopping categories, they also display direct action paths to specific shopping categories in two different locations [Refer to figure 3] on their storefront. And without cluttering the design, The North Face appropriately provides product descriptions [Refer to figure 4].
Graphics
In website design, pretty doesn’t cut it, especially for e-commerce sites. Graphics need to assist site visitors to help with task completions—online orders. An e-commerce site’s graphics must clearly illustrate action paths—a photo of a jacket to direct users to merchandise or a pictogram of a shopping cart to provide a quick route to checking out.
As always graphics need to pertain to your text, displaying a harmonious message throughout a storefront not only provides a sharper image of your brand, it also helps online shoppers complete orders faster.
Perhaps the most important graphic an e-commerce site can feature is the company logo—Patagonia’s logo [Refer to figure 1] meets consumer expectations as it links directly back to the storefront. The dominate image [Refer to figure 2] displayed on Patagonia’s storefront doesn’t appropriately convey their message or brand—the photograph of Pearl Jam may cause confusion for visitors. Although this photo wasn’t a wise design choice, thankfully Patagonia captioned it with text to explain its purpose—consumers can purchase music. Further down the storefront, Patagonia illustrates their product descriptions with appropriate product photos [Refer to figure 3].
Like Patagonia, The North Face placed their logo [Refer to figure 1] in an appropriate location and it directly relocates users back to their storefront. The main graphic [Refer to figure 2] vividly illustrates the company’s brand and the typography over imagery isn’t distracting, but rather helpful as it indicates the destination users will take if they click the photo. The product image [Refer to figure 3] is very informative as it illustrates both product features—both size and function.
Designing a website is a balancing act and of the two companies, The North Face seems to out Zen Patagonia by better integrating white space, text and graphics. In order to find the appropriate ratio of these variables for your website, you must consider the needs of your audience and the overall arching goal of your business.
