More Related Content


From Pattern to Component

  1. From Pattern to Component by @TylerTate
  2. ?
  3. 572 10,000 per year per day
  4. 572 10,000 per year per day
  5. The design patterns of today must become the UI components of tomorrow.
  6. A design pattern is a refined solution to an everyday problem communicated through a written description.
  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. ★ Yahoo!’s Design Pattern Library ★ Peter Morville’s Flickr Collection ★ Endeca’s UI Design Pattern Library ★ Patterns in Interaction Design
  9. A component is a reusable building block that fully encapsulates all the code necessary to put a design pattern into action.
  10. ?
  11. Blueprint ≠ Building
  12. Blueprint ≠ Building
  13. Blueprint ≠ Building A B
  14. <widget:facets facetNames="Genres" showCount="false" />
  15. <widget:facets facetNames="Genres" />
  16. <widget:facets facetNames="Genres" />
  17. <widget:facets facetNames="Genres,Actors" mode="expandable" />
  18. <widget:facets facetNames="Genres,Actors" mode="expandable" />
  19. ★ jQuery UI ★ Ext Js ★ YUI ★ Highcharts ★ TwigKit
  20. 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.
  21. 2. Clean code A component’s front-end code should validate, be cross-browser compatible, light to download, and optimised for browser performance.
  22. 3. Ready to use A component should be easy to implement with as little configuration as is practical. One line of code is ideal.
  23. 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.
  24. 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.
  25. “Libraries give the team speed and efficiency, letting them leverage the rich history of things-implemented-before.” – Jared Spool
  26. ★ From Pattern to Component on UX Magazine: ★ TwigKit’s UI Components: @TylerTate