8 Steps to a Well Designed Site
Make it easy for your visitors to access the information they are looking for.
This is the main aim of your engagement site and the easiest way to achieve this is with a clean and well organizedorganised design. This post will take you through 8 simple steps to develop a well designed site using Bang the Table’s new Appearance Editor.
- Plan your content
- Choose a template
- Set your colorcolour scheme
- Choose a font
- Easily add branding
- Choose a hero image
- Create visual breaks
- Preview & get feedback
Start by taking a look at this PDF. It is a simple design created in Appearance Editor using these 8 steps. Keep it open as a reference as you read through this post.
What is the aim of your site? What do you want your visitors to do or know? An easy way to map this out is to grab a piece of paper and list how you would like your content to flow on your homepage. Think about your visitors when mapping your content; do they need an introduction? How far should they scroll before reaching your key projects? Why have they come to your site? Placing key information at the top will help your visitors navigate the site quickly and easily.
Sketch out the order you would like items to go in. Have a look at the new EngagementHQ templates to give yourself some ideas of how you could layout your design (the templates are just guidelines so you can change everything within them).
We have a wide range of blocks that can be stacked to create a flow that will work for your objectives.
For more information on developing your overall site, read our Getting Started with EngagementHQ series.
Choosing your template is just an easy way to begin structuring your homepage. But don’t stress over it, you can change the elements of your template at any time:
- Easily add, remove or move any section
- Update all the colorscolours and images
- Restyle any of the elements to best highlight your information
When choosing a template, consider which one has some of the blocks you would already like to use. Templates are a great way to get some ideas for how to structure your content and how colorcolour can be used to highlight different areas of your site.
Choose your colorscolours and stick with them. Keeping a consistent colorcolour scheme helps to tie all your site’s pages together. In this example, we are going to choose two colorscolours: A button colorcolour and a neutral colorcolour. You can use the in-app colorcolour picker to select these.
This should be a strong colorcolour that you could put white text on and still meet accessibility standards. You can test your button color’scolour’s accessibility here: colourcontrast.cc (White text code is: #ffffff)
- Set the Button ColorColour in the “Global Styles” section to set it across your whole site and create consistency.
- You can also use the button colorcolour as a background to highlight key areas of information.
This could be a graygrey or a very light shade of your button color. A great graygrey to use is HEX code #f5f5f5.
You should be able to put black text on the neutral colorcolour and still meet accessibility standards: colourcontrast.cc (Black text code is #000000)
- Use your neutral colorcolour to create subtle backgrounds. It can help separate different sections without one appearing more important than another. We will discuss this more in step 7 on creating visual breaks.
View the pdf example to see how button colorscolours and neutral colorscolours have been used.
Hint: Write down your chosen HEX colorcolour codes and stick to them. It will save you time and make your site cohesive. A HEX code starts with a # and is followed by 6 characters, it is generated by the picker.
It is a good idea to use a single font across your project. If you add a second font to your site it could start to feel busy. This will make it harder for your visitors to skim areas and find the content they are looking for.
With Appearance Editor you can set your font type and size in “Global Styles,” this will set them across your site. We have also included pre-selected sizes, these are chosen so that your font will look good on mobile, desktop and tablets. You can change these if you would like.
Hint: If you’re having trouble choosing, go for a simple “Sans-serif” font. This means a font with no little flicks on the ends of the letters. It is much easier to read on a screen and will help visitors digest your content. It also looks clean and modern.
You can load your logo into your site’s header bar with a single click. You can also adjust your header and footer colorscolours to match your branding.
Use a white header background for a more neutral effect or you could use your button colorcolour if you want it to stand out more. Remember not every logo looks good on every colorcolour, so a general rule of thumb is:
- Use a white or black version of your logo on a coloredcoloured header
- Use your full colorcolour logo on a white header
Your header and footer will be set across your whole site so you only need to do this once!
Easily change your logo with Appearance Editor: Think about how your logo will look when choosing your header colorcolour.
Start by choosing your banner block, you can change this at any time. To decide what block design to use, think about what you would like your visitors to do first. Do you want them to click a button and go to your key project, or do you want them to read an introduction to your site? There are a range of designs available to fit with your ideas.
Once you’ve chosen your banner block you can choose a hero image – this is a statement image that is going to give your visitor a first impression of your site.
If possible find a picture with a bit of your brand colorcolour in it. For example, if your main colorcolour is red, an image with red in it will help to tie your branding together. Keep your imagery simple and high quality. If you have too much going on, your site may feel messy and confusing.
Hint: You can crop pictures within the editor to get the key elements nicely centered.
Here the brand colorcolour picks up the red in the swings
Updating any of your homepage images is quick and easy with the new Appearance Editor, so consider these points when choosing project images or other imagery for your site.
Your homepage will probably have some different sections. Maybe one section shows projects and another shows your key dates. To help your visitor focus on each section separately it is a good idea to use background colorscolours to “Create Visual Breaks” this indicates where one section stops and the next section starts.
- Use the neutral colorcolour you chose earlier as a background colorcolour if you don’t want one section to seem more important than another.
- Use your button colorcolour in the background to highlight one section over others.
Visit our PDF example for a full view of how Visual Breaks are used
Before you publish be sure to review your site. How will it look on a computer, mobile or tablet? Are your sections still clear and are your fonts a readable size on all of those devices? Once you are happy (but before you publish) share it with your colleagues and ask them for clear feedback. For example:
- What did they want to click on first?
- Can they read content easily on their mobile?
- Do your titles seem clear to them?
- Could they easily find the information they were looking for?
Use the Appearance Editor preview to view your site in tablet, desktop and mobile view.
Once you and your colleagues are happy with your design, publish it and make it available to your community!
The new Appearance Editor by EngagementHQ is a powerful design tool. It will help you create a beautiful site to easily engage with your participants.