4. Use Space as a Border and Separator

Point #4 in the 12 Principles for Creating Great User Interfaces addresses a second way of using space to great advantage.

Using space between objects acts as a visual separator or border between them and works to emphasize the items. The lack of other “clutter” makes the images and text stand out.

Apple uses whitespace on their website to great effect. There are no lines separating sections on their webpage—the closest they come to a line is a light gray shading, a shadow that is almost invisible.

Point #3 addresses whitespace as a background. Point #4 emphasizes space instead of lines or borders around sections. Grouping elements together, and then grouping other elements together, with space between the two groups, gives an uncluttered look. You can see the use of space in the examples in the previous section.

Apps have more info gathered into a small space, even if it’s a browser- based UI with scrolling capability. Space between objects and text is cleaner than a line border or box and can be used to great effect. Consider using it in your app design.

I’m a car enthusiast (aka car nut) and I’ve owned a few BMWs. There’s an aftermarket parts company, Bavarian Autosport, that does on nice job on their site of using space between the different sections. It’s basically an on-line catalog and it’s a clean layout.

They have enough space between the various elements in the header, menu bar, vehicle selection section, and the catalog listings. The site is easy to read, easy to use, the eye can easily find the important info on the page.

Some might say it’s not sexy, but it works very well and is a good example of both the use of whitespace for background and space between objects.

Bavarian Autosport: http://www.bavauto.com

cropped-afsa-2014-4xc-125h  ©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