Nothing gets our goat at The Fresh quite like a web design stuffed full of lorem ipsum text.
It should get your goat too. And if it doesn’t right now, it might after you’ve read this article. So, if you’re midway through a web design project and have been presented with lorem-heavy design ideas, you may want to stop reading.
You see, marketing is all about the message, and the presence of loads of lorem ipsum text could be a warning that your design-first approach isn’t giving your’s room.
At The Fresh, we take a strictly content-first approach to web design. This means our design team takes direction from copywriters – not the other way around.
This isn’t just an ego thing. And it’s not strictly about lorem ipsum either.
It’s about creating digital assets that support your message without compromising to meet often rigid design requirements.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales, lacus in tempor sagittis, lacus lectus accumsan leo, eget suscipit est massa vitae sapien.
Nullam ac sem ac leo dapibus eleifend. Donec scelerisque arcu ac nisl pulvinar interdum. Fusce sagittis lacus odio, at consequat ante fringilla ac.
WTF is Lorem Ipsum?
Before we start hating too hard on lorem ipsum, it might be helpful to say a few words about what it is. It’s the placeholder text used by designers to show where actual content will go later on.
And it does have its uses: It’s a quick and easy way to show off design ideas and concepts without having to wait for the copywriter to get out of bed and shake off their habitual hangover.
The Fresh Design Process
To illustrate why a content-first approach works best, let’s take a quick look at a couple of examples of The Fresh’s old design-first web build process and then see how things are different after putting content first.
Loadsa Lorum
This image shows a design presented to a client many moons ago. (It’s worth noting that prioritising content over design isn’t the only reason the concept doesn’t quite sizzle: Design trends and coding power have come on light-years since this project).
You’ll already spot all those acres of lorem ipsum ready to be replaced with proper content – starting with a heap of intro text, followed by two columns for specific services or treatments.
And it’s here we run into the first limitations of design-first workflow. Here, the lorem ipsum tells us there’s space for two headline services. But what if we want more? Adding a third would kill the elegant two-column layout, and the Lord help any business with five or seven services.
Then there’s the headline text. Looks OK – but it’s not going to win any design awards, and there’s only room for a few words.
After these two columns, there’s ample space for a bold image with text that could host an offer – brilliant! Except it’s halfway down the page.
As for the following three and four column images…well…all we can do there is hope the copywriter has a knack for scintillating photo captions or the reader will be asleep before they hit the pricing table.
Lost in Space
The second case study looks a little better at first glance.
Avert your eyes from the sultry stock-photo professional for a moment (you won’t find any of those on our newer sites, BTW), and you’ll spot an impressively sized hero image. Let’s be kind to the writer by saying the headline is ‘appropriately corporate’, but the dull message isn’t helped by lacklustre typography.
The Who We Are section looks okay too, although poor Dr Smedley feels disembodied, and it isn’t clear how her presence relates to the accompanying text.
A quick scroll takes us to a three-column blurb layout. Clearly, the designer has handed over a bunch of lorem ipsum along with a brief that said something like, “I need a header and three lines of text for each of these by sundown or the pussycat gets it.”
By box three, it looks like our copywriter can’t even manage the requisite three lines. Is he drunk? Possibly. A more likely explanation is that since he isn’t Rain Man, he has no idea how many words will make three lines in the given space.
Space turns out to be an issue again in the testimonial section, where the designer optimistically leaves room for a short novel. The result is utterly heinous filler text in the lefthand box, while the quotation in the righthand box needs a naval search and rescue team to find.
All in Order
Of course, we wouldn’t be pointing any of this out unless we’d seriously upped our game. And part of that process was adopting a content-first approach.
These days, we always begin by introducing our clients to our senior copywriter, who’ll sit down with the client to delve deep into USPs, preferred tone of voice, goals and heaps of other info they may never have given a thought to.
With a content-first approach, the next thing the client receives is the first draft of the website copy. There are no pretty pictures – just all the relevant info laid out so thoughtfully it reads like a thriller.
Instead of asking questions like “Which three services should we summarise in these boxes?” We can now turn our attention to more important questions:
And only when the client signs off with a Donald Trump-sized Sharpie are the designers allowed out of the cupboard to pick up their crayons.
#TheChelseaLook
Let’s take a look at how the approach pays off in practice.
Dr Rhona Eskander’s site kicks off with a big, bold hero, incorporating her famous #ChelseaLook hashtag. Here the designer uses italics to set the hashtag apart from the headline.
Sure, the copywriter could have used exactly the same header to replace lorem ipsum, but the use of italics is a design choice inspired by the headline’s message.
And the theme continues with cursive script used for emphasis throughout.
In the following Hello Confidence section, a design-first approach would have allocated a best-guess sized space to accommodate an unknown quantity of text.
But with a content-first approach, the medium is designed to fit the message like a porcelain veneer.
And contrast Rhona’s press section to the disaster-at-sea that was the older testimonial. Here, the designer knew exactly what they had to work with – and the contrast couldn’t be starker.
Fresh Digital Agency Theme
Avada’s Digital Agency theme is one of the most popular and stylish WordPress themes around.
We wondered what would happen if we tried filling it with content from The Fresh website’s homepage.
As you can see, the results aren’t bad, but they’re not exactly spectacular either.
All we wanted was a picture of The Fresh’s disarmingly attractive team members in the theme’s hero. But Avada demands two images. It isn’t prepared for our four-line header, which ends up stretching the content box. And because Avada wants a sub-header, we’ve had to pilfer the one from the section below.
Speaking of which, here’s where things really start to get messy with the Digital Agency theme.
We’ve had to write a new header for the one we borrowed and the single-column layout looks like War and Peace printed on a postage stamp.
In the following blurb section, Avada intelligently leaves four blocks to describe core services. But because the theme is trying to be all things to all agencies, the result ends up as a rather bland and generic example of design.
Just contrast it to the actual site where the designer has again used content to inspire the choice of imagery.
Fertile Imaginations
We’re not all about dentistry here at The Fresh. We designed this for reproductive consultant Dr Lynne Chapman.
Notice the male and female icons accompanying the first header. Would the designer have known to include these if they hadn’t seen the content first? In the best case, the icon could have been added later – but that’s an unnecessary extra stage in the build process.
Lynne’s content talks of a fertility plan or pathway, and that’s reflected throughout the site with the meandering line art – another design choice inspired by the content.
Love Teeth
Dr Kunal Patel wanted a site that would appeal to Love Teeth Dental’s millennial and gen-z patient base. And, of course, no self-respecting marketer could write for such an audience without plentiful on-fleek references to hashtags, avocados and selfies.
Who would have thought to add Polaroid-style selfies to the introductory text unless they’d read the inspired header first?
And the same goes for the happy latte image in the finance section. Without the coffee copy, you can bet Kunal would have ended up with a stock image of a piggy bank or calendar with a pile of cash in the foreground.
Alfonso Rao
Dr Alfonso Rao’s site wears his native Italian colours loud and proud. And the site features a recurring three-column motif inspired by il Tricolore.
Below the fold, the designer makes a feature of the first sentence of introductory text. That’s not something a word-focused copywriter could have envisaged. And who knows what would be in its place if the copywriter had been asked to replace two lines of lorem ipsum.
When we arrive at the Meet Alfonso section, the designer has superimposed some of the text’s most significant points over the right-hand image. Since this is a content-driven design decision, they were able to select just the right amount of text and the perfect accompanying image.
Mark of Excellence
At uber-dentist Mark Hughes’ initial content briefing meeting with The Fresh, Mark made it clear he wanted to lead with a personal quote.
The designer was able to give the sentence just enough room to breathe and didn’t have to come back to the copywriter with a request to chop or add words.
Subtle Genius
With so many glowing plaudits from the national press, it made sense to kick Dr Benji Dhillon’s site off with a bang – in this case, a gloriously succinct quote from Tatler magazine.
It’s given just enough room to breathe and the hand-drawn circular motif highlighting salient points from the body text continues throughout the site.
The designer used a mixture of bold and regular typography to give weight to the standout headline words – another design feature made possible by the content-first approach.
Over on the treatment pages, we kept things simple and elegant, with a few paragraphs of text to cover each. There were no boxes of text to fill or paragraphs of lorem ipsum to replace, and the result is as every bit subtle as one of Benji’s non-surgical facelifts.
The designer was also inspired to turn the first sentence of each treatment page into a bold lede-style header.
Watch this Space
Reading’s Woodborough House called for an unusual approach to content. Principal Nick Fahey wanted the site to feel like a high-end experience like Rolls-Royce or Purdey Guns. And his slow-dentistry USP called for Proustian pacing to convey this elegantly.
In this example, the copywriter sets out a whopping 250-word intro – the length of a short news story – and trusts the designer not to hit us upside the bifocals with a huge wall of text.
Let’s go back to our first case study for a moment and replace the first wall of lorem ipsum with our watchmaker spiel…Do we have your attention yet?
Why Content First?
Prioritise Your Message
We’ve already seen how design-first thinking can constrain your message: If your veneers page absolutely had to have a thousand words about the translucent qualities of porcelain (we wouldn’t recommend this, BTW), the content-first approach lets you do just that.
Trust your writer to come up with the goods – and your designer to wrap it all up in a neat, readable package.
All Killer No Filler
Any copywriter worth their weight in ink (ahem!) will tell you that brevity is one of the many magic ingredients of page-turning content.
Nothing kills readability like filler content, and asking your audience to read words whose only purpose is to fill the available space is kind of insulting.
Be Flexible
It’s tempting to go ahead and design a boatload of pages of similar size and structure. But, in reality, your Invisalign page is going to need far more in-depth content than – say – sports guards.
The content-first approach lets designers know when to go all out and when enough is enough.
It’s Coder Friendly
Let’s not forget there’s more to web design than just you, me and the designer. The design-first problems we’ve looked at here can cause tons of headaches for developers, too. Images end up stretched, coders fight to add or remove space, elements overlap and potentially needs to be removed.
Is the developer – or anyone else – who doesn’t always share the client’s vision, the right person to make those decisions?
It’s Cost and Time-Effective
With so many hard-headed creative geniuses involved, the process can lead to the occasional clash.
The content-first approach lets everyone get on board with the message from minute one and allows them to work to their strengths in supporting the message while still fostering a collaborative workflow.
Now See for Yourself
Head to our portfolio to find out how the content-first approach is working for The Fresh – and our clients. If you love what you see, and want us to make it work for you too, get in touch today.