3. The Use of Whitespace

Apple is famous for their use of whitespace on their website for good reason—it works! Whitespace sets off the objects and text on top of it, giving them greater emphasis and clarity.

Other colors can be used but you must maintain SIMPLE with your design.

For apps, white can be too plain and apps need framing and background besides the Windows border to work visually. Light grays work well as a backdrop for apps. Darker colors work well for navigation bars, title bars, headers and footers, contrasting with a white, light gray or light color body background.

When using other colors as a backdrop to create space and achieve a similar effect, particularly with apps, it requires more skill and color coordination. White works with anything, while a color background must be coordinated with the other colors. (This is described in detail in principle #5.)

Darker colors can also be used for background but care must be taken to prevent overwhelming the eyes with the background color. Apple has gone with a black background for the iPhone 7 webpage, giving a very dramatic look. It’s harder to make a dark background work but when done well, makes the page distinctive and stands out from the crowd.

Samsung has taken their cue from Apple and made their own distinctive page. It’s not quite as “clean” as the Apple site, but it does use white space and black background to good effect.

Sony, on the other hand, has embraced more of the Metro look and placed a number of images in a tiled arrangement. The page is a lot busier and crams a ton of sensory input into a given size.

The advantage of whitespace is it highlights, emphasizes and helps to focus the attention on the important elements on the page. With a page like Sony’s, every element is competing with every other element for attention. While exciting and visually stimulating, if this was an app it would be confusing to use.

The Sony page is more like a dinner buffet–everything is presented at once and in bulk and the user must sift through all the info to pick what he wants. Apple’s site moves the user through from beginning to end, clearly presenting each concept so that the user understands it. It’s like a five-course meal at a nice restaurant, where each course is presented to the customer and the visual appeal adds to the experience.

With an app, the page needs to focus the user’s attention on the actions the customer needs to take, and move the user through a sequence of actions or thought processes, with the end goal of the user easily doing the action (or actions) required.

Whitespace helps. When executed well, it adds an aesthetic quality, focuses the user’s attention properly, and separates distinctive elements or sections smoothly.

iPhone 7 page (black background): https://www.apple.com/iphone-7/

iPad page (white background): https://www.apple.com/ipad/

Samsung Galaxy page: http://www.samsung.com/us/mobile/galaxy/

Sony page: https://www.sony.com/

©2017 Curt Larson. All Rights Reserved.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s