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?
It takes anywhere from 5 to 15 seconds for people to make that decision. Having strong copy on the area above the fold is important, but following web design standards matters just as much. First impressions will define whether your visitors decide to explore your website, or move on elsewhere.
Websites are always evolving, and these web design best practices lay a great foundation. From visual hierarchies to white space and navigation, this article will explain how to design a website that hooks your target audience from the get-go.
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 straightforward that you could launch your website the same day.
MailerLite is part of The Remote Company, a network of technology tools that include the no-code website builder, Ycode.
If you want to build more advanced web projects, like online marketplaces and member communities, then Ycode is the tool for you! It lets you visually create websites and apps—without having to write any code!
P.S. It also has an integration with MailerLite, so you can keep all your projects running seamlessly together.
You want to deliver the best user experience to everyone who visits your page (potential customers included) so that they’ll want to come back again! These 9 web design guidelines will help you to make the right first impression.
Good website design practices align with your brand imagery and stay consistent. You want people to see the same typography and color schemes on all your platforms. This strengthens brand recognition.
Before you start designing your blog or website, 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. We also focus on our diverse, international team which supports customers 24/7.
That’s why our website is clean, easy to navigate and you can see team members in all of our photos (like the pic of Ignas and Renata in this blog article). Our typography and signature green-blue-gray color scheme can also be seen in our emails and on social media accounts.
In other words, get straight to the most compelling points as soon as the visitor lands on your page! Visual hierarchy means ranking the most important elements on your website first, and then working your way down. This organizes everything into a logical sequence and makes it easy for your target audience to navigate through your site.
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 web 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. The best rule of thumb is to follow the conventional website layout, so that people can confidently navigate it. Wild and wacky website designs can still work if there is a clear and intuitive structure. But when in doubt, it’s better to stick with a more traditional layout that your audience is used to.
Here are some navigation bar design guidelines to follow:
Add your logo and link it to your homepage
Put the most important things first, so far-left in the navigation, or at the top for vertical menus
The far-right side is mostly for login/signup, contact or another CTA
Keep wording short and straightforward (so it displays nicely on mobile)
Add color and/or contrast to make the navigation stand out
Make the font large enough so the menu items are easily clickable
Test navigation bars to find out what order or wording works best
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.
Footers: List all the main pages of your website in the footer, so that if someone gets lost, they can scroll down and reorientate themselves from there
Breadcrumbs: These are tabs that show the pathway someone has taken. For example, when you shop on an e-commerce website for a pair of nail clippers, you might see your progress in the top bar looking something like this: Home > Products > Self-care essentials
Search bar: Skip the guesswork and let people type directly into a search bar to find what they’re looking for
Links within your page copy: If you mention another page in your web copy, link to it so that people can head to it straight away, instead of trying to find it themselves
The 3-clicks rule: Make sure that all your important pages are accessible within 3 clicks or less
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. It can feel pretty overwhelming!
The internet is also a busy, information-dense place and visitors will be quick to leave if your website adds to this chaos. Using white space (also called negative space) has become a web design standard over the years, and it shows no signs of going away in 2022. This is where you leave plenty of blank spaces between different visual elements, giving your website design room to breathe and making it instantly more attractive.
One of our favorite website design best practices for more white space is to add padding (aka, more space between things). You can do this by minimizing the amount of text, and also by using visuals to communicate your message. 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.
Get your message across in as few words as possible
Use paragraphs to break up long text
Include bullet points so that people can easily skim-read for information
(We just did it then! 😜 And it’s much easier on the eyes, right?)
We love this website from Wealthsimple. The color palette is soul-soothing and—true to their brand identity—simple. The minimal amount of text makes the site feel calm and grounding, and the graphic stands out all the more because of it.
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. Coolors is a color palette generator for designers, website builders and email marketers everywhere. But the first thing you see when you click their website is... a smiley human face!
The human side of this is on point! By instantly meeting Fabrizio, the creator and founder of Coolors, the brand feels warm, welcoming and 10x more personal.
When done right, pop-ups are an interactive way to get your most important message out there (and in this instance, show your human side). Just remember that if you decide to use pop-ups on your website design, make sure they…
Offer real value: To avoid feeling like an unwanted interruption, share something that will genuinely interest your target audience
Keep it simple: Information-overload isn’t a great look (remember that Times Square example), so make your message easy to understand in a matter of seconds
Have a clear CTA: At a glance, your target audience should understand exactly what action you want them to take
Include real photos of you and your team on the website
Where possible, let go of the jargon. The best web copy sounds as if you’re talking to a friend
Include a handwritten signature at the bottom of your web page
Link to a video introducing your colleagues and workspace (just like on The Remote Company’s website)
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:
Sign up for the newsletter
Put an item in their basket
Schedule a meeting
Contact you for more information
Read more blogs
Sign up for free so you can start building your own website today!
(... Or, go say hi to our friends at Ycode, if you’re looking to add more bells and whistles like a community, interactive tools or marketplace.)
Having a CTA for each page helps you evaluate the conversion rate. For example, is the goal for visitors to schedule a meeting but only a few are doing so? This tells you that your page might need some 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 one of the CTA boxes, you’ll get redirected to a separate page that interactively shows the cost and details of that service.
Websites were originally made for desktop, but in 2022 there’s no way around it: the majority browses on mobile devices (53.98% to be precise). Responsive website 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 devices. Take a look at this website template, for example. 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 growing website traffic. To rank your website in search engines and shine on Google’s first result page, you need to think about a couple of things.
Mentioning the most important keywords on your pages?
Using the right H tags in your headers?
Linking to other internal website pages, to guide people from one page to another?
Using compressed images to speed up your page loading times?
Checking your page speed to see what can be optimized? (You can test your speed with the Pingdom Website Speed Test.)
Using short, descriptive URLs?
When talking about SEO and web design guidelines, 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. Read more about image optimization.
People building their sites with MailerLite can also make their website an SEO success by adding a page meta title, meta keywords and meta 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.
Want to know the most important lesson from our web design guidelines? Always A/B test to see what web design works best for you. We can share our favorite 2022 website design best practices, but there’s no guarantee that your target audience feels the same way. Use the above tips to design your best website and start testing from there.
Pick a page to optimize and choose which conversion indicator to improve.
Change one thing, like a different button color or position.
Run both versions simultaneously for an adequate amount of time (here’s how to calculate that time).
Analyze the results to see which page version performs best.
Repeat until satisfied. Each A/B test brings you closer to a conversion success story that’s tailored to your business.
A/B split testing is available for landing pages and emails in MailerLite, and we're working on making it available for websites. For now, you can use landing pages to test web design variations with your target group.
Observing web design standards 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.
Make your branding (fonts, color scheme, etc.) consistent on all platforms you’re present on
Show what each page is about as soon as people arrive
Easily guide people through your website with a clear navigation bar
Let your web design breathe with plenty of white space
Be unique by showing your human side
Make your call to action buttons pop, so readers know exactly what to do
Use responsive design to correctly show your website on any device
Let your design be seen by using SEO practices to rank
Keep A/B testing to get closer to website design that best works for you
Editor's note: This post was published in September 2020, but has now been updated with new insights from our team.