Welcome to the OpenCities help centre. Search for what you're after, or browse the categories.
Can't find what you're looking for? Submit a support ticket and we'll be in touch.

Follow

Homepage Design Tips

avatar of Kira Hartley

Kira Hartley

Last updated

Web-design is a complex topic, with many moving parts. In general, the aim of your site is to make it as easy as possible for users to find the information they need, whether it be the opening hours of a local library or how to complete a complex permit application.

The team at Granicus are experts at designing your site; our service includes designing the look and feel of your homepage, content pages, and different elements of your content, while incorporating your council branding and ensuring good usability.

For this reason, we recommend coming to us to design your site before launch or theme refreshes. However, if you’re stuck for ideas on how to make your site look good while being easy to use, you can look at surrounding council sites for inspiration. We’ve also put together these tips for well-designed sites.

If you choose to edit your theme yourself, we strongly recommend delegating web-design to a qualified front-end developer, as we don’t offer support for customizations that you make yourself. A qualified developer will test and maintain your customizations for accessibility compliance, usability, and cross-browser and device support.

Clean Design

A cluttered homepage reduces the chance that site visitors will find what they’re looking for, and in turn the number of frustrated users who need to contact you directly becomes higher.

So, tip number one is to always keep it clean. Check out your most visited pages or popular services and prioritize them into top tasks or theme rows in your layout. Here are some pages you might consider linking:

  • Reporting pages and forms
  • Online payment gateways
  • Waste collection days
  • Events in the area
  • City meetings

Also consider a central search, and theme rows designed for specific audiences, so your site is both clean and easy to navigate. Avoid cluttering your homepage with extraneous links or unnecessary images and instead use simple background colors to differentiate rows.

top tasks example showing popular pages

Tailored Branding

In the site design phase of your implementation, we can help you tailor your organization branding for your website. Incorporating existing colors, logos, and fonts will help you create a cohesive online presence and build trust with your community when they’re looking for information.

Consider choosing a range of accessible colors, so you can have a single base color and use different shades to accent and emphasize elements like icons, button links or hover states, and tab headings.

homepage branding features organization colors, fonts and backgrounds

Layout Ideas

Our themes have an array of row and layout options for you to choose from. You can include content lists for news, events, consultations, and more, as well as widgets, such as the My Area address search, top tasks, tabs, and embedded content. But just because they’re available doesn’t mean you need to fit them all in.

Here are some ideas:

  • Two separate rows of top tasks with a different row layout. Splitting top tasks allows you to highlight specific pages for task-oriented content and to highlight important sections of the site, such as waste and recycling, planning, community engagement, and libraries.
  • A My Area address search through which site visitors can enter their address to find information about their local councilors, collection services, and events and facilities near them.
  • Separate rows listing news, events, and consultations. These are dynamic lists that will always display updated content. You can also choose different layouts for individual rows.
    homepage events list with a carousel layoutFor example, a carousel of events with images works well to draw the eye, but a news listing that features one large news article and several smaller items with just the title and description allows you to display more news in less space.
    homepage news list with a feature article and image layout
  • Use an embed to insert interactive content into your homepage, such as a video or a subscription form. If you do this, you must ensure that the platform from which you retrieve the code is accessible and, if you use a video, keep it short and relevant.

Visual Simplicity

The phrase “less is more” also applies to web-design. There’s no need to overcomplicate your homepage with too much content, moving imagery, or convoluted design techniques. There are ways to incorporate your style into your homepage without flooding it with intricate details that are difficult to maintain. 

For example, use:

  • Top tasks and tabs to emphasize content
  • Simple color-based hover states for links and icons
  • Complementary colors for row backgrounds
  • Easily read fonts
  • Space around items to avoid clutter

You want to create an effect that is lightweight and uncluttered, which allows the site visitor to easily take in and navigate your site.

What Next?

If you’re new to Granicus, or it’s time to refresh your site design, we can help you create something that works for your organization and community. We encourage you to look around at other sites for inspiration and engage with us to make your site the best it can be.

Was this article helpful?
0 out of 0 found this helpful