Website conventions you say? But I want my website to look different!
Designing with website standards and conventions is 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 and easily find what they are looking for. But it’s also important to remember that your website can still look different even if your web designer is pushing you to follow website standards.
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.
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.
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.
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.
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.
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.
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.
We want you to have a unique website that’s easy for your users to navigate and find the information they are looking for. So by following these simple website conventions, you’ll be on the right track to achieving a user-friendly website. Are there any website conventions you follow that aren’t mentioned? Let us know in the comments!