Creating a Component Library

9,725
-1

Published on

Note the use of "atomic" on slide 12's description of elements ;)

Published in: Technology
3 Comments
38 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,725
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
281
Comments
3
Likes
38
Embeds 0
No embeds

No notes for slide

Creating a Component Library

  1. 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. 2. WHAT is a component
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. Components 18 Components can permeate... Wireframing Visual Design Code DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  7. 7. Introduction 19 Component = Pattern DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  8. 8. 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
  9. 9. WHY a component library?
  10. 10. Assets for efficient reuse
  11. 11. Assets for efficient reuse
  12. 12. Assets for efficient reuse www.sun.com/webdesign/components/component-index.html
  13. 13. Templates based on design system
  14. 14. Process for efficient production
  15. 15. Language for collaboration Category G1v2x1 Example # Component # Variation # = Global Navigation Bar (Logged In, Entitled)
  16. 16. 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
  17. 17. Structure for predictable delivery
  18. 18. Environment for governance
  19. 19. Foundation for innovation
  20. 20. HOW do I build a library? A look at the high level process of library development
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. IA Coder Strategist PM Visual
  25. 25. 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
  26. 26. 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
  27. 27. Components 41 Sun.com • Global • Navigation • Side • Content • Spotlight DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  28. 28. Components 42 RevolutionHealth.com • Global • Navigation • Side • Content • Spotlight DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  29. 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
  30. 30. Components 44 Marriott.com • Global • Navigation • MU • Content • Spotlight DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  31. 31. Components 45 NationalGeographic.com • Global • Navigation • Side • Content • Spotlight DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. Introduction 51 So, who are you? DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×