Now that you understand the basic building blocks of a design, let’s cover the guidelines for putting them together. These are the core principles that will help you build coherent and appealing designs: balance, contrast, rhythm, and space.
Balance
We’re always striving for balance: in work and life, diet and exercise, and of course, design.
With visual balance, imagine a vertical line running through the center of your design. For symmetry, there should be an equal amount of “stuff” on either side of the line.
That “stuff” has a technical term: “visual weight.” You should intuitively understand which elements have more visual weight than others; for example, the larger something is, the heavier it feels.
We can see the balance principle at work on Everlane‘s homepage. The invisible line starts between the first “E” and the “L” in Everlane and splits the model on the left from the text on the right. She balances the text, creating the visual symmetry our eyes crave.
You can see another example of balance in InVision’s weekly email newsletter. Look at how the focus of the design actually shrinks as your eyes move down the page. The top header is balanced by the image below, which is balanced by the title, which is balanced by the sub-title, which brings you straight to the call-to-action button.
Everlane and InVision use vertical and horizontal balance, respectively. But balance doesn’t have to be straight up-and-down.
Check out the Webydo homepage for proof. Slice this page between the two iPads, and you’d have two nearly identical triangles. (Oh, and remember how diagonal lines convey energy and excitement? You can definitely pick up on that vibe here!)
Wondering what a lack of balance looks like? The US government is famous for its unusable and out-of-date design, and unfortunately, the MyMoney.govwebsite lives up to this reputation.
As you can see, the “Highlights” column extends twice as far down the page as the rotating image carousel—making the entire page feel lopsided.
This site also violates the principle of visual symmetry, as it’s impossible to equally split in half.
Contrast
Arranging dissimilar elements next to or near each other brings out their differences. That’s why before and after pictures are so effective—you immediately see how dramatically the person has changed.
Not only can you use contrast to highlight differences, but you can also use it to make your design easier on the eyes. Imagine trying to read light-gray text on a white background. It’d be pretty hard, right? But mixing a bit more black into the gray makes it far more legible.
Case in point: the Mint site.
Black text on white is a popular combination for this very reason (plus, it feels modern and clean). However, if you want to create different high-contrast pairs, use this contrast checker tool—after you plug in two colors it’ll tell you how readable that pair will be.
Rhythm
Just like listening to a good song, looking at a “rhythmic” design will make your audience feel excited, engaged, and at-ease.
Fortunately, creating rhythm is easy: Think of your design as a series of repeating blocks. Not only should each block be similar, but each element of each block should repeat as well.
To show what I mean, here’s the Product Hunt homepage. The “Tech” products section is mirrored by the “Games” section underneath. If you keep scrolling, you’ll find the identically formatted “Podcasts” and “Books” sections.
Not only did the designers repeat the general format, they repeated the font, image size, spacing, navigation options, interaction choices, and icons. As a result, the interface is incredibly easy to scroll through—even a little hypnotizing. You can create rhythm by reusing design elements, from layout down to icons.
The Valio Conference 2016 site is equally mesmorizing, but for a different reason: The speaker bio cards are layered on top of each other in a left-right, left-right design. This visual technique literally makes your eyes dance from side to side of the page.
The takeaway: Setting and sticking to a pattern for your layout lets your audience anticipate where content will be before they actually see it.
Space
Any time you see a blank or unfilled section of a design, you’re looking at white space. White space (also known as negative space) refers to everything around and in between the other design elements. And don’t think of white space as “wasted” space; as famous typographer Jan Tschichold explained, “White space is to be regarded as an active element, not a passive background.”
Empty space provides the other elements on your page with “room to breathe.” It lets you highlight the most important information, increase readibility, and create a sense of order and simplicity.
The Clio homepage shows just how effective white space can be. Notice how refreshingly clean this page feels, and how your eyes are immediately drawn to the two blocks of text.
Poppies Flowers uses an ample amount of white space on their site as well.
As you can see, white space doesn’t actually have to be white. It’s any portion of the design that’s not drawing your attention—like the chalk background in this example, which pulls your eyes towards the central items and the text.
