Matching design and copy for optimal results
The close relationship between design and copy has been covered many times in this blog. Great copy needs inspiring design. And vice versa. However, many times designers and writers both fall into a trap- writing without consideration for design and designing without understanding the content. The result: average results.
Agreed that writing and designing cannot happen parallely but is done sequentially, whichever the first one may decide. However, the broad framework, wireframe and theme is decided at the initial stages and that may give designers and writers sufficient cues to sync their work with each other. Secondly, designers and writers can sit together and decide on an approach they would be taking like voice and tone, messaging etc. When designers and writers collaborate, the whole is greater than the sum of the parts. It just doesn’t create a good website but also higher engagement and conversions.
How to Match Copy and Design?
When copy and design are in sync, they lift each other. Good copy looks more impressive with good design. Good design looks more impressive with good copy. Here’s how to match copy and design for better results-
Voice and Tone
Every website or app needs a voice. Voice gives personality to the website and makes the communication with the user personal. Voices can be authoritative, humorous, professional etc. However, voice needs right design support to make the maximum impact. Humorous copy need playful design. Professional voice demands design that reflect it. And vice versa. So, it is important for copy and design to bring out the brand’s voice and tone and in sync with each other. That’s when messaging gets powerful and influences your visitors.
Adidas beautifully aligns copy and design to create maximum impact with its messaging.
Readability
Good copy needs to be read. And design with proper selection of fonts, good font size, spacing and contrast etc., can improve the readability of the copy. Tinyletter uses contrasting design, spacing and fonts to make the copy read better.
Content Hierarchy or Structure
“Users generally read 20 to 25% of the content on a web page.”
Content hierarchy or structure is the strategic ordering of information. As various studies show that users only read up to 25% of content on web pages and scan the rest, the ‘inverted pyramid’ from most important to least is the best approach. It helps in easy information flow, improves comprehension and boosts conversions. The content hierarchy of the website needs to be supported with appropriate design properties to help the user understand the copy.
Check how in the image below, the information is neatly arranged in the order of importance from an user’s point of view. Design has beautifully supported the copy in ordering the content and making it easy for a busy reader to find the most important information like phone number, visiting hours, address and a ‘book an appointment’ button first.
Microcopy
Microcopy is small pieces of content that is used to guide a user. It can be an error message, Call To Action etc. It can make a huge difference in the way a user engages with your website.
You can read my post on How to write microcopy that boosts UX and gets more conversions to know more on the importance of microscopy and how to write it.
Design and copy both play an important role in increasing the efficacy of the microcopy. Let’s take the example of error messages. Users don’t understand technical error messages. However, with good copy and design, you can make error messages easy to understand and engaging. Similarly, design and copy both impact the number of clicks on CTA buttons.
Source: UXplanet.org
Every letter. Every sentence. Every paragraph matters.
So is every icon. Every graphic. Every color.
When copy and design blend together, it can make the messaging powerful, maximize its impact and impress users.
What are your thoughts on matching design and copy? How you do it in your projects? Share with us in the comments below. Liked the post? Please follow, clap and share.
Get better collaboration between designer & copy writers
Do you struggle to visualize website content copy on design? Try “Scribble” — World’s first content hand off tool for designers & copy writers.
Sync artboard to the cloud, invite copy writers to replace dummy text with real ones and sync back final text in Sketch file locally.
Over 40,000 designers & copy writers around the world use Scribble for 10x faster collaboration. Are you? Grab your Free copy NOW.
