Skip to main content
All CollectionsAppearance editor
Tips for Designing Your Engagement Site
Tips for Designing Your Engagement Site

Here are some tips for using the Appearance Editor to design your site.

Gayathri Rajendiran avatar
Written by Gayathri Rajendiran
Updated this week

A well-designed homepage is essential to a successful community engagement site. Many people, however, find it difficult to know where to start, and some choices you make in the Appearance Editor affect your whole site. We've put together these tips so you can start planning and developing a welcoming and informative website.

Plan Your Content

Before you start creating content for your homepage, it’s worth mapping your site to understand how your site visitors will find content. Engaging with your organization and site should be easy, so consider the following:

  • Do you need to add introductory content?

  • Do you want to emphasize registration?

  • Which key projects do you want to highlight?

  • Will FAQs or a Who’s Listening widget help reassure your community?

The answers to these questions can help you choose your homepage template and which sections you want to include.

choose a layout for the project section when adding a new section

Choose a Template

The template you select in the Appearance Editor gives you a starting point for your homepage design. There are six templates to choose from, and each one is customizable. You can:

  • Add, remove, or move sections within the template

  • Update existing colors and images to match your branding

  • Restyle existing section layouts to highlight information

Templates are very flexible and good for understanding how to structure and highlight your content. When selecting your template, consider which already has sections you want to include and how to tweak them to match your design.

choose a template for your homepage

Set Your Branding

Branding is essential for a cohesive and organized site. Your site’s branding includes:

  • Brand Color: In Global Styles, you can use the color picker or color codes to choose your Brand Color. This color will appear on homepage buttons and on various project page elements. You can also set secondary colors or Advanced Color Overrides in Project Styles.

    the color picker to set your brand color
  • Font: Choose your font family and sizes in Global Styles. While you can set a different Title Font and Content Font, we recommend using the same one for both, so your content is easy to read and skim. We also have pre-set Font Sizes that will look good across all devices. If you need to choose a font, select a sans-serif font as they are easily read on screens.

  • Logo: Upload your logo into the site header in Logo, Icons & Images. You may have several versions of your logo to match different background colors. If your header is white, use a full color logo, but if you’re using a colored header, use a white or black version of your logo.

    the logo field in appearance editor

Your organization likely already has branding that you must stick to. If you must choose colors, select colors that meet color contrast accessibility standards. The color of your text must have enough contrast from your background or button colors to be accessible. Pick a strong primary color and a neutral background color, and note down the hex code so you don’t forget.

Choose Your Banner Image and Layout

Most sites will include a banner image to introduce the site. Our Banner section has various layouts from which to choose. For example, some layouts are designed for brief text and a button link, while others are more suited to longer introductions.

the banner layout options

Next, select a hero image that will be most visitors' first impression of your site. It should be eye-catching and engaging but also simple and high-quality. If possible, select an image that reflects your brand color for a more cohesive look.

You can upload your own image or use the built-in Unsplash gallery to find free and high-quality images. You can also crop or center your image within the editor.

Create Visual Breaks

To help differentiate the sections of your homepage, you can use contrasting background colors to create visual breaks. For example, you may have a different section for Published and Archived projects.

Using your organization’s primary, secondary, and tertiary colors, you can change the background color of each section to contrast them. If you do, please ensure that the text and button colors continue to meet color contrast accessibility standards.

three sections on the homepage with differently coloured backgrounds

Preview and Get Feedback

Before you publish your homepage, Preview it and use the device controls to ensure it looks good on desktop, tablet, and mobile screens. Remember to check that your fonts are readable, none of your images are getting cropped, and that you don’t have long scrolls of text on smaller screens.

mobile preview of the homepage next to the desktop preview of the homepage

It’s also important to Share a draft with your colleagues and stakeholders. When you select Share a draft, you can copy the link and share it with your colleagues.

They can provide feedback to ensure your site and content are clear, legible, easily navigated, and findable.

What Next?

Did this answer your question?