Keep an eye on your inbox!
Hmm, that didn't work. Try again?

The modern web design process: putting content first

Creating content that matters to your end users is the key to your website’s success.

Jeff Cardello
September 5, 2017
Design process

Content should be at the core of the design process. Knowing what you have to work with, or want to include, shapes the layout and flow. Without any sort of structured content, building the site will be a more time-consuming and frustrating process.

Why is content important?

What helps people, helps business.

–Leo Burnett, advertising legend

Content is what gives a website meaning. It draws people in and allows them to understand a site’s purpose and take action. It answers the potential customers’ questions.

Content is like an engine — without it, all you’ve got is an empty, useless shell.

Content is the words that tell the brand’s story, videos that show how a product works, and blog posts that explore ideas. Content shouldn’t be an afterthought or a jumble of slick sales speak. Our sites perform better when we’re thoughtful and measured about what our content needs to communicate and how it works with the design.

Content and SEO are mutually beneficial

Organizations who can't match up in content creation and promotion may find themselves losing out to content marketers who learn the basics of SEO.

–Rand Fishkin, founder of Moz

Content acts like a lighthouse for web crawlers — it signals a site’s relevance and provides the information web crawlers need to sort and rank a website. A content-first approach that prioritizes SEO leads to better search rankings and a better user experience.

SEO should not be heavy handed. Mashing phrases and keywords together can result in writing that’s forced and confusing. Content needs to be useful and authentic while still providing what web crawlers need to rank a site.

Research is the key to writing content that’s search engine optimized. Spend some time checking out related websites and journals. Talk to the client and other subject matter experts.  Find out what words and phrases are commonly used.

An online keyword tool can generate words and terms that won’t immediately spring to mind. Google AdWords Keyword Planner and WordStream are great resources to research relevant keywords and phrases.

Google AdWords Keyword Planner
‍The Google AdWords Keyword Planner is helpful in providing keywords that may be overlooked.

If I were writing about something I know little about, like fly fishing, the Google Adwords Keyword Planner would be a huge help. Some terms are no-brainers, like “fishing rods” and “fishing reels.” Others, like “fly tying supplies” and “fly tying materials,” aren’t ones I’d think of on my own.

Pay attention to the “Avg. monthly searches” and “Competition” columns. Keywords with low competition, but high search volume, like “fish flies” in the above list, can do a lot to boost your organic search ranking if properly targeted in your site content. And just because there’s a lot of competition with paid advertisers doesn’t mean you should ignore these phrases. Weaving them into your content will boost its relevance.

Just remember to be picky about what phrases and words you pull from these tools. Make sure your content remains useful and clear. Have the client or subject-matter experts review the search-optimized content before placing it in the design. Be sure what you’ve written is accurate and in a voice that suits the site.

Content should be the foundation of design

When we know a website’s end goals, we get a picture of the content that’s needed to meet those goals. Take a look at existing content and see if there’s anything missing or unclear.

Organizing this content will inform what goes on each page and makes creating a sitemap a lot easier. Working with a well-defined sitemap can save your team from useless designs and wasted time. Starting with must-have content and a sitemap will help your team see how the different types of content fit together and how users will interact with and navigate the site.

Student's Guide to Web Design sitemap by Janna Hagan
‍Having sitemaps, wireframes, and a detailed understanding of a site’s content needs will make the design process more efficient and focused. The Student’s Guide to Web Design Sitemap by Janna Hagan provides a great example.

A content-first approach brings together designers and writers. Requirements and limitations in either area will affect the work for each of these roles. Content creators and designers are empowered to produce stronger work when they share a common goal and understand how all the pieces work together.

Model your content before you write it

“But I’ve already made a sitemap and wireframes. Why do I need a content map?”

Because so far, you’ve done everything right! Why stop now?

The same way a sitemap helps us visualize the flow of navigation, a content map gives us a guide for the flow of content, especially in a CMS. Content maps show us the specific content that goes on each page and how these ideas relate to the larger whole. The information architecture will have a more solid foundation when the content has already been organized.

If your design has any sort of web app–like functionality or if you have jumble of unorganized content, a content model can help make sense of it. It can help you refine your information before you craft a single headline.

A content model should start with a macro version that shows the main types of content without any related details. Let’s say that we have website to sell books and there’s going to be a page dedicated to new releases:

A macro content model provides a high-level overview of the content types a site will contain, and how those types interrelate.

