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.

UPDATES
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:

• After the new pattern is created, it must be signed off by design/brand and stakeholders
• If it is an icon, add it to the master illustrator icon file and export as an SVG to hand to the dev team
• Add the new SVG icon to the JIRA ticket. In many cases, a new pattern requires a separate JIRA ticket.

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.

ACCESSIBILITY
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.

• W3C has a new site with Tips for designing. (https://www.w3.org/WAI/tips/designing)

DATA-DRIVEN DESIGN
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.

• To request specific metrics from the BI team, use the form on the ST analytics hub via the green "Submit Request" button on the top right of the page
• For a self-serve option, go to The GA ST homepage

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.

DESIGN ASSETS & RESOURCES

• Branding assets, such as ST logos, can be found on Garfield, …/NewMedia/Design_Data/_Branding/Logos+Lockups, or check with the marketing creative director.
• For access to a library of icons, use Glyphs with the fontawesome font. Check with a teammate if you need the font family. The Font Awesome cheatsheet is another resource that allows you to cut/paste icons into your files as a text symbol.