Notes and ideas from Moresoda

A Photoshop CC Workflow for Pattern Libraries

Posted by: Joe Tuckwell

Gone are the days of jumping straight into Photoshop once the web design brief landed on your desk. The changing device landscape means that once planning is out the way prototyping in the browser or a new wave of responsive tools (e.g. Macaw, Adobe Reflow, etc.) is often the best route forward.

A Photoshop CC Workflow for Pattern Libraries

However, at some point, we’re still likely to have to present flat mockups as part of the project process so that clients can understand the way the design works graphically and colleagues can reference how functional elements work together on a page.

Historically this meant a series of Photoshop (or similar) documents for each page of the website, very likely with version numbers for revisions made throughout a project. But now that websites need to work across multiple device screen sizes and include an increasingly large amount of pages/content types, many design teams are turning to pattern libraries to create a suite of reusable UI elements that can be dropped into any appropriate location on a page while helping to keep everything consistent. There’s more on exactly what they are and their benefits on Boagworld.

Pattern libraries can range anywhere from low-fi wireframes through to final code segments but we settle somewhere in between with a set of Photoshop style guide documents that illustrate all of the key UI elements across the site. Up until this point this has meant waiting until all of the pages have been signed off and then grabbing bits from each page to build a few longer documents for everyone in the team to reference. This workflow is the wrong way around and can quickly become a front-end developer’s nightmare as elements across pages rapidly drift apart. It’s also an extra step in the project process and difficult to maintain once further updates to the site happen.

A better way

What we needed was a way to design reusable UI elements (design patterns) in isolation ahead of piecing them together in final page designs and most importantly, automatically feed any changes made to individual patterns through to complete pages. This workflow is now available in the shape of Linked Smart Objects in Photoshop CC. It lets you place several Photoshop (and other Adobe CC suite app) documents within another so you can essentially create a complete page from a library of design pattern files.

Our workflow

When designing we now create two sets of Photoshop files: pages and patterns. Pages still include all the layers that are unique to that page - any element that will never be reused across the site (although we’re finding this to be increasingly rare); and patterns are the individual UI elements linked within the pages to make up complete pages.

This has led to some great changes. We can now:

  • work collaboratively on one page - several designers working on individual UI elements
  • build a pattern library as we go - our workflow has been correctly flipped on its head and pattern files now become the master design files.
  • work non-destructively - working on a page without permanently altering a design pattern.
  • nest linked documents within other linked files - include small patterns within larger patterns.
  • make changes once and have them reflect across all related pages - saving time on clumsy layer duplications and guaranteeing consistency
  • reduce front-end duplication - developers can easily spot reused elements and plan code accordingly