This macro view shows us how each of these components is going to fit together. When clicking on a title of a new release, we’ll get a page with the specific book, as well as the genre, author and publisher. Let’s say that we want to take a closer look at each of these blocks of content and the types of information and elements they would contain. We’d expand upon each of these in a micro content model.

A micro content model adds detail to the content types your site will include, further fleshing out the site. It also provides guidance on the fields you'll need to include in your Webflow CMS Collections!

Now we can see the further types of content needed on each page, like the author biography on the Author block and the background information for a given genre. Creating a micro content model also shows us other opportunities for content, like book recommendations for each genre.

How content modeling supports your CMS design work

Now, I know what you might be thinking: yet another disposable artifact from the design process! But I'm here to assure you, your model is anything but disposable.

In fact, doing the work to model your content will pay off big when you start building your CMS Collections. That's because the details you add in your macro model translate directly into fields and/or Collections in Webflow CMS.

For example: Let's say you're building out the site modeled in the above diagrams. You create a Collection called Books, and start assigning it Fields. "Hero image" obviously maps to an image field. Title will be captured by the name field. Genre, author, and publisher all show up as macro-level content items, so they'll each require a Collection of their own, which the Book Collection can reference via reference and/or multi-reference fields.

Handy, right? For more on this, check out our article, "Why your design process should start with content." 

Free ebook: Web design 101

Master the fundamental concepts of web design, including typography, color theory, visual design, and so much more.

Read now
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

The who and what of creating content

We’ve emphasized how important it is to have some idea of the content before moving any pixels around in the design. But who will create this content?

In the best-case scenario your client has a team of writers. These word nerds knows what needs to be communicated and how to connect with the audience in a language they understand. They’re topic experts and masters in the craft of writing. But this dream of having a team of writers is often just that — a dream.

Not all clients have the resources for an in-house content team. A small business owner may take this responsibility on themselves, or delegate it to a family member who’s taken a creative writing class or two. Unfortunately, this can mean content falls short in the quality department, causing an entire project to suffer. Start your projects with an audit of existing content (if any) and assess its quality.

However content is created, don’t push a single pixel without at least a rough framework of the content. Without a clear idea of the substance and goals of the website, everyone will be unhappy with the process and its outcome.

Expectations for the quality of content need to be clear. If your client isn’t a writer and doesn’t have one available, you have a couple of options. Either leave room in the budget to create the content yourself (if this is a skill you have), or hire a professional writer that you trust.

But what about that client who doesn’t recognize good writing? What if they fancy themselves a writer and they won’t budge?

My trick has been to show them content that works. Find a well-written competitor site and point out the concision of the copy and the strength of its calls to action. Show your client the keywords and phrases woven throughout the site making its SEO game strong.

Someone can be a savvy business owner and not know what quality writing looks like. Help your clients understand — with kindness and respect — the value of good copy and its potential impact on their revenue and brand awareness.

Include the client in the writing process

If you’re a confident writer and editor, include your client in the content creation process.

Discussions about the type of content needed for the project is a good starting point. Start at the macro level: What information are users looking for? What do they need to know about the company or product that’s not obvious? What are the misconceptions an audience has? A bulleted list of these topics will help inform the categories of content you’ll need to work with and/or create.

Interview the client about the specifics needed to answer these questions — and take notes or record the session! A client will likely explain things better when they’re talking versus feeling the pressure to explain something in writing. Their phrasing can be very useful to the final content, so pay attention. If a client is eager to contribute their own copy, have them send you short paragraphs or sentences that explain the main sections for each block of content. You or the writer can assemble the fragments into strong content packed with search-optimized and attention-grabbing headlines.

Some clients will have adequate writing skills. If there’s time, workshop what they’ve written. If they tend to be wordy, work with them to be more concise. Or maybe they’re hung up on marketing cliches? This is also manageable!

Any writer can become better under the guidance of a skilled editor. If you’re comfortable in this role, go for it. Just make sure you’re being compensated for your time.

Content keeps people engaged

Content is why people visit a website. The design exists to present this information in an organized way and to add functionality and style. Having content developed early in the process means the design that can be molded around it. This focus allows the design to highlight the content and leads to an improved user experience.

Jeff Cardello

Writer, improviser, and reformed music snob. Check me out @JCardello.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free

Designer

Bring your wildest web designs — and client sites — to life, without writing code.

CMS

Build completely custom content structures for client sites and prototypes.

Hosting

World-class web hosting at your fingertips, without all the usual hassles.