Filed under: Web

Responsive City Web Design Concept

Local government websites stand out from other sites in a specific way: they are utilized by pretty much every demographic. With a potential audience so diverse and broad, usability becomes very important.

A city website at desktop size.

Challenge

The existing website for the city of Goodland, Kansas, suffered from a number of design and usability problems, including buried content, poor hierarchy, poor color contrast, and general navigation issues. I found it difficult to identify structure on a page or understand where to navigate as a user. I created this concept design as a personal challenge to address these issues.

Action

Design began with a high fidelity, responsive wireframe, which eventually developed into the final design. Initially working without color, I focused on relationships of size, space, and brightness first. This approach also made responsive design fairly simple, as unstyled elements were easier to adjust across screen sizes.

Both wireframe and final concept were made with Webflow.io.

Wireframe of a city website at desktop size.

Result

The refined and finished design offers improved usability and accessibility and ensures functional display of important elements at all screen sizes. The visual importance of elements on the page is more clearly defined with brighter colors, stronger contrast, and hierarchical organization. A selection of frequently used actions have been iconified and placed in their own section, a common and useful feature on many local government sites.