May 12, 2006 1U.C. Berkeley Web Design Patterns Library

Web Design Pattern Library

www.ui-designpatterns.org

Kelly Snow, Mano Marks, Tim Dennis, Dave Hong

May 12, 2006 2U.C. Berkeley Web Design Patterns Library

UC Berkeley Environment

• Autonomous fiefdoms• Lack of coordinated development

efforts. • Applications based on organizational

structure • Different strategies and code base• Top-down initiatives are doomed

May 12, 2006 3U.C. Berkeley Web Design Patterns Library

UI Design at UC Berkeley

• No formal training• Work in isolation• Few resources / many responsibilities• No sense of community • Developers with non-technical

managers

Sakai

• Many cooks in the kitchen• Distributed and disparate

development environments• Unique branding for each campus

May 12, 2006 4U.C. Berkeley Web Design Patterns Library

Collaborative Tools

• Working groups• Discussion groups• Email• Wiki

May 12, 2006 5U.C. Berkeley Web Design Patterns Library

Common Solutions

• Templates• Hi-fi Wireframes• Tags / Markup• Styleguides• “Top-down Smackdown”

May 12, 2006 6U.C. Berkeley Web Design Patterns Library

Distributed Knowledge

“knowledge about user interface and design is distributed and often not shared”

May 12, 2006 7U.C. Berkeley Web Design Patterns Library

Inconsistency

“knowledge about what constitutes good user interface is inconsistent”

May 12, 2006 8U.C. Berkeley Web Design Patterns Library

Personalities

“each person has their own ideas and agenda about the interface”

May 12, 2006 9U.C. Berkeley Web Design Patterns Library

May 12, 2006 10U.C. Berkeley Web Design Patterns Library

Web Design Patterns

• A model for common problems and appropriate solutions in highly diverse development environments.

• Provide a common language for people to use in their work process.

Why Design Patterns?

Collect and redistribute knowledge of large communities.

May 12, 2006 11U.C. Berkeley Web Design Patterns Library

Why Design Patterns?

Cooperative & inclusive: a better model and artifact for

attaining and capturing consensus.

May 12, 2006 12U.C. Berkeley Web Design Patterns Library

Why Design Patterns?

Encapsulate rationale and best practices as well as shared interests

May 12, 2006 13U.C. Berkeley Web Design Patterns Library

Why Design Patterns?

Combine a heavy text-based medium with visual examples

May 12, 2006 14U.C. Berkeley Web Design Patterns Library

Why Design Patterns?

Describe design elements allowing for flexible implementation and mixing

and matching

May 12, 2006 15U.C. Berkeley Web Design Patterns Library

May 12, 2006 16U.C. Berkeley Web Design Patterns Library

What We Built

• Web-based application that contains web design patterns

• Pattern schema• Supports contributions from UC

developer community

May 12, 2006 17U.C. Berkeley Web Design Patterns Library

How We Did It

• Surveying and interviewing users• Analysis of other pattern collections• Analysis of existing campus apps• Data Modeling• Pattern Writing Methodology• User Centered Design• Implementation