Content Driven Design

Content-Driven Design

Content-Driven Design is a web design method that involves using content and page structure to inform visual design of a site. The look and feel of the site is based around accomplishing the purpose set out in the content.

Site Structure

When content comes first, you're more likely to get your design right the first time. In addition to knowing what sections and pages you need, the content also informs the layout inside each page and section. If you need to showcase 3 products or services in a section, that will look very different than if you need to showcase 30.

Design is meant to support the content, not the other way around. Design without content is just decoration.

Heading Hierarchy

The main text in your hero section should use an <h1> heading. This should be your largest text, emphasizing the main message of your site.

What's your message?

What is the most important message for a user to see as soon as your site loads on their device? You have one opportunity to tell your users whatever you want - use it well!

Call-to-Action

What behaviors are you trying to drive your users to take? Use calls to action to direct users toward conversion events such as making a purchase, filling out a contact form, or signing up for a newsletter.

Clear Copy

Your website needs to clearly convey certain ideas and instructions to its audience. To accomplish this you'll need well-written copy and well-considered text styling.

Text Styling

When considering text styles for your content, keep in mind the following:

• Is your font easy to read?

• Does the font weight appropriately convey the message of the content?

• Is there proper contrast between the text and its background?

Heading Hierarchy

As you go down your site, your heading elements transition from <h1> to <h2> to <h3> and so forth. These titles should become progressively smaller for consistency and flow.

Text Alignment

Text alignment should be consistent within sections of your page. Paragraph text should be left aligned, so if there are titles and/or buttons connected to paragraph text, those elements should also be left aligned.

Keep It Short

Your client might give you large blocks of text about their business, products, and services. Cut those down as much as possible. If you provide too much information then the users might skip it. Also, try your best to maintain consistency of content length for blocks of text that are connected (such as adjacent columns).

Testimonials Are Impactful

Sharing positive feedback from real customers is a great way to build trust and highlight product or service benefits. Testimonials should be clear, concise, and specific. Of course, they should also be real and used with permission.

Keep It Simple

Contact forms are a great way to collect leads, but users will only fill them out if they are short and simple. Consider what information you need (like contact info for follow-up), but don't include unnecessary fields.

Finish Strong

Users have expectations that certain information be available in the footer. This includes:

• Logo

• Navigation links

• Contact information (including social media)

• Copyright information

What makes great website content?

Content should be:

• Readable & clear. Both visually and grammatically, your text should be easy to digest.

• Correct & accurate. From hours of operation to product descriptions, users expect the information on your site to be accurate.

• Easy to understand. For both native and non-native speakers, your text should be concise and easy to understand.

• Inclusive. Your text isn't for just one specific type of person and it shouldn't sound like it. Whoever is approaching your content should feel welcome and connected.

What is Voice?

Voice is the company's personality and it always stays the same. Every time a company "speaks" on its website, it has the same voice.

What is Tone?

Tone changes according to the situation. For examples, the tone will be different if a visitor hits a 404 page, signs up for a newsletter, or receives a coupon for 50% off.

Use Simple Language

You can't have a conversation with your audience if you're speaking over their heads. Use simple language, keep it accessible, and keep it short. The more complex language and jargon, the less accessible your site will be, especially for non-native speakers.

What is microcopy?

You can find multiple definitions of microcopy but let's keep it simple: microcopy is small bits of text that help get users from A to B.

This includes UI text such as text on a button or placeholder text in a form. It also includes instructions to help users with specific tasks and messages for moments like 404 errors or a checkout page.

What good (and bad) copy looks like

Good Copy ✅

• Speaks to user as "you"

• Clear and concise

• Consistent and authentic voice

Bad Copy?

• Grammatically incorrect

• Too long

• Confusing