Website conventions you say? But I want my website to look different!
Designing with website standards and conventions are crucial for ensuring everyone, including nonhuman web crawlers, can easily access every page of a website across the internet. These standards also help make websites feel familiar from site to site, making it easier for the everyday user to navigate from one page to the next. But it’s also important to remember that your website can still look unique while following website standards. Keep these website conventions in mind and you’ll make it easy for users to navigate your website, while also enjoying creative freedom. We’ve updated this blog post in 2024 to give you the most up-to-date website conventions and best practices, as well as some ways you might effectively upend or defy these conventions.
Why Are Website Conventions Important?
Website conventions are essentially patterns that help to set users’ expectations and guide users as they navigate a site. Though there’s no instruction manual for navigating a website, or the internet in general, most of us learn how to use online resources in a relatively short amount of time. This is, in part, because of website conventions. Our pre-set expectations, formed by our previous experiences with other websites, give us a starting point for understanding most web properties. Though these conventions might change slightly year over year, leading to larger changes over longer time periods, the change is slow enough that users can adapt.
Sometimes, upending conventions makes room for innovation. Other times, it’s simply disorienting. The difference between the two is often decided by the usefulness of the convention—if an expected way of doing things isn’t useful, upending this convention might make an improvement. However, upending a convention which serves a useful purpose will create confusion.
So what do website conventions do? Why are they important? If you’d like to get especially creative and you’re considering upending website conventions, consider the purpose the convention might serve, such as:
- Provide a navigation roadmap: when buttons, links, and other website elements behave in an expected way, users can navigate the site without confusion. If a site deviates significantly from a user’s expectations, they can quickly become confused, and simply click away.
- Make room for web crawlers: web crawlers are digital robots that are designed to scan a page and send key information back to their source, such as Google. These robots are designed to crawl a page in a specific way, and deviation from website conventions creates roadblocks for them. If this happens, your site may encounter problems, like suffering SEO penalties.
- Allow for accessibility: many people do not read the web in the traditional way. Some people might use a screen reader or use magnification or devices that assist in navigation. Website conventions help to make the web accessible, and allow assistive devices to use websites more easily.
Below are the top 7 website conventions you should follow when designing your site:
1. Logo Placement
This is a big one when following website conventions. Logos should be placed highest up on the page and 99% of the time, placed on the left side of the page. Sometimes, it’s acceptable to place the logo top center, but when in doubt, align left. Now let’s talk size. Your logo is already in one of the most important spots on the page, so there is really no need to make it bigger. The logo should also always link back to the homepage.
Why is this important?
This website convention helps users return to the homepage at any time, making the site easier to use, and aids in brand recognition. With this logo placement, users can immediately tell where they are on the web and what your site is about.
2. Main Navigation
Site navigation is an important website convention for users to find the information they are looking for. With that being said, main navigation should be placed along of the top of the page, either to the right of the logo or below the logo. Less is more is also important for the number of pages included in the main navigation. We suggest anywhere from 5-7 pages in the first level of navigation and no more than three levels for sub navigation. This will prevent users from being overwhelmed with your content and help them find what they’re looking for more easily.
Why is this important?
Navigation is critical to site usability and navigation. If users can’t find what they’re looking for quickly, they’ll click away. Website conventions help users know immediately where and how to navigate a site, so they don’t have to hunt. There are some conventions you might bend or shirk to get creative, but this isn’t one of them. Changing navigation conventions will not only confuse users, but it also can affect accessibility and SEO.
3. Content Hierarchy
Website conventions for website content is to create a content hierarchy. This means that content should be made up of headings and paragraphs. Heading One should be used only once and the highest up on the page. This should contain the message and value of the page. After Heading One you may have some content or you might use the second heading called Heading Two. Any sub heading within Heading Two will be Heading Three and so on. Make sure these headings are keyword-focussed on the page to aid with SEO and bring relevant visitors to your web pages organically through search.
Why is this important?
Proper content organization is especially important for SEO and accessibility. Web crawlers that determine where your content shows up when users enter a search use hierarchical content conventions to “understand” what a page is about. If your content organization doesn’t make sense with the web crawler’s programming, the web crawler will consider your page disorganized, less valuable to users, and therefore less likely to show up in a search.
4. Using a Grid
A grid system is a structure made up of a series of horizontal and vertical lines that intersect and are used to organize and arrange content and images. Not only does a grid system allow you to achieve consistency but it also creates flow and hierarchy on a page. This grid system is part of what makes it easy to use a Google document to wireframe a page.
Why is this important?
The grid pattern for a website layout is similar to a house layout; while there are many ways to construct a house, there are a few standards that must be met, or the design starts to affect the functionality of the home. For example, ceilings must be at least a certain height, and you generally wouldn’t walk through one bedroom to get to another. A website grid pattern is similar; you can make many changes, but this organizational system helps to keep content where it makes sense.
5. Link Styling
Another website convention to follow is link styling. Cross linking between pages and linking to other sources is a common practice but in order to differentiate link text from page text, you’ll want to use a different color for each. Page text is usually some shade of black, whereas link text should be a brighter color and, sometimes, bold or underlined. We typically recommend using the company’s primary or secondary color for links.
Why is this important?
Color contrast helps users quickly recognize links that they can click on, so they can navigate the site more easily. The general convention is black text with blue link text, but this can be adjusted, as long as there is adequate color contrast. Avoid using colors that are too light, since they tend to get lost in white backgrounds, or colors that are too dark, as they’ll blend in with regular text.
6. Buttons
Buttons should also follow website conventions. They should have some sort of background and hover effect. The background color is typically the same color as the link text or a secondary color. Buttons should be used for more important calls to action whereas link text can be used within paragraphs of information.
Why is this important?
Buttons are another part of users’ expectations. A user knows, from their previous experience, that a button leads to another page, usually on the same website. There are many ways to style buttons and, as long as the buttons use adequate color contrast and proper sizing, users will generally recognize buttons when they see them.
7. Colors
Colors should be determined base on your company’s brand standards. But if your company does not have brand standards then we recommend using 2-3 colors and 1-3 neutrals (white, black, gray). If you need more color then use tints and shades of the colors already chosen. This is an important website convention because it keeps your website cohesive and connects your branding on and off the web.
Why is this important?
Your color scheme is important for brand recognition, but it’s also important for accessibility. As previously mentioned, colors without adequate contrast can be difficult to read or interpret. Use a color contrast checker tool to make sure your color contrast is right. As long as these standards are met, there’s plenty of room to get creative.
How to Show Creativity in Your Website
If you’ve feeling constrained by these website conventions, there are ways to make your site unique, but still allow it to perform effectively. Here are a few ways that you might showcase your creativity, while still allowing users to navigate the site effectively.
- Single-page site: A single-page site, also called a landing page site, is a great way to create a simple, but beautiful site. These sites include all the information you need on a single, scrolling page, and allow space for more creativity.
- Transitions: There aren’t strict conventions for how to transition between pages as a user clicks around your site. The right transition effects can make your site more artistic and visually appealing. Just make sure that these transitions don’t slow down your site or make it distracting.
- Creative colors: Appropriate color contrast is essential, however the actual hue of the color leaves lots of room for creativity. The color scheme you choose for your website is up to you, and can reflect the mood of your business or organization.
- Videos and images: Creative videos and images are another great way to show the personality of your website. Consider how you might use videos or images as your site banner, intermittently throughout your site, or even on your bottom banner.
- Backgrounds and graphic elements: Consider how you might use background and style elements to portray the mood or personality of your site. Thicker lines and borders, for example, might lend towards a pop-art or graphic style, while grayscale elements might lend gravitas, and lots of bright colors or undefined shapes might lend whimsy and energy.
A website that is unique and memorable as well as effective and navigable uses website conventions thoughtfully. By using these website conventions while infusing your site with character, you can make a beautiful and user-friendly site.