New: Learn UI Design enrollment re-opens June 19, 2019
Course Blog Newsletter Subscribe

The #1 Way to Spice Up Your Designs (And Create a More Cohesive Brand)

Note: this post was initially sent to the Design Newsletter. If you like this sort of in-depth design analysis, consider signing up.

Most of the newsletters I send are pretty 101-level design tips. How to justify font choices, how to use alignment, and so on.

Today, I want to talk about a 201-level design tip, so to speak. If you’re just getting started with design, you might want to file this idea for later – everything I’m about to say won’t save a bad design. But it will make a “pretty good” design look a lot better.

If you’re at the point where you can create a fairly neat, clean site/app that just lacks pizzazz, this one’s for you 🥂

Laying the foundation

First, I want you to check out the site foundationmedicine.com and spend a minute scrolling around.

(Shoutout to Learn UI Design student Satoko Tokoro for finding this beautiful site!)

I recommend doing this on desktop. If you’re on a mobile device, no worries – I’ll post screenshots of the most important parts.

There’s no doubt that every aspect of Foundation Medicine’s site is carefully considered and beautifully presented. Even just above the fold, we’ve got:

  • Clean, generous white-space around all elements
  • Interesting, oddly-geometric serif headline font
  • Humanizing, in-focus, high-quality photography
  • Unique – but not garish – pops of color (orange-red plus teal is not a common combo)

But there’s more to it than that.

There’s a few small visual decorations you can see on this screen.

If I strip them all out, the screenshot just looks like this:

Still quite good, but not as powerful, right?

But I’m not about to recommend “small visual decorations” as the thing that you need to be doing. Nope – the trick is a little more complicated than that.

Did you notice what the small visual decorations were?

“Lines?”

Close. But not quite it.

Here, look at the logo.

