Nathan Curtis
Note: All registrants of this seminar will be given a 35% discount and free shipping on the presenter upcoming book
Abstract
User experience design teams suffer from a decentralized, blank canvas approach to creating and documenting a design solution for each new project. Screen designs are reinvented over and over again, inconsistency quickly expands, and IT teams scramble to pick up the pieces. Pattern libraries only go so far, suggesting general solutions to common problems instead of offering concrete, specific design treatments. At times, documented solutions turn into a costly mess of unclear expectations, unrealistic goals, and abandoned work.
Enter components, each of which represents a chunk of a page. Designers can produce wireframes, mockups or markup far more quickly reusing components based on an established design system. Rather than limiting innovation, components enable designers to render solved design frameworks faster and focus far more on the problem at hand. When individuals no longer reinvent vast portions of a design with every project, production drastically improves. In addition, teams have a deeper baseline for collaboration, a platform for governance, and a structure for useful and predictable documentation.
This seminar will define the role of components and why they matter, map out how to organize and build a library, describe how to use components in practice, establish a process for documenting and maintaining components, and much more. At the tutorial’s center is the “Discovering Components” exercise, where you’ll collaborate with colleagues to identify, categorize, label, and prioritize a components catalog. Many UX teams have used this exercise to discover their own component libraries; you’ll have the same experience. We’ll also share extensive experiences in creating and managing component and pattern libraries for many UX teams.
Workshop Details
DETAILED OUTLINE
Understanding Patterns and Components
- What is a pattern?
- The role of patterns in the design process
- What is a component?
- Component value, from strategy to implementation
- Benefits of a systematic approach
- Distinguishing between patterns and components
- Relating patterns and components as complementary concepts
- Group Exercise: Name that pattern! Or is that a component? (15 min)
Discovering Components
- Using Lego to understand components
- Decomposing a design system
- Design hierarchy: Where components fit
- Why components matter
- Common component structures
- Regions
- Understanding variations and examples
- Component themes
- Identify the component!
- Hands-on Exercise: Discovering Components (90 min)
Assembling & Using Components in Wireframing
- Planning & organizing the library’s catalog
- Choosing a tool
- Building templates: page size, grids, styles, folds, and more
- Building the wireframe components
- Piloting the library
- Components in user experience documentation
- Modularizing design and documentation
- Page types
- Marking components
- Assessing component impacts across disciplines
- Demonstration: Rapid wireframe and deliverable creation (30 min)
Managing & Documenting Components
- Hands-on Exercise: Design a library workflow (15 min)
- Key roles: Librarian, contributor, reviewer, consumer
- Component life cycle
- Aspects: Catalog, assets, guidelines/documentation
- Notification
- Distribution
- Feedback
- Scoring
- Preparing to document
- Key attributes
- Composition tips
- Publishing
- Demonstration: pattern vs. component libraries (15 min)
LEARNING OBJECTIVES
Learn a conceptual foundation, concrete methods, pitfalls and gotchas, and best practices for organizing, creating, documenting, and promoting the use of a component-based approach to user experience design.
JUSTIFICATION
Because our disciplines within user experience, and particularly information architects, produce documentation that is so inconsistent and muddled that the credibility of our discipline is eroded before we can even build it up. Because our community can learn to communicate design more effectively, consistently, and clearly than it does today. And that we need to further bridge our collaborative vocabulary and mapped artifacts across to other disciplines, most notably visual designers and UI engineers (that is, those schlepping HTML & CSS). Because individuals remain daunted, intimidated, downright scared by the task of systematizing and documenting a design system themselves or thinking they have the capability or plan to institutionalize such a system. This seminar will provide a foundation. Because individuals need a quick, usable reference to very useful techniques, without having to read a whole book to understanding anything. Many big ticket “How do I…?” questions would be answered here, but in bite sized, useful chunks.
FORMAT
This full-day seminar will enable participants to learn about a topic, put it into practice, and then share collective experiences. Exercises may vary from individual to paired to small groups.
CORE IA ISSUES
Documentation, deliverables, consistency, efficiency, modularity of design assets, collaboration, productivity, maintenance, credibility, governance
TARGET AUDIENCE
Information architects, interaction designers, site strategists, UX managers, visual designers, and design technologists (HTML/CSS/JS architects)
SAMPLE HANDOUTS & TAKEAWAYS
Participants should receive copies of all lecture slides as well as take away any materials from hands-on exercises including cutout components.
PREVIOUSLY CONDUCTED
This full-day workshop was conducted at two user experience conferences in November 2008. Portions (half day or more) have been presented to over 10 in-house user experience teams. Audiences have ranged from small IA groups numbering 4-8 individuals to larger UX teams spanning 40+ teammates across IA, visual design, content strategy, and more.
RELATED BOOK
This workshop is also strongly aligned with an upcoming book by the presenter.
Speaker Details
Nathan Curtis is a founder and principal at EightShapes, LLC, a user experience consulting firm based in Washington, DC. Nathan has been practicing varied disciplines within user experience design since 1996, and areas of interest include information architecture, interaction design, usability research, and front-end development. Through EightShapes, Nathan has recently helped improve the design and documentation of the .com experiences at Comcast, Embarq, Sun Microsystems, Discovery, National Geographic, Sprint Nextel, AutoTrader.com, Cisco, and Marriott and more. Nathan also enjoys writing about and discovering the potential of many information architect software tools, including Adobe InDesign, Adobe Illustrator, Microsoft Visio and Adobe Fireworks.