This is the main aim of your engagement site and the easiest way to achieve this is with a clean and well organised design. This post will take you through 8 simple steps to develop a well designed site using Bang the Table’s new Appearance Editor.
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.
1. Plan your content
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.
2. Choose a template
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 colours 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 colour can be used to highlight different areas of your site.
3. Set your colour scheme
Choose your colours and stick with them. Keeping a consistent colour scheme helps to tie all your site’s pages together. In this example, we are going to choose two colours: A button colour and a neutral colour. You can use the in-app colour picker to select these.
This should be a strong colour that you could put white text on and still meet accessibility standards. You can test your button colour’s accessibility here: colourcontrast.cc (White text code is: #ffffff)
Set the Button Colour in the “Global Styles” section to set it across your whole site and create consistency.
You can also use the button colour as a background to highlight key areas of information.
This could be a grey or a very light shade of your button color. A great grey to use is HEX code #f5f5f5.
You should be able to put black text on the neutral colour and still meet accessibility standards: colourcontrast.cc (Black text code is #000000)
Use your neutral colour 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 colours and neutral colours have been used.
Hint: Write down your chosen HEX colour 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.
4. Choose a font
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.
5. Easily adding branding
You can load your logo into your site’s header bar with a single click. You can also adjust your header and footer colours to match your branding.
Use a white header background for a more neutral effect or you could use your button colour if you want it to stand out more. Remember not every logo looks good on every colour, so a general rule of thumb is:
Use a white or black version of your logo on a coloured header
Use your full colour 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 colour.
6. Choose a hero image
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 colour in it. For example, if your main colour 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 colour 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.
7. Create visual breaks
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 colours to “Create Visual Breaks” this indicates where one section stops and the next section starts.
Use the neutral colour you chose earlier as a background colour if you don’t want one section to seem more important than another.
Use your button colour in the background to highlight one section over others.
Visit our PDF example for a full view of how Visual Breaks are used
8. Preview and get feedback
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.
To enable Appearance Editor on your site please reach out to the support team via chat or email at firstname.lastname@example.org.