SlideShare a Scribd company logo
1 of 28
Download to read offline
From Pattern to Component
        by @TylerTate
?
572
10,000
per year

           per day
572
10,000
per year

           per day
The design patterns of today must
become the UI components of tomorrow.
A design pattern is a refined solution
to an everyday problem communicated
through a written description.
★ What problem does this pattern address?

★ When should this pattern be used?

★ Why should this pattern be used?

★ How is this pattern achieved?
★ Yahoo!’s Design Pattern Library

★ Peter Morville’s Flickr Collection

★ Endeca’s UI Design Pattern Library

★ Welie.com Patterns in Interaction Design
A component is a reusable building block
that fully encapsulates all the code necessary
to put a design pattern into action.
?
Blueprint ≠ Building
Blueprint ≠ Building
Blueprint ≠ Building

A                          B
<widget:facets
   facetNames="Genres"
   showCount="false" />
<widget:facets
   facetNames="Genres" />
<widget:facets
   facetNames="Genres" />
<widget:facets
   facetNames="Genres,Actors"
   mode="expandable" />
<widget:facets
   facetNames="Genres,Actors"
   mode="expandable" />
★ jQuery UI

★ Ext Js

★ YUI

★ Highcharts

★ TwigKit
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.
2. Clean code
A component’s front-end code should
validate, be cross-browser compatible, light
to download, and optimised for browser
performance.
3. Ready to use
A component should be easy to implement
with as little configuration as is practical.
One line of code is ideal.
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.
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.
“Libraries give the team speed and
efficiency, letting them leverage the rich
history of things-implemented-before.”
– Jared Spool
★ From Pattern to Component on UX Magazine:
  http://uxm.ag/h9

★ TwigKit’s UI Components:
  http://twigkit.com/components.html



                @TylerTate

More Related Content

Similar to From Pattern to Component

Similar to From Pattern to Component (20)

Developing a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflowDeveloping a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflow
 
Kevin Whinnery: Best Practices for Cross-Platform Mobile Development
Kevin Whinnery: Best Practices for Cross-Platform Mobile DevelopmentKevin Whinnery: Best Practices for Cross-Platform Mobile Development
Kevin Whinnery: Best Practices for Cross-Platform Mobile Development
 
Top 7 react developer tools to use in 2021
Top 7 react developer tools to use in 2021Top 7 react developer tools to use in 2021
Top 7 react developer tools to use in 2021
 
Modeling on the Web
Modeling on the WebModeling on the Web
Modeling on the Web
 
Modeling on the Web
Modeling on the WebModeling on the Web
Modeling on the Web
 
Software Engineering 2014
Software Engineering 2014Software Engineering 2014
Software Engineering 2014
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 
Microservice pitfalls
Microservice pitfalls Microservice pitfalls
Microservice pitfalls
 
ICS2208 lecture2
ICS2208 lecture2ICS2208 lecture2
ICS2208 lecture2
 
Top 10 IDEs for React.js Developers in 2021
Top 10 IDEs for React.js Developers in 2021Top 10 IDEs for React.js Developers in 2021
Top 10 IDEs for React.js Developers in 2021
 
Build beautiful native apps in record time with flutter
Build beautiful native apps in record time with flutterBuild beautiful native apps in record time with flutter
Build beautiful native apps in record time with flutter
 
UI/UX Design
UI/UX DesignUI/UX Design
UI/UX Design
 
ICS2208 Lecture 3
ICS2208 Lecture 3ICS2208 Lecture 3
ICS2208 Lecture 3
 
All about that reactive ui
All about that reactive uiAll about that reactive ui
All about that reactive ui
 
Software development philosophies v1
Software development philosophies v1Software development philosophies v1
Software development philosophies v1
 
[PBO] Pertemuan 12 - Pemrograman Android
[PBO] Pertemuan 12 - Pemrograman Android[PBO] Pertemuan 12 - Pemrograman Android
[PBO] Pertemuan 12 - Pemrograman Android
 
Flutter Introduction and Architecture
Flutter Introduction and ArchitectureFlutter Introduction and Architecture
Flutter Introduction and Architecture
 
An Introduction To Model  View  Controller In XPages
An Introduction To Model  View  Controller In XPagesAn Introduction To Model  View  Controller In XPages
An Introduction To Model  View  Controller In XPages
 
Design System - Fail, Learn, Build, Test
Design System - Fail, Learn, Build, TestDesign System - Fail, Learn, Build, Test
Design System - Fail, Learn, Build, Test
 
Drupal 7 ci and testing
Drupal 7 ci and testingDrupal 7 ci and testing
Drupal 7 ci and testing
 

More from Tyler Tate

Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds GroupDesigning Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Tyler Tate
 
Designing the search experience by tyler tate : twigkit
Designing the search experience by tyler tate : twigkitDesigning the search experience by tyler tate : twigkit
Designing the search experience by tyler tate : twigkit
Tyler Tate
 
Cross channel 2
Cross channel 2Cross channel 2
Cross channel 2
Tyler Tate
 
Designing Search - Presented at Ovum's Enterprise Search Event
Designing Search - Presented at Ovum's Enterprise Search EventDesigning Search - Presented at Ovum's Enterprise Search Event
Designing Search - Presented at Ovum's Enterprise Search Event
Tyler Tate
 
