It’s clear Google+ and Mac OS X Lion are getting a lot of attention from tech and design communities online. Some question the focus, but I think it’s well deserved based solely on both products’ visual design changes. However, it’s not flashy CSS3 animations or iOS-like visualizations that have me excited. Instead, I’m most impressed by the changes in spacing; Google+ and Lion provide significantly more room between UI elements and content than their competitors (or in the case of Lion, earlier versions of Mac OS X.)
That white space factor is one way Google+ distinguishes itself from Facebook and Twitter: Content receives extra padding and wider margins than I initially expected. Side columns are sparsely populated and the pages for Circles and profile management are spaced out to ensure editable elements have adequate room. Comment threads are limited in scope by default (though more customization here would be welcome) to keep the stream view uncluttered. In addition, while it’s not exactly Google+ only, listings in Gmail, Google Calendar and core Google Search results all received a bump in padding to increase readability.
Lion adds white space around elements as well, albeit less explicitly: the new full screen mode pushes UI elements to the extreme edges of the screen or removes them entirely.
There’s more than just literal white space in play; both Lion and Google+ modify their designs to increase perceived space as well. In particular, both products cut down on the visible divisions, depth and 3D effects that separate closely spaced content (e.g. Google+ comment threads.) It gives a much lighter, arguably more cohesive feel to both Lion and Google+. For example, Lion replaces toggle buttons with a extended groove and single switch combination that slides between options. It’s analogous to the toned down, less cluttered preference panels within iOS. Also Lion’s treatment of buttons is rather flat; drop shadows and embossing are de-emphasized to make buttons feel closer to their surrounding content.
Google+ improves perceptable spacing with their minimal use of borders: most are single pixel strokes, often dotted or dashed to give them a semi-transparent effect. It’s a significantly different approach than the more explicit shading that Facebook offers or the stronger borders utilized on Twitter.com.
Google+’s and Lion’s attention to spacing doesn’t end at divisions and depth; both companies also rely on a more restrained color palette to convey an airier, roomier environment. Many icons and lettering on both products are in grey scale with strong colors used sparingly. Granted, Google has always used a fairly subtle palette, but with Google+ it’s less about the colors themselves and more about reducting the contrast colors have with one another. It’s rare that colors strongly stand out from the white background unless something needs to be conveyed urgently (e.g. notifications, confirmation of profile changes.)
Overall, I think Google+ and Lion’s increased spacing will have a significant impact on both web and application design for the near future. It’s a welcome trend; designers can (and often should) provide more white space than they might otherwise need. It’s also a reminder that simple changes can have a big impact on design.