homepage design examples for a town

The Anatomy of a Municipal Web Site’s Homepage

In Summer 2015, we started launching new sites for our municipal customers that are built on TownCMS v5. This is a big enhancement to a municipal site, which includes page designs that are done in Responsive Web Design (RWD).

I wanted to share an overview of a site design by breaking down the anatomy of a municipal web site’s homepage into the various elements, which you can see below.

Homepage Banner

For every new project we work on, we request images and photos to be sent to us. These are the images that we use for building out the homepage banner and color scheme.

Custom “How Do I?” Navigational Menu

One request that municipal clerks have been asking me is the feature of a portal-like navigational menu item called “How Do I?”. Some towns have a similar menu item called, “I Want To…” This is a nice looking menu button that shows a variety of destinations for a resident. In the municipal sites we design for our customers, we can customize this navigational menu for your specific needs.

Homepage Icons

Standard for our municipal site designs is the ability to have a series of “Homepage Icons”. These can be customized for your town’s specific needs. We can customize the Title of the Icon, the Image/Icon design, and also the Clickable text and its related destination link. The purpose of these homepage icons is to give residents a quick link to something that should be most relevant to them. Generally the pages linked to from these homepage icons should be core features that residents would visit any day of the week. In other words, we do not recommend using one of the homepage icons as a link to the Town’s Fourth of July Parade, which would just occur once per year and is relatively unneeded during the rest of the year.

Spotlight Area

In the past, only our expensive custom web designs (which would cost $5,000+ for a set-up fee) had the Spotlight feature. This was because we had to do custom programming to configure it. Now however we can offer the Spotlight feature as part of our standard $199 municipal web design package! The purpose of the spotlight is to give focus to one specific event or notice in your community. This is the area where you could post information about the Town’s 4th of July Parade, since it’s going to be an event that is a spotlight for the community for a short period of time. We made it so that it’s super easy for a new spotlight event to be added and showcased with a Title, Features Image, and Body Text.

News & Notices

This is a core feature of our municipal sites and allows your municipal site to be compliant with publishing requirements in your state. This area on the homepage will automatically be populated whenever you post new items to your site’s News & Notices section. In this example we show the three most recent notices, but this can be customized to the needs of your community and we can display more notices if needed. Each notice has a Title, and Description. By clicking on “More” it will link to a page that has the Notice’s complete information.

Weather Widget (or Calendar of Events Widget)

Depending on the needs of your town, you might wish to have a colorful weather widget included on the homepage, or perhaps a list of the next most recent items from the Town’s calendar. In any case, this is some customization we can do for you with our TownCMS v5 software.

Homepage Body

Another main area is the website’s homepage body. This is another area where the town clerk can customize the type of content to display for the residents.

Dynamic Footer

We did something unique for our new municipal site designs by putting greater focus on developing a custom look for the footer. My whole philosophy for municipal web design is to make the software easy for clerks to update, but also to make it super relevant for residents to find the information they are looking for. This is why the footer is divided into a couple different sections:
– Hot Links for Most-Relevent pages (e.g. FAQ page, Forms & Permits, Ordinances & Resolutions)
– Official Town Address
– Contact Info of the town (e.g. Phone Number, Office Hours, Email Address, Web URL, Location & Mailing Addresses)
– Links to social media accounts

See below the screen shot for a more visual overview of a municipal site’s homepage design.

Municipal homepage design
Elements of a municipal web site design

 

Leave a Reply

Your email address will not be published. Required fields are marked *