Pre-conference workshop

Design patterns: from interaction to design to build

Erin Malone, Christian Crumlish, Lucas Pettinati

In this full-day workshop we will teach participants how to identify patterns; write, review, and rate patterns; build a pattern library; leverage the interaction guidelines codified in a pattern library to rapidly design websites and applications; and efficiently prototype and build rich interactive experiences. We’ll share some insights and some lessons learned from the three-year history of the Yahoo! library, and probe examples and case studies, some using the Yahoo! Design Pattern Library and the Yahoo! User Interface Library.

Topics covered during the workshop include:

• Identifying patterns
• Writing patterns (and building consensus)
• Reviewing and rating patterns
• Organizing patterns into a library
• Attaching templates and code modules to patterns
• Rapid prototyping of web experiences
• Rapid development of production-ready web experiences
• Using design patterns to create flexible APIs

The day will consist of presentations introducing key concepts, discussions to clarify common questions and ensure comprehension, and hands-on activities in small groups, closely monitored and facilitated by the presenters.

Activities include identifying patterns through brainstorming in large groups, auditing multiple variations of interaction design examples to extract common patterns from them, writing patterns in small groups, creating taxonomies and other organization structures for pattern languages, identifying opportunities to leverage patterns and distinguishing them from interactions that cannot be built from patterns, and using the YUI in tandem with patterns to build rich interactions.

The activities will be tailored to the participants and are dependent on their level of experience as well as the mix of IAs, other UX practitioners, and design managers.

Core information-architecture issues we’ll address include

• Structure of web sites
• Building site flows with patterns
• Organization of pattern libraries
• Association of IA deliverables and templates with patterns
• Use of patterns to create semantically sound web sites