Design Standards:

Best Practices for web design and usability

Designing a website is no walk in the park. Every detail needs to be carefully thought out and meticulously planned.

Your website is the face of your company and should tell the users your story. Great web design evokes emotions and drives sales, whereas lackluster design can leave users feeling dissatisfied or even confused.

In this comprehensive guide, we’ll be looking at how you can design your website to get users to do exactly what you want them to. We will cover page layout, the best form of navigation, how to use colors effectively and much more. Our goal is to give you everything you need to formulate your ideal design, one that will allow your brand to flourish.

Table of Contents

Click the toggles to navigate to the sections of the guide

share with friends

Chapter 1 – Page Layouts

The layout of your page is arguably the most important design decision that you will make. It will influence every other component and will dictate size and proportions.

When you’re deciding on your layout, it’s a good idea to plan out the elements that you want on each page. This will allow you to make a more educated decision about the layout and will prevent you having to go back and change it later which can be costly.

Template Consistency
Within your page layout, it’s important to keep your page layout roughly the same. Some amateur designers make the mistake of thinking that variety is a good thing.

The truth is that users like consistency, it helps to build a brand that they are comfortable with. Each of your content pages should have the same template, and each of your product pages should use the same template.

If you’re allowing people to purchase on your website, then this is particularly important. You shouldn’t make the customer hunt for the ‘buy’ button; it should be in the same place every time.

Keeping all of these elements in the same position might seem trivial, but it makes the user experience seamless. Not only that, but it’s much easier and quicker to create a website that relies on a strict template rather than having bespoke pages.


Visual Hierarchy
Humans are particularly visual animals and to figure out the page we rely on what we see on the screen just as much as the substance of the content itself. Creating a visual hierarchy is key to delivering a simplistic and usable website to your users.

Without some form of visual hierarchy, it can become tiresome and confusing to navigate your page. Huge chunks of black text don’t exactly inspire confidence, and it doesn’t drive users to continue to read.

Instead, you need to utilize variously sized headers, splashes of color and indentation to create a clear hierarchy that informs the user.

Most pages will use the title of the page as their Header 1 tag. This is the largest text on the page because it lets the user know they are on the correct page and tells them what it is about.

The next size is the Header 2 tag, and this is often used for section titles, in the same way, that a book breaks its sections up into chapters with a large chapter text in between. It’s often a great idea to use a splash of color in these Header 2 tags to show that they are important and to differentiate them from future headers.

Within each of your sections, you’ll often also have sub-sections, each of which will have its distinct content and header. Many designers will user a Header 3 tag that is only slightly smaller than the Header 2 tag, but to differentiate between them, they often will use a darker shade of the same color, or simply the standard black text.

Although header tags go all the way to Header 6, most designers rarely use anything past Header 4. This tag is usually used to break-up a sub-section into smaller parts and is very often the same size as the body text, but it might be bolded or in italics to separate it.

If you’ve read a book recently, you might have noticed that many publishers will start their chapters and paragraphs with an indentation. This was used instead of an empty line because it helped to save space in the book and meant that they didn’t have to create as many pages, saving the publisher money.

However, indentation is rarely used on the internet. Although some designers will use it after headers to show that it is the start of a new paragraph. In most cases, it’s best to use either an indent or an empty line, rarely both together.


Call to Action
Unless your website only serves to give people information and to never expect anything in return, you’ll likely use ‘calls to action’ (CTA) which will prompt people to act.

The CTA might be as simple as a ‘buy now’ button that people click to purchase your products. Or it could be a prompt for people to submit a proposal or ask for a quote. Regardless of the complexity of the task, your CTA should be simple and precise.

As we mentioned in the previous section, your users should never have to hunt for the button. To prevent this, your CTA should standout from your content and draw the attention of your user’s eyes.

Presumably, the CTA is the most important part of the page, and your end goal is to get the user to take action. With this in mind, your CTA needs to be included regularly on the page, it should be bright, and it should be large. In many cases you need to provide encouragement for your customer to purchase, making it complicated won’t help!

It should be extremely obvious what the CTA is for and what will happen. There’s no point in trying to trick your users into clicking the button, they’ll only be annoyed and refuse to act.

Instead, let them know clearly what the action is and then encourage them to perform it.

If you ever look at a CTA on a popular website, you’ll find that they use words and phrases that tell you to do something i.e. “Buy Now”, “Submit Your Review”, “Fill in the Form”, “Create an Account”.

The CTA never says “Maybe purchase the product, please”, it’s direct, it tells you exactly what to do and that’s why it has a higher conversion rate.


One company that is excellent at cross-marketing their other products is Amazon. Once you scroll past the above-the-fold product page, you’ll find that they show you related and recommended products.

Some designers still believe that it’s best to never distract the user because it can cause decision fatigue and prevent them from purchasing anything.

There might be some truth to that, but in general, if the user has scrolled past a certain point they might not be interested in purchasing that product. Instead, market your other services or products.

The best way to do this is to show related products and services that are likely appeal to the user but won’t cannibalize your sales.

For example; on a page about a PC monitor you might also recommend an HDMI cable and a keyboard. Both of these are related products that the user might also want, but you’re not showing another monitor that could confuse them.

The key is to recommend products that enhance the user’s experience, rather than switch it out for a similar product that would fulfil the same purpose.

Not only is this helpful for the user, but it also encourages them to buy extra products and is therefore likely to increase revenue.


Page Width
Another thing that you need to consider when deciding on your page layout is the width that you want to utilize. It might seem appealing to have a full-width page, but often the space around the content is just as important.

The purpose of your website and the way that you expect users to navigate around it will have a huge impact on the correct width. If you have an e-commerce store, then it might be sensible to use a full-width page because the amount of information and photos needed will take a lot of space.

However, if you run a magazine like Vogue, then the space around the content is crucial to presenting the right image. It helps to make the content more legible, and it’s visually more appealing. A page that is too cramped and compact can be hard to consume, especially on mobile.

It’s not just about appearances though, full-width pages will mean that you’re serving larger and more detailed images to the user. This is going to result in substantially longer loading times which could be a problem for users on slow connections or mobile.

So, when you’re deciding on whether to use a full-width content area or a two or three-column setup, keep in mind how you expect users to use the page and what you need to show.

Chapter 2 – Navigation

The navigation of your page can make or break the entire design. In the past few years, more designers have tried to hide away the navigation menus in an attempt to make their designs more aesthetically pleasing.

