Written Content or Design, Which Comes First?

Nov 22, 2017 // Lauren Olson

“Design in the absence of content is not design, it’s just decoration,”
A List Apart founder Jeffrey Zeldman writes.

Fundamentally, the look of a website and its words go hand in hand. The two should never really be considered separate. Yet in an age of eye-catching graphics and powerful animations, sites are often designed without any content preparation beyond lorem ipsum.

You’re building a website to communicate with visitors, and words are at the core of that conversation. But, this begs an important question...

What Comes First: Design or Writing?

Consider the content-first strategy.

At its heart, your website is there to deliver content, and the design elements exist to support that content. People might visit your site because it looks pretty, but they’ll return because of the quality of the content.

Content-First-Design.jpg

When you focus on conversion design (content first) rather than system design (structure first), it allows you to reverse-engineer the conversation your website will have with a visitor. Maximum attention gets paid to the most sought-after content on the site, and the graphics work to increase support and accessibility.

With this method, your final stage is the homepage. All of the other content already exists, so it’s much easier to design your welcome mat.

Remember that content isn’t just content; it comprises a range of media, like interactive words, text, audio, video, and graphics. Content-first design focuses on understanding the purpose of your design, and asks, “How are you going to achieve that purpose?”

Content-Prototypes.gif

If you’re having trouble starting, prototyping content is a great launching point.

Oftentimes this works out to be a text file or Google doc that you can test with customers or colleagues to ensure you’re getting the proper points across. These will look different depending on the project, but in essence it’s a conversation between you and your customers. The design follows, creating the best visual way to bring this conversation to life.

Best of all, starting with content will save you time in the long run. It fosters efficiency and lets youwork out the smallest details before even getting started, so the design process runs smoothly.

Combining the Minds Behind Copy and Design

For a project to work, writers and designers have to first agree on the concept. Once they’re on the same page, both can work together to make a stronger final product; it will be easier to figure out how to proceed.

For example, if you’re making marketing materials in the form of sell sheets, the content will probably precede design, with the design working to support the words. Conversely, on a landing page, design is more important and the content should be made to fit the work of the designer.

Landing-Page.png

Remember, writers need to avoid meaningless words (which naturally flow in…) and designers don’t just function to make things pretty. It’s a game of give and take, but content should never be ignored.

If you spend time making the copy, the designer should make a design that ensures it is read and absorbed.

Copy-Formatting.png

The designer has to understand the tone and feel of the website and each section, ensuring readability through layout and whitespace.

A focus on the call-to-action (CTA) should work to draw the reader’s eye, and care should be paid that it properly fits the page. On the copy side, the CTAs should obviously be concise. On the design side, they should be bold and vibrant.

PageCloud-CTA-Design-Copy.png

The Key is in the Copy

Functionality is the most important thing for your design, but also for your text.

A good rule for writing copy is to focus on the customer’s problems and solve them. Why did they come to this site? What can you offer them?

The design should work to emphasize the content so that a viewer can quickly understand how you can help them. Design can be used to optimize readability, but the text also has to be concise. If adding an image, hyperlink, or phrase doesn’t help your audience’s understanding, cut it.

usp.png

 

HomeToGo product designer Harris Imran writes that “People connect emotionally with a product when it adds value to their lives, and good copy helps communicate that.” Focus on who you’re writing for.

What do they think about your brand (do they even KNOW about your brand?) and what do you want the reader to do after they read your copy?

Voice-Tone-In-Copy.png

Answering these questions will help you to efficiently identify and reinforce your brand’s tone and voice. For examples of useful copy-based solutions, Mailchimp and Mozilla have made their copy tone guidelines public for your perusal.

Another heavy hitter, Shopify’s Polaris has use cases for everything from applying color purposefully to communicate how things function in their interface, to the vocabulary and tone of every button or instruction that maintains their brand’s “voice”.

Screen Shot 2017-11-21 at 12.35.50 PM.png

You Can’t Have One Without the Other

Words and design are fundamentally intertwined, and in order to work effectively, they should never be considered separately.

Writers and designers are stronger when they work together, and more designers are increasingly being trained to create and focus on copy. Your written content should never feel as though it’s competing for attention against the design- or vice versa.

When it comes down to it, your writing and design should be centered on the reader and their needs, to enhance the overall user experience. You can’t build trust with a potential client without creating a first impression with content and design that are paired to improve communication. It’s a delicate balance.

----

Striking a balance between your content and design is seamless with PageCloud. The creative process itself is enhanced, because you’re not using a template that limits your designs or content. Try it free today.

PUBLISHED:Nov 22, 2017

Web Design, Content Marketing, Online Tips

 

Build The Custom Website You've Always Wanted