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

Taming Complexity: Drupal 8 UX
Taming Complexity: Drupal 8 UXTaming Complexity: Drupal 8 UX
Taming Complexity: Drupal 8 UX
Wunderkraut
 
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
Shilpa Thanawala
 
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
 
Branding sharepoint project
Branding sharepoint projectBranding sharepoint project
Branding sharepoint project
Binh Nguyen
 
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 ...
SPTechCon
 
40 web design trends in 2015
40 web design trends in 201540 web design trends in 2015
40 web design trends in 2015
Equinet Academy
 
Integrating Axure Into Your Design Process
Integrating Axure Into Your Design ProcessIntegrating Axure Into Your Design Process
Integrating Axure Into Your Design Process
Fred Beecher
 
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
Eric Overfield
 
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
Patric Lanhed
 
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
Mark Meeker
 
A primer on ux design
A primer on ux designA primer on ux design
A primer on ux design
Tannistho Ghosh
 
Introduction to Building Wireframes (with Keynote)
Introduction to Building Wireframes (with Keynote)Introduction to Building Wireframes (with Keynote)
Introduction to Building Wireframes (with Keynote)
Erin 'Folletto' Casali
 
Good vs Evil SharePoint Customizing
Good vs Evil SharePoint CustomizingGood vs Evil SharePoint Customizing
Good vs Evil SharePoint Customizing
Stacy Deere
 

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

IBM DITA Wiki: One Year Retrospective
IBM DITA Wiki: One Year RetrospectiveIBM DITA Wiki: One Year Retrospective
IBM DITA Wiki: One Year Retrospective
Don Day
 
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
 
Software Architecture Erosion and Modernization
Software Architecture Erosion and ModernizationSoftware Architecture Erosion and Modernization
Software Architecture Erosion and Modernization
bmerkle
 
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
christophercotton
 
Framework Engineering
Framework EngineeringFramework Engineering
Framework Engineering
YoungSu Son
 
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
Joe Gollner
 
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
 
Growing DITA across the enterprise
Growing DITA across the enterpriseGrowing DITA across the enterprise
Growing DITA across the enterprise
Don Day
 
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
OpenStack Foundation
 
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
 
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
Don Day
 
introduction to material design lite MDL
introduction to material design lite MDLintroduction to material design lite MDL
introduction to material design lite MDL
Eueung Mulyana
 
Orion
OrionOrion
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
Acquia
 
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
adunne
 
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
James Dellow
 
Introduce PlutoCMS
Introduce PlutoCMSIntroduce PlutoCMS
Introduce PlutoCMS
xhan87
 
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

RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
KAMESHS29
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
SOFTTECHHUB
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Zilliz
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems S.M.S.A.
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
Neo4j
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
Zilliz
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
mikeeftimakis1
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
Neo4j
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Kumud Singh
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
Neo4j
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
DianaGray10
 

Recently uploaded (20)

RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
 

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