Unfortunately, in many cases, this has created websites that are beautiful but difficult to use. Finding the right balance between aesthetics and usability is key with your navigation.

It’s important to remember that we’ve developed a habit of seeing the navigation in the upper right corner of the page. Any diversion from this is unexpected and can make navigating the website a pain.

In general, it’s best to work within the traditional framework of navigation placement and make changes to suit your needs.

Logo Link
In the past, we’ve seen websites that have a “Home” text link on their navigation bar. At one point in time, this might have been useful, but the overwhelming majority of internet users are now aware that clicking the logo will usually take you to the homepage.

With this in mind, it’s possible to save valuable real estate on the screen by removing the “Home” link and using the logo to redirect people to your homepage.


Primary Navigation
The primary navigation bar is the main place that you expect people to click to navigate around your website. In almost every case this is the bar on the top right of the page.

You can include whatever you please on this navigation menu, but generally, it’s best to include your contact page, your main CTA button and then other useful pages.

What you decide to include on this bar will depend on what the purpose of your website is. If you sell products, then you might have categories if you sell services you should have a CTA and contact page, but if you’re a magazine, you might have content groups.

With this bar, you need to be careful to avoid including too much text. It’s going to be visible straight away on every single page of your website, and therefore it can have a huge impact on the aesthetic of the design.

To bring more of the content above the fold, it’s advised that you keep the primary navigation to a maximum of 120px in height. Fortunately, this is also a great size for your main logo. It will be visible and easy to interpret, but not overly large so that it interrupts the user’s experience.


Secondary Navigation
Your secondary navigation will be the second set of menus that people can use to navigate your website. In most cases, this will be in the form of breadcrumbs that you find just below the menu and just before the title of the page.

Let’s say that you’re looking at a PC monitor; the breadcrumbs might be:

Electronics -> Peripherals -> Monitors -> BQ123 Monitor

The purpose of breadcrumbs is to tell you where you are on the website. It also makes it extremely easy for you to navigate back to the most likely pages that you want to see.

In this example, you can go to the monitor’s page with one click and look at another product if you don’t like this one. Some designers make the mistake of removing these breadcrumbs for the sake of appearances, but you can hide them under the title or make the text smaller.

Many users look for the breadcrumbs as a way to navigate the website, so if you have hundreds or thousands of pages, then they can be extremely useful.


Tertiary Navigation
Finally, you’ll also have a tertiary navigation menu. This is normally found in the footer of the page and is likely to show pages that are important, but that won’t be used by most users.

This could include your about page, terms of service, disclosures and location information.

These pages are critical to some users but can be located at the bottom of the page because they aren’t important for most users. This is also important if you’re trying to sell product on the page, you don’t want to distract the user if possible from clicking on the “buy” button.

Many designers include this tertiary navigation as an after thought, but with proper thought and care, it can become a beautiful feature.

If you are active on social medias like Instagram and Pinterest that are particularly visual, you can use plugins to show your latest posts.

Similarly, you can use a Google Maps plugin to show a visual interpretation of your business’ location. Both of these add plenty of value to the user and are much more attractive than a plain text menu.

Chapter 3 – Forms

Forms can be the lifeblood of many local businesses. They allow users to give you information about themselves that you can use to market to them, give them accurate quotes and contact them about updates.

The large majority of businesses use forms in one way or another. However, there’s a wrong way to use them, and many businesses are making mistakes that can drastically reduce their conversion rate.

Your goal should be to have every visitor complete the form. While this will never happen, it’s possible to get a huge conversion rate, far higher than most businesses currently do.

As with much of digital marketing and design, testing can help you to make improvements to your design and the conversion rate of the form. Make sure to setup effective tracking and to perform a statistically sound A/B test that will give you useful results.

Number of Fields
The biggest mistake that businesses of all size are still making day after day is asking for too much information all at once. We understand, the more information you have, the better. But you’re asking for too much time and too many personal details at once.

Instead, you should limit your forms to 5 – 7 fields at most. Any more than this and you can’t expect the majority of users to bother to fill it out. Any less and you’re likely missing out on useful information that they would have given up.

It’s important that you strike the middle ground. However, just because you have to reduce the number of fields, that doesn’t mean that you need to get greedy. Don’t ask just for “strong” details like their address, phone number, etc. Take the easy ones first – first name, second name, email, etc.

Although it’s not always the case, in most cases you’ll find that the fewer fields you ask the user to complete, the higher the chance of them filling them in.

As well as the total number of fields, you should consider how many of those are required. It’s often wise to allow people to not supply more personal information if you don’t need it.

This way, if they do give it to you, they won’t mind you using it, and if they don’t give it to you then it doesn’t have a huge impact.

In general, phone numbers are something that people prefer not to give out because they are so often abused by companies. Therefore, unless you need it for a specific reason, it’s best not to require that the user gives you their number.

Some forms are far easier to fill in than others. You’ll need to consider what the best format for each field is; some will be better as a dropdown list while others might require an empty field that the user can type into.

Often the method isn’t particularly important, but people become accustomed to using a specific method of data entry for a specific field. For example; it might seem odd to type in your country because we normally select it from a dropdown list.

It’s best to stick with the status quo because it makes filling in the form easier for the user and reduces the chance of them leaving without completing it.

Just as with the rest of your website, the design of the forms that you’re using is crucial. Users often choose not to fill in a form because it’s ugly and that might suggest to them that the website isn’t trustworthy and they don’t feel comfortable handing over their details.

The key to creating a beautiful but usable form is to keep the form minimal and clean. Don’t use excessive amounts of color but you can round the field corners rather than having them straight, or use a light grey instead of black.

Small changes like these can have a significant impact on the overall feel of the form, and it can help to convince people to fill in the form, improving your conversion rate.

One thing that users hate is forms that automatically sign them up for newsletters and other services that they weren’t aware of. If you’d like to include people in your newsletter, then that’s great, but make sure to get them an option to opt-out.

If you think your newsletter is awesome, then you might have the box automatically checked but give them the option to uncheck it to opt-out.

Automatic Error Checking
In the past, web design was extremely static, and designer would struggle to create responsive and immediate functions. This meant that you wouldn’t see any errors until the form was submitting, making the person fill in all of their details again.

This can have a drastic impact on the conversion rate of your form. Instead, make sure that each field has a check in place so that it can show errors as the forms are filled.

