Do you know how long it takes for people to decide whether they’re staying on your website?
Probably less time than it took you to read the headline and this sentence.
Are you still here?
Over the years, various studies have shown that it takes anywhere from 15 to 5 seconds for people to make that decision. Having strong copy on the area above the fold is important, but your website design matters just as much. What your website looks like upon first glance can have a big impact on whether visitors decide to explore or keep it moving.
Though websites are always evolving, these web design best practices lay a great foundation. Keep these 9 best practices in mind when designing your pages and then optimize until you’ve found your personal web design success strategy. You’ve got this!
Did you know MailerLite has its own website builder? Getting started is easy with our ready-made templates and drag & drop builder. In fact, it’s so straight-forward that you could launch your website the same day. Read how here.
Think about this for a minute: What words come to mind when you think about your brand?
For MailerLite, our brand story is about putting our customers first with software that is intuitive so people from all skill levels can use it and with our team of real people supporting our customers 24/7. That’s why our website is clean, easy to navigate and we use pictures of our team for everything. Our clear typography and signature green-blue-grey color scheme can also be seen in our emails and on social media accounts.
Good website design practices align with your brand imagery and stay consistent—people will see the same typography and color schemes on all your platforms. This strengthens brand recognition.
You’re creating your website for a target audience. If your design doesn't resonate with them, they’ll leave. This means: Get straight to the point as soon as a visitor lands on your page. For every page!
For our second website design practice, take a look at the Inner Light Aura homepage. The headline in large typography tells you what the service is about, and the pictures on each side show examples. The contrasting call-to-action (CTA) button clearly states what action to take. Further down the homepage, you’ll learn about the photography technique, the session itself, color definitions and the photographer, Sara. Once you’ve scrolled through the long homepage, you’ll know exactly what the service is about and how to proceed.
Not everyone that comes to your website makes their entrance via the homepage. Especially when you’re ranking for keywords or advertising landing pages. Any page could be the first thing a website visitor sees. This is why a good navigation bar is essential on your website design best practices checklist.
Even without the homepage, people should understand the logic behind your website structure and have a clear understanding of where to find what information.
Here are some navigation bar tips to follow:
The website of teamLab Borderless digital art museum has a sticky menu, and a locked navigation bar that moves and stays visible as you scroll down. It includes the CTA Tickets (right) and a Top link (left) that brings you back to the top of the page. This is useful for long homepages.
Imagine you’re standing in the middle of Times Square. Lights are flashing everywhere, over 350,000 people are around you, rushing to get to places and bumping into you. How do you feel?
Many will answer overwhelmed.
That’s not what you want for your website design. The internet is a busy, information-dense place and visitors will be quick to leave if your website adds to this chaos. Give your design room to breathe by adding white space (also called negative space). This will make your website design instantly more attractive.
One of our favorite website design best practices to create more white space is to add padding and minimize the amount of text. Scroll through Vicky Grout’s website to see what a good amount of white space looks like.
MailerLite customers can pick any of the premade website templates, where our designers have already added sufficient white space.
Try to get your message across in as few words as possible and use paragraphs to break up long text. Bullet point lists make it easy for readers to scan information.
We love this website from Atelier The Ché, the color palette is soul-soothing and the minimal amount of text makes the website feel calm and grounding, which is exactly what Sarah’s services stand for.
Since creating and launching a website has become so easy, it’s totally normal that you’ll compete with other people who are doing the same. So how can you distinguish yourself?
Think about what makes you different from your best friend. A lot, right?
We’re all unique in our own way, and your website should be too. Sprinkle your character on the text you write, the images you use and the colors you pick. People love seeing a website that’s made by real people, versus browsing on a generic page with not a soul in sight.
It’s for this reason that you’ll see real MailerLite team members in all of our pictures. It’s why we introduce new employees on social media. And it’s why in this article, I picked great web design examples from entrepreneurs and smaller companies I personally support, instead of talking about the obvious big brands.
Make a deeper impression with your visitors by showing them who you and your business are.
Just like the independent bookstore Books Are Magic. Their web design could use some tweaking (more below), but their human side is on point.
On their website, staff members write reviews and compile lists with their favorite reads. On Instagram, you can listen to storytime tales told by local authors or the shop’s staff. This makes their brand feel warm and welcoming, and much more personal than ordering your books straight from Amazon.
We’d personally wave our fairy wands to make the bookstore’s website a little less hot-mess, and a lot more organized and sleek. When you have so much valuable information to communicate, it’s challenging to keep your website structured.
Small tweaks can have major effects:
Every website has a purpose, whether it’s sharing a story or offering a product or service. Each individual landing page can be used for lead generation: the process of turning new visitors into customers or long-time fans.
With each page you create, think about what you want the reader to do. What call to action is relevant?
It could be to:
Having a CTA for each page helps you evaluate the conversion rate. Is the goal to schedule a meeting but only a few visitors are doing so? This tells you that your page might need more convincing copy, an easier scheduling system or a better CTA.
This service landing page from Nomads at home clearly shows all available services and what each entails. Once you click on 1 of the CTA boxes, you’ll get redirected to a separate page that interactively shows the cost and details of that service.
Websites are originally made for desktop, but in 2020 there’s no way around it: the majority browses on mobile (52.03% to be precise). Responsive web design isn’t nice-to-have, it’s a must.
With MailerLite’s website builder, you don’t need to worry about this. We automatically make sure everything you design on desktop also looks good on mobile and tablet. Just look at Stay Home Festival’s website, where the different elements resize and reorder as the screen size changes.
SEO is short for Search Engine Optimization. If that doesn’t ring a bell, we’ll explain the practice in this article about SEO for landing pages. To rank your website in search engines and shine on Google’s first result page, you need to think about a couple of things.
When talking about SEO and web design, pay extra attention to your images. Instead of using pictures in their original size, resize and compress them before adding them to your website. The more compact your images are, the faster they’ll load. Click here to read more about image web optimization.
People building their sites with MailerLite can also make their website an SEO success by adding a page title, keywords and description in the website settings.
For our example, let’s look at the about page from Women Who Draw. Though the website is heavily focused on visuals, the about copy includes relevant keywords that people would type into Google to find a directory like this one. Keywords like “female (professional) illustrators” and “women artists” are naturally woven into the about-page text.
The most important lesson on this list? Always A/B test to see what web design works best for you. We can share our favorite 2020 website design best practices, but there’s no guarantee that your audience reacts the same. Use the above tips to design your best website and start testing from there.
How to A/B test website design:
A/B testing is available for landing pages and emails in MailerLite, as we're working on making it available for websites. Use landing pages to test web design variations with your target group.
Great website design plays a big role in whether visitors stick around to explore your content or navigate to the exit button. These 9 best practices will help you to design a website that’s pleasing to the eye, but don’t forget to keep optimizing along the way. Continuously testing new design elements is the only way to discover what your target audience is really attracted to.
Editor's note: This post was originally published in April 2020, but has been updated with new insights from our team.
I’m Megan, Content Writer at MailerLite. You can find me in Berlin, NYC or somewhere escaping winter in Asia. I have helped many start-ups grow their online visibility. Blogging has always been my thing—from running artist fan pages as a teenager to now discovering upcoming talent on Sign This Kid.