SlideShare a Scribd company logo
Creating a Component Library
for DC Design Talks, February 29, 2008
by Nathan Curtis
Founder & Principal, EightShapes LLC
nathan@eightshapes.com :: www.eightshapes.com
WHAT is a component
Components                                                                                             11




  View (Page)
  A point-in-time display                                       EXAMPLES

  within a viewer, such as                                      Shopping cart
                                                                Product overview
  a specific browser
                                                                Log in
  page, application state,
                                                                Install shield intro
  or document view                                              Portal home
                                                                Gmail’s inbox
                                                                iPhone default screen




  DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Components                                                                                             12




  Element
  A single atomic item                                          EXAMPLES
                                                                Text snippet
  on a page that cannot
                                                                Image
  be further broken
                                                                Textbox
  down into multiple                                            Button
  parts                                                         Logo
                                                                Radio button
                                                                (labeled)
                                                                Link
                                                                Page Title




  DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Components                                                                                             13




  Component
  A combination of                                              EXAMPLES
                                                                Search box area
  elements that creates
                                                                Promotion list
  a purposeful, reusable,
                                                                News feed
  and independent                                               Tabbed navigation
  structure                                                     Related links
                                                                Article content




  DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Components                                                                                             18




  Components can permeate...

  Wireframing



  Visual Design




  Code

  DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Introduction                                                                                           19




           Component
                =
             Pattern
  DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Components                                                                                                         20




  Components are Different!
    Distinction                   Components                                         Patterns
    Specificity?                  Specific to design system                          General across contexts

    Style?                        Established                                        Independent

    Flexible?                     Well-defined, codified                             Broadly applicable

    Location?                     Grid implies position & use Up to the designer

    Type(s)?                      Smaller than page, bigger                          All sorts (module, element,
                                  than element                                       page, flow, behavior, etc)
    Guidelines?                   Detailed, org-specific                             Best practices and common
                                  specs                                              behaviors
    Code-base?                    Well defined reference                             Tandem starter assets
                                  code

  DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
WHY a component library?
Assets for efficient reuse
Assets for efficient reuse
Assets for efficient reuse




www.sun.com/webdesign/components/component-index.html
Templates based on design system
Process for efficient production
Language for collaboration



Category
              G1v2x1                   Example #


     Component #             Variation #


  = Global Navigation Bar (Logged In, Entitled)
Taxonomy for asset namespace

    Universal IDs


 Image filenames


       CSS Class

HTML Namespace


Wireframe snippet
                    Inspired by http://blogs.sun.com/riotnrrd/entry/under_the_hood_a_look
Structure for predictable delivery
Environment for governance
Foundation for innovation
HOW do I build a library?
A look at the high level process of library development
Components                                                                                                       33




  Creating a Component Library


       1                           2                              3                        4              5
    Discover                    Organize                         Build                  Document       Promote




                                Distribute                    Maintain                      Teach




  DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Components                                                                                                                           34




  Discover
                                                                                    1           2        3         4          5
                                                                                 Discover    Organize   Build   Document   Promote




   During Design                              Analyzing a System                            Collaborative Exercises
   Create it organically                      Perform an analysis                           Bring together multiple
   as a system emerges                        of regions, reuse, and                        perspectives to decompose
   (this is hard)                             other aspects of a live                       the system together
                                              design system


  DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Components                                                                                             36




  Collaborative Exercise

  1. Identify                                                             4. Archive


  2. Group                                                                5. Prioritize


  3. Classify                                                             6. Label


  DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
IA        Coder
                  Strategist


     PM




                     Visual