What is it? Fifth-grade Erik knows it’s a [Boba Fett mask][https://www.youtube.com/watch?v=-064XumUDbg]. Grown-up Erik has no clue… except for one thing: it’s a hexagon.

Which is also what the visual decorations are!

Triangles that fit together to make hexagons.

Speaking of hexagons, that’s also what the text is. No, seriously. Look.

An even better example is the italicized text at the bottom.

This font – GT Sectra – has it’s own hexagonal vibe going on.

Do you get it?

“Yeah – use hexagons!”

No. Use motifs.

Introducing… Motifs

A motif is a visual idea that recurs in multiple formats and ties the design together.

We saw above how Foundation Medicine uses a motif of hexagons.

  • The logo is abstract, yet suggests a hexagonal shape
  • The font has hexagonally-inspired letterforms
  • The visual decoration above the fold is a honeycomb of hexagons

For those of you interested in recreating this effect, these are actually three of the key places where you can use motifs.

  1. Logo
  2. Typography
  3. Empty space filler

But there are a couple other places I often find motifs echoing around. I’ll just tell you – and then you get the quiz 🤓

  1. Horizontal/vertical rules (for those of you who don’t habla HTML, “horizontal rules” is dev speak for “divider lines”)
  2. Special text elements – such as quotation marks, dashes, arrows, list-enumerating bullets and numbers, etc. OK. So here’s the quiz.

Say you’re working on the Foundation Medicine site and the junior designer hands you this.

foundation medicine ui before motif

It’s clean; it’s got plenty of whitespace; the fonts are nice. It’s already good, but it’s not great.

So what do you say?

We know the solution already: more motif.

Where could you spice up this design with motif placement? Remember, the main ways to integrate them are…

  1. Logo
  2. Typography (we already have this one covered)
  3. Empty space filler
  4. Divider lines
  5. Special text elements (quotation marks, dashes, arrows, list-enumerating bullets and numbers, etc.) Take a look, guess what you’d add for yourself. And then we’ll look at what the designers did.

Ready?

foundation medicine ui after motif

Whoa. Zoom. Enhance that.

foundation medicine ui after motif zoome

Awesome. We’ve got the motif repeated as…

  • Empty-space filler on the right side
  • The “1” and “2” numerals listing their main services
  • The vertical divider between the two sections

Let’s look at some other examples.

Classified document chic?

The Intercept is a news site that focuses on privacy, civil rights, technology, and whistleblower-related issues.

the intercept ui

Do they have a motif? You better believe it.

Let’s start at the logo – where all good motifs start.

the intercept logo

Everything checks out, totally normal – except for an oddly-placed underscore.

What else has underscores at the end of something typed?

Oh yeah – command lines. (At least the Windows one)

windows command line

That’s a subtle tech reference right there, which makes perfect sense from a savvy news site that focuses so heavily on privacy-related tech issues.

From today’s headlines:

intercept headline with ui motifs

Notice how the author’s name is written in a monospace font? What else is written in monospace fonts?

Oh yeah – command lines again.

Now monospace fonts aren’t just the domain of command prompts. I think they’re most heavily associated with old typewritten documents. The kind you imagine the government keeping secret for decades, and whistleblowers risking life and limb to leak. The kind The Intercept would just love to report on.

Take something like this…

monospace document form

…and then spice it up for a modern media site.

form-inspired ui motifs on the intercept

The Intercept’s motif is command line meets classified document chic.

Oh, and that underscore from the logo? It doesn’t go away.

It’s here in the drop cap:

drop-cap with underscore ui motif on the intercept

And over there in the pull quotes:

pull quote with underscore ui motif on the intercept

And down there, in the “Related Articles” widget:

related articles widget with underscore ui motif on the intercept
  1. ✅ Logo – Underscore present!
  2. ✅ Typography – Monospace fonts abound!
  3. ❌ Empty space filler – Honestly, no motif is used to fill whitespace
  4. ✅ Divider lines – Yup, the “underscore” motif frequently serves as divider of sorts
  5. ✅ Special text elements – Small bits of text are written in monspace; the underscore appears near particularly highlighted text

Cool, huh?

While we’re on the subject of “underscores” of sorts, “tiny underlines” are a great mini-motif to add the smallest bit of flair to some text.

Alright, let’s move on.

Think outside the shape

So far, we’ve only really looked at shapes and text as motifs. But one of the very best places to add motifs is color.

Earlier this year, I had the honor of talking to Chris Coyier on the Shoptalk podcast. I ended up raving about the then-hot-off-the-IDE redesign of CSS-tricks.com, Chris’s uber resource for all things front-end development.

Anyhow, the site has an extremely consistent and thoughtful color motif. Check it out.

css-tricks.com ui

It’s the gradient. There’s a pervasive orange-red-pink gradient used to highlight so many little important bits and bobs.

Like buttons.

button gradient motif on css-tricks.com

And links.

link gradient motif on css-tricks.com

And section headers and author images.

section header gradient motif on css-tricks.com

Even the scrollbar. What!?

scrollbar gradient motif on css-tricks.com

Duuuude. I haven’t styled a scrollbar since middle school.

Picking a theme color is basic. Everyone can pick a theme color. But can you pick a theme gradient?

The whole site is peppered with this wonderful little gradient. Everything except.…

  1. ❌ Logo – Nope. It’s just plain orange.
  2. ✅ Typography – The Gradient is used to highlight link text and code snippets.
  3. ✅ Empty space filler – Occasionally big splotches of The Gradient will spice up otherwise emptier areas of the site.
  4. ✅ Divider lines – Yes. Just scroll to the bottom of any page. You’ll see it.
  5. ✅ Special text elements – Like I mentioned above, links and code snippets are both highlighted with The Gradient.

Yeah, so the logo is just the old flat orange.

css-tricks.com logo

I think I ribbed him about this during the interview, so I won’t give him too hard a time now.. But knowing that motifs often flow out from the logo, this is a little sticky spot to look for in your own designs.

If you want to explore one more unique take on a color motif, check out The Manual, a site where designers write articles about the touchy-feely parts of design. SOMEONE HAS TO DO IT. But it’s just not me, that’s all.

Anyhow, see if you can figure out how they use color as a motif. It’s pretty brilliant.

themanual.org ui

OK, so this has turned out to be longer than I intended, just like everything I’ve ever written. So we’ll call it here.

I’ve got just one favor to ask. If you’ve liked this, consider subscribing to the Design Newsletter. It’s got all kinds of in-depth original writing on design that – unlike this article – is not posted anywhere else. You’re going to love it – or your money back. Just kidding. It’s free.

You Might Also Like: