Welcome to Refine the Design 4!
This is a series where I take a design and redo it to make it better. I'll take you step by step through my thought process - what the issues where, what I changed, and why.
Someone posted this ad design online and once I started providing critique, I just couldn’t stop without doing a whole redesign myself. Let's walk through this together.
The Problems
There are some significant design issues that I aimed to fix when redoing this ad:
🅰 ALL CAPS AND ITALICS makes a design (or even plain old copy) feel like you’re shouting at the reader. And no one wants to be shouted at. It's also more difficult to read in large quantities.
🔡 There’s too much text, much of it redundant and repetitive, (see what I did there? 😉) making it unnecessarily overwhelming to read when you can get across the same message with fewer words. The fewer words, the more powerful the message.
🖼 There’s no image showcasing the design service you offer and desired future state for the audience. If you're going to use only typography, it needs to be visually interesting in order to be as impactful as an image. After all, an image says a thousand words.
🆎 Too many fonts are being used, some of which are also too similar to each other without enough contrast, making it feel unprofessional and cluttered.
⬇️ There’s too much leading in the headline - it needs to be tightened.
🔘 Inconsistent icon styles are being used - some black, some colored, but none matching the style of the rest of the design.
🟨 The background stripe is meaningless and distracting - it adds no value and makes it difficult to read the text, detracting from the main message.
The Solution
Here’s what I suggest to improve the design:
Step 1: Removing the unnecessary items
Remove the redundant copy from the ad so that we have the best version of the text to work with going forward. Once I was doing this, I also tightened the offering to be something more specific and direct ("branding and website design"), making the service provider feel like more of an expert in this area rather than a generalist who knows only a little bit about everything (website design and redesign, logos, brochures, UI/UX, etc.).
Change the text to be sentence case without italics, instead of all caps, to make it easier on the eyes.
Remove the distracting yellow background stripe.
Step 2: Layout and hierarchy
Improve the visual hierarchy using size, font weight, and placement to guide the viewer's eye through the page in the order I want them to read - headline, subhead, skim the body, and then on to the CTA at the end.
Once I was changing the hierarchy, I moved around the messaging to use one of the 2 taglines as the headline instead, with the more generic descriptor "web design" as the tagline.
Break up the value stack into columns to make the layout more visually interesting.
Condense the footer text to take up less space and have a more balanced layout.
Step 3: Visuals and branding
Choose a more unique font, and only 1-2 fonts in total, to keep things consistent and visually striking.
Add an image of the client’s desired future state (in this case a beautiful, responsive, website design) to make the offer more clear and enticing.
And voila!
Variations
Now that the elements are all here, it’s easy enough to play around with the fonts, image, and even the colors, to change up the style to fit any brand.
It's important for the design style to match the personality of the business - that way customers know what to expect and have a seamless experience. You can see in the ads below that while the content and even the layouts are identical, the service provider behind each ad is completely different. Each would work best with (and appeal to) different clients than the others.
And that's the power of branding!
Which ad design is your favorite?
Left - responsive photo
Middle - clean and corporate
Right - muted, elegant vibe
Comments