Product Design Lessons

Creative Direction  |   Lesson #21

Simplify Your Visual Design

Learn two subtle ways to give your designs a sense of order.

It’s not uncommon for clients to request simple and/or clean designs. Few design briefs ask for a convoluted mess. But what makes simple and clean? In our experience, the two don’t always follow each other. A few simple techniques can simplify even complex designs without reducing content. Here are three lesser-known tips to simplify any visual design.

Illustration of objects becoming simpler from left to right. Rectangles, to be specific. We started with goldfish, but they were too hard to wrangle. Like herding cats. This lesson is about creating order, not cats.

1. Use Fewer Variations in Type Sizes

Like choosing only two families of type or a limited color palette, restricting typography to three, maybe four, different sizes creates a more uniform hierarchy. Using three sizes eliminates guesswork for both you and your users.

Too limiting? Not necessarily. Think of three sizes as defaults. You can always vary sizes when appropriate — just be aware that the more variations you use, the less simple the design will appear. Plus, the more you follow your own text size guidelines, the more impact you'll have when you choose to break them.

Illustration of blocks at different sizes. Doing less doesn’t mean making do with less.

Above: Think of it visually. The left-hand blocks come in many unique sizes. The right-hand blocks have only three sizes, giving them a more orderly appearance. (Astute observers will notice that the right-hand blocks also have more elements than on the left — doing more with less.)

Which three sizes depends on each project’s needs, the medium, and designer’s judgement. But this technique works best with distinctly different sizes, not subtle variations.

2. Mind the Gaps

In print, “full bleed” refers to running an image to the edges of the page. But the idea translates to web design: the space between elements is itself a visual element.

Full bleed in any medium eliminates distracting gaps that negative space creates. Tight margins actually become lines in their own right.

Illustration of layouts that find simplicity by removing negative space. Turns out that nothing is something.

Above: Both layouts use the same elements, but the right-hand layout uses fewer margins and background color in lieu of attention-hogging divider lines.

Simply having less stuff on a page doesn’t always placate clients. Sometimes we can answer “there’s too much going on” by focusing guidelines, like standard type sizes and treating empty space as a design element. The design’s in the details.


About the instructor

Ben

Ben Gremillion is a Design Writer at ZURB. He started his career in newspaper and magazine design, saw a digital future, and learned HTML in short order. He facilitates the ZURB training courses.