Successfully reported this slideshow.

From Pattern to Component

1

Share

Upcoming SlideShare
Mercari SET and Productivity
Mercari SET and Productivity
Loading in …3
×
1 of 28
1 of 28

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

From Pattern to Component

  1. 1. From Pattern to Component by @TylerTate
  2. 2. ?
  3. 3. 572 10,000 per year per day
  4. 4. 572 10,000 per year per day
  5. 5. The design patterns of today must become the UI components of tomorrow.
  6. 6. A design pattern is a refined solution to an everyday problem communicated through 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 ★ Welie.com Patterns in Interaction Design
  9. 9. A component is a reusable building block that fully encapsulates all the code necessary to put a design pattern into action.
  10. 10. ?
  11. 11. Blueprint ≠ Building
  12. 12. Blueprint ≠ Building
  13. 13. Blueprint ≠ Building A 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 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. 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. 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. 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. 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. 25. “Libraries give the team speed and efficiency, letting them leverage the rich history of things-implemented-before.” – Jared Spool
  26. 26. ★ From Pattern to Component on UX Magazine: http://uxm.ag/h9 ★ TwigKit’s UI Components: http://twigkit.com/components.html @TylerTate

×