When it comes to designing or redesigning a website, it is easy to get into the aesthetic.
That shade of blue doesn't look right …
Wouldn't it be cool to have the logo on the right side of the screen?
How about we put a huge animated GIF in the middle of the page?
However, if you are really trying to achieve something with your online business (e.g., brand awareness, lead generation, etc) you need to focus on more than just the look of your website.
In a world where people have more than a billion websites to potentially land on, you need to make sure that your websites are designed for them user friendliness, how easy your website is to use, and User Experience (UX)how pleasant it is to interact with your website.
Now you can spend years studying the pros and cons of usability and UX. To give you a starting point, we've compiled a list of basic guidelines to use on your next website redesign or website launch. It then reviews 10 features you will need on your website to put these recommendations into practice. Let's dive in.
Website design guidelines
- Visual hierarchy
- User centricity
While the look of your website is certainly important, most people don't come to your website to evaluate how chic the design is. You want to take an action or find specific information.
Hence, unnecessary design elements (i.e., those that have no functional purpose) will only overwhelm and make it difficult for visitors to achieve what they want to achieve.
From a usability and UX perspective, simplicity is your best friend. When you have all of the page elements you need, it can be difficult to get too simple. You can apply this principle in various forms, e.g.
- Colours: In principle, don't use a lot. The Computer-Human Interaction Manual recommends using a maximum of five (plus or minus two) different colors in your design.
- Fonts: The fonts you choose should be legible, so nothing too artistic and very minimal script fonts if any. Again, keep the text color minimal and always make sure that it contrasts with the background color. It is generally recommended that you use a maximum of three different fonts in a maximum of three different sizes.
- Graphic: Only use graphics when they are helping a user to complete a task or perform a specific function (don't just add graphics one way or another).
Here is a great example of a simple but effective homepage design from HERoines Inc:
2. Visual hierarchy
Visual hierarchy is closely related to the principle of simplicity and means arranging and organizing website elements in such a way that visitors naturally tend to the most important elements first.
Remember, when it comes to optimizing usability and UX, the goal is to get visitors to take an action they want, but it feels natural and enjoyable. By adjusting the position, color, or size of certain elements, you can structure your site so that those elements are the first to attract viewers.
In the following example from Spotify you can see that the main heading “Hearing is Everything” with its size and page position is above the visual hierarchy. It brings your gaze to their mission before anything else. This is followed by the CTA "Get Spotify Free", which calls for action. Users can click this CTA or browse the menu items above for additional action.
Planning for intuitive navigation on your website is critical to helping visitors find what they are looking for. Ideally, a visitor should land on your website and not have to think about where to click next. The transition from point A to point B should be as smooth as possible.
Here are some tips for optimizing the navigation of your website:
- Keep the structure of your primary navigation simple (and at the top of your page).
- Paste the navigation into the footer of your website.
- Consider using breadcrumbs on every page (except your home page) to help users remember their navigation path.
- Include a search bar at the top of your website so visitors can search for keywords.
- Don't offer too many navigation options per page. Simplicity again!
- Include links in your copy of the page and make it clear where those links are going.
- Don't let users dig too deep. Try making a simple wireframe map of all of your site pages arranged like a pyramid: your home page is at the top, and each linked page from the previous page is the next level. In most cases, it's best to keep the map no deeper than three levels. Take the HubSpot site map, for example.
One more note: once you've decided on the main (top) navigation of your website, keep it consistent. The labels and the position of your navigation should remain the same on every page.
This leads us nicely into our next principle …
In addition to providing consistent navigation, the general appearance of your website should be similar across all pages of your website. Backgrounds, color schemes, fonts, and even the tone of your writing are areas where consistency has a positive impact on usability and UX.
That is not to say that every page should follow the same layout. Instead, create different layouts for specific page types (e.g. landing pages, information pages, etc.). Using these layouts consistently will make it easier for visitors to understand what type of information they are likely to find on a given page.
In the example below, you can see that Airbnb uses the same layout for all of its "Help Pages", as is common practice. Imagine what it would be like from a visitor's point of view if each "help page" had its own unique layout. There would probably be a lot of shrugging.
According to Statista, 48% of global page views came from mobile devices such as smartphones and tablets. According to our research, 93% of people left a website because it wasn't displaying properly on their device.
Most important here: To have a really great user experience, your website needs to be compatible with the many different devices your visitors use. In the tech world, this is known as responsive design.
Responsive design means investing in a highly flexible website structure. A responsive website will automatically resize and reshuffle the content to match the dimensions of the device a visitor is currently using. This can be achieved with mobile-friendly HTML templates or by creating a special mobile website.
Ultimately, it's more important to have a great experience on different devices than to look the same on those devices.
In addition to the ease of use, it is worth testing the cross-cross browser compatibility of your website. Most likely, you've only viewed your website in a web browser, be it Google Chrome, Safari, Firefox, or something else.
Now is the time to open your pages in each of these browsers and rate how your items are displaying. Ideally, there isn't much of a difference in the presentation, but you may not know for sure until you see it for yourself.
The goal of internet accessibility is to create a website that anyone can use, including people with disabilities or limitations that affect the browsing experience. As a website designer, it is your job to factor these users into your UX plan.
Just like responsiveness, accessibility applies to your entire website: structure, page format, visual elements, and written and visual content. The Web Content Accessibility Guidelines (WCAG), developed by the Web Accessibility Initiative and the World Wide Web Consortium, set the guidelines for accessibility on the Internet. In the broadest sense, these guidelines state that websites:
- Perceptible: Visitors know the content of your website.
- Operable: Your website should be able to function in a number of ways.
- Understandable: All content and warnings are easy to understand.
- Robust: Your website can be used across a variety of assistive technologies, devices, and browsers.
For more information on this topic, check out our ultimate guide to online accessibility.
A major challenge in web design is balancing originality with your expectations. Most of us are seasoned Internet users, and there are certain conventions that we have become accustomed to over time. Such conventions include:
- Placing the main navigation at the top (or left) of a page.
- Place a logo in the top left (or in the middle) of a page.
- If you make the logo clickable, a visitor will always be brought back to the homepage.
- With links and buttons that change color / appearance when you hover over them.
- Using a shopping cart icon on an ecommerce website. The icon also has a license plate indicating the number of items in the shopping cart.
- Make sure that image sliders have buttons that users can click to manually rotate slides.
While some choose to toss this out the window for uniqueness, this is a mistake. There is still a lot of room for creativity within the framework of web conventionality.
Let’s briefly look at another field of design, architecture. Building codes are being introduced so that people can use indoor spaces easily and safely. An architect does not complain about or violate these codes because they not only violate the law but also ensure safety and comfort. It doesn't matter how dazzling the building appears – if you stumble on uneven stairs or can't step into a fire, you will hate this building.
In the same way, you can create a memorable experience while meeting user expectations. If you go against user expectations, they may feel uncomfortable or even frustrated with your website.
Sticking to web conventions gives your website credibility. In other words, it increases the trust your website instills. And if you want to create a website that offers the best user experience possible, credibility is of great importance.
One of the best ways to improve your credibility is to be clear and honest about the product or service that you are selling. Don't let visitors rummage through dozens of pages to find out what you're doing. Be at the forefront of your home page and dedicate some properties to explaining the value behind what you do.
Another credibility tip: have a pricing page that is also linked on the homepage. Instead of forcing people to contact you to learn more about pricing, clearly list your prices on your website. This makes your business appear more trustworthy and legitimate.
Here is an example of an effective pricing page on the Box website:
9. User centricity
Ultimately, usability and user experience depend on the preferences of the end users. If you don't design for them, who are you designing for?
While the principles outlined in this list are a good place to start, the final key to improving the design of your website is to conduct user tests, seek feedback, and make changes based on your insights.
Don't test the usability yourself. You have already invested a lot of time designing it, which adds your own bias to the equation. Get testers who have never seen your website, just like any first-time visitor.
Here are some user testing tools to get you started:
- Website grader:: Our free tool evaluates your website based on several factors: mobile, design, performance, SEO and security. It then offers tailor-made suggestions for improvement. For more information on Website Grader, please see our dedicated blog post.
- Crazy egg:: Track multiple domains under one account and get insights into your website's performance using four different intelligence tools – heat map, scroll map, overlay and confetti.
- Loop11: Use this tool to easily create usability tests – even if you have no HTML experience.
- The user is drunk:: Pay Richard Littauer to Get Drunk and Check Your Website Out. Do not you believe me? We tried it.
For more helpful options, check out our list of the best tools for testing users.
Hopefully these guidelines will be helpful in informing the structure of your web pages and the entire website. But how do you put these guidelines into practice? The next section lists the essential page elements that you should definitely include in your design plan.
Website design requirements
- Header and footer
- Menu navigation
- Search bar
- Color palette
- Erase labels
- Visuals and media
- Calls to Action (CTAs)
1. Header and footer
Headers and footers are a staple for just about any modern website. Try to include them on most of your pages, from your home page to your blog posts to your "No Results Found" page.
Your header should include your branding in the form of a logo and organization name, menu navigation, and possibly a CTA and / or search bar if the spacing is large and minimal. At the other end of your footer, many users instinctively scroll for important information. In your footer, include contact information, a subscription form, links to your general pages, legal and privacy policies, links to translated versions of your website, and links to social media.
2. Menu navigation
Whether it's a list of links in the header or a neat and compact hamburger button in the corner, every website needs a navigation guide that is placed at least at the top of your home page and other important pages. A good menu limits the number of clicks to reach any part of your website to a few.
To avoid clutter, you can make some or all of the menu options a drop-down menu with links inside, as seen on the HubSpot homepage.
3. Search bar
Aside from menu navigation, be sure to put a search bar at the top of your pages so users can search your site for content using keywords. When you incorporate this functionality, you will ensure that your results are relevant, forgiving of typos, and provide an approximate keyword match. Most of us use a high quality search engine every day, be it Google, Amazon, YouTube or anywhere else. All of these set the standard for your own website search.
Do you remember the conventions we discussed? One that you'll see pretty much anywhere is a logo in the top left corner. When they first land, many visitors' eyes will instinctively wander to this region to check that they are in the right place. Don't let them down.
To reinforce that thought, incorporate your company branding into every element you add, into every content you post, and into every color scheme you create. For this reason, we recommend establishing brand guidelines if you haven't already. Further information can be found in our style guide.
5. Color palette
The color choices play an important role in the usability and user interface of your website. This decision tends to be more subjective than other requirements on this list. However, like everything else we've discussed, try to simplify – limit your color choices to a maximum of 3-4 distinctive colors.
Starting a color palette from scratch can be surprisingly difficult the first time. We seem to intuit which colors work well and which don't, but we stumble when trying to choose from the infinite combinations available.
The solution? Try a color palette that works on other websites. Make an impact on your favorite websites by checking out our list of our favorite website color schemes first.
Headings are key to building the visual hierarchy we discussed earlier, especially on text-heavy pages. When users scan your pages for what they need, a clear and concise header tells readers to stop scrolling after they find what they want. Use only as many headings as there are specific sections of your page, as text that is too enlarged and bold will dampen this effect.
7. Delete labels
Whenever a user takes an action on your website, it must be clear what exactly they are doing and / or where they are going. All buttons should have plain text or an icon to indicate their purpose precisely and concisely. The same applies to in-text links and widgets (simple interactive elements such as dropdowns and text forms).
For example, a button associated with a pricing page should just read "Pricing" – anything beyond that (such as "See our prices," "Check the pricing page for a deal") is unnecessary. A search bar / button only needs a search glass symbol (🔍) and possibly the word “search” to identify its purpose.
User testing can be of great help here. Although you know for yourself what all of your interactive page elements do, this cannot be said to a new user. Testing can provide valuable information about what you think users mean beyond your own perspective.
8. Visuals and media
When adding static images, gifs, videos, and other media to your pages, remember to be consistent and intentional in your decisions. These elements will draw the attention of most other texts and will likely stay on users' minds. So choose them wisely.
Here is just one example of effective media on a homepage. Notice how each image compliments the page aesthetics and supports the offering of personalized fitness training with results.
In addition, all images and videos should be optimized for search engines and contain descriptive alternative text for accessibility.
9. Calls to Action (CTAs)
Having a nice website is great, but how do you know if your visitors are actually doing what they want? Are they engaging with your content? This is where CTAs come in.
A CTA is any page element that prompts user action. The action can be adding a product to a card, downloading a content offering, or signing up for an email list. Make your CTA elements prominent in the visual hierarchy (remember our Spotify example), but not intrusive or distracting, as is the case with many click-through ads.
If you need ideas for elegant CTAs that drive more conversions, check out our CTA sample list.
That's right, sometimes it comes down to the elements that you don't include. After reading these guidelines and requirements, you may be tempted to fill your pages with all of the details necessary for a flawless UX. Don't forget that your viewers need space to process all of this new information. So give your elements room to breathe.
But how many spaces should you have? This is another personal call that varies from location to location. Therefore, user testing is useful here too. What are people focusing on? Do you feel overwhelmed by the density of the content? Once again, it all has to do with our first guideline, simplicity.
Design that puts users first
In fact, web design is largely subjective – not everyone will like the look and feel of your website. However, there are also proven UX principles that, when carefully considered and included, will help visitors feel at home.
According to Amazon Web Services, 88% of website visitors are less likely to return to a website after a bad experience. And how can you blame them? We were all there for sure.
As the last piece of usability / UX wisdom, you should care more about it! Imagine the shoes (or more precisely, browser windows) of your visitors and keep them in mind at every step of the design process.