uxstudio

Pattern languages are a design tool used to describe a set of best practices for a given design-space. Pattern languages have been used for centuries in urban planning and architecture;  more recently they have been applied to software product design.

The earliest pattern books were created by the Roman architect Vitruvius wherein he describes best practices for siting buildings, proper arrangement of rooms, external ornamentation, fenestration, etc.   Christopher Alexander coined the term “pattern language” in his 1977 book that focused on designing buildings and ranged from the macro (regional planning) to the micro (interior window treatments).

Jennifer Tidwell started an early effort to catalog UI patterns online which resulted in her book Designing Interfaces.  Yahoo’s design pattern library is a popular site for Ux designers interested in pattern languages.  There are many web sites on UI patterns that can be found using Google.

My team is currently in the process of constructing a set of UI pattern libraries that will serve as the canonical design references for our entire product suite. Our pattern library is divided into two core areas:  Product patterns, and Visual patterns. The two libraries are linked to one another. The product pattern library details all of the core structural elements and behaviors in our products.  The structural elements display data, allow users to navigate, etc.  Behavioral elements deal with things like drag-and-drop, selection,  etc.  The visual pattern library deals with all of the visual language aspects in the products, e.g., colors, fonts, icon styles, layout, sizing, etc.

The product pattern library utilizes a wire-frame, gray-scale drawing style with lots of diagrams, and callouts to illustrate how each pattern works.  The visual pattern library utilizes high-fidelity, pixel-accurate drawings.   We created the two libraries so that we won’t need to rework all the images and diagrams in the product pattern library whenever we update the visual language.

We expect to achieve substantial productivity gains and process efficiencies using the pattern libraries.  Each product specification we create is linked to the pattern libraries.  Rather than having to describe all of the behaviors for a table or tree control in the spec, we can simply illustrate the design, provide a minimal description of the strutural, behavioral, and visual elements, and include a link to the corresponding pages in the pattern libraries.

As my company and the Ux team scale into smoothly-functioning global organizations we will be able to coordinate the work of designers, engineers, quality assurance, and documentation teams around the world using the pattern libraries as a key reference and communication tool.