Down in beautiful but pollen-addled Phoenix, IA Summit 2010 had some great takeaways, not the least of which was a reminder of the power of visual thinking and sketching. Design patterns were a big theme throughout the conference – be they social patterns, interaction patterns, information architecture patterns, or to keep things real, anti-patterns.
Design patterns have been around for decades within various disciplines: computer science and interaction design to name a couple. Put simply, a pattern is a reusable solution to a common problem. As a designer, programmer, or architect, you can incorporate one or many patterns into your project as building blocks, leverage the experience of those before you and find a veritable nirvana of efficiency and proven excellence.
The Welie Interaction Design Library and Yahoo Design Pattern Library are especially known for their well-organized and documented interface patterns. For example, the AutoComplete pattern can be used when a user must enter a hard-to-remember item into a textbox. A pattern is more a set of behaviours and not necessarily a specific stencil or piece of code: it is meant to be one level higher in abstraction.
Finding the sweet spot
Patterns are infinitely useful to interaction designers and programmers thanks to their reusability and the implicit knowledge sharing of tried-and-true solutions. Where they really become valuable though is in the sweet spot where they are paired with stencils and code.
During a chat with Erin Malone, founder of the Yahoo’s library, we discussed a pattern object hierarchy. Here’s a helpful way to slice it:
- A framework is a collection of patterns that work together to address a larger goal or functional space. For example, interface patterns for an e-commerce website.
- A pattern is a reusable solution to a common problem and is a set of behaviours.
- A stencil is a physical manifestation of a pattern, such as a navigation bar or a drop-down box.
- A code snippet is the implementation of a stencil.
What are the benefits of a well-structured pattern library?
If a pattern library is extended to marry stencils and code snippets to patterns, a wonderful efficiency and knowledge encapsulation can be created. Bisecting the established wireframing and HTML-coding processes of building a website, such a library, can offer a number of benefits.
A common vocabulary for clients and project team alike
Information architects speak the language of wireframes and stencils, designers speak the language of look and feel, developers speak the language of HTML and CMS, and clients speak the language of business goals and end users. Things can easily get lost in translation during the project lifecycle. Patterns offer a simple, understandable way to slice and dice the components that comprise a website. While each discipline breaks down the website into their own proprietary elements, patterns are a common ground that everyone can understand because they represent behaviours – and we are all end users.
A link between project artifacts
A website project manifests within many different deliverables. Patterns and their child components (stencils and code) can extend across these deliverables – wireframes, design comps, HTML and content management platforms, maintaining a link between these artifacts that may otherwise be lost. A valuable by-product? Beautiful consistency from concept to implementation.
Education
A well-documented pattern library serves as a training tool for anyone needing to ramp up on website concepts. For those who are not technical or web-savvy, patterns frame things in a behavioural perspective that is more accessible than components such as webparts or modules.
Want to know more?
Whichever role you might play on a project team, pattern libraries are worth a look – whether it’s to build your own domain-specific library, to speak the same language as another team member, or to educate yourself of elements of the project.
For further reading I recommend a few of Erin’s excellent blog posts on the subject:
- Why have a design pattern library?
- Where did the idea of patterns come from?
- How to identify interaction design patterns
You can also learn more about how information architects, designers and developers work together from non~linear’s whitepaper on effective visual design for CMS-driven websites.