Components                                                                                                                           39




  Organize
                                                                                    1           2        3         4          5
                                                                                 Discover    Organize   Build   Document   Promote




  Create an inventory that includes:
  •      Build/Exercise ID
  •      Reference Artwork/Page
  •      Component ID
  •      Component Title
  •      Variation ID
  •      Variation Title
  •      Category
  •      Priority (High, Medium, Low)
  •      Phase (1, 2, 3, etc)
  •      Status (Identified, Drafted, Spec’ed,
         Published)
  •      Notes

  DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Components                                                                                             40




  Regions
  •   Global navigation / Header / Footer
  •   Navigation (secondary or local)
  •   Side bar / side navigation / right rail
  •   Content space
  •   Spotlight / lead / billboard / big top
  •   Pop-up / Pop-in / Hovers (lightbox)




  DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Components                                                                                                              41




  Sun.com
                                                                                                       •   Global
                                                                                                       •   Navigation
                                                                                                       •   Side
                                                                                                       •   Content
                                                                                                       •   Spotlight




  DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Components                                                                                                              42




  RevolutionHealth.com
                                                                                                       •   Global
                                                                                                       •   Navigation
                                                                                                       •   Side
                                                                                                       •   Content
                                                                                                       •   Spotlight




  DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Components                                                                                                              43




  Comcast.net
                                                                                                       •   Global
                                                                                                       •   Navigation
                                                                                                       •   Side
                                                                                                       •   Content
                                                                                                       •   Spotlight




  DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Components                                                                                                              44




  Marriott.com
                                                                                                       •   Global
                                                                                                       •   Navigation
                                                                                                       •   MU
                                                                                                       •   Content
                                                                                                       •   Spotlight




  DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Components                                                                                                              45




  NationalGeographic.com
                                                                                                       •   Global
                                                                                                       •   Navigation
                                                                                                       •   Side
                                                                                                       •   Content
                                                                                                       •   Spotlight




  DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Components                                                                                                                            46




  Build
                                                                                    1           2         3         4          5
                                                                                 Discover    Organize    Build   Document   Promote




  No matter the component assets you produce...


                      Wireframe                  or             Comp                   or               Code


  ...keep a process in mind:


     Create                          Test                     Review                        Publish                  Store




  DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Components                                                                                                                                 47




  Document
                                                                                    1           2           3         4             5
                                                                                 Discover    Organize      Build   Document      Promote




     Document-Based                                         Web-Based                                   Self-Documenting




   PDF Specifications & Guidelines                        Sun Component Library                                    Code




            Contact Sheets                                                                               Files                Libraries
                                                           Yahoo Pattern Library

  DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Components                                                                                                                               48




  Promote
                                                                                    1           2           3         4           5
                                                                                 Discover    Organize      Build   Document    Promote




  The library must be communicated to varied
  audiences in specific ways to address their needs:

               Product                                    Copywriter/
               Manager                                     Publisher                                       Engineer

           “What can I use?”                          “What are the editorial                           “Where is the code?”
                                                          guidelines?”
     “What are the strategies?”                                                                  “What’s the latest update?”
                                                     “Who must I coordinate
     “What are the constraints?”                     with when I use them?”                              “How stable is it?”

       “How can I customize?”                        “In what context(s) can                       “What are the behavioral
                                                       each be employed?”                             specifications?”




  DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Components                                                                                                                     49




  Once Established...
  You’ve now got a living, changing, evolving set of assets
  that grows stale quickly unless you concentrate on:


         Distribution                                     Maintenance                                        Teaching

  The library and tools                             The library and tools                              The library and tools
  must be distributed,                              must have a viable                                 must be augmented by
  whether via:                                      owner that:                                        documentation that:
  • .zip file                                       • Serves as a resource                             • Clarifies purpose
  • Secure site                                     • Updates the library                              • Provides details
  • Versioning system                               • Handles requests                                 • Fosters adoption
                                                    • Identifies opportunities                         • Limits resource
                                                                                                         impacts

  DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Introduction                                                                                           50




   Further References




                    http://blogs.sun.com/riotnrrd/entry/under_the_hood_a_look


  DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
Introduction                                                                                           51




                                                           So, who are you?




  DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29

More Related Content

What's hot

Share point 2013 for intranets and the digital workplace (1)
Share point 2013 for intranets and the digital workplace (1)Share point 2013 for intranets and the digital workplace (1)
Share point 2013 for intranets and the digital workplace (1)
Alex Manchester
 

What's hot (13)

Taming Complexity: Drupal 8 UX
Taming Complexity: Drupal 8 UXTaming Complexity: Drupal 8 UX
Taming Complexity: Drupal 8 UX
 
UX Prototyping and Personas 11-14-14
UX Prototyping and Personas 11-14-14UX Prototyping and Personas 11-14-14
UX Prototyping and Personas 11-14-14
 
Share point 2013 for intranets and the digital workplace (1)
Share point 2013 for intranets and the digital workplace (1)Share point 2013 for intranets and the digital workplace (1)
Share point 2013 for intranets and the digital workplace (1)
 
