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:
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.
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
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.
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.
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.