Did a friend forward this email to you? You can sign up here to get updates in the future.
How Google Uses White Space
You have most certainly noticed that all of the Google properties have been looking much better in the past couple years. This is thanks in large part to much more skilled use of white space in Google properties. Here's a comparison of an old search results page, and the current search results page. (click for larger image)
Lots has changed, but many of the changes are very subtle. Here are a few key things to notice:
- The links along the left-hand menu are a light grey color, instead of an intense blue
- The brightly-colored icons on the left-hand menu have been removed. Before, the left side of the icons lined up with the left side of the other menu items. Now, they're all along one crisp line.
- Type size changes are much more delicate, particularly the size relationship between the title and description of a search result.
- The rule lines in the left-hand menu are much more light and delicate than they were before. The vertical rule has been removed completely! Remember, 1+1=3.
If we look closely at Google's bread-and-butter – the ads, we can see how white space is being used more delicately.
- The URL is now right underneath the title.
- There's a piece of white space added underneath the URL that is approximately the height of the URL's type itself. This creates a cognitive connection between the title and the URL, and separates them from the rest of the data.
- My favorite detail is that the parentheses have been removed. The "x reviews" is already a different color, so what would be the point of parentheses?
- They're also cutting down on visual noise in the stars: there's no outline around the new stars.
You've probably heard many a designer complain about having to "make the logo bigger." But, Google actually made the logo smaller. You can see it has much more breathing room now. The space above and below the logo is about equivalent to the x-height of the letters in the logo.
Notice also that the main left-side menu items ("images," "video," etc.) have much more breathing room. This actually makes them stand out and look more important, despite the fact that they are in relatively small type.
It seems Google has discovered the power of white space.
- - - - - - - - - - - -
Author, Design for Hackers
P.S. You can get 2 months free of WPEngine WordPress Hosting (when paying for a year up-front) if you sign up through this link.