- Our eyeballs are some really busy little organs,
and one thing in particular that keeps them on their toes,
so to speak, is the job of constantly letting us know
what's worth paying attention to,
and what could be considering peripheral.
That's no easy job, especially considering
the vast amounts of visual clutter
that we face almost every waking minute these days.
So, that said, we, as designers,
we can do the eyeballs of others a real favor
by creating layouts and illustrations
that provide really clear and sensible cues
as to where to look first, and where to go next,
where to go after that.
So how's this done?
Compositionally speaking, things like
size relationships, visual framing,
and directional elements, these can be employed to attract
and direct the eye, and color can help too.
In fact, let's talk about how color
can be used to tell the eye where to go
when it encounters a layout.
Now I'll use this somewhat challenging layout
as my subject here.
It's challenging because everything in it
seems to be calling for a similar amount of attention.
Nothing really stands out here,
either through boldness or through size.
So if there's going to be a strong sense of
visual hierarchy in this piece, it's going
to have to come from color.
You know, color to the rescue.
Now, before we start working on our layout,
let's sidestep briefly and look at some
useful principles about color and visual hierarchy.
When I say color, what I'm really talking about here
are the three components of color:
hue, saturation, and value.
In terms of hue, warm colors.
These attract more attention
than cool colors most of the time.
But more importantly, it's usually
a color's saturation that determines
how much eye-attracting power it actually has.
Saturated colors, whether it warm or cool,
these are good at attracting notice,
especially when these bright colors
are surrounded by muted hues.
What about value?
Strong differences in value tend to attract notice.
Lesser value differences attract less notice,
and areas with especially subdued value
differences hand back even further.
Okay, that's not everything there is to know
about using color to attract and direct attention,
but you know what?
It's enough to give us what we need
to bring an effective look, a visual hierarchy
to our eyeball-challenging layout.
For starters, let's apply a warm, bright
red orange to its headline.
It's a color that should let viewers'
eyeballs know where to go first.
Let's make sure they get the message by darkening
the backdrop with a deep complementary blue.
That way the red-orange really stands out.
That looks good.
Next, let's make sure the layout's illustration
gets its fair of notice by coloring it brightly too.
Try out some options here.
Maybe some cooler colors in there.
Now the yellow looks good, but I'm going to
mute things down a few degrees to keep this
color from fighting for attention with the headline.
That's better.
Now a color for the rest of the headline.
I could go with our same red-orange,
or even a lighter shade, but how about
creating some color diversity by using
a saturated cool blue-green?
So it's a strong color, but it's one
that does not compete with the
central type for attention, and I like that.
Just to keep things from looking too complicated,
I'm going to use the same warm gray
for the ad's outer border
along with the subhead and the logo.
It's an interesting color, and it's one that
definitely plays a purely supporting role within the layout.
All that's left is the text.
Now the white looks good, and with white,
the type is nice and legible.
I like that, but the white just seems to
draws too much attention to itself.
That's how it looks to me, so I'm going to go ahead
and change the white to a light gray instead.
It's still legible, but now it's got a touch of restraint.
Now I'm good with all this, but
what if I decided that I wanted the illustration
to get more notice than the headline?
Well, I'd just mute the colors in the
headline, a little bit anyway,
and amp them in the illustration.
No problem.
Here's a side-by-side comparison.
Either solution could work.
There's nice colors and a clear sense of
visual packing order in both solutions.
So keep in mind the things we just talked about
the next time that you add color to a layout
or an illustration, and let your colors help
as you try to make the world an easier
to navigate place for the hard-working eyeballs
of your fellow human beings.