Branding sharepoint project
Branding sharepoint projectBranding sharepoint project
Branding sharepoint project
 
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
 
40 web design trends in 2015
40 web design trends in 201540 web design trends in 2015
40 web design trends in 2015
 
Integrating Axure Into Your Design Process
Integrating Axure Into Your Design ProcessIntegrating Axure Into Your Design Process
Integrating Axure Into Your Design Process
 
Create your own SharePoint Master Pages and Page Layouts
Create your own SharePoint Master Pages and Page LayoutsCreate your own SharePoint Master Pages and Page Layouts
Create your own SharePoint Master Pages and Page Layouts
 
From Flash to Canvas - a penchant for black holes
From Flash to Canvas - a penchant for black holesFrom Flash to Canvas - a penchant for black holes
From Flash to Canvas - a penchant for black holes
 
Simplifying Massive Changes with a Live Style Guide
Simplifying Massive Changes with a Live Style GuideSimplifying Massive Changes with a Live Style Guide
Simplifying Massive Changes with a Live Style Guide
 
A primer on ux design
A primer on ux designA primer on ux design
A primer on ux design
 
Introduction to Building Wireframes (with Keynote)
Introduction to Building Wireframes (with Keynote)Introduction to Building Wireframes (with Keynote)
Introduction to Building Wireframes (with Keynote)
 
Good vs Evil SharePoint Customizing
Good vs Evil SharePoint CustomizingGood vs Evil SharePoint Customizing
Good vs Evil SharePoint Customizing
 

Similar to Creating a Component Library

Industrial and Academic Experiences with a User Interaction Modeling Language...
Industrial and Academic Experiences with a User Interaction Modeling Language...Industrial and Academic Experiences with a User Interaction Modeling Language...
Industrial and Academic Experiences with a User Interaction Modeling Language...
Marco Brambilla
 
Speed up sql server apps - visual studio magazine
Speed up sql server apps  - visual studio magazineSpeed up sql server apps  - visual studio magazine
Speed up sql server apps - visual studio magazine
Kaing Menglieng
 
SharePoint - Right Intro To Development
SharePoint - Right Intro To DevelopmentSharePoint - Right Intro To Development
SharePoint - Right Intro To Development
Mark Rackley
 
Achieving Visibility and Insight across OpenStack Projects.ppt
Achieving Visibility and Insight across OpenStack Projects.pptAchieving Visibility and Insight across OpenStack Projects.ppt
Achieving Visibility and Insight across OpenStack Projects.ppt
OpenStack Foundation
 
01 necto introduction_ready
01 necto introduction_ready01 necto introduction_ready
01 necto introduction_ready
www.panorama.com
 
TERMINALFOUR t44u 2009 - University of St Andrews Case Study
TERMINALFOUR t44u 2009 - University of St Andrews Case StudyTERMINALFOUR t44u 2009 - University of St Andrews Case Study
TERMINALFOUR t44u 2009 - University of St Andrews Case Study
Terminalfour
 

Similar to Creating a Component Library (20)

IBM DITA Wiki: One Year Retrospective
IBM DITA Wiki: One Year RetrospectiveIBM DITA Wiki: One Year Retrospective
IBM DITA Wiki: One Year Retrospective
 
Industrial and Academic Experiences with a User Interaction Modeling Language...
Industrial and Academic Experiences with a User Interaction Modeling Language...Industrial and Academic Experiences with a User Interaction Modeling Language...
Industrial and Academic Experiences with a User Interaction Modeling Language...
 
Software Architecture Erosion and Modernization
Software Architecture Erosion and ModernizationSoftware Architecture Erosion and Modernization
Software Architecture Erosion and Modernization
 
API Design & Moving from Junior to Senior Developer
API Design & Moving from Junior to Senior DeveloperAPI Design & Moving from Junior to Senior Developer
API Design & Moving from Junior to Senior Developer
 
Framework Engineering
Framework EngineeringFramework Engineering
Framework Engineering
 
Web 2.0 And The End Of DITA
Web 2.0 And The End Of DITAWeb 2.0 And The End Of DITA
Web 2.0 And The End Of DITA
 
