Modular Web Design: Creating Reusable Components for User Experience Design and Documentation

Modular Web Design: Creating Reusable Components for User Experience Design and Documentation

by Nathan Curtis
Released June 2009
Publisher(s): New Riders
ISBN: None

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

User experience design teams often suffer from a decentralized, blank canvas approach to creating and documenting a design solution for each new project. As teams repeatedly reinvent screen designs, inconsistency results, 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 Web page. Designers can produce wireframes, mockups, or markup far more efficiently reusing components based on an established design system. Rather than limit innovation, components enable designers to render solved design frameworks quickly and to focus on the problem at hand, drastically improving the quality and rate of production. In addition, teams develop a deeper baseline for collaboration, a platform for governance, and a structure for useful and predictable documentation.
 
This book defines the role of components and why they matter, maps out how to organize and build a component library, discusses how to use components in practice, and teaches a process for documenting and maintaining components.

Table of contents

  1. Copyright
    1. Dedication
  2. Foreword
  3. Preface
  4. Acknowledgments
  5. I. Component Design
    1. 1. Define
      1. Rectangles!
      2. For Designers, Engineers, and Everyone Else, Too
        1. Intersecting Design and Code
        2. Spreading Far and Wide
      3. Components and Patterns
        1. What Is a Pattern?
        2. How Are Components and Patterns Related?
          1. Components Inspired by a Pattern
          2. Reconciling a Pattern from Components
          3. How Are Components and Patterns the Same?
          4. How Are Components and Patterns Different?
      4. Divide and Conquer
    2. 2. Divide
      1. Beyond Pages
      2. A Design’s Hierarchy
      3. Page Chunks
        1. The Chunking Process
        2. Right-Sizing the Rectangles
      4. Chunks Matter
        1. Relating Components
      5. From Sketching to Code
      6. Example: Product
        1. Components
      7. Example: Article
        1. Components
      8. Example: Search Results
        1. Components
      9. Example: Portal
        1. Components
      10. Notes
    3. 3. Vary
      1. Varying Components
        1. States
        2. Stating the Question
          1. Part #1: When
          2. Part #2: See
          3. Part #3: What
      2. Variation via Pictures
        1. #1. Compare
        2. #2. Order
        3. #3. Attribute
        4. #4. Arrange
        5. #5. Concentrate
        6. #6. Bound
        7. #7. Narrate
        8. #8. Embed
      3. Variation via Words
        1. Stated Structure
          1. If/Then
          2. Cases
          3. State Matrix
      4. Pictures and Words Together
      5. Notes
    4. 4. Combine
      1. Assembling Pages
        1. A Page of Components
        2. A Component Across Pages
      2. Common Combos
        1. Duplicates
        2. Bundles
        3. Shells
        4. Regions
      3. From Projects to Systems
        1. Moving Towards Code
        2. A Worthy Investment
    5. 5. Reuse
      1. The Curse of Embedded Artwork
      2. A More Dynamic Design
        1. Reusing Components Inside a File
        2. Reusing Components Across Files
        3. Customizing Each Linked Instance
        4. Benefits of Linking Design Assets
      3. Reuse in Design Software
        1. Reuse Through Symbol Panels
        2. Reuse Through Linked Files
        3. Comparing Software Features
      4. The Essential Links
        1. Component into a Page
        2. Cropped Component into a Page
        3. Page Shell into a Page
      5. A Culture of Linked Files
        1. Each Tool Is Different
        2. File Proliferation
        3. Collaboration
        4. Naming Conventions
        5. To Link or Not to Link, What Is the Question?
      6. Unifying Design and Documentation
        1. Threading Design into Deliverables
        2. Threading Copy into Design
        3. Threading Deliverables Together
    6. 6. Document
      1. Why Document?
        1. Why Not Document?
        2. The Deliverable Life Cycle
      2. Recipes
      3. Documenting the Hierarchy
        1. Strategy and Research
        2. The Big Picture: Maps and Flows
        3. Page-level Documentation
          1. Page Visualization Only
          2. Chunked Page
          3. Page Variations
          4. Detailed Page Annotations
        4. Component Markers
        5. Components
          1. Component Visualization(s) Only
          2. Marking Elements and Annotating Components
          3. Choosing from Alternatives
        6. Documentation Tips
          1. #1 One Story Per Page
          2. #2 Balance Pictures and Words
          3. #3 Set the Stage and Drill Deep
          4. #4 Anticipate Growth
          5. #5 Make Documents Usable
      4. Turning Projects into Standards
  6. II. Component Libraries
    1. 7. Appraise
      1. Why Create a Library?
        1. Efficiency
        2. Consistency
        3. Memory
        4. Portability
        5. Vocabulary
        6. Authority
        7. Predictability
        8. Collaboration
      2. Are You Building the Right Library?
      3. Is Your User Experience Ready for a Library?
        1. Scale
        2. Relevance
        3. Stability
        4. Disparity
        5. Centrality
      4. Are You Ready for a Library?
      5. Is Your Design Team Ready for a Library?
      6. Is Your Organization Ready for a Library?
        1. Communication
        2. Workflow
        3. Collaboration
        4. Participation
        5. Documentation
        6. Reinvention
      7. Is Management Ready to Support a Library?
        1. Upfront and Ongoing Investments
        2. Management Pitfalls
          1. Insufficient Hardware and Software Support
          2. Lack of Priority
          3. Leadership and Evangelism
          4. Background Support
      8. So, Are You Really Ready to Build a Library?
    2. 8. Discover
      1. Approaches
        1. During Design
          1. Key Benefits
          2. Challenges
        2. Design Analysis
        3. Code Analysis
        4. Workshops
          1. Planning
          2. Facilitation
          3. Exercise Steps
          4. Wrap Up
      2. Library Scope
        1. As-Is, As-Intended, or Will-Be?
        2. Clarifying Scope
      3. Value
        1. Scale of Reuse
        2. Similarity
        3. Specificity
        4. Significance
        5. Stability
        6. Sophistication
        7. Sociability
        8. Sync
    3. 9. Organize
      1. The Component Catalog
        1. Discovery Properties
        2. Taxonomy Properties
        3. Build Properties
        4. Administration Properties
        5. Retiring Components
      2. Categories
        1. Header and Footer
        2. Body Content
        3. Navigation
        4. Sidebar
        5. Billboard
        6. Other Categories
        7. Overlapping Categories
      3. Variations
        1. Relating Components as Variations
      4. Examples
        1. Taking the Engineer’s Perspective
      5. Codes
        1. But Aren’t Codes Cryptic?
        2. Creating Component Codes
        3. Code Guidelines
          1. Category Codes
          2. Component Codes
          3. Variation Codes
      6. Names
      7. Keywords
    4. 10. Setup
      1. Tools
        1. Culture and Capabilities
        2. Platforms and Products
        3. Resistance to Change
      2. Templates
        1. Separating Design and Deliverables
        2. Document Setup for Design Templates
        3. Grids and Guidelines
        4. Layers
      3. Styles
        1. Type Styles
        2. Object Styles
        3. Relating Styles
      4. Conventions
        1. Wireframe Conventions
        2. Comp Conventions
        3. Representing Copy
    5. 11. Build
      1. Roles
      2. Build Files
        1. Setting Up a Build File
        2. Organizing a Build File
        3. Multiple Build Files
        4. The Build File as a Reference Document, Too!
      3. Time to Build!
      4. Pages and Elements
        1. Page Types
        2. Element Libraries
      5. Packaging
        1. Components in a Library Panel
          1. Advantages
          2. Disadvantages
        2. Components as Individual Files
          1. Advantages
          2. Disadvantages
        3. Preparing Each Component
        4. Distribution
    6. 12. Administer
      1. The Librarian
        1. Faith Sharing
        2. The “Go-To” Authority
        3. Defining a Role
        4. Multiple Librarians and Boards
      2. A Component’s Life
        1. Release Status
      3. Updating the Library
        1. Catalog
        2. Assets
        3. Guidelines
      4. Publishing
        1. “Where’s the Latest?”
        2. Predictable Publishing Cycles
        3. Distribution
        4. Notifications
      5. Inputs and Feedback
        1. Discussions
    7. 13. Guide
      1. Documenting a Library
        1. Web Sites
          1. Implementation
        2. Documents
          1. Beyond a Style Guide
          2. Component Reference
          3. Users Guide
        3. Documentation in Assets
      2. Standardizing Components
        1. Learning from Design Patterns
        2. Component Attributes
          1. Picturing Each Variation
          2. A Concrete “Use When”
          3. Visual Style
          4. HTML and CSS Code
        3. Writing Process
          1. Gathering Inputs
          2. Reviewing with Peers
          3. Sharing and Collaborating
    8. 14. Adopt
      1. Planning
      2. Pacing
        1. Trial by Fire
        2. Gradual Acclimation
      3. Pilots
        1. Set Clear Expectations for the Pilot
      4. Live Training
        1. Focus on Fundamentals
        2. Encourage Feedback
        3. Address Diverse Audiences
        4. Create Teachable Moments
      5. Post-Launch Training Activities
        1. Publishing Tips and Techniques
        2. Coaching
        3. Additional Live Training and Workshops
        4. Video-based Training
          1. Starting a Collection
    9. 15. Integrate
      1. Plan
        1. A Spectrum of Creativity
        2. Design Templates
        3. Custom Designs
      2. Prepare
        1. What is this stuff?
        2. How do I get it?
        3. How does it work?
      3. Design and Document
        1. The Component Design Review
          1. Before the Review
          2. During the Review
          3. After the Review
        2. What Happens to Visual Design?
      4. Develop
        1. The Component Code Review
          1. Before the Meeting
          2. During the Meeting
          3. After the Meeting
      5. Standardize

Product information

  • Title: Modular Web Design: Creating Reusable Components for User Experience Design and Documentation
  • Author(s): Nathan Curtis
  • Release date: June 2009
  • Publisher(s): New Riders
  • ISBN: None