Unblocking The Main Thread Solving ANRs and Frozen Frames
Â
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
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
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
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