Designing & Developing With Copy

Powerful brand messaging:

• Gives your audience the information they need to know at a glance
• Answers questions
• Solves problems
• Gets your audience excited about your product or service

One of the most important considerations for designers and developers when working on a site is to intentionally build and design with copy, not around it. This creates stronger sites which tell a cohesive brand story.

How to build with copy on your site

Strong websites start with a sitemap that determines the order and number of pages on a site. This process allows designers and developers to organize and categorize content in a way that benefits the user experience.

After an overall site strategy has been determined with a sitemap, wireframes are used to work out the design and layout on each page. The importance of wireframes should not be underestimated when it comes to designing and developing around copy. This process allows one to visualize how messaging lives on a website and interacts with design. Wireframing helps with information hierarchy as well; the important content rises to the top in order to clearly communicate who you are, what you do, and who you do it for to your audience.

Here are a couple of do’s and don’ts we like to use when designing/developing around copy:

Do

Infuse personality

Don’t be afraid to boldly express yourself. Play around with type styles, motion, and color to highlight key messages.

Keep it tidy

Keep things tight and snappy to draw and retain visitors' attention.

Be consistent

Ensure that copy reinforces key themes and ideas on different pages across the site.

Tell a story

Balance copy, white space, and branded elements such as icons, illustrations, and motion to tie everything together into a cohesive site experience

Don’t

Be overly verbose

Your audience makes a decision regarding your brand in seconds and using long-winded, bland copy will instantly drive them away from your site. Strategically trim copy to showcase the most important messages.

Forget hierarchy

The order you present information matters, so be strategic in how you arrange and display copy—for example, headers go before subheaders and subheaders go before body copy.

Make your audience guess or search for information

Smart designers and developers pair copy with design to proactively solve and answer questions for your audience as they navigate through your site.

Sites that inspire

Twisted Tree Baking Company

Our strategy: A light-hand approach to site messaging, with an emphasis on story

Why it works: By clearly communicating the Twisted Tree story through a clear hierarchy, customers are drawn to place an order in-person or online.

Vudu Consulting

Our strategy: Keep things playful, but informative

Why it works: Regular IT websites are wordy and dull, but Vudu combines strong messaging with playful brand elements to create a seamless user experience—entertaining and educating potential customers.

Esports Performance Academy

Our strategy: Clearly communicate nuance and demonstrate professionalism while keeping things energetic

Why it works: The Esports Performance Academy site balances longer copy with modern, exciting design elements. The overall site clearly communicates what they do for all the audiences they serve through a site experience that communicates their fresh, holistic approach to gaming.