sakai.webdesignpattern.presentation
DESCRIPTION
Presentation about UI design patterns given at the Sakai 2006 conference in Vancouver. Authors: David Hong, Kelly Snow, Mano Marks, Tim DennisTRANSCRIPT
![Page 1: Sakai.Webdesignpattern.Presentation](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c76e9b4a7959f3038b460b/html5/thumbnails/1.jpg)
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
![Page 2: Sakai.Webdesignpattern.Presentation](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c76e9b4a7959f3038b460b/html5/thumbnails/2.jpg)
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
![Page 3: Sakai.Webdesignpattern.Presentation](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c76e9b4a7959f3038b460b/html5/thumbnails/3.jpg)
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
![Page 4: Sakai.Webdesignpattern.Presentation](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c76e9b4a7959f3038b460b/html5/thumbnails/4.jpg)
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
![Page 5: Sakai.Webdesignpattern.Presentation](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c76e9b4a7959f3038b460b/html5/thumbnails/5.jpg)
Collaborative Tools
• Working groups• Discussion groups• Email• Wiki
May 12, 2006 5U.C. Berkeley Web Design Patterns Library
![Page 6: Sakai.Webdesignpattern.Presentation](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c76e9b4a7959f3038b460b/html5/thumbnails/6.jpg)
Common Solutions
• Templates• Hi-fi Wireframes• Tags / Markup• Styleguides• “Top-down Smackdown”
May 12, 2006 6U.C. Berkeley Web Design Patterns Library
![Page 7: Sakai.Webdesignpattern.Presentation](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c76e9b4a7959f3038b460b/html5/thumbnails/7.jpg)
Distributed Knowledge
“knowledge about user interface and design is distributed and often not shared”
May 12, 2006 7U.C. Berkeley Web Design Patterns Library
![Page 8: Sakai.Webdesignpattern.Presentation](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c76e9b4a7959f3038b460b/html5/thumbnails/8.jpg)
Inconsistency
“knowledge about what constitutes good user interface is inconsistent”
May 12, 2006 8U.C. Berkeley Web Design Patterns Library
![Page 9: Sakai.Webdesignpattern.Presentation](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c76e9b4a7959f3038b460b/html5/thumbnails/9.jpg)
Personalities
“each person has their own ideas and agenda about the interface”
May 12, 2006 9U.C. Berkeley Web Design Patterns Library
![Page 10: Sakai.Webdesignpattern.Presentation](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c76e9b4a7959f3038b460b/html5/thumbnails/10.jpg)
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.
![Page 11: Sakai.Webdesignpattern.Presentation](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c76e9b4a7959f3038b460b/html5/thumbnails/11.jpg)
Why Design Patterns?
Collect and redistribute knowledge of large communities.
May 12, 2006 11U.C. Berkeley Web Design Patterns Library
![Page 12: Sakai.Webdesignpattern.Presentation](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c76e9b4a7959f3038b460b/html5/thumbnails/12.jpg)
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
![Page 13: Sakai.Webdesignpattern.Presentation](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c76e9b4a7959f3038b460b/html5/thumbnails/13.jpg)
Why Design Patterns?
Encapsulate rationale and best practices as well as shared interests
May 12, 2006 13U.C. Berkeley Web Design Patterns Library
![Page 14: Sakai.Webdesignpattern.Presentation](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c76e9b4a7959f3038b460b/html5/thumbnails/14.jpg)
Why Design Patterns?
Combine a heavy text-based medium with visual examples
May 12, 2006 14U.C. Berkeley Web Design Patterns Library
![Page 15: Sakai.Webdesignpattern.Presentation](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c76e9b4a7959f3038b460b/html5/thumbnails/15.jpg)
Why Design Patterns?
Describe design elements allowing for flexible implementation and mixing
and matching
May 12, 2006 15U.C. Berkeley Web Design Patterns Library
![Page 16: Sakai.Webdesignpattern.Presentation](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c76e9b4a7959f3038b460b/html5/thumbnails/16.jpg)
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
![Page 17: Sakai.Webdesignpattern.Presentation](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c76e9b4a7959f3038b460b/html5/thumbnails/17.jpg)
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