The Dao of Learning: How content strategy supports learning on the web
The Dao of Learning: How content strategy supports learning on the webThe Dao of Learning: How content strategy supports learning on the web
The Dao of Learning: How content strategy supports learning on the web
Tyler Tate
 
Cognitive Content Strategy
Cognitive Content StrategyCognitive Content Strategy
Cognitive Content Strategy
Tyler Tate
 

More from Tyler Tate (20)

Juke: The Office Jukebox
Juke: The Office JukeboxJuke: The Office Jukebox
Juke: The Office Jukebox
 
Rideshare: Improving Surge
Rideshare: Improving SurgeRideshare: Improving Surge
Rideshare: Improving Surge
 
Crema.co Pitch Deck
Crema.co Pitch DeckCrema.co Pitch Deck
Crema.co Pitch Deck
 
Information Wayfinding
Information WayfindingInformation Wayfinding
Information Wayfinding
 
Information Wayfinding: The Future of Search
Information Wayfinding: The Future of SearchInformation Wayfinding: The Future of Search
Information Wayfinding: The Future of Search
 
Designing Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds GroupDesigning Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
 
Designing the search experience by tyler tate : twigkit
Designing the search experience by tyler tate : twigkitDesigning the search experience by tyler tate : twigkit
Designing the search experience by tyler tate : twigkit
 
Information Wayfinding — EBI Interfaces Edition
Information Wayfinding — EBI Interfaces EditionInformation Wayfinding — EBI Interfaces Edition
Information Wayfinding — EBI Interfaces Edition
 
Cross channel 2
Cross channel 2Cross channel 2
Cross channel 2
 
Designing Cross-Channel Experiences
Designing Cross-Channel ExperiencesDesigning Cross-Channel Experiences
Designing Cross-Channel Experiences
 
Designing Mobile Search — Frankfurt Edition
Designing Mobile Search — Frankfurt EditionDesigning Mobile Search — Frankfurt Edition
Designing Mobile Search — Frankfurt Edition
 
Designing Search - Presented at Ovum's Enterprise Search Event
Designing Search - Presented at Ovum's Enterprise Search EventDesigning Search - Presented at Ovum's Enterprise Search Event
Designing Search - Presented at Ovum's Enterprise Search Event
 
The Dao of Learning: How content strategy supports learning on the web
The Dao of Learning: How content strategy supports learning on the webThe Dao of Learning: How content strategy supports learning on the web
The Dao of Learning: How content strategy supports learning on the web
 
Cognitive Content Strategy
Cognitive Content StrategyCognitive Content Strategy
Cognitive Content Strategy
 
Designing the Holistic Search Experience
Designing the Holistic Search ExperienceDesigning the Holistic Search Experience
Designing the Holistic Search Experience
 
From Lookup to Learning: Search as a Long-term Activity – ECIR 2011
From Lookup to Learning: Search as a Long-term Activity – ECIR 2011From Lookup to Learning: Search as a Long-term Activity – ECIR 2011
From Lookup to Learning: Search as a Long-term Activity – ECIR 2011
 
Designing a Modern CRM
Designing a Modern CRMDesigning a Modern CRM
Designing a Modern CRM
 
The Scent of Search, Take 2
The Scent of Search, Take 2The Scent of Search, Take 2
The Scent of Search, Take 2
 
The Story for Complexity
The Story for ComplexityThe Story for Complexity
The Story for Complexity
 
The Scent of Search
The Scent of SearchThe Scent of Search
The Scent of Search
 

Recently uploaded

“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
Muhammad Subhan
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
FIDO Alliance
 

Recently uploaded (20)

Navigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi DaparthiNavigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi Daparthi
 
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps Productivity
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
Vector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptxVector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptx
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptx
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data Science
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 

From Pattern to Component

  • 1. From Pattern to Component by @TylerTate
  • 2. ?
  • 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 ★ Welie.com Patterns in Interaction Design
  • 9.
  • 10. A component is a reusable building block that fully encapsulates all the code necessary to put a design pattern into action.
  • 11. ?
  • 12.
  • 16. <widget:facets facetNames="Genres" showCount="false" />
  • 17. <widget:facets facetNames="Genres" />
  • 18. <widget:facets facetNames="Genres" />
  • 19. <widget:facets facetNames="Genres,Actors" mode="expandable" />
  • 20. <widget:facets facetNames="Genres,Actors" mode="expandable" />
  • 21. ★ jQuery UI ★ Ext Js ★ YUI ★ Highcharts ★ TwigKit
  • 22. 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.
  • 23. 2. Clean code A component’s front-end code should validate, be cross-browser compatible, light to download, and optimised for browser performance.
  • 24. 3. Ready to use A component should be easy to implement with as little configuration as is practical. One line of code is ideal.
  • 25. 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.
  • 26. 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.
  • 27. “Libraries give the team speed and efficiency, letting them leverage the rich history of things-implemented-before.” – Jared Spool
  • 28. ★ From Pattern to Component on UX Magazine: http://uxm.ag/h9 ★ TwigKit’s UI Components: http://twigkit.com/components.html @TylerTate