Your SlideShare is downloading. ×
0
From Pattern to Component
From Pattern to Component
From Pattern to Component
From Pattern to Component
From Pattern to Component
From Pattern to Component
From Pattern to Component
From Pattern to Component
From Pattern to Component
From Pattern to Component
From Pattern to Component
From Pattern to Component
From Pattern to Component
From Pattern to Component
From Pattern to Component
From Pattern to Component
From Pattern to Component
From Pattern to Component
From Pattern to Component
From Pattern to Component
From Pattern to Component
From Pattern to Component
From Pattern to Component
From Pattern to Component
From Pattern to Component
From Pattern to Component
From Pattern to Component
From Pattern to Component
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

From Pattern to Component

3,213

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,213
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
19
Comments
1
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. From Pattern to Component by @TylerTate
  • 2. ?
  • 3. 57210,000per year per day
  • 4. 57210,000per year per day
  • 5. The design patterns of today mustbecome the UI components of tomorrow.
  • 6. A design pattern is a refined solutionto an everyday problem communicatedthrough 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★ Welie.com Patterns in Interaction Design
  • 9. A component is a reusable building blockthat fully encapsulates all the code necessaryto put a design pattern into action.
  • 10. ?
  • 11. Blueprint ≠ Building
  • 12. Blueprint ≠ Building
  • 13. Blueprint ≠ BuildingA 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 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. 2. Clean codeA component’s front-end code shouldvalidate, be cross-browser compatible, lightto download, and optimised for browserperformance.
  • 22. 3. Ready to useA component should be easy to implementwith as little configuration as is practical.One line of code is ideal.
  • 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. 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. “Libraries give the team speed andefficiency, letting them leverage the richhistory of things-implemented-before.”– Jared Spool
  • 26. ★ From Pattern to Component on UX Magazine: http://uxm.ag/h9★ TwigKit’s UI Components: http://twigkit.com/components.html @TylerTate

×