Speed up sql server apps - visual studio magazine
Speed up sql server apps  - visual studio magazineSpeed up sql server apps  - visual studio magazine
Speed up sql server apps - visual studio magazine
 
SharePoint - Right Intro To Development
SharePoint - Right Intro To DevelopmentSharePoint - Right Intro To Development
SharePoint - Right Intro To Development
 
Growing DITA across the enterprise
Growing DITA across the enterpriseGrowing DITA across the enterprise
Growing DITA across the enterprise
 
zAgile for OpenStack Summit - v2-3.ppt
zAgile for OpenStack Summit - v2-3.pptzAgile for OpenStack Summit - v2-3.ppt
zAgile for OpenStack Summit - v2-3.ppt
 
Achieving Visibility and Insight across OpenStack Projects.ppt
Achieving Visibility and Insight across OpenStack Projects.pptAchieving Visibility and Insight across OpenStack Projects.ppt
Achieving Visibility and Insight across OpenStack Projects.ppt
 
Dita for the web: Make Adaptive Content Simple for Writers and Developer
Dita for the web: Make Adaptive Content Simple for Writers and DeveloperDita for the web: Make Adaptive Content Simple for Writers and Developer
Dita for the web: Make Adaptive Content Simple for Writers and Developer
 
introduction to material design lite MDL
introduction to material design lite MDLintroduction to material design lite MDL
introduction to material design lite MDL
 
Orion
OrionOrion
Orion
 
Under the covers of Drupal Commons - the "Instant Community" distribution
Under the covers of Drupal Commons - the "Instant Community" distributionUnder the covers of Drupal Commons - the "Instant Community" distribution
Under the covers of Drupal Commons - the "Instant Community" distribution
 
Web 2.0 Design Patterns, Models and Analysis
Web 2.0 Design Patterns, Models and AnalysisWeb 2.0 Design Patterns, Models and Analysis
Web 2.0 Design Patterns, Models and Analysis
 
Intranet 2.0 - Integrating Enterprise 2.0 into your corporate intranet
Intranet 2.0 - Integrating Enterprise 2.0 into your corporate intranetIntranet 2.0 - Integrating Enterprise 2.0 into your corporate intranet
Intranet 2.0 - Integrating Enterprise 2.0 into your corporate intranet
 
Introduce PlutoCMS
Introduce PlutoCMSIntroduce PlutoCMS
Introduce PlutoCMS
 
01 necto introduction_ready
01 necto introduction_ready01 necto introduction_ready
01 necto introduction_ready
 
TERMINALFOUR t44u 2009 - University of St Andrews Case Study
TERMINALFOUR t44u 2009 - University of St Andrews Case StudyTERMINALFOUR t44u 2009 - University of St Andrews Case Study
TERMINALFOUR t44u 2009 - University of St Andrews Case Study
 

Recently uploaded

Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Peter Udo Diehl
 

Recently uploaded (20)

A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
 
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxIOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 
UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
Buy Epson EcoTank L3210 Colour Printer Online.pptx
Buy Epson EcoTank L3210 Colour Printer Online.pptxBuy Epson EcoTank L3210 Colour Printer Online.pptx
Buy Epson EcoTank L3210 Colour Printer Online.pptx
 
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 

