Interaction Design: Design Patterns as Building Blocks

Learn how to use design patterns to create the foundational elements of your websites: navigation, buttons, forms, search boxes, and more.

Introduction

• Using design patterns

1. Patterns Overview

• What is a design pattern?
• Why are design patterns useful?
• Design pattern library vs. style guides
• When to break a pattern
• Anti patterns or dark patterns

2. Page Structure and Organization

• Global navigation
• Cards
• Tabs
• Side navigation
• Accordions

3. Form and Data Controls

• Fitts's law, grouping, and cognitive load
• Text input
• Checkboxes, radio buttons, and dropdowns
• Tooltips and popovers
• Buttons
• Links and breadcrumbs
• Toggle switches
• Modals

4. Indicating Progress and Feedback

• Feedback in UX
• System messaging
• Progress indicators
• Progress meters
• Progress indicators: Spinners

5. Search and Filtering

• Search input
• Autocomplete
• Search results
• Filtering

Conclusion

• Next Steps