11 essential web design best practices and tips for 2023

Probably less time than it took you to read the headline and this sentence.

Are you still here?

It takes 5 to 15 seconds for people to make that decision. Following web design best practices helps you create a first impression that convinces people to stay. 

This article will explain how to design a website that hooks your target audience.

We’ll cover:

1. The importance of consistent design 

2. How to create a visual hierarchy that highlights your most important content

3. Navigation ideas that make it easy for people to browse your site

Plus plenty more helpful tips. Let’s jump in! 

Creating a great-looking website isn’t guesswork. Follow these best practices to build a website that looks professional and helps visitors find the information they need. Or get started in a flash by choosing from one of our expert-designed website templates. Browse some of our favorites in the carousel below.

Look at any professionally built website; you’ll notice each site uses the same fonts, colors, logos, and styles on every page. 

There’s a good reason for this consistency. Using the same visual elements results in a recognizable and coherent brand identity. What’s more, you’ll save time when creating your site as you don’t have to think about how each element looks every time you add one. 

Here are 4 factors to consider that will help with design consistency. We’ve also included some free tools to help you set up. 

Create a logo

Adding your logo to your site makes it obvious the page belongs to your brand. 

If you don’t already have a logo, automated logo generators from Shopify and Adobe will create one for you instantly. Or use Canva if you want a simple way to put your graphic design skills to the test. 

Define your color palette

Choose colors that complement each other and reflect your brand. Use a tool like Coolors to browse color schemes until you find one you like. 

Choose typography

Most brands use two or three fonts across their website. This typically includes a font for your website copy and one for your headings and buttons. 

Some font pairings work better than others. Use Fontjoy to browse pairings until you find one you like. 

Example: MailerLite

Check the MailerLite website to see design consistency in action. We use dark green, light green, white, black, and gray across our website. Each page also uses the same fonts for text and headings.

Define your global styles before starting the design process

Once you’ve chosen fonts and colors, decide where you will use them. Do this before designing your website so every element uses the same styles. 

The MailerLite website builder allows you to define global styles like the color and font of headings, titles, body text, and buttons from the settings menu. 

The styles you choose are reflected on your website whenever you add one of these blocks.

A visual hierarchy is how you rank and display website content. An effective visual hierarchy organizes your site content so that:

1. The most important elements are the most prominent.

2. Content is in a logical sequence that is easy for visitors to navigate.

Creating an optimized visual hierarchy can be complex. Professional designers use an element’s size, color, contrast, and spacing to guide the visitor’s attention across the page.

You can keep things simple by following these three rules:

1. Make sure the most important elements are large and near the top of your page

2. Use contrasting colors to highlight aspects like your CTA buttons 

3. Make non-essential details smaller and put them further down the page

Example: MailerSend’s home page

The MailerSend homepage is a clear example of a visual hierarchy that prioritizes important information. 

The title text contains the service description. It’s much bigger than all the other elements and is placed in the position people first look when they land on a page. 

The subtitle provides further benefits about the service; it’s large but not as large as the title. CTA signup buttons are important for conversions, so they have a color that contrasts with the rest of the page. 

As you scroll down, you can see more information about the benefits of individual features. These aren’t as important as the above elements, which is why they are placed lower in the page.

Website spacing is key to good website design. Getting spacing right ensures your text is clear, content is organized, and visitors can focus on the most important parts of your page. 

White space (also known as negative space) is the space between page elements. Use it to ensure it’s easy for visitors to digest the content on your website. 

White space improves readability

Here’s an example that shows the impact of white space. The left screenshot shows one of MailerLite's professionally designed templates with the horizontal white space removed from between each element, while the right screenshot shows the original template. 

The page with the white space looks far better and is easier to read. This is an extreme example, but it clearly shows the benefits of using white space in your web design.

White space helps you group content 

You can also use white space to group elements together. Elements in the same group are closer than elements in different groups. 

The screenshot of the Notion homepage below shows this theory in action. All the top menu items are grouped and separate from the main hero items, which are separate from the product explanation items further down the page. 

The white space makes these groupings obvious, despite no barriers or lines separating each element.

Your design should make it easy for people to navigate your website and find the information they need. It should push people towards the website KPIs that impact your business goals.

Here are five key web design elements to help people navigate your website.

1. Header menu

Your homepage isn’t always the first page people visit. Your header bar makes it easy for people to find the information they need from any page on your site.

Check out the MailerLite header as an example of the type of content you can include in a header bar. 

1. Logo: Lets people know the page belongs to Mailerlite. It also links to the MailerLite home page where people can learn more about our company.

2. Drop-down navigation menu: Provides access to product pages, content resources, and our example galleries.

3. Links: Guide people to important pages so they can find out more about the company and product.

4. Sign-up button: This is the most prominent element due to its contrasting color. We want anyone who lands on our website to sign up for our product. 

5. Login button: Makes it easy for existing customers to access their account from any page.

Your header bar won’t include the same information as ours. Consider what your most important pages are and then add them to your main navigation menu. 

2. Breadcrumbs

Breadcrumbs are navigational elements that reveal where the current page sits in your overall website structure. 

Websites typically add breadcrumbs under the header or at the bottom of the article’s body content. 

The BBC website makes it obvious that the current article is in sport, football and European football categories. The user can find more information about any of these topics by clicking on the link. 

3. Search bar

The search bar makes it easy for people to find specific content on your website. It’s helpful if your site has many pages that aren’t easily accessible through menu clicks. 

The Wikipedia search bar is an essential tool for website visitors who want to find information in the encyclopedia.

4. Links in body copy

Body copy links make it easy for people to discover more information about the topics your article discusses. 

Here’s an example from the MailerLite blog. The below section on steps to building a website makes it easy for people to discover more about our no-code website builder. 

5. Use expandable accordion blocks

It’s sometimes better to answer questions within the page the visitor is on, rather than directing them to a new one. But adding too much text can complicate the design of your website. 

Using accordion FAQ blocks to add expandable content is an easy way around this. They let you include more information without cluttering up your page.

Quickly add an accordion block to your page with the MailerLite page builder. Drag-and-drop the block into the area where you want it to appear and then edit the heading and information in the drop-down box. You can see an example in the screenshot below.

When building a website, think about how the design will impact the way a person with a disability interacts with it. 

The Web Content Accessibility Guidelines, produced by the World Wide Web Consortium, are a set of recommendations that web designers can take to maximize the accessibility of their content. 

Some of the key guidelines include:

• Offer text alternatives for non-text content. Do this by adding captions or alt text to content like images, buttons, or video files

• Include text transcript, sign language interpretation, or captions for audio content or videos 

• Make content distinguishable by increasing contrast via colors and other methods, ensuring no text is lost when people resize text and ensuring audio volume can be adjusted or paused

• Make content operable by people who use a keyboard rather than a mouse to browse websites 

• Content shouldn’t include flashes at rates that can cause seizures 

• Pages should be organized and labeled so users can navigate the website effectively

You can consult the entire set of Web Content Accessibility Guidelines when you're building your website.

Each page on your website should have a purpose. Your visual hierarchy and navigation play a big part in pushing people to this goal, but your call-to-action (CTA) is where you convince them to take the next step.  

Make your CTA design effective by:

• Giving it a prominent position on your page

• Using contrasting colors to make it stand out

• Using multiple buttons throughout your page

• Combining your CTA with other elements to make your offer super clear

• Using different CTAs for each page

The Figma homepage ticks many of the above boxes.  For example:

• The page has CTAs in 2 prominent positions, and the header CTA stays in position as you scroll down the page

• The blue CTA button contrasts with the white background

• The page has the 2 CTAs you can see in the above screenshot, and a signup form at the bottom of the page

• The primary CTA combines with the headline and the subheader to create a clear offer

Do something similar on your website to boost conversion rates. Read more about how to create a CTA that works in this article.

Or use content blocks

Content blocks help your offer stand out even more. For example, we use a block to embed signup forms on every MailerLite blog post so people can sign up for our product or email list. 

This is more effective than a simple subscribe button because it provides detailed information about our offer. See an example in the screenshot below.

The MailerLite website builder makes it easy to embed this type of content on your page. Use our form builder to add forms to any part of your website. You can add an image, customize the colors, and add or remove fields.

Or use an ecommerce product block to sell your digital product anywhere on your site. Connect the block to your Stripe account to automatically populate it with descriptions and images. When someone hits the buy button, they go straight to the Stripe checkout page.

Optimize your web design for desktop and mobile devices. Achieve this by using a responsive design with a layout that changes depending on the screen size the page is being viewed on. 

Most websites use breakpoints to enable responsive design. These are the points when the web page layout changes to make it look better on smaller devices. 

For example, the website might organize its content horizontally when a browser has a widescreen 1920x1080 aspect ratio. But it will stack content vertically when it switches to a narrower 1080x1920 aspect ratio like many smartphones. 

The website may also start to remove content, move it to the bottom of the screen, or shrink links into dropdown menus when in a narrower aspect ratio. 

You can easily see how a website’s design changes responsively by opening a window on your computer and gradually resizing it.

