UI Design Patterns

Apply proven UI design patterns to solve common interface problems. Matches your design challenge to established patterns with implementation details, accessibility requirements, and responsive behavior.

Usage

Describe the interface problem you're solving or the user action you need to support. The guide recommends appropriate design patterns with pros, cons, and implementation specifics for your platform.

Parameters

• Problem: Navigation, Data display, Forms, Onboarding, Search, or Settings
• Platform: Web, iOS, Android, or Cross-platform
• Complexity: Simple (few options), Medium, or Complex (many features)
• Users: Consumer, Enterprise, Internal tool, or Developer-facing

Examples

1. Data Table with Filters: Compare table patterns (basic, sortable, filterable, expandable rows) with recommendations based on data volume, user expertise, and mobile considerations.

1. Onboarding Flow: Progressive disclosure pattern for a complex SaaS product — wizard steps, inline tooltips, empty states, and a checklist dashboard to track setup completion.

1. Navigation Architecture: Recommend navigation patterns for a 50+ page enterprise app — sidebar vs. top nav vs. mega menu, with mobile drawer adaptation and information architecture principles.

1. Settings Page Organization: Group 40+ settings into logical categories using tabs, sections, or a search-first approach, with recommended defaults and dangerous action protections.

Guidelines

• Patterns are matched to specific use cases with clear "use when" and "don't use when" guidance
• Accessibility requirements (ARIA roles, keyboard navigation, screen reader behavior) are specified
• Mobile adaptations show how each pattern responds to smaller viewports
• Performance implications are noted for patterns involving large datasets or animations
• Examples reference well-known products that implement each pattern successfully
• Anti-patterns are called out with explanations of why they fail
• Implementation notes include CSS/HTML structure hints without full code
• User testing considerations suggest what to validate before committing to a pattern
• Platform conventions are respected (Material Design for Android, HIG for iOS)