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