alpha.phila.gov – Update #4: Pattern Portfolio

Alpha.phila.gov hasn’t had many cosmetic changes since we made it public, but that doesn’t mean there hasn’t been a lot going on behind the scenes. We have been focusing our efforts on building a pattern portfolio to define and share all the common design elements currently on the site. Our goal is to provide a repository of common building blocks (styles, HTML markup, and colors) that developers, our team, and outside vendors can reference when building new sites and services. It is with great pleasure we present Phila.gov Patterns.

Screenshot of Phila.gov Patterns

A pattern portfolio is helpful in a few ways. First, it allows developers to rapidly develop applications and websites with the same look and feel. This makes for a consistent experience, allowing users to know what to expect when they come to a phila.gov website. Second, it helps bring order to chaos. Anyone who wants to make an application using Phila.gov standards will be able to reference one source for that information. By making many important design decisions up front and documenting them as patterns, consistent, beautifully designed interfaces can be built in a fraction of the time. The ePay Gateway was recently launched and is the first website outside of alpha.phila.gov to use Phila.gov Patterns. We were able to cut in half the time it would normally take to build the interface because almost all of the design elements were already present in the pattern portfolio.

Phila.gov Patterns is built on Foundation 5.  We started with a great front-end framework with a large community behind it. Working with Foundation makes creating grids, menus, and buttons extremely fast and easy and lets us focus on the harder development tasks. It is designed to be customized, so it is simple to repurpose common elements like headers, footers, and lists, but also to build more complex patterns as we continue to refine and add to alpha.phila.gov. Additionally, we also built test pages, so that it would be easy to see an example of the kind of things developers can create. These pages help define how the patterns work together to create a full-fledged website.

Phila.gov Patterns is running on Jekyll and hosted on GitHub Pages. We take advantage of Jekyll’s collections feature to allow us to make each pattern standalone, including markup and metadata, and then automatically compile all the pattern content into one master list on the home page.

It is worth noting that originally we were using Pattern Lab, another fantastic tool for creating pattern portfolios, bundled up within Daisy, from the brilliant folks over at Harvard Business Review. Pattern Lab gave us a vocabulary to classify our patterns and Daisy taught us about HBR’s pattern workflow, but ultimately we opted to use Jekyll for a lighter tech footprint.

We have come a long way from the early days and early ideas of this project and we hope that you will continue with us on this journey as we strive to improve our process and and products into something we all can be proud of.

2 thoughts on “alpha.phila.gov – Update #4: Pattern Portfolio

  1. Pingback: Spring Cleaning: City Website Edition « Blue Ridge Foundation

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s