White Space: Designing the Invisible
David Kadavy
Lesson 18
No matter what visual style is hot, no matter what great product you're using, every piece of good design uses "white space" well. I'm using this as a blanket term, not only to mean "negative space," (or places where there just isn't any stuff, like typography or imagery), but also to describe other invisible relationships between elements of a design, such as their proportional relationships, and the way they line up with one another.
This is truly what matters in creating that "clean" look: being able to use these subtle relationships between things on your design to communicate their hierarchy and how the pieces of information relate to one another. Someone just learning to master visual design could learn a lot by ignoring everything else and focusing on mastering just white space. I believe this so strongly that I've developed an entire course on white space that will be available to my Design for Hackers email list soon. In the meantime on Hack Design, I'll piece together the best things I've found around the web to help you see the unseen.
-
Inge Druckrey: Teaching to See
Watch this film produced by Edward Tufte's Graphics Press to learn about to seeing the things you make not for what they are, but for the shapes, lines, and values they consist of.
-
Why 1+1=3
This article from my blog explains how Edward Tufte's "1+1=3" concept can be applied to thinking about how you design things. Using whatever tool you're most comfortable with, experiment with making a table like in the example, and using only typography and white space to differentiate information.
-
How Google Uses White Space
This article from my Design for Hackers newsletter explains some of the white space changes Google made when they redesigned. Observe how Google's current design differs from when this article was written.
-
Mark Boulton on White Space
Grab some junk mail and a high-end magazine (or a Crate & Barrel catalog in the U.S.). Read this article and notice how white space affects the brand positioning of these two items. See if you can identify places where there is passive or active white space.
-
Scale & Rhythm in Typography
Play with the "scale" palette on this tool to see how different proportions can be used to choose type sizes. Drag around the blue "h1," "h2," and "h3" to different sizes on the scale. Drag around the pink base size. Change the line-height on the "body" palette. Finally, use "Inspect Element" on Chrome to change the base font-family to Helvetica, and notice how that alone changes the feel of the line-spacing and headers. Read the article on the layout for further thoughts.
David Kadavy
Author, Design for Hackers
I'm author of the book Design for Hackers, which debuted at #18 on Amazon. I travel the world speaking about design and entrepreneurship and I write at kadavy.net, for the Design for Hackers newsletter, and in short-form at @kadavy. Previously I freelanced for clients such as oDesk, PBworks, and UserVoice, and founded the design departments at a couple of Silicon Valley startups.
