Website design can be a daunting task, especially if you’ve been given the responsibility of managing a web design project for your organisation.
At this stage, you’ve likely briefed and selected an agency that can guide you through the web design process. However, you’re still responsible for communicating your goals for the website and steering the agency in the right direction.
To ensure your website is the best it can be, collaboration is key. Understanding web design principles will help you collaborate with a web design agency and run the web design project more effectively.
It will also enable you to be more efficient with time and web design costs during the project, hit key deadlines, and deliver a beautiful website that’s tailored to your organisation’s requirements.
What are web design principles?
Web design principles refer to the fundamental guidelines and standards that govern the creation and presentation of websites. These principles include elements such as layout, colour, typography, user experience, accessibility, and responsiveness, all of which play a critical role in creating an effective and engaging website.
In this guide, we outline 14 key web design principles that will ensure your website meets your users’ needs, generates leads, and effectively communicates your brand and values.
Let’s dive in.
1. Consistency
Your website should have a consistent design and layout throughout.
When it comes to managing a website project, it’s important to keep in mind that your website is often the first point of contact between your brand and your audience.
As such, it’s crucial to make sure that your website looks great and functions as it should.
One way to achieve this is by implementing a web design system.
A web design system is a set of guidelines and tools that help define the visual identity, layout, and functionality of your website.
By using a web design system, you can ensure that your website is consistent, efficient, and accessible for all users.
An important aspect of a web design system is your website branding guidelines.
These guidelines will define the visual identity of your website, including the use of colours, typography, and imagery.
By following these guidelines, you can create a cohesive and recognisable brand image that resonates with your target audience.
Your web design system will also include UI components.
These are the ‘building blocks’ of your website, such as buttons, forms, and navigation menus.
By defining a set of UI components, you can ensure that your website is consistent and easy to use.
This helps reduce user frustration and makes it easier for your audience to quickly find what they’re looking for.
The layout and grid system is also an important component of a web design system.
This defines the overall structure and layout of your website, including the use of columns and rows to organise content.
Next up is accessibility guidelines.
These guidelines ensure that your website is usable for people with disabilities.
Content guidelines are also crucial when it comes to creating a successful website.
These guidelines define the tone and voice of your website and provide guidance on writing and editing content, ensuring your website is engaging, informative, and easy to read.
At Contra, we start with in-depth research into our clients’ website users before creating a web design system.
It ensures the content and design we create resonate with users.
When conducting user research for one of our clients in the education sector, we showed A-level students several websites and asked them what they particularly liked about each site.
When looking at the Leeds University site, one user smiled and stated, “It feels like they’re flirting with you.”
That’s the power of great content – it evokes an emotional reaction from your audience.
Finally, your web design system should consider responsive design.
Responsive design ensures that your website looks and functions well on a variety of devices and screen sizes.
We’ll discuss responsive design in more detail later in this article.
But for now, note it as a key website feature if you want to provide a positive user experience for your audience.
2. Usability.
Usability should be a top priority when designing your website.
A website that’s easy to navigate reduces user frustration, increases engagement, and ultimately leads to more conversions.
At Contra, we ensure a great user experience by using a number of methods.
The first rule is KISS (Keep It Simple, Stupid).
Keep the navigation menu simple and intuitive.
Use labels that accurately describe the content of the pages they link to.
Avoid using jargon or overly technical terms that might confuse users.
For example, if your menu links to your latest news updates, label it ‘News’.
Don’t overcomplicate it by calling it ‘Developments’ or something abstract as it will only confuse the user.
Make sure the navigation menu is prominently placed on your website, such as on the top or left side of the page.
This can help users quickly find what they are looking for.
Ensure your top menu nav floats as you scroll.
This is particularly important if your main CTA is embedded in the navigation (e.g. ‘Contact Us’).
Use drop-down menus to organise subcategories and reduce clutter.
This can make it easier for users to find the content they are interested in, without having to sift through a lot of unrelated information.
Consider using mega-menus or fly-out menus to make it easier for users to explore different sections of your website.
A mega menu is a large, multi-column menu with various options and sub-menus.
Mega menus are typically used on websites with a lot of content and many sections or categories.
For example, a law firm with a multitude of services and sub-services.
Mega menus are different from traditional drop-down menus because they display multiple levels of hierarchy at once, and often include images, icons, or other visual elements to help users quickly identify the content they are looking for.
Mega menus are usually accessed by hovering over or clicking on a main menu item, which then expands to show additional options and sub-menus.
This type of menu design can help improve user experience by making it easier for users to find what they are looking for and reducing the need for multiple clicks to navigate through a site’s content.
Mega menu in action: Magrath Sheldrick LLP
Magrath Sheldrick came to Contra in need of a web design refresh. However, when diving deeper, we discovered that they were missing opportunities to split their services to another level and optimise them for key search terms to drive organic traffic. This required services, sub-services, and sub-sub services, as well as splitting both 'business' and 'personal' services. Our solution was a mega menu that clearly created a hierarchal structure and ease of navigation.
Breadcrumb navigation is essential for larger websites with many pages and subcategories, helping users understand their location within the website structure.
Additionally, providing a search bar for users to quickly find specific content is beneficial, especially for those who don’t want to browse through the navigation menu.
Consider using fuzzy search, which takes into account variations in spelling, word order, and typographical errors when searching for a match.
To ensure the effectiveness of the navigation, it’s crucial to test it with real users and get feedback to identify any problems.
At Contra, we use a user-testing tool called Treejack, which provides insights into the effectiveness of the information architecture and highlights areas that need improvement.
A/B testing can also be useful for comparing different versions of the navigation and determining which is most effective.
To summarise, a well-designed navigation system is crucial for the user experience of any website.
By utilising tools such as mega menus, breadcrumb navigation, search bars, fuzzy search, user testing, and A/B testing, you can ensure your website’s navigation is effective and user-friendly.
3. Content hierarchy.
Clear structure and organisation of content is absolutely crucial to success.
Here are some key tips on how to create a strong content hierarchy on your website.
The first way you can indicate the relative importance of different elements on the page is through size.
By making headings or images larger, you can draw attention to them and signal their importance.
Another way to create a visual hierarchy is through contrast.
Using colour, font weight, or other visual cues to make elements stand out from the background can help you highlight important information and catch the user’s attention.
Proximity is also an important principle of content hierarchy.
By grouping related information together, you can help users understand the relationships between different elements on the page.
Repetition is a powerful tool to reinforce hierarchy and make it easier for users to navigate the page.
By repeating certain elements, such as headings or images, you can create a sense of consistency and structure.
Repetition in Action: Hudgells Solicitors
Hudgell Solicitors is a UK law firm specialising in medical negligence, personal injury and actions against public authorities.
When building their site, we used repetition to ensure each service and subservice page included a main menu navigation, company logo, trust markers, graphics, a powerful image and two call-to-action buttons.
Alignment is another important consideration when creating a clear visual hierarchy.
Consistently aligning elements can help create a sense of organisation and structure on the page, guiding users through the content.
Finally, the use of white space can help create a sense of balance and clarity.
By using white space strategically, you can separate different elements on the page and focus users’ attention on the most important information.
By following these principles of content hierarchy, you can create a website that is easy to navigate and understand.
Whether you’re designing a new website or revamping an existing one, focusing on content hierarchy can help you create a better user experience for your audience.
4. Clarity.
Clarity is key when designing a website.
Your website should be easy to read and understand, no matter who is visiting it.
To achieve this, here are some important considerations to keep in mind:
Firstly, use a legible font.
Choose a font that is easy to read and adjust the font size as needed.
Serif and san serif fonts are common choices, but what matters most is that your font is easy to read and doesn’t strain the eyes of your visitors.
Serif fonts have small lines or flourishes (known as “serifs”) at the end of strokes that make up the letters.
They are often considered more traditional, formal, and classic, and are commonly used in print materials such as books, newspapers, and magazines.
Serif fonts are also good for long blocks of text because the serifs help guide the reader’s eye along the lines of text, making them easier to read.
Sans serif fonts, on the other hand, do not have serifs, which gives them a clean, modern, and minimalist look.
They are often used in digital media and are well-suited for headlines, titles, and short blocks of text because of their legibility and clarity.
Sans serif fonts are also commonly used for interfaces and menus because they are easy to read in smaller sizes and on screens of various resolutions.
Next, use sufficient white space to separate different sections of your website and make it easier to scan.
White space helps to create a sense of balance and clarity and can make your content more engaging and enjoyable to read.
Choosing a good colour scheme is also important for readability. Use colours that have good contrast and are easy on the eyes.
Keep in mind accessibility tests to ensure text is legible with colours. For example, using white text on a light background could make the text hard to read.
At Contra Agency, we use a range of accessibility tools from sites such as WebAIM to ensure colour pairings pass accessibility tests.
Optimising your website for mobile devices is another key consideration.
Make sure your website is easily readable on mobile devices, with a responsive design that adjusts to different screen sizes and resolutions.
Using headings and subheadings is a great way to break up the content and make it easier to scan.
Headings can also help users to navigate the page and find what they’re looking for more quickly.
It’s important to make your website easy to navigate.
Use clear labels and links to make it easy for users to find what they’re looking for, and ensure that your navigation menu is intuitive and well-organised.
For long-form pieces of content, like this article, consider a jump-to menu so users can instantly navigate to the section they’re interested in.
Finally, optimising your website for accessibility is crucial.
Make sure your website is accessible to users with disabilities by following WCAG (Web Content Accessibility Guidelines) and other standards.
Consider using assistive technologies, such as screen readers, to test and ensure that your website is fully accessible to everyone.
Clarity in action: The Royal Society
The Royal Society came to contra with one key KPI for their web design:
Engagement.
To engage users, clarity is key. It's the foundation for any successful web design. We used a beautiful font, clear hierarchal headings, contrasting colours and ensured the site met web accessibility standards. The result? The site experienced a 22% increase in engaged sessions and newsletter sign-ups doubled.
5. Branding.
When building a website, it’s essential to ensure that the design aligns with the brand’s visual identity and values to create an emotional connection with visitors.
Here are some key elements to consider when incorporating branding into your website design.
Use a consistent colour scheme and typography that aligns with the brand’s visual identity.
By using the same colours and fonts consistently throughout your website, you can create a cohesive and recognisable brand image.
Include the brand’s logo prominently on your website, such as in the header or footer.
This will help to establish the brand’s identity and make it more memorable to visitors.
Logo in Action: Homerton College
Your logo is key for brand recognition and creating an emotional connection with your readers.
When Homerton College (part of the University of Cambridge) came to us, they needed a digital rebrand.
Their current site focused more on prestige and heritage. However, student needs have changed and the college wanted to reposition its values towards inclusivity and community.
Homerton’s current site logo needed modernising.
While the use of a crest reflected its heritage, it felt outdated.
We began by using a more friendly, down-to-earth sans serif typeface.
We used vertical straight lines to form an uppercase ‘H’, which created a sense of depth and progression.
We also introduced a contemporary shade of blue which could also be monochrome on certain backgrounds when necessary.
Use brand-specific language and messaging throughout your website’s copy and content.
This will help to communicate the brand’s values and personality, making it easier for visitors to connect with the brand on an emotional level.
Incorporate interactive elements such as quizzes, polls, and surveys that are unique to your brand.
This can help to engage visitors and encourage them to spend more time on your website, which can lead to increased brand recognition and loyalty.
Utilise brand storytelling elements into your website design, such as videos, images, and case studies.
This can help to showcase the brand’s history, values, and achievements, and help visitors to understand what makes the brand unique.
Create unique custom imagery and icons that align with the brand.
By using custom images and icons that are tailored to the brand’s visual identity, you can create a more memorable and engaging website experience for visitors.
Next up, incorporate reviews and testimonials from satisfied customers to build trust and credibility for your brand.
By showcasing positive feedback from real customers, you can help to establish the brand’s reputation and encourage visitors to take action on your website.
6. Colour and Calls to Action.
To create a visually pleasing website design, effective use of colour is essential.
By following the 60-30-10 rule, designers can create a visually appealing and well-balanced colour scheme that can enhance the user experience and effectively communicate the website’s brand and message.
This rule suggests that a well-balanced colour scheme should consist of 60% of a dominant colour, 30% of a secondary colour, and 10% of an accent colour.
In web design, this rule can be used to guide the selection of colours for various elements on a website, such as backgrounds, text, buttons, and other design elements.
The dominant colour (usually white or slightly off-white, or a dark colour on dark interfaces) is typically used for the background or large areas of the website, the secondary colour for subheadings or sections, and the accent colour for highlights, call-to-action buttons or other small design details.
Digging further into how colour can affect a user’s experience, consider using contrasting colours to make important elements stand out and grab the user’s attention.
Colour in action: Everyone's Energy
Everyone’s Energy offers modern solar panel installation services, but their previous website design was anything but modern. We developed a full marketing strategy, including a refreshed brand identity that shaped the new website design.
The bold brand was reflected through vibrant, contrasting colours and clear call-to-actions. The result was a 91% increase in new users, and the site won a Digital Impact Award for 'Best use of Digital in the Energy & Utilities Sector'.
Additionally, complementary colours, which are opposite each other on the colour wheel, can be used to create a sense of balance and harmony.
Analogous colours, which are next to each other on the colour wheel, can be used to create a cohesive and natural look.
For a consistent and unified design, monochromatic colours, which involve using different shades of the same colour, can be used.
Triadic colours, which are evenly spaced around the colour wheel, can be used to create a sense of variety and interest.
Effective use of white space can also contribute to a clean and uncluttered design and can make important elements stand out.
Additionally, it’s important to consider colour psychology when choosing colours for a website.
Certain colours evoke specific emotions or feelings and can influence the user’s experience and perception of your website.
For example, purple is associated with luxury. Blue is associated with trust. And green is associated with health and vitality.
Finally, be sure to test your colour choices to ensure they meet accessibility standards for users with colour vision deficiencies.
Calls to action (CTAs) are an essential part of any website, as they guide users towards a desired action or conversion.
To create effective CTAs, it’s important to keep them clear, simple, and specific. Use action-oriented language and make the CTA stand out visually on the page through the use of contrasting colours.
Place it in a prominent location that is easy for the user to find and click on.
To create a sense of urgency, you can use language or design elements that convey the idea that the user needs to act now.
Top tip:
Use a hover menu with a CTA so the CTA is always visible as you scroll.
A/B testing is an effective way to test different versions of your CTA to see which one performs better.
For example, if you’re optimising a law firm website, try out “Start my claim” rather than “Start your claim”.
Personalisation tweaks have been shown to increase conversions within CTA buttons by 202%.
You can also make sure that the CTA is mobile-friendly, easy to click on, and visible on all devices, including mobile.
Another important consideration is to make sure that the CTA matches the offer or message on the landing page to avoid confusion.
Creating trust is also important in encouraging users to take action. You can use social proof (such as testimonials, accreditations, awards, statistics and guarantees) to build trust before asking for the conversion.
By following these tips, you can create compelling CTAs that drive conversions and help your website achieve its goals.
7. Credibility.
To establish credibility, a website should incorporate various elements that instil trust in its visitors.
As mentioned previously in this article, one way to achieve this is by using trust markers and social proof.
This can include displaying customer satisfaction scores (CSAT) and Net Promoter Score (NPT), as well as showcasing third-party review sites such as Trustpilot, Google Reviews, or other reputable sources.
Testimonials are another effective way to establish credibility.
This can include written testimonials from satisfied customers, or even video testimonials that offer a more personal touch.
Awards and accreditations can also be effective in building trust, as they indicate your product / services have been recognised by other reputable organisations or entities.
Be sure to ‘show, don’t tell’ throughout your website.
If you say you’re “leaders in professional development”, be sure to have results and data to back this up. If you say you put your customers first, include customer testimonials, reviews and satisfaction scores.
It’s important to note that the credibility of a website can also be influenced by the quality of the design and the overall user experience.
For example, a website that is easy to navigate and uses clear and concise language can help to establish credibility with its visitors.
8. Accessibility.
To ensure that a website is accessible to users with disabilities, there are several best practices that website owners should follow.
These practices include:
- using semantic HTML to properly structure content on your website,
- providing alternative text for all images on your website
- ensuring that the website can be navigated using only a keyboard
- adding captions and transcripts to multimedia content,
- ensuring that the website is compatible with assistive technologies.
It’s also key to test your website with users who have disabilities to identify and fix any issues.
By following the Web Content Accessibility Guidelines (WCAG) 2.2, website owners can ensure that their website is accessible to all users.
Implementing these best practices can help ensure that all users, regardless of any disabilities, can access and use the content on your website.
By making a website accessible, website owners can reach a larger audience, provide an inclusive user experience, and demonstrate their commitment to accessibility and diversity.
9. Responsive design.
A website that’s optimised for different screen sizes and devices is crucial for providing a good user experience to all visitors, regardless of the device they are using to access the website.
Responsive design enables your website to adapt and display correctly on different screen sizes, resolutions, and orientations, including smartphones, tablets, laptops, and desktops.
To achieve this, designers often use a flexible grid-based layout, which adapts to different screen sizes and resolutions.
CSS media queries are used to apply different styles based on device characteristics, such as screen size, resolution, and orientation.
This ensures that your website looks and functions properly on all devices, without the need for separate versions of the website for each device.
Another important aspect of responsive design is the optimisation of images and other media for different devices.
This includes using appropriate file types, compressing images, and reducing the file size to ensure that your website loads quickly on all devices.
Try to keep your image file size to no more than 2 Megabytes so they don’t impact your page load speed.
Remember, a slow loading speed increases your website’s bounce rate and can decrease your search engine rankings.
Full-screen background images should be between 1,500 pixels and 3,840 pixels wide. Most other images can be a max width of 800 pixels.
A mobile-first design approach is also commonly used in responsive design, which involves designing for the smallest screen size first and then progressively enhancing the design for larger screens.
This approach ensures that your website is easily navigable on smaller screens and touch-based devices, such as smartphones and tablets.
Optimise for touch by ensuring that buttons and links are large enough to be easily tapped with a finger and that there is enough space between them to avoid accidental taps.
Additionally, it is important to prioritise content, ensuring that the most important information is visible above the fold and that users can easily access the information they need.
Utilise a mobile-first approach if your Google Analytics data demonstrates your audience primarily interacts with your website on mobile.
10. SEO and Performance.
Search engine optimisation (SEO) is an important aspect of website design, as it can help increase visibility and drive traffic to a site.
To optimise a website for search engines, several key elements need to be considered.
One of the first steps in SEO is keyword research and optimisation.
This involves identifying relevant keywords and phrases that users might use to search for the type of content or services offered on your website.
These keywords should then be strategically placed in website content and meta tags to help search engines understand the content of the site.
A good agency will conduct keyword research for you.
Prioritise your target keyword in your page’s H1 heading, at least once in your H2 headings and throughout the body copy and include secondary focus keywords throughout your body copy.
However, don’t stuff keywords as Google can penalise you and this can negatively impact your SEO rankings.
Tools such as Yoast can guide you on the right level of keyword use.
Optimise your URL with the page’s target keyword and use your keywords in image alt tags.
Ensuring that these elements are properly structured and optimised helps search engines better understand the content of the site and improve its visibility in search results.
Quality content is also essential for SEO.
Google's March 2024 core update focuses on experience, expertise, authority and trust.
Creating high-quality, original content that provides value to users and answers their search queries can help improve the visibility and credibility of a website.
Equally, ensure it is written by an actual author with credibility and experience to talk on the matter.
This will send trust signals to Google and help improve rankings.
Good quality content can also help attract inbound links, which are seen as a vote of confidence by search engines and can help improve the site’s ranking.
Blogs, guides, case studies, pillar pages and topic clusters, cheat sheets and FAQs are all valuable pieces of content for both your users and search engines.
Backlinks are another important factor in SEO.
Building high-quality inbound links to a website can help improve its credibility and visibility in search results.
These links should come from reputable sources and be relevant to the content of your website.
Next, consider technical SEO. Ensuring that your website is technically sound and free of errors that could affect its visibility and ranking in search engine results is essential for SEO success.
Technical SEO involves optimising website elements that impact search engines’ ability to crawl, index and understand the website’s content.
Some of the key components of technical SEO include:
- Website structure – A well-structured website with a clear hierarchy of pages and content makes it easier for search engines to understand and index the site.
- Indexability and crawlability – Ensuring that search engines can crawl and index all the pages on the website is important for visibility and ranking.
- Schema markup – This involves using schema markup to provide additional information to search engines about the website’s content and context.
When it comes to website performance, speed is key.
They say speed kills. In the world of marketing and web design, slow speed kills…
…your lead-generation.
A website that loads quickly is more likely to keep visitors engaged and improve their experience.
One important factor to consider is image optimisation, which involves reducing the file size of images on your website to decrease page load time.
Using a Content Delivery Network (CDN) is another useful tool, as it distributes your website’s static assets across multiple servers, reducing the load on a single server.
Minimising HTTP requests can also help speed up your website.
Every time a browser requests a file, such as an image or a CSS file, it creates an HTTP request.
Minimising the number of requests can help reduce load times.
To save time, use a caching plugin to store a copy of your website’s pages and posts so that they can be served to visitors without having to be regenerated each time.
Optimising code is also essential for reducing page load times.
Using a performance monitoring tool can help identify which areas of your website are slow and need optimisation.
A good hosting service can also ensure that your website is up and running quickly and reliably.
Redirects create additional HTTP requests and add latency to your website, so it’s best to avoid them or keep them to a minimum.
Browser caching is a way to store a copy of the files that make up your website on the visitor’s computer, so when the visitor comes back to your site, the browser can load the cached files instead of having to download them again.
Finally, using compression software can help you compress the files that make up your website, making them smaller and faster to download.
Site speed in action: EcoAct
EcoAct approached us needing a web redesign due to their slow, underperforming site. We completely revamped the website’s structure and performance, introducing a new layout that highlighted their updated services. WordPress and Elementor audits were conducted to significantly boost site speed. After a range of site speed optimisations, we increased the Google page speed score from 30 to 96.
11. User engagement.
User engagement is crucial for the success of a website.
Several strategies can be implemented to encourage user interaction and participation.
One of the most important factors is creating valuable and relevant content that addresses the needs and interests of your target audience.
By providing high-quality content that meets their needs, you can increase the likelihood that users will engage with your site and return in the future.
In addition to content, it’s important to make it easy for users to navigate and find what they’re looking for.
A well-organised and intuitive website design can help users quickly find the information they need and increase their engagement with your site.
User-generated content is another effective strategy for encouraging engagement, such as comments, reviews, and testimonials.
This not only fosters a sense of community on your website but also provides valuable social proof to potential users.
Creating short animations and microinteractions is another effective method of engaging website users (as well as creating a modern feel for your site).
Website microinteractions are small, often subtle, interactive elements on a website that allow users to engage with and provide feedback to the website.
These interactions can take many forms, including buttons, animations, hover effects, and sound effects, among others.
Microinteractions are designed to improve the user experience by making it more engaging, intuitive, and enjoyable.
Microinteractions in action: Wolfson College, University of Cambridge
When building the website for Wolfson College, University of Cambridge, we created instant engagement by animating the ‘W’ in the hero section.
The ‘W’ acts like a small window into the world of Wolfson. Users can then hover over the word, ‘Wolfson’ to reveal the campus image background.
Implementing interactive elements such as quizzes, polls, and games can also encourage user engagement and make the user experience more enjoyable and memorable.
Offering incentives for engagement, such as discounts or special promotions, is another effective strategy.
This can help incentivise users to take action on your site and increase the likelihood of repeat visits.
Utilise newsletters to create a sense of community. Additionally, encouraging users to interact with each other on your website can also foster a positive user experience and increase engagement.
Finally, it’s important to continuously analyse and improve the user experience on your website based on user feedback and data.
This can help you identify areas for improvement and make adjustments to enhance user engagement and satisfaction.
Setting up Google Analytics 4 and tracking custom events will enable you to measure which pages are driving traffic and converting on your site, and which need optimising.
Redesign my website now.
Contra has over 24 years of experience in designing and developing websites for leading organisations including KMPG, Oxford University and MetFilm.
Let us know your next project and we’ll get back to you within 24 hours to arrange a call and a free initial website review. We’ll use this time to look at your site and discuss any goals or challenges you have.