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