From Pattern to Component
28
From Pattern to Component by @TylerTate
-
Upload
tyler-tate -
Category
Technology
-
view
105 -
download
3
description
Transcript of From Pattern to Component
From Pattern to Componentby @TylerTate
?
572per year10,000
per day
572per year10,000
per day
The design patterns of today must become the UI components of tomorrow.
A design pattern is a refined solution to an everyday problem communicated through a written description.
★ What problem does this pattern address?★ When should this pattern be used?★ Why should this pattern be used?★ How is this pattern achieved?
★ Yahoo!’s Design Pattern Library★ Peter Morville’s Flickr Collection★ Endeca’s UI Design Pattern Library★ Welie.com Patterns in Interaction Design
A component is a reusable building block that fully encapsulates all the code necessary to put a design pattern into action.
?
Blueprint ≠ Building
Blueprint ≠ Building
Blueprint ≠ Building
A B
<widget:facets facetNames="Genres" showCount="false" />
<widget:facets facetNames="Genres" />
<widget:facets facetNames="Genres" />
<widget:facets facetNames="Genres,Actors" mode="expandable" />
<widget:facets facetNames="Genres,Actors" mode="expandable" />
★ jQuery UI★ Ext Js★ YUI★ Highcharts★ TwigKit
1. Sound interaction design
A component must adequately address the needs of the user. It must be both useful and usable, properly support all of the desired mouse, keyboard, and/or touch interactions, and plan for accessibility.
2. Clean code
A component’s front-end code should validate, be cross-browser compatible, light to download, and optimised for browser performance.
3. Ready to use
A component should be easy to implement with as little configuration as is practical. One line of code is ideal.
4. Easy to configure
A component should be easy to customise. The best components are versatile enough to work in a variety of situations, giving the designer ample control over the main variables.
5. Well documented
A component library must be thoroughly documented. At the least, documentation must indicate how to start using a component and describe all of the available configuration options.
“Libraries give the team speed and efficiency, letting them leverage the rich history of things-implemented-before.”
– Jared Spool
★ From Pattern to Component on UX Magazine: http://uxm.ag/h9
★ TwigKit’s UI Components:http://twigkit.com/components.html
@TylerTate
