The Federal Reserve Bank of San Francisco’s Pattern Library, a living style guide for our website’s user experience design, is available now on GitHub.
In deciding to make our code public, the SF Fed is following the lead of many public and private companies as well as government agencies and organizations.
“Our website is here to provide the public with information, so it feels right to support transparent open development principles. The Pattern Library also helps us maintain a quality code base that supports our brand,” explains front-end developer Robert Dawson.
The SF Fed Pattern Library includes styles for FRBSF.org and recommendations for how developers can mix and match reusable foundational elements to produce more complex features and webpages. You’ll find templates, code snippets, and responsive development guidelines. A few of our guiding principles:
- Put you, our readers, first
- Make content easily searchable and findable
- Identify and remove barriers to accessibility
- Ensure content is usable, from narrow to wide screen
The Pattern Library reflects a big shift in the Bank’s usability design thinking, according to Dawson.
“Not too long ago, we had more than 200 different logos on our website representing various departments, programs, and products. Now, we have a few dozen templates and definitive styles. By baking styles into our code, it has become a lot easier to be consistent while doing the right things in terms of accessibility, for example. You see that in the Pattern Library,” he explains.
Expect frequent updates to the Pattern Library as the FRBSF.org UX team continues to refine and optimize our website.
“We keep an eye on our analytics and industry trends and try to anticipate what our users will need next. A good example was going with a responsive website design in 2012. Mobile traffic was growing, so we got the site ready. Today about 30% of our sessions are mobile and tablet. That’s the beauty of adopting a living style guide. We can update it in real time with our latest code. It doesn’t lock us into one moment in time like a PDF so we can move a bit faster,” says Dawson.
Follow the SF Fed Pattern Library on GitHub if you’re a developer who wants to help us identify issues or to submit a pull request to build your own pattern library based on our code.
You may also be interested in:
The views expressed here do not necessarily reflect the views of the management of the Federal Reserve Bank of San Francisco or of the Board of Governors of the Federal Reserve System.