Pattern Library

For Designers

The Pattern Library is a resource for visual and UX designers to reference Seattle Times patterns. Consider yourself the Pattern Police and this site helps you maintain consistency across teams and keep the UI honest.

As per the definition of a pattern, only patterns that will be reused are added. For example, an icon that is being AB tested is not added to the library until it has been determined it will be used as an ongoing pattern.

New patterns. Either dev or design manages the process to introduce a new pattern. Typically, dev adds live code and designers add icons. To add an icon, follow these steps:

The UX team owns the master illustrator file that is located on the Data Design server (Garfield) in the Pattern Library folder. Designers are responsible for the .ai icon file and its versioning. Check with a teammate to ensure you are working from the latest.

Documentation. For larger updates, designers are responsible for the information architecture (site maps, taxonomy) and copy. We typically oversee the documentation involving style, accessibility, UX best practices, etc. Developers are responsible for live code and its documentation.

To update the site documentation, go to the Github Pattern Library repo. You’ll find most the .md files “docs” folder. Use an online markdown editor to edit the copy.

As designers, the specs you hand off must reflect W3C accessibility standards (color contrast and including required alt text, etc). These are itemized in the Accessibility Checklist, located in the Accessibility section of this site. A person from each of the teams (UX, PM, dev) is required to sign off their section of the checklist for each new release.

Here are a few ways to use data to inform your designs and support the rationale for your decisions.

Google Analytics: The Seattle Times has a robust GA system set up with tags and dashboards. To access The Seattle Times analytics site, you must have permissions with a Google account and be logged in. Contact BI for permissions.

Consumer Insights. Our Consumer Insights team is a resource for data on our local market from industry polling sources and directly from our readers through surveys, focus groups and user testing.