For example; the email address field should check that the email includes a ‘@‘ and also a period. Similarly, the phone number field can check for the correct number of digits.

This not only cuts down on the time that people have to spend to fill in your form, but it also helps to prevent people from giving false information.

Chapter 4 – Homepage

Your homepage is the most important page on your website, even more so than your squeeze pages and product pages. It represents your business, and if it looks shabby, then users aren’t going to trust you to deliver on your promises.

Real estate agents always talk about ‘curb appeal’, that is, the aesthetic of the house from the outside. Similarly, your website needs to have ‘homepage appeal’. The homepage should excite people; it should make them want to click around and see more, rather than making them leave.

A good homepage can drive more customers whereas a bad homepage can turn people off before they even get the chance to see what you’re offering.

Flexible Media Area
In the past years, it’s become common for websites to have a ‘flexible media area’ (FMA) at the top of the homepage. This is often in the form of a carousel of the latest pieces of content or a video.

The purpose of the FMA is to be attractive and to give the user to latest pieces of content in a simple way.

However, carousels have become popular despite offering a horrible user experience. The once element that we would strongly recommend against is the carousel.

On average users only spend a few seconds above the fold of the page before they interact in some way, either scrolling down, swiping or clicking on a link. This means that they are likely to only see the first piece of content on the carousel, making the rest redundant.

Instead, we would recommend that you try using a static setup that would show the pieces in the carousel next to each other in a grid layout.

Not only can this be more visually pleasing, but it will also load much quicker, and the user doesn’t miss some content that they would potentially find useful.


Above & Below the Fold
The most valuable part of any page is the above the fold section. This is because it’s the most likely to be interacted with. The chance of somebody clicking on content which is below the fold is far lower than the chance of them clicking on the piece towards the top.

This 600px – 750px window above the fold is your opportunity to deliver the best first impression possible. You should take care to ensure that everything that appears above the fold will direct the user to the pages that you want them to visit.

On the other hand, the area below the fold should be used as a safety net to direct users who weren’t interested in the content above the fold.

For example; above the fold you might have a CTA that calls for them to buy if they choose to scroll down rather than clicking the link, they aren’t ready to buy. Therefore, below the fold, there should be more information that will try and convince them to purchase.

We will continue with our examination of Amazon because they’ve done such an excellent job with their design. Every element is carefully chosen to increase conversions and drive as many sales as possible.

On each of their product pages, above the content, the user will find a quick blurb about the product, an image of the product and a large CTA that asks them to purchase.

However, if they user chose to scroll down, they would find more information below the fold about the product. This includes much more detailed explanations of the products benefits, larger photos and specifications of the product.

Still not convinced? Scroll further, and you’ll find customer reviews and the Q&A section, both of which are there to dispel the reasons the person is thinking of not to purchase. The entire page is designed to convince you to press “Add to Cart”.

Regardless of where the user scrolls, the content continues to convince them to hand over their money.

Navigation Paths
In an ideal world, a user would either purchase straight away or continue to click around your website until they choose to purchase. It could be argued that the more pages a user sees, the more likely they are to eventually make a purchase.

With that in mind, no page should be an island. Each of your pages should link in an enticing way to another page, taking the user on a journey until they hand over their credit card details.

Too many small businesses make the mistake of using the real estate on their homepage to link to dead end pages. These are pages that serve a purpose i.e. to tell the user about the company, but that fails to link to another page naturally without forcing the user to use the navigation menu.

When you’re designing your homepage, you might consider linking directly to a parent page rather than the individual child page. For example; you could link to a category of posts rather than just a single post. This way, the user might be more likely to go back and read more content from that category.

This decision is up to you and will depend on the specifics of your business. However, the one thing that all businesses should avoid is dead end pages. With these pages, you’re asking the user to leave and are therefore throwing money away.

Chapter 5 – Contrast & Color

The color is obviously extremely important to the overall design of your website. Not only does is change how visually appealing the page is, but it also becomes part of your brand. Amazon is orange, McDonald’s is red and yellow, and FedEx is purple and orange.

These colors stick in our mind, that’s why brands are so resistant to changing their logos and color palettes. With this in mind, it’s crucial that you get the colors right the first time around so that you don’t have to go through a painful transition later.

If you don’t know which colors to choose, then you should consider looking at the connotations that each color has and then decide which match your brand best. For example; most luxury websites use black because it represents exclusivity, the evening and traditionally black was reserved for your most expensive clothes.

Color Palette
When you’re choosing the color palette for your website, you need to consider how those colors are going to interact with each other. The basics of color matching tell us that certain ones work better together than others, primarily because of their level of contrast.

We see that FedEx use purple and orange, colors that are almost opposite on the color wheel and are quite clearly contrasting. Contrasting colors can create a striking and obvious image that stands out, whereas less contrasting combinations don’t impact us as greatly.

When you’re picking out your color palette, you need to think about how it will work with your page layout, but also how your users are likely to interact with them.

For example; a huge percentage of the population is color blind in some way, and this can affect the way that they see your website. Interestingly, Mark Zuckerberg is color blind, and thats why he made Facebook blue because it was a color that he could see perfectly.

To test your design for color blind users, you can turn on grayscale mode and make sure that the website is easy to use and that the content is legible.

Similarly, it’s important that the colors you use in the foreground don’t interfere too much with the ones in the background. The reason for this is that certain combinations of colors can be extremely difficult to read.

In fact, it’s often the case that the higher the contrast, the easier the words are to read. That’s why we use black ink on white paper; the contrast makes it particularly easy to see. To test your proposed combinations, you can use the WebAim contrast checker:

This tool allows you to input your hex codes and then make adjustments until it passes their test, showing you a visible interpretation as you work.

Emphasis Color
If you take a look at some of the most famous e-commerce stores, you’ll notice that their color palettes are often quite small. Instead, the use small splashes of color to draw the attention of the user to their CTAs.

We can see this very obviously on Amazons product pages, which are particularly plain, but use a bright yellow and orange button for you to add the item to your cart. This effect of this is to allow the website to capture your attention with an emphasis color.

This color is going to be the most important color that you use and it should be exclusively used to emphasize and capture the person’s attention. Often designers will use the primary color from the websites logo as this emphasis color.

Throughout the design, this can then be used in your CTAs, action buttons and prompts. This creates consistency for your brand, reinforces that color as representative of your brand and encourages users to act.

Of course, you need to ensure that this color combination passes the contrast checker and will be easily visible.

Color Connotations
Whether we realize it or not, we all have connotations that we apply to certain colors. Red is typically used to represent a danger because it’s often the same way in nature, hence why designers always stay away from red in CTAs.

In the human world, we use red to tell people to stop at the junction, to prevent them entry and to ban certain actions. It wouldn’t be wise to use this same color to try and convince people to take action.

Understanding the different connotations of colors can help you to align your design with your brand and prevent you from making a mistake.

For example; using blue paragraph text should always be avoided. Blue text is used to signal that the text is a link, so using blue body text will confuse the user and then force you to use a different link color that they might not be accustom to.

White has for centuries been considered a pure color, and it’s often used by brands to signify that something is fresh, pure and ethical. It’s particularly common in the beauty and health industry.

Black is associated with luxury and limited edition products that are exclusive to only a small minority. We find that this color is used to great effect by companies that sell expensive products like cars, luxury hotels and designer clothes.

Blue is used to represent the sky and the sea. Therefore it’s often associated with stability, trust and wisdom. According to studies, it’s a color that is highly accepted by men, and this could be why it’s the preferred color of corporate America. Blue creates high-impact designs that evoke confidence.

Green is the color of nature, and it’s used to connote growth, freshness and safety. It’s the opposite of red and therefore is used to represent safety and encouragement in our society, it’s used on our ‘go’ signs and to suggest that an action is okay to perform. Similarly, it’s the color of our money.

When you’re looking at colors, you should also consider the warmth of the shade. You’ll find that warmer colors tend to stand out more, particularly on white backgrounds, whereas colder colors fall behind. This is particularly important when you’re designing your CTA and logo, both of which should stand out and be vibrant.

Chapter 6 – Scrolling

Fortunately, it’s becoming less common each year, but in the past, many websites have altered the scrolling of their pages so that it overrides your browser. They often change the scroll speed and other factors that can make it uncomfortable for users to operate.

Not only that but they often insert their scroll bar, which can mean that there are two scroll bars on the page. You should never try to take control over these functions, they’ve been this way since the dawn of the internet, there is no need ever to change them.

One myth that many designers have peddled is that scrolling isn’t important because users these days don’t bother to scroll. We all know that this is garbage, but for some reason, the myth still gets repeated.

Users are going to scroll as long as it’s clear that there is more content below and they are interested in the page. If your page isn’t useful to the user, they’re not going to scroll because they don’t want to read anymore. But if they enjoy it, you can guarantee they’re going to scroll down to find out more.

Page Length
Although users will scroll, there isn’t any point in making them scroll more than they need to. Most of us would prefer not to have to move our fingers because we are lazy, so if you can fit the text comfortably on the page, don’t make people scroll!

In general, the longer the page is, the lower the chance that a person is going to scroll all the way to the bottom. With this in mind, if you have an important message to deliver or a CTA to show, don’t put it at the bottom of a very long page.

Most of the time, your page shouldn’t be more than 5,000px long. This is a relatively large page, and the majority of people don’t want to scroll much more than this. Of course, if you’re writing about a highly technical topic or you’re using full-screen images, this wouldn’t apply to you.

But for most websites, 5,000px would be thousands of words of content. In most cases, you can condense the content and therefore have a better user experience by being more efficient with your page space.

Infinite Scrolling
In the past few years, there has been a trend of websites implementing infinite scrolling. In principle this is a great idea, it allows users to discover new content by just scrolling at the end of the current post.

However, in practice, it can be extremely frustrating and can be difficult to load on slower connections. One of the biggest problems is that infinite scrolling often prevents the user from getting to the bottom of the page and looking at the footer.

If the user is trying to find your About or Contact page which is only in your footer, they might be unable to contact you because they can’t scroll down.

Not only that but if you’re on a mobile connection or live in a rural area, you might struggle to load the pages fast enough. This can burn through more data than the user planned and make using the website a pain.

We would recommend that most websites avoid infinite scrolling. Unless you’re a magazine website or a graphic company, most users prefer a traditional navigation and scrolling experience.

Similarly, e-commerce companies need to avoid infinite scrolling on gridded product pages. This an be extremely slow to load and painful for users. Instead, the best option is to include a “Load More” button below the current grid. This button might show more products, or it could then initiate the infinite scrolling.

Chapter 7 – Search

The search feature seems to be going extinct. Fewer sites than ever appear to have their search bar, which is a shame because a significant percentage of users use search to navigate your website.

In fact, on larger websites, it might be the only practical way to find the specific page that the user wants to visit. It doesn’t seem to make much sense to make the users experience more difficult, especially not for the sake of a small aesthetic change.

If you’re going to include a search bar, which you should, then it needs to be visible. There’s no point hiding it away in the footer or towards the bottom of the page.

Why Bother?
If you’re still not convinced, let’s take a look in more detail at exactly why a search bar is awesome. Firstly, a good search function will allow users to get around your website far quicker than any navigation menu.

This is particularly important if you have a large website with hundreds or thousands of pages. In this case, without a search function, your users might never be able to locate the exact page that they need.

Secondly, your search function will allow users to find new pages that they might not have known existed. This could happen if they type a generic word or phrase into your search bar and are then presented with a selection of potential pages.

This gives them more options, increases the chance of them purchasing and therefore makes your website far more valuable to them as a consumer.

Regarding placement, there is only one correct place to include your search bar, and that’s in the top right of your page. It’s in this top navigation bar on almost every website, and as we’ve discussed many times in this guide, it’s best to follow the status quo unless you have a compelling excuse.

In this case, users have become accustomed to going to this location to find the search bar, and they might not find it if you include in somewhere else.

Search Method & Usability
If you’re going to include a search bar on your page, then you’ll need to decide how that search function operates. We would suggest that most websites will benefit from having a suggestive search bar that can show you pieces of content that match your phrase as you’re typing in the bar.

Not only does this make the experience much easier, but it also increases the chance of them finding new content that they didn’t intend to find. This could lead to increased sales and therefore higher revenue.

As with anything, it’s best to perform a split test and also to ask for feedback from your users about what they would prefer. Depending on the size of your website, the number of unique searches and then a variety of search phrases, one search method might be superior to another.

With that said, it’s best to reduce the amount of effort it takes for the user to reach their desired page. So, in this case, the suggestive search can improve the user’s experience by allowing them to go directly to the page rather than having to load the search results first.

Chapter 8 – Readability & Content

Although the other elements on the page are important, people come to your website to interact with the content. Therefore, it’s critical that your content is easy to read, that the colors are balanced and that the content is enjoyable.

This doesn’t mean it needs to be incredible, but it should be easy for the user to read. Some websites use incredibly small text and refuse to insert images or empty lines that would break up the content and make it much easier to read.

In this section, we’ll be looking at what you can do to improve your content just by improving the design and making it more aesthetically pleasing.

Text Formatting
Just like with your Word processor, you can format the text that you include on your website. However, bolding, italics and underlining should be used sparingly. They are an awesome way to emphasize a word or a phrase, but if they are overused, they will become far less effective.

Instead, we would recommend that you use bolding to emphasize your header tags and then possibly some important phrases in your content. Normally italics are used for large quotes but little else. Similarly, underlining is often reserved for titles or to emphasize in the same way as bolding.

Arguably, the most important text formatting is the text size and line height that you choose. Both of these can have a huge impact on the readability of your content.

You’ll find that the most common text sizes are 16px and 18px. You should never go below 13px, and if you have an older audience, you might consider an even larger text size. 16px is comfortable for most people to read and few people will think that it’s too large.

However, just as important as the text size is the line height. This will impact a number of pixels between lines and provide this extra space makes it much easier to read.

A general rule of thumb is to use a line height that is around 1.5x the text size. This helps to make the text legible and prevent eye-strain.

Content Layout
When you’re creating long form content like articles or blog posts, it’s important that you break up the text. There’s nothing wrong with long pieces of content, but it can be boring and often difficult to sit down and read line after line of text.

Instead, it’s good to use empty lines to break up your text into smaller paragraphs. The rule that we used when creating this guide was only to use paragraphs that were less than four lines long on our Word software. This makes them easy to read, concise and also allows the reader to follow along easier without being overwhelmed.

Similarly, using long sentences isn’t smart. Especially on the internet, people have short attention spans. They often scan your content quickly before even reading it. So, it’s best to use shorter sentences with a maximum of 16-words per sentence.

Images & Videos
As well as breaking up your content into concise sentences and short paragraphs, you should ensure that you’re using images and videos. These can be useful in helping to explain the topic visually, but also to break up the text and make it more interesting.

We would advise that you use an image or video for each 20-lines of content. This will help to keep your users engaged with the content and helps to prevent it from becoming overly boring.

If you’re going to use photographs, then you should make sure that they are extremely high-quality. It’s got to the point now where users expect high-quality photos and will be disappointed by anything less.

If you don’t have a camera or can’t take these types of photos, you should purchase the rights to stock photos that you can use in your content. With the images that you use you need to be careful to match well with your color scheme.

Using a huge range of colorful photos on an already colorful website can become crowded and make the page look terrible. In this case, it’s often best to stick to black and white photos or photos that have less vibrant colors.

When you’re using videos, you should follow the same quality rule. It doesn’t inspire confidence in your potential customers to watch a low-quality video. If you’re creating your videos, then make sure to invest in a decent camera that can shoot in 1080p, otherwise, only feature videos from other creators that are of high-quality.

In the case of blog posts and articles, you should be including a video in every longer piece of content. There are thousands of videos out there on almost every single topic, so you should be able to find a quality film that fits your topic and provides value to your readers.

Chapter 9 – Mobile

More and more users are choosing to browse websites on their mobiles instead of laptops or desktop computers. This trend is only likely to continue as continents like Africa and Asia are experiencing huge adoption of mobile phones with a limited adoption of computers.

Mobiles offer so much power and versatility in a portable device, something that a computer can’t compete with. Not only that but mobile phones can be purchased for a fraction of even the cheapest computers.

These factors mean that mobile phone access even among the poorest communities is relatively high. However, regardless of the price of the products you sell, you can be sure that a huge percentage of your audience is reading your website from their phone.

With this in mind, it should be easy to understand why you need to invest in creating an optimal mobile experience that can drive sales. In the past, designers believed that users would only browse from their mobiles and would rarely purchase anything.

However, in recent years we’ve seen substantial proof that this is far from true. In fact, the majority of people are now comfortable purchasing through their phones.

Unfortunately, many websites, particularly those for small businesses, look terrible on mobile and are often unusable. This means that those businesses are losing potential customers because they didn’t invest the time and money into creating an optimal mobile experience.

Responsive Website
The first step in creating an enjoyable mobile experience is ensuring that your website is responsive. A responsive website is one that adapts to the size of the screen so that your website will look great on devices of all different shapes and sizes.

Many older websites are created as static HTML pages that are programmed to adapt to different screens. On mobile, this will mean that they user has to zoom in and then continuously scroll around the page to view the entire piece of content. This is a terrible user experience and is unlikely to result in paying customers.

Responsive web design works by using a mix of flexible grids and layouts as well as intelligent use of CSS queries. What this means is that when you view the same website on different devices, you’ll see a page that is accommodating for the device that you’re on.

The page is unlikely to look the same on each device, but it was as optimal as possible. For example; it might cut a portion of a background image off but will ensure that all of the text is centered and fully shown on the page.

Even if your website has some responsive elements, it’s crucial that the website is usable. A surprising number of websites are almost entirely redundant on mobile because they are physically impossible to use on a touch screen mobile phone.

One of the most common mistakes is the size of the tappable icons and text. They should be at least 32x32px, otherwise, it’s extremely difficult to click the correct link. This needs to be taken into account when you create your menu items and CTA buttons.

As we talked about in a previous section, the scrolling function on mobile needs to work to enhance the user’s experience. On mobile, it’s likely that you’ll have to scroll a lot just to finish a piece of content so implementing any scroll features can inhibit this.

Similarly, there is no hover ability on touch screen devices, and therefore you should resist including these on your website. It can be tempting to use them because they can be useful on a desktop PC and will save page space, but it’s frustrating to not be able to enjoy the full content on a mobile device.

With mobiles becoming so popular you need to be thinking ‘mobile first’ and designing your website to work just as well, if not better, on mobile than PC.

Page Speed
Although there are millions of WiFi hotspots around most cities and towns these days, many mobile users still use their 3G and 4G data connections. In this case, larger pages can still take a significant amount of time to load.

Page speed is one of the more noticeable reasons why users choose not to purchase from a website, so, a slow loading time might be costing you money.

On mobile, this is even more important because the same page will load far slower than on a desktop. It’s unlikely that mobile networks will ever catch up with wired internet and that’s, even more, reason to be careful about your page size.

One of the biggest culprits causing a large page size is images. Many websites load an image that is far bigger than the one that is shown, scaling down the full image to show a smaller image.

The problem with this is that you’re asking the user to download a much larger file, but then telling them to only show a small version of it. Instead, you should scale down your images before you upload them to your server.

This will allow you to serve the same sized image as it shown on the page, preventing you from adding extra size to the page for no reason. Just this simple change could cut some of the slowest pages loading times in half, or even more.

Another problem is when websites serve images in their highest quality. Of course, in some cases, this is a good idea but the large majority of the time there is no need. In fact, most people won’t be able to tell any difference unless they look closely, especially not on mobile.

So, we would recommend that you serve 50-60% quality images. This will cut the size of the image in half and therefore drastically reduce the size of the overall page. With a smaller page, the user will be able to load it much quicker and will, therefore, be more likely to purchase.

Those are the two biggest changes you can make to the size of the page, but you can also make changes to the servers to also improve the load time.

Firstly, we would recommend that you use a VPS hosting plan. A VPS is a virtual private server, which means that you receive a partition of a server which nobody else can access. This way you are guaranteed the speeds that you’re paying for.

Many businesses operate on shared plans, which are fine to start with but can seriously impact your load time. With a shared plan a lot of websites will all be utilizing the same server, which means another website with many requests can slow down your load time.

A VPS is highly recommend and can have a substantial impact on your load time if you’re moving from a shared service. If you’re receiving a huge amount of traffic, then you might even consider upgraded to a dedicated server, this way you’ll get all the resources of the entire machine.

Secondly, make sure that your website is using browser caching. Browser caching tells the users mobile phone or computer to store the files so that the user doesn’t have to keep downloading the same files over and over.

For example; most websites will have their logo on every page of their website. Without browser caching the user will download your logo on each page. With browser caching, the device will recognize that it already has the file and will skip it, saving the user data and cutting the load time down.

Browser caching is unlikely to have a huge difference on the load time, but for repeat users, it can be noticeable. Either way, there is little to no impact to you as a business owner and implementing it is free and simple.

It’s important not to disregard load speed. Some designers have the mentality that because our internet speeds have increased so much over the past few years that they can get away with serving larger pages.

To some extent, this might be true, but in most cases, it seems that people have just become even more impatient. Whereas in the past they might have expected a page to load in less than 5 seconds, studies now show that 47% of people expect a web page to load in 2 seconds or less.

With internet speeds continuing to increase it’s likely that this number will drop drastically and soon users will expect a near instantaneous load. Many of the top sites have noticed this trend and are already loading pages in 200 – 300ms, that’s almost too fast for us to notice really.

Bare in mind; these are sites with interactive elements, images, videos and other web 2.0 features. As a web designer, you should be striving to be in the top 1% of site speeds.

It’s not just because users are becoming less patient, the page speed has a correlation to Google rankings and also to conversion rate.

Google workers have already admitted that one of the over 200 factors that they use to rank web page is page speed. Some SEOs might argue that it’s only a small ranking factor, but with the current trends in mobile usage and speed, it’s likely to become more important in the future.

Most businesses owner know how powerful and desirable Google rankings can be. Overnight you can see thousands of targeted visitors on your website, rushing over themselves to hand you their money.

With this in mind, any business that cares about SEO should have page speed as one of their top design priorities. It’s not good enough just to look great; you need to look great and deliver fast.

Once those users click on your link in the Google search results page, they expect a quick load time. In fact, studies have shown that there is a sharp decline in conversion rate as the average site load time increased.

Although it’s hard to interpret these results properly without looking at the websites that were included in the test and the conversions, it’s likely that speed played a role. Put it this way, would you trust a website that loads extremely slowly?

Does that seem like a company that you want to hand over your credit card details to? Probably not. We put trust in companies that can perform efficiently, and we don’t trust those that can’t. Knowing that it’s clear that page speed can have a direct impact on your conversion rate and therefore your revenue.

Given that improving your page speed is relatively easy and cheap, it would be silly for any business to not optimize their website for a better load time.

Consider an App
If you notice that you’re getting a substantial amount of traffic from mobile and tablet users, then you might even decide to create your app. Many websites have done this, and it’s a great way to provide a dedicated mobile experience that rivals your desktop website.

It’s near impossible to deliver the same website on mobile as you can through an app. You get much more functionality and control over how the elements work and look on the device, giving you the flexibility to make a better design.

Not only that but with apps, you will often get control over their notifications. This can be used to let the user know about updates, sales and changes in your products or services. This is an intimate marketing channel and can have a significant impact on the number of products that they purchase.

The main reason why businesses don’t create their app is that they are expensive and the number of people using them is low. It’s a pain for users to download an app just to view one website unless they use that website multiple times per week.

You should think carefully about how your users use your website and why. Are they sticking around for long periods of time or do they get the information and then leave? This will be the deciding factor on whether you need a dedicated app or not.

Chapter 10 – Users & Targeted Audiences

The most important thing without a doubt is your audience. It can be hard as a designer to forgo your ideas, but you need to make decisions based upon what your audience will like the most. They are the ones who will be using your website and deciding whether to purchase.

Putting your users first is the best way to create a design that will be loved. Often designers look at their work and hate it, but their audience is absolutely in love with it. Remember, your opinion isn’t important. Your website it there for your users to browse.

Not only should your users influence your design decisions, but your design decisions will also have an impact on the way that those users move around your website. That’s why it’s always a good idea to have a fully fleshed-out profile of your ideal customer.

In this chapter, we’ll be looking at your customer profiles, how to market to your ideal customer and how to design a website that will convert best for that audience.

Cashflow is king; this section is all about getting real people to see your website and to have them line your pockets with gold.

Customer Target Profile
If you don’t know what your customer looks like, then it’s impossible to create a design that is going to appeal to them and convince them to buy. Knowing this, the most important step is to conduct research into your customer and brainstorm their lifestyle, desires and preferences.

The more detail that you go into, the better informed your decisions are going to be and therefore the more ideal your website will be for your customers.

To start with, you should know the location, gender and age of your customer. These are the three most important factors to consider when you’re designing your website. Each of them will have a significant impact on the way that your site is laid out, the colors you use and what elements you choose to use.

If you’re running a local business then obviously the most important part of your customer profile will be the location of the individual. People are unwilling to travel long distances, so it’s important that you’re only targeting local people.

Depending on the area that you live in you might choose to design the website in a specific way. Each country has its unique design differences. If you look at French websites, you’ll see that they have a slightly different aesthetic to Chinese websites.

It’s best to create a site that will seem natural and recognizable to your local audience, so if you’re an international company, you might create region-specific designs.

We wouldn’t be so archaic as to suggest that websites with a primarily male customer base should be blue and female sites pink. No, but there are studies that suggest that men and women use websites in different ways and have alternative aesthetic preferences.

You can even see this within a single company. Take a look at some of the beauty companies that own male and female brands; often the female brand’s website will be much cleaner, smoother and easier to use. On the other hand, the men’s site is often dark, mysterious and has less navigation.

The gender of your customer base alone can’t decide all of the design features, but it will have an impact. Within the gender, you have differences in aspiration. Men might traditionally aspire to be mysterious, masculine and outgoing. Whereas women could aspire to be beautiful, intelligent and well-rounded.

These small differences can play a substantial role in the color palette that you use and the overall feel of the website. One interesting piece of research that we read suggested that including photos of females was a powerful marketing tactic, regardless of the gender that was judging the ad.

On the other hand, men were not as universally agreeable, and this could turn some of your audience off. Sure, these are small changes, but they might be the difference between you acquiring an extra customer each month or them going to your competitors.

As well as the gender and location of your ideal customer, their age can also impact what aesthetic they prefer and the types of design elements that you should use.

Maybe the most obvious difference between age groups would be the eyesight and the level of computer proficiency. As you might expect, the younger generations that grew up using computers are far better at navigating complex websites than those who have only been using them in their senior years.

Firstly, you’ll want to consider the level of navigation that you’re going to use on your website. Many people who aren’t experienced with computers might be unaware that you can hover over a menu item and be presented with a drop-down menu. In this case, it’s better to show all of the options very clearly.

It’s better to have a cluttered but comprehensive navigation menu if you think that your audience might not be technically literate. The last thing that you want is users leaving your website without purchasing anything because they found that it was too complicated to use. If in doubt, have some of your customers test the website and record their feedback.

On the other hand, a younger audience who have used computers their entire life is more likely to prefer a simple and interactive navigation menu. This is because they are aware of hover menus, drop-downs and other interactive elements. Therefore, they prioritize aesthetics because they have more technical knowledge.

For younger audiences, you’ll also see a much larger percentage of people browsing from their mobile phones and tablet devices. In this case, you’ll need to prioritize your mobile experience and ensure that any elements you use can translate well to a smaller screen.

Similarly, although a younger audience might prefer a hover-menu, you’ll need to replace this for any mobile users so that they can access all of your content. One frustrating design feature that we would avoid is drop-down menus that drop on-click but also have an on-click link.

This makes it a race to see if you can click the link and then click the second link from the drop-down before the page loads. Obviously, this is an oversight on behalf of the designer, but it’s annoyingly common and makes the navigation impossible to use.

As we all know, age comes with a plethora of unavoidable health impacts. One of the most noticeable is a deterioration of our vision. Most of us will need glasses in our senior years, and this can make using websites with small text extremely difficult.

If you know that your ideal customer is elderly then you should ensure that the text is large, the line height is huge and the font is thick and easy to read. Of course, the user can zoom in their browser, but they might be unaware of how to do this. Instead, do the work for them and make the content easy to read for all age groups.

With higher income we naturally find ourselves choosing to purchase more expensive and luxurious products. When you’re designing your website, you need to be realistic about the price of your products and the customer that is going to be able to purchase them.

If you’re targeting a lower-income group, then you’ll need a design that appeals to them, whereas if you target high-earners, then a different design might perform better. This isn’t to say that money buys taste or design preferences; it’s just that higher-earners tend to look for different things when they are spending huge sums on a single product.

For example; if you’re selling a $200 couch then the customer is likely looking for something that is basic, they are prioritizing price rather than build quality or durability. On the other hand, if you’re spending $10,000 on a couch you’re more interested in the luxury fabrics and the build quality i.e. you’re buying into the lifestyle rather than the product.

In general, cheaper products tend to be advertised based on the product and the price, whereas expensive products are advertised based on the lifestyle and what owning the product says about you, the owner.

Some people would rightly argue that this could be considered vapid and materialistic and that might be the case, but your job is to create a design that appeals to the potential customer.

If you look at any of the most expensive brands, you’ll see that there are three colors they tend to use above all else; black, white and gold. Black has long been considered the color of luxury; gold is symbolic of jewelry and white represents purity and perfection.

On the other end of the scale, the cheapest products are often advertised with red, green and blue. These colors are vibrant and stand-out on a shelf of other products. This is particularly important for cheaper products where there is little difference between products besides the price. In this case, having bright colors is extremely important.

Although this doesn’t translate perfectly to the digital world, we still see that luxury websites use darker colors and cheaper brands often use more novel colors. You might be tempted to use a luxury designer to market an inexpensive product. Don’t; it’s only going to seem like a gimmick.

The customers who are buying inexpensive products know that they aren’t as expensive. Instead, you should be pushing the benefits of the product and design features on them to convince them to choose yours instead of a similarly priced competitor.

With higher priced products the customer knows that they are expensive and often overpriced. They are choosing to purchase often not because of the features, but because of the aesthetic, the brand image and what it says about themselves.

With that in mind, if you’re creating a website for a more expensive product or service you should be pushing the lifestyle. As an example; if you look at luxury clothes websites, many of the images are of gorgeous models on huge yachts and beaches. It’s not about the clothes so much as it is about the lifestyle they represent.

Targets Digital Location
As well as the customer’s physical location, you’ll also want to consider their digital location. What we mean by this is the websites that they frequent, the apps that they use and the games that they play. These are important for not only building out a more rounded customer profile but for also knowing where to market to your potential customers.

There’s no point in wasting time and money to advertise on a platform that your audience would never frequent. That’s why it’s so important to get a full profile of your customer so that you can put your brand in front of them in the right places.

Social Media
In the past social media might have been only used by the younger generation, but that’s far from the case now. In fact, many social media users are in their 50’s and 60’s. But it’s still the case that they likely use different social media profiles and follow accounts that younger users probably don’t.

Facebook has long been the most popular social media network, and this likely isn’t going to change. Facebook is excellent for marketing to users of all ages and demographics, but it’s particularly good if you’re going after an older age group.

Of all of the social media platforms, seniors use Facebook more than anything. With pages to follow and groups to join it’s also easy as a marketer to connect with the types of people who are interested in your products and services.

When you’re using Facebook to market your business, groups are often the most powerful place for you to advertise. Find a selection of groups that talk about topics related to your business and then offer value to the users.

In the past, many marketers have tried to game the system by spamming in groups to put their business in front of potential customers. However, it’s often more efficient to provide value to people so that they trust you; then you can recommend your business and get a much better conversion rate.

Pinterest is great if you’re marketing to women. The users of Pinterest are over 90% female, and the interaction rate is extremely high, this means that the users are pinning and liking content regularly. Pinterest is perfect for visual content so to market on here you should use photos, graphics and videos that are aesthetically pleasing.

Twitter is a must for all businesses. It’s perhaps not the best place to market your business to new customers, but it’s fantastic for connecting with existing customers. You can tweet at them directly and have an open conversation. This allows you to quickly resolve issues and maintains your brand’s stellar reputation.

Finally, Instagram is the relative newcomer to the social media world but has made a splash. It’s another visual platform like Pinterest, but it has a much younger and mixed gender audience. If you own a company that has aesthetically pleasing products or services, then Instagram is a great place to market your business.

Market to Your Ideal Customer
With a better idea of who your customer is an where they hang out online, you should be able to create a more effective strategy to market your website. There’s not point in having a website that nobody sees, and so your initial launch should factor in time and a budget for marketing.

Another on-page element that many websites these days have is an integration into social media platforms. These are often used to show the companies latest interactions on social media and to encourage people to follow their accounts.

However, there are even more advanced ways that you can use social media in your web design to create an interactive website that helps you to market your business.

You might have seen other websites use social media follows, like, shares and re-tweets as a requirement for people to view certain pieces of content. If you run an extremely content-rich website like a magazine or a how-to site, this could be an awesome way for you to generate a ‘buzz’ online.

But for most websites, this isn’t appropriate because they don’t have much content and the content that they do have is important for all users to see. In this case, you need to offer something else in return for the social signals.

We would recommend that you give people money off vouchers or an add-on to the products that they purchase. It could even be 5 – 10% off, or you could include a smaller free product or service when they purchase a higher priced item. All they have to do to unlock that is to share it on their social media profiles.

This is a cheap way to have real customers share your business with their friends, many of which are likely also to be potential customers.

Another method that works particularly well with higher priced items is giveaways. is a web service that you can use to automatically run giveaways, at no cost to your business. For each ticket that the customer gets they have to act i.e. sign up to your email list, share it on Facebook or Tweet a message.

This is an awesome way for you to get social shares for your business and the people sharing the giveaway will often cause more people to sign-up. It’s not unusual for these to go semi-viral, all for the cost of a product or service that your giving away.

Some marketers will argue that these types of people aren’t that valuable because they are just looking for free things. Of course, that’s true to some extent, but by having them as followers on social media you now have access to them, allowing you to continue marketing to them and convincing them to purchase.

Checkout & Decision Fatigue
If your website has an e-commerce component and allows people to purchase through your site, then you’ll need to ensure that your checkout is perfected.

Many businesses mistakenly believe that once a person has added the products to their cart, they are going to check out and purchase them. In fact, in some industries that abandoned cart rate is as high at 80%. That means that 80% of people who add products to their cart never buy a single thing.

This often isn’t because they decided to not purchase them, it’s often because the checkout process isnt smooth. Any extra time that you give the user is time that they can use to change their mind. It’s best to convince the user to check out as quickly as possible.


One way that you can do this is to use a large CTA prompt to regularly ask them to checkout. This might have the impact of discouraging them from adding additional products to their cart, but it’s likely to cause them to buy something rather than nothing.

When we look at the reasons why users abandon their carts, one of the biggest reasons is that they checkout process takes too long. This might be because your website is slow and the pages take too long to load, or it might be because you force the user to register an account just to purchase the products.

In general, it’s best to expedite the purchase process, even if you sacrifice some potential data collection. Once somebody has purchased your products you’ll have some way to contact them anyway; it’s not the end of the world that you don’t have every piece of information about them.

Making people spend the time to register for a full account when they might only want to purchase a single product is a quick way to deter them from checking out.

Just like everything else on your website, you should be tracking as much data as you can get. Make sure that you’re recording accurate data about the number of people who add items to their basket, the number that checkout and exactly when and where people abandon their carts. This will give you more information to make better design changes.

Your checkout process should be seamless, and it should be secure. The mistake that small businesses make over and over is thinking that the checkout doesn’t need to look pretty.

This is entirely false. A checkout page that seems generic and plain can often seem like a scam, and your customers might feel uncomfortable in handing over their credit card details on such a page.

Instead, take the time to maintain your websites design and feel, even on the checkout pages. Similarly, ensure that you’re using the trusted logos of the payment providers that you accept i.e. PayPal, Visa and MasterCard. This helps to put peoples minds at ease and can encourage them to checkout.


The design of your website is extremely important, and it can be the difference between a customer choosing you or them choosing your competitors. At the end of the day, your website is the most customer facing piece of branding that you have, and it represents your company.

If your website looks terrible, then people are going to assume that your business is terrible, even if it’s amazing. Unfortunately, this is going to mean that you’re missing out on customers who would have been a great fit for you.

So, you’ve learned why web design is so critical to business, let’s quickly go over some of the design tips that we gave you.

Firstly, make sure that the user is the priority. It’s great if you like your website, but it’s more important that your users love your website than it is that you do. They are the ones paying for your lifestyle, and therefore they are the people you work for.

Secondly, aesthetics are crucial, but practicality and usability are king. If you’re going to hide away your menu and make it more difficult to use, then you must ensure that your customer is knowledgeable enough to find the menu.

Thirdly, the colors that you choose are probably going to stick with you forever, and they’ll come to represent your brand. Spend some time to pick wisely and choose colors that your audience will enjoy and that evoke the right emotions for your brand.

Last but not least, make sure that your mobile experience is at least as good as the desktop experience. More users are on mobile than ever before, and this trend is only going to continue. Your website should be responsive from the ground-up, and all your elements should translate well to a smaller screen that uses touch controls rather than a mouse.