When it comes to web design, creativity and out-of-the-box thinking are great assets to have. However, there are aspects of the design process that are fundamental to good quality and must be retained. Without these foundations, your website design will not be as good as it could be. Incorporate these elements of web design into your website to better serve your visitors.
What makes a good website? Below are the 10 web design principles that will help you create a quality website that is aesthetically pleasing, useful, and accessible.
Purpose
Communication
Typeface
Colours
Images
Navigation
Load Time
Mobile-Friendly
Accessibility
Responsiveness
Your website should fulfil the user’s reason for visiting your site. Make it clear what the website is about and what your content covers as this will help your user establish if the web page is right for them. When building a web page, think about the purpose of the page: what your target audience will be looking for as well as what you want to achieve as you’ll want to communicate your offering to your audience. A tip for communicating your web page’s purpose is to use headings and images among other media to highlight your page’s intention. The purpose should probably be decided in the design phase and underpin every other design choice you make.
Web visitors don’t want to have to skim through loads of content to see if they’ll get the information they want. You can make the scope of the content clear by using headings, highlighting, and adding an all-important call to action. Make the text easy to read by maintaining a consistent tone of voice
Don’t clutter your content too close together, so’s to keep readability easy and effortless. When thinking about communication, take into account the types of devices users might use to access your website, as viewing content on mobile and tablet can differ widely from using a desktop. We recommend you leverage responsive design to make the best possible experience for users on all device types.
Choose a web-safe and easily readable font, such as a Sans Serif font, for your web design. Not using a web-safe font will cause your website issues, like the content may not appear on specific web browsers. Installed fonts can add to load times, so make sure they aren’t huge file sizes (or choose to compress them). A font size of 16px is considered easy to read on websites as standard. Quick tips: Use no more than 3 different font faces on a web page, and try to keep these consistent throughout a website as these can be a valuable part of the branding.
You can find a good range of free web-safe fonts from Google fonts to import to your website.
The choice of the colour palette is a vital principle of web design. Colours are often chosen to reflect the brand and to enhance readability and the user experience. Colour contrast between text and background is important and should meet the recommended minimum contrast ratio of 4.5 : 1. Choosing black text on a red background, for example, would cause serious readability issues. Avoid using too many colours as this can appear cluttered and distract from the content. Whitespace is effective in keeping a web page uncluttered and in focusing the user’s attention on the content.
A picture is worth a thousand words. Images can help set the tone of the content and reinforce the meaning of the text. Images make content more shareable and help with the marketing of the web page. Infographics are a great example of this. Images should help with the flow of the content and should not contradict what the content is about. Compress images to decrease their file size and take the strain off web-page load times. Just make sure the image quality has not been compromised.
Navigation systems help your user get around your website and find all the pages relevant to their search. A great structure is having a nav menu with sub-topical dropdowns. For larger websites, search bars can help users quickly find the content they want. A user also needs to know where they are within the structure of the site, so consider adding breadcrumbs to your web pages too, these show a user’s path from the homepage to the page they’re viewing. Sitemaps are also a factor for having your content seen by search engines, so make sure to add a sitemap listing your website pages.
Your fantastic web design is not so fantastic if it’s bringing down your site speed. Nobody likes waiting for websites to load. Google recommends a load speed of within 3 seconds. Achieve better load speeds by compressing image file sizes, minifying code, caching content, and consider using a CDN (Content Delivery Network). Once live, you can monitor and improve your load times using Google’s Pagespeed Insights, which gives in-depth explanations of your load speeds.
After the introduction of Google’s mobile-first indexing system, it has become evident that mobiles are quickly becoming the most popular device to access the internet. A mobile-friendly website is the present and future of web design, so make sure your content is easily navigable on a mobile device.
Websites must consider the needs of people with a visual or hearing impairment. Features might include the addition of alt text descriptions to images or creating multiple forms of your content, such as a transcription of a video or a playable soundtrack of written content.
Technology is constantly advancing and new devices that are capable of accessing the internet come out each year. Creating responsive websites makes your content accessible and more importantly, usable, by all of these devices. You can use Twitter Bootstrap to help make a website responsive to most viewports.
Bonus Principle:
The ‘F’ pattern design choice is favoured as a rule of thumb for website design as it keeps a natural flow for reading in English and most languages. Writing your content left to right, and top to bottom makes your content better designed with a clear visual hierarchy.
What makes for good quality web design?
Follow these 10 web design principles and then add a dash of personality and pizazz. But most of all, be guided by what a website visitor wants from the site and you should be able to create a high quality website
What is the purpose of web design principles?
Following these principles helps a web design stay focused on design that is best for your users……and best for your business.
