Your SlideShare is downloading. ×
Creating a Component Library
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

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

Creating a Component Library

8,656

Published on

Published in: Technology
3 Comments
36 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,656
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
273
Comments
3
Likes
36
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 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. WHAT is a component
  • 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. 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. 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. 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. Introduction 19 Component = Pattern DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29
  • 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. WHY a component library?
  • 10. Assets for efficient reuse
  • 11. Assets for efficient reuse
  • 12. Assets for efficient reuse www.sun.com/webdesign/components/component-index.html
  • 13. Templates based on design system
  • 14. Process for efficient production
  • 15. Language for collaboration Category G1v2x1 Example # Component # Variation # = Global Navigation Bar (Logged In, Entitled)
  • 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. Structure for predictable delivery
  • 18. Environment for governance
  • 19. Foundation for innovation
  • 20. HOW do I build a library? A look at the high level process of library development
  • 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. 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. 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. IA Coder Strategist PM Visual
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Introduction 51 So, who are you? DC Design Talks :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: 2008.02.29

×