I have a regular client I've worked with for a long time — we've been eating his elephant one bite at a time. Updates to individual pages of his site, a presentation, ad materials.
In one of the tasks, he wanted a standard CTA banner on a page.
I decided not to guess
A long-standing client, easy to work with. But with him I often have to guess the mood. Plenty of people deal with this, and it isn't a problem — it's simply the human factor.
This time I decided not to guess, and made several options straight away so he could choose.
Why several at all
One option works when the client knows exactly what they want and can explain it. Or when they fully trust the designer's choice.
But I've yet to meet a client who truly knew exactly what they wanted and how it would work.
And that's fine: a client comes precisely so that someone makes it work for them. Composition and hierarchy are our job, not theirs.
A choice that isn't
On the surface, the most obvious difference between the options was colour. Look closer, and of course it wasn't only that. Different illustrations. Different type sizes. Different amounts of detail.
Only three layouts
Schematic layouts: the client's real banners aren't shown here.
From large to small
In every case, reading goes from big and bright to small. And from top to bottom.
That's why, by the way, you won't see banners with the button on top and its text underneath: nobody would read that text.
There's a catch
All three layouts guide the reader correctly, but there's a catch. When there's a lot of text at the same size, the reader's eyes scatter: what matters most here?
What was chosen
That's what I showed the client, visually: too many elements distract. So the choice fell on the option with a minimal illustration and short copy with buttons on the left.
And long copy on small banners simply doesn't get read!
Before any layout, there's the question of mood — more on that in “Moodboard: you've already made one”.
CTA banner checklist
- One idea
- A banner says one thing. If you want to say three things, that's three banners or a page, not a banner.
- Headline is the largest
- Reading starts there. The explanation is noticeably smaller so it doesn't compete for attention.
- Keep it short
- A headline in one or two lines, an explanation in one sentence. Everything else goes on the page the button leads to.
- Button after the text
- Top to bottom, left to right: first the person understands what it's about, then sees what to press.
- One main button
- If there are two, the second is clearly quieter: an outline or a link. Two equally bright buttons force a choice again.
- A verb on the button
- “Book a call”, “Get a quote”, “See the catalogue” — it's clear what happens after the click.
- The illustration helps
- Small and calm. If the picture pulls the eye harder than the headline, it's already in the way.
- Space
- Empty space around the text and the button isn't unfinished work — it's what helps you see them.