As a funnel and web designer, I’ve noticed that often, entrepreneurs aren’t able to tell the difference between good design and bad design. This article will give you 3 simple tips and examples you can use to know whether or not your website or funnel has a good design that leads the user towards your conversion goal, or whether it’s an ugly mess that’s distracting them from taking your desired action.
Let’s get started!
One of the most important aspects that can affect your website or funnel’s performance is the readability of the text on the page.
This can make a huge difference on whether your target customer is interested in reading more on what you have to offer vs being overwhelmed and wanting to leave.
A great place to start is with spacing.
When designing any page online, it’s important that all your text is spaced properly in a manner that makes it as easy as possible for the user to scan and understand what exactly it is you’re trying to get across.
Remember, most people on the web these days don’t read anymore – they scan!
Attention span is getting shorter and shorter as time goes on, and it’s crucial that you address that through the way you space your text.
When a paragraph of text on your page is cluttered and lines are seemingly stacked on top of each other, it makes it almost impossible for the user to be able to accurately ‘glance’ at a paragraph and understand what that paragraph is about.
To make this easier, I suggest you ALWAYS use a line spacing of 1.6 for your body text. Check out this example below:
As you can see, the text on the right side is much more readable and off the bat, way easier for your eyes to decipher what’s being said without needing to read word by word.
2. Good Use of White Space
Along the lines of readability comes the proper use of white space.
White space is essentially the space on a web page that is unused – the way I like to think of it is as a breathe of fresh air.
When you have no white space around elements on a page, it can be almost suffocating – giving a feeling that everything on the page was jam-packed to be as close as possible.
This can take away from the intended effect of each element on the page, because there is no ‘room to breathe’ between one element and another.
Check out this screenshot of Monday.com’s home page below:
As you can see, each of these feature sections is clear, easy to read, and are separated from one another so they each have their own importance.
Now compare that to the screenshot below where I removed the padding from both those sections and notice the difference:
Now, both of these feature sections are so close to each other that you can’t tell which image is with which block of text.
Immediately, the message gets muddled and the user looses site of what’s really trying to be said on the landing page.
That being said, make sure you guys are using white space! It’s tempting to cram as much information as closely as possible on a page, but remember: users are now conditioned to scrolling on web pages, whether that be on mobile or desktop.
Use that to your advantage and give them a clean and ‘breathable’ experience using whitespace.
For the last tip in this article, I want to explain the importance of congruency.
It’s crucial for a design to be ‘good’ that all the elements on the page are congruent.
That means things like your button colors and sizes are all the same (except if they’re on that specific background color, then the color can be different).
Things like your headings are using the same size based on their hierarchy (Headline vs Subheadline).
And things like all your images and graphics having the same ‘style’.
Check out Slack’s home page below:
As you can see, the page is EXTREMELY congruent.
All the headlines use the same size and font.
Similar colors are being used throughout the page, rather than looking like a ‘rainbow’.
And the body copy is all very congruent as well.
This may seem super simple, but its something a lot of business’s ignore.
For example, checkout the Yale School of Art’s website below.. (Yes, as in Yale University).
As you can probably tell, this is one of the biggest messes in web design I’ve seen till date.
Not one thing on the page is congruent, and you can barely tell what the page is about.
Use this as a warning friends.
Don’t be like Yale School of Arts (lol)
And there you have it!
You now know 3 actionable tips that you should employ when building out your next web page, whether that be funnel or website.
Hope you enjoyed 🙂