Web Design Best Practices
People visit a website to achieve a goal. The design should help people achieve this goal, and it is best to keep the design simple and goal focused, without unnecessary design elements.
Keep the number of options presented to a minimum.
Don't use too many, 5 should be enough, keep the number of different colours to the minimum needed.
Typefaces / Fonts
Chose legible typefaces.
For text colour, ensure there is enough contrast with the background.
Keep the number of different typefaces and text sizes low. A maximum of three different typefaces in a maximum of three different text sizes should be enough.
Text should be legible across multiple devices and screen sizes.
Arrange website elements so that visitors naturally gravitate towards the most important elements first.
Use position, colour and size of an element to control its visual hierarchy.
Use whitespace (negative areas in a composition) to help emphasise important elements.
Navigability / Easy Navigation
Keep your primary navigation simple and at or near the top of the page.
Add navigation to your footer.
Consider using breadcrumb navigation.
Provide a search bar at the top of your site.
Keep the number of menu items to a minimum. Use a More link if necessary. Don't offer too many navigation options per page.
Include links within your page copy, and make it clear where those links go.
Try and keep a flat structure, and don't bury pages too deep.
Make a wireframe map of your site.
Keep your navigation consistent across pages, i.e. same position.
Consider making navigation sticky at the top of the page.
The overall look and feel of your site should be similar across all of your site's pages.
Your site should automatically resize to fit the dimensions of whatever device is being used to view it.
Your site should work in all popular browsers. See What Browsers Should I Test My Website In?
Guide to Web Accessbility from Hub Spot
Some common conventions are:
Have navigation at the top or left side of the page.
Have your logo at the top left or centre of the page. Make the logo a link to the home page.
Links and buttons should change colour when you mouseover them.
All Content ©2020 WebRef.eu