Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

From Pattern to Component


Published on

Published in: Technology
  • The 5-minute video of this lightning talk is available at , and the article by the same title is on UX Magazine at:
    Are you sure you want to  Yes  No
    Your message goes here

From Pattern to Component

  1. 1. From Pattern to Component by @TylerTate
  2. 2. ?
  3. 3. 57210,000per year per day
  4. 4. 57210,000per year per day
  5. 5. The design patterns of today mustbecome the UI components of tomorrow.
  6. 6. A design pattern is a refined solutionto an everyday problem communicatedthrough a written description.
  7. 7. ★ What problem does this pattern address?★ When should this pattern be used?★ Why should this pattern be used?★ How is this pattern achieved?
  8. 8. ★ Yahoo!’s Design Pattern Library★ Peter Morville’s Flickr Collection★ Endeca’s UI Design Pattern Library★ Patterns in Interaction Design
  9. 9. A component is a reusable building blockthat fully encapsulates all the code necessaryto put a design pattern into action.
  10. 10. ?
  11. 11. Blueprint ≠ Building
  12. 12. Blueprint ≠ Building
  13. 13. Blueprint ≠ BuildingA B
  14. 14. <widget:facets facetNames="Genres" showCount="false" />
  15. 15. <widget:facets facetNames="Genres" />
  16. 16. <widget:facets facetNames="Genres" />
  17. 17. <widget:facets facetNames="Genres,Actors" mode="expandable" />
  18. 18. <widget:facets facetNames="Genres,Actors" mode="expandable" />
  19. 19. ★ jQuery UI★ Ext Js★ YUI★ Highcharts★ TwigKit
  20. 20. 1. Sound interaction designA component must adequately address theneeds of the user. It must be both useful andusable, properly support all of the desiredmouse, keyboard, and/or touch interactions,and plan for accessibility.
  21. 21. 2. Clean codeA component’s front-end code shouldvalidate, be cross-browser compatible, lightto download, and optimised for browserperformance.
  22. 22. 3. Ready to useA component should be easy to implementwith as little configuration as is practical.One line of code is ideal.
  23. 23. 4. Easy to configureA component should be easy to customise.The best components are versatile enoughto work in a variety of situations, giving thedesigner ample control over the main variables.
  24. 24. 5. Well documentedA component library must be thoroughlydocumented. At the least, documentationmust indicate how to start using a componentand describe all of the available configurationoptions.
  25. 25. “Libraries give the team speed andefficiency, letting them leverage the richhistory of things-implemented-before.”– Jared Spool
  26. 26. ★ From Pattern to Component on UX Magazine:★ TwigKit’s UI Components: @TylerTate