Creating a Component Library

  • 1. Creating a Component Library for DC Design Talks, February 29, 2008 by Nathan Curtis Founder & Principal, EightShapes LLC nathan@eightshapes.com :: www.eightshapes.com
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10. WHAT is a component
  • 11. Components 11 View (Page) A point-in-time display EXAMPLES within a viewer, such as Shopping cart Product overview a specific browser Log in page, application state, Install shield intro or document view Portal home Gmail’s inbox iPhone default screen DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  • 12. Components 12 Element A single atomic item EXAMPLES Text snippet on a page that cannot Image be further broken Textbox down into multiple Button parts Logo Radio button (labeled) Link Page Title DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  • 13. Components 13 Component A combination of EXAMPLES Search box area elements that creates Promotion list a purposeful, reusable, News feed and independent Tabbed navigation structure Related links Article content DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  • 14.
  • 15.
  • 16.
  • 17.
  • 18. Components 18 Components can permeate... Wireframing Visual Design Code DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  • 19. Introduction 19 Component = Pattern DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  • 20. Components 20 Components are Different! Distinction Components Patterns Specificity? Specific to design system General across contexts Style? Established Independent Flexible? Well-defined, codified Broadly applicable Location? Grid implies position & use Up to the designer Type(s)? Smaller than page, bigger All sorts (module, element, than element page, flow, behavior, etc) Guidelines? Detailed, org-specific Best practices and common specs behaviors Code-base? Well defined reference Tandem starter assets code DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  • 21. WHY a component library?
  • 24. Assets for efficient reuse www.sun.com/webdesign/components/component-index.html
  • 25. Templates based on design system
  • 27. Language for collaboration Category G1v2x1 Example # Component # Variation # = Global Navigation Bar (Logged In, Entitled)
  • 28. Taxonomy for asset namespace Universal IDs Image filenames CSS Class HTML Namespace Wireframe snippet Inspired by http://blogs.sun.com/riotnrrd/entry/under_the_hood_a_look
  • 32. HOW do I build a library? A look at the high level process of library development
  • 33. Components 33 Creating a Component Library 1 2 3 4 5 Discover Organize Build Document Promote Distribute Maintain Teach DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  • 34. Components 34 Discover 1 2 3 4 5 Discover Organize Build Document Promote During Design Analyzing a System Collaborative Exercises Create it organically Perform an analysis Bring together multiple as a system emerges of regions, reuse, and perspectives to decompose (this is hard) other aspects of a live the system together design system DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  • 35.
  • 36. Components 36 Collaborative Exercise 1. Identify 4. Archive 2. Group 5. Prioritize 3. Classify 6. Label DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  • 37. IA Coder Strategist PM Visual
  • 38.
  • 39. Components 39 Organize 1 2 3 4 5 Discover Organize Build Document Promote Create an inventory that includes: • Build/Exercise ID • Reference Artwork/Page • Component ID • Component Title • Variation ID • Variation Title • Category • Priority (High, Medium, Low) • Phase (1, 2, 3, etc) • Status (Identified, Drafted, Spec’ed, Published) • Notes DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  • 40. Components 40 Regions • Global navigation / Header / Footer • Navigation (secondary or local) • Side bar / side navigation / right rail • Content space • Spotlight / lead / billboard / big top • Pop-up / Pop-in / Hovers (lightbox) DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  • 41. Components 41 Sun.com • Global • Navigation • Side • Content • Spotlight DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  • 42. Components 42 RevolutionHealth.com • Global • Navigation • Side • Content • Spotlight DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  • 43. Components 43 Comcast.net • Global • Navigation • Side • Content • Spotlight DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  • 44. Components 44 Marriott.com • Global • Navigation • MU • Content • Spotlight DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  • 45. Components 45 NationalGeographic.com • Global • Navigation • Side • Content • Spotlight DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  • 46. Components 46 Build 1 2 3 4 5 Discover Organize Build Document Promote No matter the component assets you produce... Wireframe or Comp or Code ...keep a process in mind: Create Test Review Publish Store DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  • 47. Components 47 Document 1 2 3 4 5 Discover Organize Build Document Promote Document-Based Web-Based Self-Documenting PDF Specifications & Guidelines Sun Component Library Code Contact Sheets Files Libraries Yahoo Pattern Library DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  • 48. Components 48 Promote 1 2 3 4 5 Discover Organize Build Document Promote The library must be communicated to varied audiences in specific ways to address their needs: Product Copywriter/ Manager Publisher Engineer “What can I use?” “What are the editorial “Where is the code?” guidelines?” “What are the strategies?” “What’s the latest update?” “Who must I coordinate “What are the constraints?” with when I use them?” “How stable is it?” “How can I customize?” “In what context(s) can “What are the behavioral each be employed?” specifications?” DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  • 49. Components 49 Once Established... You’ve now got a living, changing, evolving set of assets that grows stale quickly unless you concentrate on: Distribution Maintenance Teaching The library and tools The library and tools The library and tools must be distributed, must have a viable must be augmented by whether via: owner that: documentation that: • .zip file • Serves as a resource • Clarifies purpose • Secure site • Updates the library • Provides details • Versioning system • Handles requests • Fosters adoption • Identifies opportunities • Limits resource impacts DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  • 50. Introduction 50 Further References http://blogs.sun.com/riotnrrd/entry/under_the_hood_a_look DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  • 51. Introduction 51 So, who are you? DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29