From Pattern to Component

3,670 views

Published on

Published in: Technology
1 Comment
1 Like
Statistics
Notes
  • The 5-minute video of this lightning talk is available at http://www.vimeo.com/19474285 , and the article by the same title is on UX Magazine at: http://www.uxmag.com/technology/from-pattern-to-component
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,670
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
20
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

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★ Welie.com 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: http://uxm.ag/h9★ TwigKit’s UI Components: http://twigkit.com/components.html @TylerTate

×