You're unique, so your website design should be too. There are many ways to make your branding stand out from the crowd. Here are 4 brands that have done a great job of creating websites that look great and are instantly recognizable.

The Verge: Stand out with distinctive colors

The tech news industry is incredibly competitive. The Verge’s distinctive color palette of bright colors on a black background helps its website stand out. The brand uses these colors across all online assets, including social media, email, and video.

Crypto newsletter The Milk Road created a milk carton character that it uses throughout its website, social channels, and newsletters. The character means any of the brand’s content is instantly recognizable as no other brand can use this design.

MailerLite: Add a human touch

At MailerLite, we use images of our team across our website and blog. The people who work at our company are unique to us, so using these images helps our website stand out.

Ogilvy: Use animation

Ogilvy is a leading advertising agency, so it’s important the company website catches the eye of visitors. One way the company does this is via animations that come into effect as visitors scrolls down the home page. 

MailerLite customers can use our animations feature to add a similar effect to their websites. Choose either fade, flip up, or zoom effects to easily add animation to your pages. Below you can see an example of a page with the flip-up effect.

When people visit a website, they have expectations about how different design elements should work. While you want your website to be unique, you should always keep widely accepted website design principles in mind when designing your website. 

Some examples of these design principles include:

• Your header logo should take people to your home page

• Underlined or highlighted body text should signify links to other pages

• Use the hamburger button to let people expand a menu

• Use the gear symbol to let people open the settings

• Include a menu in your header

• Use social icons to link to your social media profiles

• Use app store buttons to link to your app store listing

Using these best practices in your site ensures that when people land on your website, they will instantly have a good idea about how to navigate it.  

Search Engine Optimization (SEO) is all about optimizing your website to increase the likelihood that it shows up on Google. This is important because Google can be an immense source of free, highly targeted website traffic. 

Your website’s design plays a big part in how well your website ranks, so it’s essential that you consider SEO best practices when designing your site.

Find out more about SEO in our beginner guide. 

Here are 4 factors that influence SEO that you should consider when designing a website. 

1. Site loading speed

Loading speed is a key ranking factor—your site must load fast if you want to rank on Google.

It's better to switch out large elements that take a long time to load for smaller elements that take up fewer server resources. This is the case even if you think the larger element looks better.

Use Google’s Page Speed Insights tool to see which design elements are slowing your website down and then remove or optimize them. 

This tool breaks load time down into the following factors:

• First contentful paint: How quickly the first element loads onto the user’s screen

• First input delay: How quickly a page reacts after a user clicks on an interactive element

• Largest contentful paint: How long the most prominent element visible on a page takes to load

• Cumulative layout shift: How much elements move on a page move while loading

Try to get each of these elements into the green when building your website. Remember that optimizing for speed won’t only improve your site’s SEO; it also improves the user experience.

2. Images

Image files can be large, causing your website to load slowly. Get around this by using modern file types built for the web like WebP and AVIF. Images served in these formats load faster than images served as JPGs or PNG images.

Ensure that all your images have descriptive names and alt tags. This tells Google what your images are about, so the search engine can surface them in search results.   

3. Keywords

Add search keywords to your website’s titles, headings, and body copy. When you add keywords, your website will likely rank for the relevant terms. 

4. Mobile-friendliness

Creating a responsive website isn’t only important from a user standpoint; it’s also a key part of ranking on Google. 

Google switched to a mobile-first model for ranking websites in 2019, which means the mobile version of your site is more important when ranking on the search engine.

Website design doesn’t stop when you publish your site. Keep testing it to ensure your website pushes users toward your goals. 

A/B testing is an easy way to see the impact of changes to your pages. It’s vital for conversion-focused pages like landing or sales pages where a slight increase in effectiveness can lead to significant revenue increases. 

Here’s how to A/B test website design:

1. Pick a page to optimize and choose which conversion indicator to improve.

2. Change one design element, like the button color or CTA position.

3. Run both versions of the page simultaneously for an adequate time (here’s a calculator).

4. Check your website analytics to see which page version performs best.

5. Repeat with different design elements. Each A/B test can improve conversion slightly, which builds up into big gains.

MailerLite makes landing page A/B split testing easy. Just create two versions of your page and use landing pages to test web design variations.

Keep these guidelines in mind when browsing the web. You’ll likely notice that almost all professionally built sites use these best practices. 

The reason for this is that they work. Using them in your own site will increase your chances of ending up with a website that looks high-quality and is a joy to browse.

Editor's note: This post was published in September 2020, but has now been updated with new insights from our team.