There are many things to consider when it comes to designing a website and an idea of ‘good’ design may vary from one person to another. However, there are certain principles and ‘rules’ that may help you design and communicate your message more effectively. Some of these are already built into the Website Builder platform.
Here are some tips on designing a great website.
Simplicity and clarity
Less is more
Avoid clutter. Simplicity helps users find what they need easily.
Clear navigation
Use intuitive menus and navigation bars so users can find content without frustration. A good way to do this is to categorise and ‘wireframe’ your site before you start designing it. Find out about wireframing from the UX Design Institute.
Find out more about organising your site
White space
Don’t be scared of white space – leaving space between elements and blocks helps guide the user’s eye and avoids overwhelming them with too much information.
Consistency in design
Colours
Your brand’s colour palette will have already been loaded into the Website Builder platform.
Assign roles to colours within your brand so they’re used consistently throughout the site (for example, button colour = blue). As users navigate the site, these colour roles will be reinforced so they can more easily spot them.
Layouts
There are 2 layouts pre-built into the platform. The ‘default’ layout is a slightly narrower version of the ‘full-width’ layout. The intended use of the ‘default’ layout is to make it easier to read large bodies of text.
The platform has headers and footers by default.
Responsive design
Take a mobile-first approach – ensure the design is responsive and works well on mobile devices, as generally more people access the internet via smart phones than they do using a computer. The Website Builder platform allows you to preview in mobile. Some blocks will have specific options for mobile.
Visual hierarchy
Headings and subheadings
Use headings (H1, H2, H3) to guide users through the content, making it easier for them to skim and digest information.
Call-to-action (CTA) placement
Strategically place your CTAs where they are easy to see (for example, without needing to scroll down the page, or after important sections).
Contrast
Use contrast between elements (for example, text and background) to direct attention to key areas and improve readability.
Accessibility
Readable fonts
Ensure text size is large enough and readable on all devices.
Alt text for images
Use descriptive alt text for all images to improve accessibility for users with screen readers.
Keyboard navigation
Ensure all interactive elements (for example links and buttons) are accessible via keyboard.
Website Builder is built with accessibility in mind, so it will help you to do these things. Find out much more in our accessibility guidance.