If you think your homepage has to be filled with visuals, graphics, images, and many colours to help your content stand out from others, that’s not entirely true.
You may be able to design your homepage with great and relevant graphics. But you must be mindful to include visuals that are there to support your copy so that readers understand your message clearer than without. They shouldn’t be there to draw readers’ focus and attention from your message.
If your copy is not designed with your audience experience in mind, your visitors may not pay attention to it and even ignore it altogether.
That is because people want to be able to scan your copy to pick out your content as quickly and as hassle-free as possible.
If it’s not designed to make it easy for them, they will prefer to leave your page.
I would like to use Circle.so as an example because their homepage isn’t overly cluttered with graphics and visuals. Also, how their copy is placed, font sizes, colours and treatment are done with an intention to help their audience pick out the right messages.
This is also helpful for you if you have a lot of text to add to your homepage. This teardown will help you know how to use design principles to present your copy for it to be engaging and interesting to your audience.
Remember, messaging-first — not design-first.
This is the homepage design of Circle.so
How to design your copy to be more engaging
You must be wondering what you can do to make your copy more visually appealing. After all, it’s a bunch of text that you’d like your audience to read. Everything is important, you might say.
As much as we want someone to read everything that we write on the homepage, we can’t control where they place their focus.
People don’t want to spend more time and effort than they need to know what you have to say. In that case, it’s up to you to make it easy for them to read your content.
That’s where copy design comes into play.
Let’s explore how you can do that with Circle’s homepage website copy below.
Use different font colours
- The colour of “creators” is different from the other words. Not because it’s nicer or looks better. It’s because of the difference in colours that creates a contrast between the grey and purple. This contrast brings the reader’s attention to the word “creators” and helps with conversions. In other words, the copy is saying, “calling all creators, this platform is for you!”
- The colour of the body text is made lighter than the main header title and the word “creators”. This contrast makes it easy for the reader to know where to scan for the main messages – title and CTA.
Let’s see how the homepage header looks like when the copy in the header is in the same colour (spot the difference between these two images):
Use different font sizes
- The most important copy here is the testimonial itself. It’s font size is made the biggest to lead your eyes to it first.
- After reading the copy, lead the reader to take action. The CTA font is the next biggest in size.
- In fact, the product does not come first. Notice the promotion copy that says “Want to see Circle in Action?” has the smallest font-size.
Use space around CTAs
- Notice the colours and font-size of these CTAs are simple and not bold. Yet, you will be drawn to them by the space around them.
Last words
When creating your homepage, always ask yourself if your visuals, graphics, images and content are supporting or fighting against each other.
Make sure the messaging is clear first. If it’s not, work on the colours, sizes and spacing of your copy. Only once this is done, then it’s time to consider adding other visuals to emphasise your message further.
If adding visuals are distracting and don’t add value to help your audience learn easier or better on your homepage, you don’t have to add them in or remove them.
