create-ux-design refactor
This commit is contained in:
Brian Madison
Dave Dittrich
parent
d428bde452
commit
84dc03bb61
|
|
@ -10,7 +10,8 @@
|
|||
<flow>
|
||||
<step n="1" title="Setup">
|
||||
<action>If checklist not provided, load checklist.md from workflow location</action>
|
||||
<action>If document not provided, ask user: "Which document should I validate?"</action>
|
||||
<action>Try to fuzzy match for files similar to the input document name or if user did not provide the document. If document not
|
||||
provided or unsure, ask user: "Which document should I validate?"</action>
|
||||
<action>Load both the checklist and document</action>
|
||||
</step>
|
||||
|
||||
|
|
|
|||
|
|
@ -22,6 +22,16 @@ agent:
|
|||
workflow: "{project-root}/bmad/bmm/workflows/workflow-status/workflow.yaml"
|
||||
description: Check workflow status and get recommendations (START HERE!)
|
||||
|
||||
- trigger: create-design
|
||||
workflow: "{project-root}/bmad/bmm/workflows/1-discover-workflows/design-thinking/workflow.yaml"
|
||||
description: Conduct Design Thinking Workshop to Define the User Specification
|
||||
|
||||
- trigger: validate-design
|
||||
workflow: "{project-root}/bmad/bmm/workflows/2-plan-workflows/validate-ux-design/workflow.yaml"
|
||||
checklist: "{project-root}/bmad/bmm/workflows/2-plan-workflows/validate-ux-design/checklist.md"
|
||||
document: "{output_folder}/ux-spec.md"
|
||||
description: Validate UX Specification and Design Artifacts
|
||||
|
||||
- trigger: ux-spec
|
||||
workflow: "{project-root}/bmad/bmm/workflows/2-plan-workflows/ux-spec/workflow.yaml"
|
||||
description: Create UX/UI Specification and AI Frontend Prompts
|
||||
|
|
|
|||
|
|
@ -0,0 +1,268 @@
|
|||
# Create UX Design Workflow Validation Checklist
|
||||
|
||||
**Purpose**: Validate UX Design Specification is complete, collaborative, and implementation-ready.
|
||||
|
||||
**Paradigm**: Visual collaboration-driven, not template generation
|
||||
|
||||
**Expected Outputs**:
|
||||
|
||||
- ux-design-specification.md
|
||||
- ux-color-themes.html (color theme visualizer)
|
||||
- ux-design-directions.html (design mockups)
|
||||
- Optional: ux-prototype.html, ux-component-showcase.html, ai-frontend-prompt.md
|
||||
|
||||
---
|
||||
|
||||
## 1. Output Files Exist
|
||||
|
||||
- [ ] **ux-design-specification.md** created in output folder
|
||||
- [ ] **ux-color-themes.html** generated (interactive color exploration)
|
||||
- [ ] **ux-design-directions.html** generated (6-8 design mockups)
|
||||
- [ ] No unfilled {{template_variables}} in specification
|
||||
- [ ] All sections have content (not placeholder text)
|
||||
|
||||
---
|
||||
|
||||
## 2. Collaborative Process Validation
|
||||
|
||||
**The workflow should facilitate decisions WITH the user, not FOR them**
|
||||
|
||||
- [ ] **Design system chosen by user** (not auto-selected)
|
||||
- [ ] **Color theme selected from options** (user saw visualizations and chose)
|
||||
- [ ] **Design direction chosen from mockups** (user explored 6-8 options)
|
||||
- [ ] **User journey flows designed collaboratively** (options presented, user decided)
|
||||
- [ ] **UX patterns decided with user input** (not just generated)
|
||||
- [ ] **Decisions documented WITH rationale** (why each choice was made)
|
||||
|
||||
---
|
||||
|
||||
## 3. Visual Collaboration Artifacts
|
||||
|
||||
### Color Theme Visualizer
|
||||
|
||||
- [ ] **HTML file exists and is valid** (ux-color-themes.html)
|
||||
- [ ] **Shows 3-4 theme options** (or documented existing brand)
|
||||
- [ ] **Each theme has complete palette** (primary, secondary, semantic colors)
|
||||
- [ ] **Live UI component examples** in each theme (buttons, forms, cards)
|
||||
- [ ] **Side-by-side comparison** enabled
|
||||
- [ ] **User's selection documented** in specification
|
||||
|
||||
### Design Direction Mockups
|
||||
|
||||
- [ ] **HTML file exists and is valid** (ux-design-directions.html)
|
||||
- [ ] **6-8 different design approaches** shown
|
||||
- [ ] **Full-screen mockups** of key screens
|
||||
- [ ] **Design philosophy labeled** for each direction (e.g., "Dense Dashboard", "Spacious Explorer")
|
||||
- [ ] **Interactive navigation** between directions
|
||||
- [ ] **Responsive preview** toggle available
|
||||
- [ ] **User's choice documented WITH reasoning** (what they liked, why it fits)
|
||||
|
||||
---
|
||||
|
||||
## 4. Design System Foundation
|
||||
|
||||
- [ ] **Design system chosen** (or custom design decision documented)
|
||||
- [ ] **Current version identified** (if using established system)
|
||||
- [ ] **Components provided by system documented**
|
||||
- [ ] **Custom components needed identified**
|
||||
- [ ] **Decision rationale clear** (why this system for this project)
|
||||
|
||||
---
|
||||
|
||||
## 5. Core Experience Definition
|
||||
|
||||
- [ ] **Defining experience articulated** (the ONE thing that makes this app unique)
|
||||
- [ ] **Novel UX patterns identified** (if applicable)
|
||||
- [ ] **Novel patterns fully designed** (interaction model, states, feedback)
|
||||
- [ ] **Core experience principles defined** (speed, guidance, flexibility, feedback)
|
||||
|
||||
---
|
||||
|
||||
## 6. Visual Foundation
|
||||
|
||||
### Color System
|
||||
|
||||
- [ ] **Complete color palette** (primary, secondary, accent, semantic, neutrals)
|
||||
- [ ] **Semantic color usage defined** (success, warning, error, info)
|
||||
- [ ] **Color accessibility considered** (contrast ratios for text)
|
||||
- [ ] **Brand alignment** (follows existing brand or establishes new identity)
|
||||
|
||||
### Typography
|
||||
|
||||
- [ ] **Font families selected** (heading, body, monospace if needed)
|
||||
- [ ] **Type scale defined** (h1-h6, body, small, etc.)
|
||||
- [ ] **Font weights documented** (when to use each)
|
||||
- [ ] **Line heights specified** for readability
|
||||
|
||||
### Spacing & Layout
|
||||
|
||||
- [ ] **Spacing system defined** (base unit, scale)
|
||||
- [ ] **Layout grid approach** (columns, gutters)
|
||||
- [ ] **Container widths** for different breakpoints
|
||||
|
||||
---
|
||||
|
||||
## 7. Design Direction
|
||||
|
||||
- [ ] **Specific direction chosen** from mockups (not generic)
|
||||
- [ ] **Layout pattern documented** (navigation, content structure)
|
||||
- [ ] **Visual hierarchy defined** (density, emphasis, focus)
|
||||
- [ ] **Interaction patterns specified** (modal vs inline, disclosure approach)
|
||||
- [ ] **Visual style documented** (minimal, balanced, rich, maximalist)
|
||||
- [ ] **User's reasoning captured** (why this direction fits their vision)
|
||||
|
||||
---
|
||||
|
||||
## 8. User Journey Flows
|
||||
|
||||
- [ ] **All critical journeys from PRD designed** (no missing flows)
|
||||
- [ ] **Each flow has clear goal** (what user accomplishes)
|
||||
- [ ] **Flow approach chosen collaboratively** (user picked from options)
|
||||
- [ ] **Step-by-step documentation** (screens, actions, feedback)
|
||||
- [ ] **Decision points and branching** defined
|
||||
- [ ] **Error states and recovery** addressed
|
||||
- [ ] **Success states specified** (completion feedback)
|
||||
- [ ] **Mermaid diagrams or clear flow descriptions** included
|
||||
|
||||
---
|
||||
|
||||
## 9. Component Library Strategy
|
||||
|
||||
- [ ] **All required components identified** (from design system + custom)
|
||||
- [ ] **Custom components fully specified**:
|
||||
- Purpose and user-facing value
|
||||
- Content/data displayed
|
||||
- User actions available
|
||||
- All states (default, hover, active, loading, error, disabled)
|
||||
- Variants (sizes, styles, layouts)
|
||||
- Behavior on interaction
|
||||
- Accessibility considerations
|
||||
- [ ] **Design system components customization needs** documented
|
||||
|
||||
---
|
||||
|
||||
## 10. UX Pattern Consistency Rules
|
||||
|
||||
**These patterns ensure consistent UX across the entire app**
|
||||
|
||||
- [ ] **Button hierarchy defined** (primary, secondary, tertiary, destructive)
|
||||
- [ ] **Feedback patterns established** (success, error, warning, info, loading)
|
||||
- [ ] **Form patterns specified** (labels, validation, errors, help text)
|
||||
- [ ] **Modal patterns defined** (sizes, dismiss behavior, focus, stacking)
|
||||
- [ ] **Navigation patterns documented** (active state, breadcrumbs, back button)
|
||||
- [ ] **Empty state patterns** (first use, no results, cleared content)
|
||||
- [ ] **Confirmation patterns** (when to confirm destructive actions)
|
||||
- [ ] **Notification patterns** (placement, duration, stacking, priority)
|
||||
- [ ] **Search patterns** (trigger, results, filters, no results)
|
||||
- [ ] **Date/time patterns** (format, timezone, pickers)
|
||||
|
||||
**Each pattern should have:**
|
||||
|
||||
- [ ] Clear specification (how it works)
|
||||
- [ ] Usage guidance (when to use)
|
||||
- [ ] Examples (concrete implementations)
|
||||
|
||||
---
|
||||
|
||||
## 11. Responsive Design
|
||||
|
||||
- [ ] **Breakpoints defined** for target devices (mobile, tablet, desktop)
|
||||
- [ ] **Adaptation patterns documented** (how layouts change)
|
||||
- [ ] **Navigation adaptation** (how nav changes on small screens)
|
||||
- [ ] **Content organization changes** (multi-column to single, grid to list)
|
||||
- [ ] **Touch targets adequate** on mobile (minimum size specified)
|
||||
- [ ] **Responsive strategy aligned** with chosen design direction
|
||||
|
||||
---
|
||||
|
||||
## 12. Accessibility
|
||||
|
||||
- [ ] **WCAG compliance level specified** (A, AA, or AAA)
|
||||
- [ ] **Color contrast requirements** documented (ratios for text)
|
||||
- [ ] **Keyboard navigation** addressed (all interactive elements accessible)
|
||||
- [ ] **Focus indicators** specified (visible focus states)
|
||||
- [ ] **ARIA requirements** noted (roles, labels, announcements)
|
||||
- [ ] **Screen reader considerations** (meaningful labels, structure)
|
||||
- [ ] **Alt text strategy** for images
|
||||
- [ ] **Form accessibility** (label associations, error identification)
|
||||
- [ ] **Testing strategy** defined (automated tools, manual testing)
|
||||
|
||||
---
|
||||
|
||||
## 13. Coherence and Integration
|
||||
|
||||
- [ ] **Design system and custom components visually consistent**
|
||||
- [ ] **All screens follow chosen design direction**
|
||||
- [ ] **Color usage consistent with semantic meanings**
|
||||
- [ ] **Typography hierarchy clear and consistent**
|
||||
- [ ] **Similar actions handled the same way** (pattern consistency)
|
||||
- [ ] **All PRD user journeys have UX design**
|
||||
- [ ] **All entry points designed**
|
||||
- [ ] **Error and edge cases handled**
|
||||
- [ ] **Every interactive element meets accessibility requirements**
|
||||
- [ ] **All flows keyboard-navigable**
|
||||
- [ ] **Colors meet contrast requirements**
|
||||
|
||||
---
|
||||
|
||||
## 14. Decision Rationale
|
||||
|
||||
**Unlike template-driven workflows, this workflow should document WHY**
|
||||
|
||||
- [ ] **Design system choice has rationale** (why this fits the project)
|
||||
- [ ] **Color theme selection has reasoning** (why this emotional impact)
|
||||
- [ ] **Design direction choice explained** (what user liked, how it fits vision)
|
||||
- [ ] **User journey approaches justified** (why this flow pattern)
|
||||
- [ ] **UX pattern decisions have context** (why these patterns for this app)
|
||||
- [ ] **Responsive strategy aligned with user priorities**
|
||||
- [ ] **Accessibility level appropriate for deployment intent**
|
||||
|
||||
---
|
||||
|
||||
## 15. Implementation Readiness
|
||||
|
||||
- [ ] **Designers can create high-fidelity mockups** from this spec
|
||||
- [ ] **Developers can implement** with clear UX guidance
|
||||
- [ ] **Sufficient detail** for frontend development
|
||||
- [ ] **Component specifications actionable** (states, variants, behaviors)
|
||||
- [ ] **Flows implementable** (clear steps, decision logic, error handling)
|
||||
- [ ] **Visual foundation complete** (colors, typography, spacing all defined)
|
||||
- [ ] **Pattern consistency enforceable** (clear rules for implementation)
|
||||
|
||||
---
|
||||
|
||||
## 16. Critical Failures (Auto-Fail)
|
||||
|
||||
- [ ] ❌ **No visual collaboration** (color themes or design mockups not generated)
|
||||
- [ ] ❌ **User not involved in decisions** (auto-generated without collaboration)
|
||||
- [ ] ❌ **No design direction chosen** (missing key visual decisions)
|
||||
- [ ] ❌ **No user journey designs** (critical flows not documented)
|
||||
- [ ] ❌ **No UX pattern consistency rules** (implementation will be inconsistent)
|
||||
- [ ] ❌ **Missing core experience definition** (no clarity on what makes app unique)
|
||||
- [ ] ❌ **No component specifications** (components not actionable)
|
||||
- [ ] ❌ **Responsive strategy missing** (for multi-platform projects)
|
||||
- [ ] ❌ **Accessibility ignored** (no compliance target or requirements)
|
||||
- [ ] ❌ **Generic/templated content** (not specific to this project)
|
||||
|
||||
---
|
||||
|
||||
## Validation Notes
|
||||
|
||||
**Document findings:**
|
||||
|
||||
- UX Design Quality: [Exceptional / Strong / Adequate / Needs Work / Incomplete]
|
||||
- Collaboration Level: [Highly Collaborative / Collaborative / Somewhat Collaborative / Generated]
|
||||
- Visual Artifacts: [Complete & Interactive / Partial / Missing]
|
||||
- Implementation Readiness: [Ready / Needs Design Phase / Not Ready]
|
||||
|
||||
## **Strengths:**
|
||||
|
||||
## **Areas for Improvement:**
|
||||
|
||||
## **Recommended Actions:**
|
||||
|
||||
**Ready for next phase?** [Yes - Proceed to Design / Yes - Proceed to Development / Needs Refinement]
|
||||
|
||||
---
|
||||
|
||||
_This checklist validates collaborative UX design facilitation, not template generation. A successful UX workflow creates design decisions WITH the user through visual exploration and informed choices._
|
||||
|
|
@ -0,0 +1,337 @@
|
|||
# Color Psychology - Guide for color theme generation
|
||||
# Maps emotional goals, industries, and brand personalities to color strategies
|
||||
|
||||
emotional_impacts:
|
||||
trust_and_security:
|
||||
primary_colors: ["Blue", "Navy", "Deep Blue"]
|
||||
supporting_colors: ["Gray", "White", "Silver"]
|
||||
avoid: ["Bright Red", "Neon colors", "Purple"]
|
||||
industries: ["Finance", "Banking", "Insurance", "Healthcare", "Legal"]
|
||||
personality: "Professional, Reliable, Stable, Trustworthy"
|
||||
examples: ["PayPal", "Chase Bank", "Facebook", "LinkedIn"]
|
||||
|
||||
energy_and_excitement:
|
||||
primary_colors: ["Red", "Orange", "Bright Yellow"]
|
||||
supporting_colors: ["Black", "White", "Dark Gray"]
|
||||
avoid: ["Muted tones", "Pastels", "Brown"]
|
||||
industries: ["Sports", "Entertainment", "Food & Beverage", "Events"]
|
||||
personality: "Bold, Dynamic, Passionate, Energetic"
|
||||
examples: ["Coca-Cola", "Netflix", "McDonald's", "Spotify"]
|
||||
|
||||
creativity_and_innovation:
|
||||
primary_colors: ["Purple", "Magenta", "Electric Blue", "Vibrant Green"]
|
||||
supporting_colors: ["White", "Black", "Gradients"]
|
||||
avoid: ["Corporate Blue", "Dull Gray", "Brown"]
|
||||
industries: ["Tech Startups", "Design", "Creative", "Gaming"]
|
||||
personality: "Innovative, Creative, Forward-thinking, Unique"
|
||||
examples: ["Twitch", "Adobe Creative Cloud", "Discord", "Figma"]
|
||||
|
||||
calm_and_wellness:
|
||||
primary_colors: ["Soft Blue", "Green", "Teal", "Mint"]
|
||||
supporting_colors: ["White", "Cream", "Light Gray", "Natural tones"]
|
||||
avoid: ["Harsh Red", "Neon", "Dark/Heavy colors"]
|
||||
industries: ["Healthcare", "Wellness", "Meditation", "Spa", "Fitness"]
|
||||
personality: "Peaceful, Healthy, Natural, Balanced"
|
||||
examples: ["Calm", "Headspace", "Fitbit", "Whole Foods"]
|
||||
|
||||
luxury_and_sophistication:
|
||||
primary_colors: ["Black", "Gold", "Deep Purple", "Burgundy"]
|
||||
supporting_colors: ["White", "Cream", "Silver", "Dark Gray"]
|
||||
avoid: ["Bright primary colors", "Pastels", "Neon"]
|
||||
industries: ["Luxury Brands", "High-end Retail", "Premium Services"]
|
||||
personality: "Elegant, Exclusive, Premium, Refined"
|
||||
examples: ["Chanel", "Rolex", "Lexus", "Apple (premium products)"]
|
||||
|
||||
friendly_and_approachable:
|
||||
primary_colors: ["Warm Orange", "Coral", "Sunny Yellow", "Sky Blue"]
|
||||
supporting_colors: ["White", "Cream", "Light Gray"]
|
||||
avoid: ["Dark/Heavy colors", "Corporate Blue", "Black"]
|
||||
industries: ["Education", "Community", "Social", "Consumer Apps"]
|
||||
personality: "Friendly, Warm, Welcoming, Accessible"
|
||||
examples: ["Mailchimp", "Airbnb", "Duolingo", "Slack"]
|
||||
|
||||
minimal_and_modern:
|
||||
primary_colors: ["Black", "White", "One accent color"]
|
||||
supporting_colors: ["Light Gray", "Dark Gray", "Neutral tones"]
|
||||
avoid: ["Multiple bright colors", "Gradients", "Heavy decoration"]
|
||||
industries: ["Tech", "Design", "Fashion", "Architecture"]
|
||||
personality: "Clean, Modern, Focused, Simple"
|
||||
examples: ["Apple", "Stripe", "Medium", "Notion"]
|
||||
|
||||
playful_and_fun:
|
||||
primary_colors: ["Bright Pink", "Purple", "Turquoise", "Lime Green"]
|
||||
supporting_colors: ["White", "Pastels", "Gradients"]
|
||||
avoid: ["Corporate colors", "Muted tones", "All dark"]
|
||||
industries: ["Kids", "Gaming", "Entertainment", "Creative Tools"]
|
||||
personality: "Playful, Fun, Youthful, Energetic"
|
||||
examples: ["Spotify (brand refresh)", "TikTok", "Snapchat", "Nintendo"]
|
||||
|
||||
natural_and_organic:
|
||||
primary_colors: ["Earth Green", "Brown", "Terracotta", "Sage"]
|
||||
supporting_colors: ["Cream", "Beige", "Natural wood tones"]
|
||||
avoid: ["Neon", "Artificial colors", "Harsh blacks"]
|
||||
industries: ["Organic", "Sustainability", "Outdoor", "Food"]
|
||||
personality: "Natural, Authentic, Earthy, Sustainable"
|
||||
examples: ["Patagonia", "Whole Foods", "The Honest Company", "Allbirds"]
|
||||
|
||||
color_meanings:
|
||||
blue:
|
||||
emotions: ["Trust", "Calm", "Professional", "Reliable", "Security"]
|
||||
variations:
|
||||
light_blue: "Calm, peaceful, open"
|
||||
navy: "Professional, authoritative, corporate"
|
||||
bright_blue: "Energy, tech, modern"
|
||||
teal: "Sophisticated, unique, creative"
|
||||
usage: "Most popular brand color, especially tech and finance"
|
||||
caution: "Overused, can feel cold or corporate"
|
||||
|
||||
red:
|
||||
emotions: ["Passion", "Energy", "Urgency", "Love", "Danger"]
|
||||
variations:
|
||||
bright_red: "Excitement, urgency, action"
|
||||
dark_red: "Sophistication, luxury"
|
||||
coral: "Friendly, warm, modern"
|
||||
usage: "CTAs, warnings, important actions"
|
||||
caution: "Can be aggressive, use sparingly"
|
||||
|
||||
green:
|
||||
emotions: ["Growth", "Nature", "Health", "Wealth", "Harmony"]
|
||||
variations:
|
||||
bright_green: "Energy, growth, fresh"
|
||||
forest_green: "Stable, wealthy, traditional"
|
||||
mint: "Fresh, modern, calm"
|
||||
lime: "Playful, energetic, youthful"
|
||||
usage: "Sustainability, health, finance (money)"
|
||||
caution: "Can feel too natural or environmental"
|
||||
|
||||
yellow:
|
||||
emotions: ["Happiness", "Optimism", "Warmth", "Caution"]
|
||||
variations:
|
||||
bright_yellow: "Happy, energetic, attention-grabbing"
|
||||
gold: "Luxury, premium, celebration"
|
||||
mustard: "Warm, retro, sophisticated"
|
||||
usage: "Accents, highlights, warnings"
|
||||
caution: "Hard to read on white, can be overwhelming"
|
||||
|
||||
purple:
|
||||
emotions: ["Creativity", "Luxury", "Wisdom", "Spirituality"]
|
||||
variations:
|
||||
bright_purple: "Creative, fun, modern"
|
||||
deep_purple: "Luxury, sophistication"
|
||||
lavender: "Calm, gentle, feminine"
|
||||
usage: "Creative brands, beauty, luxury"
|
||||
caution: "Can feel too feminine or spiritual for some brands"
|
||||
|
||||
orange:
|
||||
emotions: ["Energy", "Enthusiasm", "Creativity", "Fun"]
|
||||
variations:
|
||||
bright_orange: "Energy, playful, attention"
|
||||
burnt_orange: "Warm, autumn, natural"
|
||||
coral: "Friendly, modern, approachable"
|
||||
usage: "CTAs, playful brands, food"
|
||||
caution: "Can be overwhelming, use as accent"
|
||||
|
||||
pink:
|
||||
emotions: ["Playfulness", "Romance", "Youthfulness", "Compassion"]
|
||||
variations:
|
||||
hot_pink: "Bold, modern, energetic"
|
||||
soft_pink: "Gentle, romantic, calming"
|
||||
neon_pink: "Edgy, youthful, attention-grabbing"
|
||||
usage: "Beauty, fashion, modern brands breaking gender norms"
|
||||
caution: "Traditionally gendered, modern usage is more diverse"
|
||||
|
||||
black:
|
||||
emotions: ["Sophistication", "Luxury", "Power", "Modern"]
|
||||
usage: "Luxury brands, text, backgrounds, minimalist designs"
|
||||
best_with: ["White", "Gold", "Silver", "One bright accent"]
|
||||
caution: "Can feel heavy or dark if overused"
|
||||
|
||||
white:
|
||||
emotions: ["Purity", "Simplicity", "Clean", "Modern"]
|
||||
usage: "Backgrounds, spacing, minimalist designs"
|
||||
best_with: "Any color as accent"
|
||||
caution: "Needs color for visual interest"
|
||||
|
||||
gray:
|
||||
emotions: ["Neutral", "Professional", "Sophisticated", "Modern"]
|
||||
variations:
|
||||
light_gray: "Subtle, backgrounds, dividers"
|
||||
charcoal: "Professional, modern, readable"
|
||||
usage: "Neutral backgrounds, text, shadows"
|
||||
caution: "Can feel boring or corporate if sole color"
|
||||
|
||||
semantic_colors:
|
||||
success:
|
||||
recommended: ["Green", "Teal", "Blue-Green"]
|
||||
meaning: "Completion, correct, positive action"
|
||||
usage: "Success messages, confirmations, completed states"
|
||||
|
||||
error:
|
||||
recommended: ["Red", "Crimson", "Dark Red"]
|
||||
meaning: "Failure, incorrect, warning"
|
||||
usage: "Error messages, validation failures, destructive actions"
|
||||
|
||||
warning:
|
||||
recommended: ["Orange", "Amber", "Yellow"]
|
||||
meaning: "Caution, attention needed, important"
|
||||
usage: "Warnings, important notices, confirmations needed"
|
||||
|
||||
info:
|
||||
recommended: ["Blue", "Light Blue", "Purple"]
|
||||
meaning: "Information, neutral notification"
|
||||
usage: "Info messages, tips, neutral notifications"
|
||||
|
||||
color_palette_structures:
|
||||
monochromatic:
|
||||
description: "Shades and tints of single color"
|
||||
good_for: "Minimalist, cohesive, simple"
|
||||
example: "Various blues from light to dark"
|
||||
difficulty: "Easy"
|
||||
|
||||
analogous:
|
||||
description: "Colors next to each other on color wheel"
|
||||
good_for: "Harmonious, natural, cohesive"
|
||||
example: "Blue, blue-green, green"
|
||||
difficulty: "Easy"
|
||||
|
||||
complementary:
|
||||
description: "Colors opposite on color wheel"
|
||||
good_for: "High contrast, vibrant, attention-grabbing"
|
||||
example: "Blue and orange"
|
||||
difficulty: "Moderate (can be jarring)"
|
||||
|
||||
triadic:
|
||||
description: "Three colors evenly spaced on wheel"
|
||||
good_for: "Vibrant, balanced, playful"
|
||||
example: "Red, yellow, blue"
|
||||
difficulty: "Moderate"
|
||||
|
||||
split_complementary:
|
||||
description: "Base color + two adjacent to complement"
|
||||
good_for: "Balanced, sophisticated, interesting"
|
||||
example: "Blue, red-orange, yellow-orange"
|
||||
difficulty: "Moderate"
|
||||
|
||||
60_30_10_rule:
|
||||
description: "60% dominant, 30% secondary, 10% accent"
|
||||
good_for: "Balanced, professional, not overwhelming"
|
||||
application:
|
||||
dominant_60: "Background, main surfaces"
|
||||
secondary_30: "Cards, secondary surfaces, navigation"
|
||||
accent_10: "CTAs, highlights, important elements"
|
||||
|
||||
industry_color_trends:
|
||||
tech:
|
||||
trending: ["Blue (trust)", "Purple (innovation)", "Gradients", "Dark mode"]
|
||||
examples: ["Facebook Blue", "Stripe Purple", "GitHub Dark"]
|
||||
|
||||
finance:
|
||||
traditional: ["Blue", "Green (money)", "Navy", "Gold"]
|
||||
modern: ["Bright Blue", "Teal", "Black with accent"]
|
||||
|
||||
healthcare:
|
||||
traditional: ["Blue (trust)", "Green (health)", "White (clean)"]
|
||||
modern: ["Teal", "Soft Blue", "Mint", "Warm accents"]
|
||||
|
||||
ecommerce:
|
||||
trending: ["Bold colors", "Black & White with accent", "Trust colors"]
|
||||
cta_colors: ["Orange", "Red", "Bright Green", "for 'Buy' buttons"]
|
||||
|
||||
saas:
|
||||
trending: ["Blue (trust)", "Purple (innovation)", "Modern Gradients"]
|
||||
avoid: ["Dull gray", "Brown", "Too many colors"]
|
||||
|
||||
education:
|
||||
traditional: ["Red", "Blue", "Green", "Yellow (primary colors)"]
|
||||
modern: ["Friendly Blue", "Warm Orange", "Playful Purple"]
|
||||
|
||||
food_beverage:
|
||||
appetite: ["Red (stimulates)", "Orange", "Yellow", "Brown (natural)"]
|
||||
healthy: ["Green", "Earth tones", "Natural colors"]
|
||||
|
||||
theme_generation_strategies:
|
||||
by_brand_personality:
|
||||
professional:
|
||||
primary: "Navy Blue or Charcoal"
|
||||
secondary: "Light Gray"
|
||||
accent: "Subtle Blue or Green"
|
||||
style: "Minimal, clean, trustworthy"
|
||||
|
||||
playful:
|
||||
primary: "Bright Purple or Turquoise"
|
||||
secondary: "White"
|
||||
accent: "Pink or Yellow"
|
||||
style: "Gradients, rounded, fun"
|
||||
|
||||
luxury:
|
||||
primary: "Black"
|
||||
secondary: "White or Cream"
|
||||
accent: "Gold or Deep Purple"
|
||||
style: "Sophisticated, minimal, high-end"
|
||||
|
||||
friendly:
|
||||
primary: "Warm Orange or Coral"
|
||||
secondary: "Cream or Light Blue"
|
||||
accent: "Sunny Yellow or Teal"
|
||||
style: "Warm, approachable, welcoming"
|
||||
|
||||
by_target_audience:
|
||||
gen_z:
|
||||
style: "Bold, gradients, high contrast, playful"
|
||||
colors: ["Bright Purple", "Neon Green", "Hot Pink", "Electric Blue"]
|
||||
|
||||
millennials:
|
||||
style: "Modern, subtle gradients, sophisticated"
|
||||
colors: ["Teal", "Coral", "Muted Purple", "Navy"]
|
||||
|
||||
business_professionals:
|
||||
style: "Clean, professional, trustworthy"
|
||||
colors: ["Navy", "Charcoal", "Subtle Blue", "Gray"]
|
||||
|
||||
children:
|
||||
style: "Bright, primary colors, playful"
|
||||
colors: ["Primary Red", "Bright Yellow", "Sky Blue", "Grass Green"]
|
||||
|
||||
accessibility_considerations:
|
||||
contrast_ratios:
|
||||
wcag_aa_normal: "4.5:1 minimum for normal text"
|
||||
wcag_aa_large: "3:1 minimum for large text (18pt+ or 14pt+ bold)"
|
||||
wcag_aaa_normal: "7:1 minimum for normal text (enhanced)"
|
||||
|
||||
color_blindness:
|
||||
types:
|
||||
- "Deuteranopia (red-green, most common)"
|
||||
- "Protanopia (red-green)"
|
||||
- "Tritanopia (blue-yellow, rare)"
|
||||
- "Achromatopsia (total color blindness, very rare)"
|
||||
|
||||
safe_combinations:
|
||||
- "Blue and Orange (safe for all types)"
|
||||
- "Blue and Yellow (safe for red-green)"
|
||||
- "Purple and Yellow (safe for most)"
|
||||
|
||||
avoid:
|
||||
- "Red and Green alone (confusing for red-green colorblind)"
|
||||
- "Blue and Purple alone (hard to distinguish)"
|
||||
- "Relying only on color (always pair with icon/text)"
|
||||
|
||||
testing_tools:
|
||||
- "Stark (Figma plugin)"
|
||||
- "Color Oracle (simulator)"
|
||||
- "WebAIM Contrast Checker"
|
||||
- "Coblis Color Blindness Simulator"
|
||||
|
||||
dark_mode_considerations:
|
||||
benefits: ["Reduced eye strain", "Battery savings (OLED)", "Modern aesthetic", "User preference"]
|
||||
|
||||
color_adjustments:
|
||||
primary: "Often brighter/more saturated in dark mode"
|
||||
backgrounds: "True black (#000) vs dark gray (#1a1a1a)"
|
||||
text: "Not pure white (use #e0e0e0 for less harsh)"
|
||||
shadows: "Use lighter shadows or colored glows"
|
||||
|
||||
common_issues:
|
||||
- "Pure black can cause smearing on OLED"
|
||||
- "Colors appear more vibrant on dark backgrounds"
|
||||
- "Need different contrast ratios"
|
||||
- "Shadows don't work (use borders/elevation instead)"
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,419 @@
|
|||
# Layout Patterns - Guide for design direction generation
|
||||
# Maps project types and content to layout strategies
|
||||
|
||||
navigation_patterns:
|
||||
sidebar_navigation:
|
||||
description: "Vertical navigation panel on left or right"
|
||||
best_for: ["Desktop apps", "Dashboards", "Admin panels", "Content-heavy sites"]
|
||||
not_ideal_for: ["Simple sites", "Mobile-only", "Few sections (<5)"]
|
||||
|
||||
variants:
|
||||
always_visible:
|
||||
description: "Sidebar always shown on desktop"
|
||||
width: "200-280px"
|
||||
good_for: "Frequent navigation, many sections"
|
||||
|
||||
collapsible:
|
||||
description: "Can collapse to icons only"
|
||||
collapsed_width: "60-80px"
|
||||
expanded_width: "200-280px"
|
||||
good_for: "Space efficiency, user control"
|
||||
|
||||
mini_sidebar:
|
||||
description: "Icons only, expands on hover"
|
||||
collapsed_width: "60-80px"
|
||||
good_for: "Maximum content space, familiar users"
|
||||
|
||||
mobile_strategy: "Hamburger menu or bottom nav"
|
||||
examples: ["Notion", "Slack", "VS Code", "Gmail"]
|
||||
|
||||
top_navigation:
|
||||
description: "Horizontal navigation bar at top"
|
||||
best_for: ["Marketing sites", "Simple apps", "Few sections", "Mobile-friendly"]
|
||||
not_ideal_for: ["Many menu items (>7)", "Deep hierarchies"]
|
||||
|
||||
variants:
|
||||
horizontal_menu:
|
||||
description: "Simple horizontal list"
|
||||
max_items: "5-7"
|
||||
good_for: "Simple sites, clear hierarchy"
|
||||
|
||||
mega_menu:
|
||||
description: "Dropdown panels with rich content"
|
||||
good_for: "Complex sites, many subsections, ecommerce"
|
||||
|
||||
sticky_header:
|
||||
description: "Nav stays at top when scrolling"
|
||||
good_for: "Easy access, wayfinding"
|
||||
considerations: "Takes screen space, can annoy users"
|
||||
|
||||
mobile_strategy: "Hamburger menu"
|
||||
examples: ["Apple", "Stripe", "Most marketing sites"]
|
||||
|
||||
tab_navigation:
|
||||
description: "Horizontal tabs for section switching"
|
||||
best_for: ["Related content", "Settings", "Multi-view pages"]
|
||||
not_ideal_for: ["Unrelated sections", "Too many tabs (>7)"]
|
||||
max_tabs: "5-7 recommended"
|
||||
placement: ["Below header", "Page level", "Within cards"]
|
||||
examples: ["Settings pages", "Product details", "Profile pages"]
|
||||
|
||||
bottom_navigation:
|
||||
description: "Navigation bar at bottom (mobile)"
|
||||
best_for: ["Mobile apps", "3-5 primary sections", "Quick switching"]
|
||||
not_ideal_for: ["Desktop", "Many sections", "Deep hierarchies"]
|
||||
ideal_items: "3-5 (4 is optimal)"
|
||||
each_item: "Icon + short label"
|
||||
examples: ["Instagram", "Twitter app", "Most mobile apps"]
|
||||
|
||||
floating_action_button:
|
||||
description: "Primary action button floating over content"
|
||||
best_for: ["Mobile apps", "Single primary action", "Content-first"]
|
||||
placement: "Bottom-right (usually)"
|
||||
examples: ["Gmail (compose)", "Google Maps (directions)", "Notes (new note)"]
|
||||
|
||||
content_organization:
|
||||
card_based:
|
||||
description: "Content in distinct card containers"
|
||||
best_for: ["Scannable content", "Mixed content types", "Visual hierarchy"]
|
||||
not_ideal_for: ["Dense data", "Text-heavy content"]
|
||||
|
||||
variants:
|
||||
grid:
|
||||
description: "Equal-sized cards in grid"
|
||||
good_for: "Products, gallery, uniform items"
|
||||
examples: ["Pinterest", "Airbnb listings", "YouTube videos"]
|
||||
|
||||
masonry:
|
||||
description: "Variable-height cards in columns"
|
||||
good_for: "Mixed content heights, visual interest"
|
||||
examples: ["Pinterest", "Unsplash", "Dribbble"]
|
||||
|
||||
horizontal_scroll:
|
||||
description: "Cards in horizontal row"
|
||||
good_for: "Categories, featured items, mobile"
|
||||
examples: ["Netflix rows", "App Store Today"]
|
||||
|
||||
styling:
|
||||
elevated: "Drop shadows, floating appearance"
|
||||
bordered: "Subtle borders, flat appearance"
|
||||
|
||||
spacing:
|
||||
tight: "8-12px gaps (dense, lots of content)"
|
||||
medium: "16-24px gaps (balanced)"
|
||||
spacious: "32-48px gaps (premium, breathing room)"
|
||||
|
||||
list_based:
|
||||
description: "Linear list of items"
|
||||
best_for: ["Scannable data", "Chronological content", "Dense information"]
|
||||
not_ideal_for: ["Visual content", "Products", "Gallery"]
|
||||
|
||||
variants:
|
||||
simple_list:
|
||||
description: "Text-only list"
|
||||
good_for: "Simple data, settings, menus"
|
||||
|
||||
rich_list:
|
||||
description: "Items with images, meta, actions"
|
||||
good_for: "Email, messages, activity feeds"
|
||||
examples: ["Gmail inbox", "Twitter feed", "LinkedIn feed"]
|
||||
|
||||
grouped_list:
|
||||
description: "Lists with section headers"
|
||||
good_for: "Categorized content, settings"
|
||||
|
||||
interaction:
|
||||
clickable_rows: "Entire row is clickable"
|
||||
action_buttons: "Explicit action buttons in row"
|
||||
swipe_actions: "Swipe to reveal actions (mobile)"
|
||||
|
||||
table_based:
|
||||
description: "Data in rows and columns"
|
||||
best_for: ["Structured data", "Comparisons", "Admin panels", "Analytics"]
|
||||
not_ideal_for: ["Mobile", "Varied content", "Storytelling"]
|
||||
|
||||
mobile_strategy:
|
||||
horizontal_scroll: "Scroll table horizontally"
|
||||
hide_columns: "Show only essential columns"
|
||||
card_view: "Convert each row to card"
|
||||
|
||||
features:
|
||||
- "Sortable columns"
|
||||
- "Filterable data"
|
||||
- "Pagination or infinite scroll"
|
||||
- "Row selection"
|
||||
- "Inline editing"
|
||||
|
||||
examples: ["Admin dashboards", "Analytics", "Data management"]
|
||||
|
||||
dashboard_layout:
|
||||
description: "Widget-based information display"
|
||||
best_for: ["Data visualization", "Monitoring", "Analytics", "Admin"]
|
||||
|
||||
patterns:
|
||||
fixed_grid:
|
||||
description: "Predefined widget positions"
|
||||
good_for: "Consistent layout, simple dashboards"
|
||||
|
||||
customizable_grid:
|
||||
description: "Users can rearrange widgets"
|
||||
good_for: "Power users, personalization"
|
||||
examples: ["Google Analytics", "Jira dashboards"]
|
||||
|
||||
responsive_grid:
|
||||
description: "Widgets reflow based on screen size"
|
||||
good_for: "Mobile support, adaptive layouts"
|
||||
|
||||
feed_based:
|
||||
description: "Continuous stream of content"
|
||||
best_for: ["Social media", "News", "Activity", "Discovery"]
|
||||
|
||||
loading:
|
||||
infinite_scroll: "Load more as user scrolls"
|
||||
load_more_button: "Explicit action to load more"
|
||||
pagination: "Page numbers for browsing"
|
||||
|
||||
examples: ["Facebook", "Twitter", "Instagram", "LinkedIn"]
|
||||
|
||||
layout_density:
|
||||
spacious:
|
||||
description: "Lots of white space, breathing room"
|
||||
spacing: "32-64px between sections"
|
||||
card_padding: "24-32px"
|
||||
best_for: ["Premium brands", "Focus", "Minimal content"]
|
||||
examples: ["Apple", "Stripe landing", "Premium portfolios"]
|
||||
feeling: "Premium, focused, calm, elegant"
|
||||
|
||||
balanced:
|
||||
description: "Moderate spacing, comfortable reading"
|
||||
spacing: "16-32px between sections"
|
||||
card_padding: "16-24px"
|
||||
best_for: ["Most applications", "General content"]
|
||||
examples: ["Medium", "Notion", "Most SaaS apps"]
|
||||
feeling: "Professional, balanced, clear"
|
||||
|
||||
dense:
|
||||
description: "Compact layout, maximum information"
|
||||
spacing: "8-16px between sections"
|
||||
card_padding: "12-16px"
|
||||
best_for: ["Data-heavy", "Power users", "Admin panels"]
|
||||
examples: ["Gmail", "Google Analytics", "IDE interfaces"]
|
||||
feeling: "Efficient, information-rich, powerful"
|
||||
|
||||
content_hierarchy:
|
||||
hero_first:
|
||||
description: "Large hero section, then supporting content"
|
||||
best_for: ["Marketing sites", "Landing pages", "Product pages"]
|
||||
hero_height: "60-100vh"
|
||||
examples: ["Stripe", "Apple product pages", "SaaS landing pages"]
|
||||
|
||||
content_first:
|
||||
description: "Jump straight to content, minimal header"
|
||||
best_for: ["Blogs", "News", "Content platforms", "Reading"]
|
||||
examples: ["Medium", "News sites", "Wikipedia"]
|
||||
|
||||
balanced_hierarchy:
|
||||
description: "Clear but not overwhelming hero"
|
||||
best_for: ["General applications", "Balanced focus"]
|
||||
hero_height: "40-60vh"
|
||||
|
||||
visual_weight:
|
||||
minimal:
|
||||
description: "Flat, no shadows, subtle borders"
|
||||
characteristics:
|
||||
- "No or minimal shadows"
|
||||
- "Flat colors"
|
||||
- "Thin or no borders"
|
||||
- "Lots of white space"
|
||||
best_for: ["Modern brands", "Focus", "Clarity"]
|
||||
examples: ["Apple", "Google (recent)", "Superhuman"]
|
||||
|
||||
subtle_depth:
|
||||
description: "Light shadows, gentle elevation"
|
||||
characteristics:
|
||||
- "Subtle drop shadows"
|
||||
- "Light borders"
|
||||
- "Layered appearance"
|
||||
- "Comfortable spacing"
|
||||
best_for: ["Most applications", "Professional look"]
|
||||
examples: ["Notion", "Airtable", "Linear"]
|
||||
|
||||
material_depth:
|
||||
description: "Distinct shadows, clear elevation"
|
||||
characteristics:
|
||||
- "Defined shadows"
|
||||
- "Clear layering"
|
||||
- "Elevation system"
|
||||
- "Floating elements"
|
||||
best_for: ["Tactile feel", "Clarity", "Guidance"]
|
||||
examples: ["Material Design apps", "Gmail", "Google Drive"]
|
||||
|
||||
rich_visual:
|
||||
description: "Gradients, textures, visual interest"
|
||||
characteristics:
|
||||
- "Gradients"
|
||||
- "Background patterns"
|
||||
- "Visual flourishes"
|
||||
- "Rich shadows"
|
||||
best_for: ["Consumer brands", "Engagement", "Delight"]
|
||||
examples: ["Stripe (gradients)", "Instagram", "Spotify"]
|
||||
|
||||
column_layouts:
|
||||
single_column:
|
||||
description: "One content column, centered"
|
||||
max_width: "600-800px"
|
||||
best_for: ["Reading", "Focus", "Mobile-first", "Forms"]
|
||||
examples: ["Medium articles", "Substack", "Simple apps"]
|
||||
|
||||
two_column:
|
||||
description: "Main content + sidebar"
|
||||
ratios:
|
||||
main_sidebar: "2:1 or 3:1 (main content wider)"
|
||||
equal: "1:1 (rare, only for equal importance)"
|
||||
best_for: ["Blogs with sidebar", "Docs with nav", "Dashboard with filters"]
|
||||
mobile_strategy: "Stack vertically"
|
||||
|
||||
three_column:
|
||||
description: "Left nav + main content + right sidebar"
|
||||
typical_use: "Left nav, center content, right metadata/ads"
|
||||
best_for: ["Complex apps", "Social media", "News sites"]
|
||||
mobile_strategy: "Collapse to single column with hamburger"
|
||||
examples: ["Twitter", "Reddit", "Facebook"]
|
||||
|
||||
multi_column_grid:
|
||||
description: "2, 3, 4, or more columns"
|
||||
columns:
|
||||
two: "Tablets, small screens"
|
||||
three: "Desktop standard"
|
||||
four_plus: "Large screens, galleries"
|
||||
best_for: ["Products", "Gallery", "Cards", "Uniform content"]
|
||||
responsive:
|
||||
mobile: "1 column"
|
||||
tablet: "2 columns"
|
||||
desktop: "3-4 columns"
|
||||
large_desktop: "4-6 columns"
|
||||
|
||||
modal_and_overlay_patterns:
|
||||
center_modal:
|
||||
sizes: ["Small (400-500px)", "Medium (600-800px)", "Large (900-1200px)"]
|
||||
best_for: ["Forms", "Confirmations", "Detailed content"]
|
||||
|
||||
drawer_side_panel:
|
||||
position: "Right (common) or left"
|
||||
width: "320-600px"
|
||||
best_for: ["Filters", "Settings", "Details", "Navigation"]
|
||||
examples: ["E-commerce filters", "Gmail compose", "Slack channel details"]
|
||||
|
||||
fullscreen_modal:
|
||||
description: "Takes entire viewport"
|
||||
best_for: ["Mobile primarily", "Complex forms", "Immersive content"]
|
||||
mobile: "Often default on mobile"
|
||||
|
||||
popover:
|
||||
description: "Small overlay near trigger element"
|
||||
best_for: ["Tooltips", "Quick actions", "Contextual menus"]
|
||||
size: "Small (200-400px)"
|
||||
|
||||
responsive_strategies:
|
||||
mobile_first:
|
||||
approach: "Design for mobile, enhance for desktop"
|
||||
best_for: ["Consumer apps", "High mobile traffic", "Content-first"]
|
||||
breakpoints:
|
||||
- "Mobile: 320-767px (base design)"
|
||||
- "Tablet: 768-1023px (add space, possibly columns)"
|
||||
- "Desktop: 1024px+ (full layout, sidebars)"
|
||||
|
||||
desktop_first:
|
||||
approach: "Design for desktop, adapt for mobile"
|
||||
best_for: ["B2B apps", "Desktop-heavy usage", "Complex interfaces"]
|
||||
consideration: "Risk of poor mobile experience"
|
||||
|
||||
adaptive_layout:
|
||||
approach: "Different layouts for different screens, not just scaling"
|
||||
examples:
|
||||
- "Desktop: Sidebar nav | Mobile: Bottom nav"
|
||||
- "Desktop: 3 columns | Tablet: 2 columns | Mobile: 1 column"
|
||||
- "Desktop: Table | Mobile: Card list"
|
||||
|
||||
design_direction_variations:
|
||||
# These combine multiple patterns to create distinct design approaches
|
||||
|
||||
dense_dashboard:
|
||||
description: "Information-rich, efficient, power user focused"
|
||||
patterns:
|
||||
navigation: "Mini sidebar or always-visible sidebar"
|
||||
content: "Dashboard layout with widgets"
|
||||
density: "Dense"
|
||||
visual_weight: "Minimal or subtle depth"
|
||||
hierarchy: "Balanced, not hero-heavy"
|
||||
best_for: ["Analytics", "Admin panels", "Data tools", "Power users"]
|
||||
|
||||
spacious_explorer:
|
||||
description: "Generous spacing, discovery-oriented, visual"
|
||||
patterns:
|
||||
navigation: "Top nav or hidden sidebar"
|
||||
content: "Card-based grid or masonry"
|
||||
density: "Spacious"
|
||||
visual_weight: "Rich visual or subtle depth"
|
||||
hierarchy: "Hero-first or balanced"
|
||||
best_for: ["Content platforms", "Discovery", "Visual products", "Inspiration"]
|
||||
|
||||
focused_creator:
|
||||
description: "Minimal distractions, content creation focus"
|
||||
patterns:
|
||||
navigation: "Minimal top bar or hidden"
|
||||
content: "Single column or two-column with tools"
|
||||
density: "Spacious to balanced"
|
||||
visual_weight: "Minimal"
|
||||
hierarchy: "Content-first"
|
||||
best_for: ["Writing tools", "Editors", "Creative apps", "Focus work"]
|
||||
|
||||
social_feed:
|
||||
description: "Engagement-focused, endless content, familiar"
|
||||
patterns:
|
||||
navigation: "Top bar + bottom nav (mobile)"
|
||||
content: "Feed-based with rich cards"
|
||||
density: "Balanced"
|
||||
visual_weight: "Subtle depth to rich"
|
||||
hierarchy: "Content-first"
|
||||
best_for: ["Social media", "Content feeds", "Community platforms"]
|
||||
|
||||
enterprise_portal:
|
||||
description: "Professional, data-heavy, multi-section"
|
||||
patterns:
|
||||
navigation: "Sidebar (always visible or collapsible)"
|
||||
content: "Dashboard or table-based"
|
||||
density: "Dense to balanced"
|
||||
visual_weight: "Minimal to subtle"
|
||||
hierarchy: "Balanced"
|
||||
best_for: ["B2B SaaS", "Admin tools", "Enterprise apps"]
|
||||
|
||||
marketing_showcase:
|
||||
description: "Visual storytelling, conversion-focused, impressive"
|
||||
patterns:
|
||||
navigation: "Top nav (sticky or hero)"
|
||||
content: "Hero-first with sections"
|
||||
density: "Spacious"
|
||||
visual_weight: "Rich visual"
|
||||
hierarchy: "Hero-first"
|
||||
best_for: ["Landing pages", "Marketing sites", "Product showcases"]
|
||||
|
||||
minimal_focus:
|
||||
description: "Distraction-free, content-centric, elegant"
|
||||
patterns:
|
||||
navigation: "Minimal or hidden"
|
||||
content: "Single column, centered"
|
||||
density: "Spacious"
|
||||
visual_weight: "Minimal"
|
||||
hierarchy: "Content-first"
|
||||
best_for: ["Reading", "Focus apps", "Premium brands", "Portfolios"]
|
||||
|
||||
playful_interactive:
|
||||
description: "Fun, engaging, delightful, consumer-friendly"
|
||||
patterns:
|
||||
navigation: "Creative (could be any, with personality)"
|
||||
content: "Card-based or custom layouts"
|
||||
density: "Balanced to spacious"
|
||||
visual_weight: "Rich visual"
|
||||
hierarchy: "Hero or balanced"
|
||||
best_for: ["Consumer apps", "Gaming", "Entertainment", "Kids"]
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
# {{project_name}} UX Design Specification
|
||||
|
||||
_Created on {{date}} by {{user_name}}_
|
||||
_Generated using BMad Method - Create UX Design Workflow v1.0_
|
||||
|
||||
---
|
||||
|
||||
## Executive Summary
|
||||
|
||||
{{project_vision}}
|
||||
|
||||
---
|
||||
|
||||
## 1. Design System Foundation
|
||||
|
||||
### 1.1 Design System Choice
|
||||
|
||||
{{design_system_decision}}
|
||||
|
||||
---
|
||||
|
||||
## 2. Core User Experience
|
||||
|
||||
### 2.1 Defining Experience
|
||||
|
||||
{{core_experience}}
|
||||
|
||||
### 2.2 Novel UX Patterns
|
||||
|
||||
{{novel_ux_patterns}}
|
||||
|
||||
---
|
||||
|
||||
## 3. Visual Foundation
|
||||
|
||||
### 3.1 Color System
|
||||
|
||||
{{visual_foundation}}
|
||||
|
||||
**Interactive Visualizations:**
|
||||
|
||||
- Color Theme Explorer: [ux-color-themes.html](./ux-color-themes.html)
|
||||
|
||||
---
|
||||
|
||||
## 4. Design Direction
|
||||
|
||||
### 4.1 Chosen Design Approach
|
||||
|
||||
{{design_direction_decision}}
|
||||
|
||||
**Interactive Mockups:**
|
||||
|
||||
- Design Direction Showcase: [ux-design-directions.html](./ux-design-directions.html)
|
||||
|
||||
---
|
||||
|
||||
## 5. User Journey Flows
|
||||
|
||||
### 5.1 Critical User Paths
|
||||
|
||||
{{user_journey_flows}}
|
||||
|
||||
---
|
||||
|
||||
## 6. Component Library
|
||||
|
||||
### 6.1 Component Strategy
|
||||
|
||||
{{component_library_strategy}}
|
||||
|
||||
---
|
||||
|
||||
## 7. UX Pattern Decisions
|
||||
|
||||
### 7.1 Consistency Rules
|
||||
|
||||
{{ux_pattern_decisions}}
|
||||
|
||||
---
|
||||
|
||||
## 8. Responsive Design & Accessibility
|
||||
|
||||
### 8.1 Responsive Strategy
|
||||
|
||||
{{responsive_accessibility_strategy}}
|
||||
|
||||
---
|
||||
|
||||
## 9. Implementation Guidance
|
||||
|
||||
### 9.1 Completion Summary
|
||||
|
||||
{{completion_summary}}
|
||||
|
||||
---
|
||||
|
||||
## Appendix
|
||||
|
||||
### Related Documents
|
||||
|
||||
- Product Requirements: `{{prd_file}}`
|
||||
- Product Brief: `{{brief_file}}`
|
||||
- Brainstorming: `{{brainstorm_file}}`
|
||||
|
||||
### Core Interactive Deliverables
|
||||
|
||||
This UX Design Specification was created through visual collaboration:
|
||||
|
||||
- **Color Theme Visualizer**: {{color_themes_html}}
|
||||
- Interactive HTML showing all color theme options explored
|
||||
- Live UI component examples in each theme
|
||||
- Side-by-side comparison and semantic color usage
|
||||
|
||||
- **Design Direction Mockups**: {{design_directions_html}}
|
||||
- Interactive HTML with 6-8 complete design approaches
|
||||
- Full-screen mockups of key screens
|
||||
- Design philosophy and rationale for each direction
|
||||
|
||||
### Optional Enhancement Deliverables
|
||||
|
||||
_This section will be populated if additional UX artifacts are generated through follow-up workflows._
|
||||
|
||||
<!-- Additional deliverables added here by other workflows -->
|
||||
|
||||
### Next Steps & Follow-Up Workflows
|
||||
|
||||
This UX Design Specification can serve as input to:
|
||||
|
||||
- **Wireframe Generation Workflow** - Create detailed wireframes from user flows
|
||||
- **Figma Design Workflow** - Generate Figma files via MCP integration
|
||||
- **Interactive Prototype Workflow** - Build clickable HTML prototypes
|
||||
- **Component Showcase Workflow** - Create interactive component library
|
||||
- **AI Frontend Prompt Workflow** - Generate prompts for v0, Lovable, Bolt, etc.
|
||||
- **Solution Architecture Workflow** - Define technical architecture with UX context
|
||||
|
||||
### Version History
|
||||
|
||||
| Date | Version | Changes | Author |
|
||||
| -------- | ------- | ------------------------------- | ------------- |
|
||||
| {{date}} | 1.0 | Initial UX Design Specification | {{user_name}} |
|
||||
|
||||
---
|
||||
|
||||
_This UX Design Specification was created through collaborative design facilitation, not template generation. All decisions were made with user input and are documented with rationale._
|
||||
|
|
@ -0,0 +1,482 @@
|
|||
# UX Pattern Catalog - Knowledge base for UX design decisions
|
||||
# This enables intelligent, composable UX patterns instead of rigid templates
|
||||
|
||||
# ⚠️ CRITICAL: Use WebSearch to verify current design system versions during workflow execution
|
||||
|
||||
design_systems:
|
||||
web:
|
||||
material_ui:
|
||||
name: "Material UI"
|
||||
current_version: "5.15"
|
||||
platform: "Web (React)"
|
||||
good_for: ["Enterprise apps", "Data-heavy interfaces", "Google ecosystem", "Accessibility"]
|
||||
not_ideal_for: ["Unique brand identity", "Minimal designs", "Non-React"]
|
||||
components: "300+"
|
||||
accessibility: "WCAG 2.1 AA compliant"
|
||||
theming: "Extensive theming system"
|
||||
documentation: "Excellent"
|
||||
learning_curve: "Moderate"
|
||||
bundle_size: "Large (can be optimized)"
|
||||
beginner_friendly: true
|
||||
|
||||
shadcn_ui:
|
||||
name: "shadcn/ui"
|
||||
current_version: "Latest"
|
||||
platform: "Web (React + Tailwind)"
|
||||
good_for: ["Modern apps", "Full customization", "Tailwind users", "Copy-paste approach"]
|
||||
not_ideal_for: ["Non-Tailwind projects", "Quick prototyping", "Beginners"]
|
||||
components: "50+ (growing)"
|
||||
accessibility: "WCAG 2.1 AA via Radix primitives"
|
||||
theming: "Full Tailwind theming"
|
||||
documentation: "Good"
|
||||
learning_curve: "Easy if familiar with Tailwind"
|
||||
bundle_size: "Minimal (tree-shakeable)"
|
||||
beginner_friendly: false
|
||||
|
||||
chakra_ui:
|
||||
name: "Chakra UI"
|
||||
current_version: "2.8"
|
||||
platform: "Web (React)"
|
||||
good_for: ["Accessible apps", "Rapid development", "Dark mode", "Component composition"]
|
||||
not_ideal_for: ["Complex customization", "Non-React"]
|
||||
components: "50+"
|
||||
accessibility: "WCAG 2.1 AA compliant (accessibility-first)"
|
||||
theming: "Powerful theming system"
|
||||
documentation: "Excellent"
|
||||
learning_curve: "Easy"
|
||||
bundle_size: "Moderate"
|
||||
beginner_friendly: true
|
||||
|
||||
ant_design:
|
||||
name: "Ant Design"
|
||||
current_version: "5.12"
|
||||
platform: "Web (React)"
|
||||
good_for: ["Enterprise", "Admin panels", "Data tables", "Chinese market"]
|
||||
not_ideal_for: ["Consumer apps", "Minimal designs", "Non-React"]
|
||||
components: "60+"
|
||||
accessibility: "Good (improving)"
|
||||
theming: "Less design tokens"
|
||||
documentation: "Excellent"
|
||||
learning_curve: "Easy"
|
||||
bundle_size: "Large"
|
||||
beginner_friendly: true
|
||||
|
||||
radix_ui:
|
||||
name: "Radix UI"
|
||||
current_version: "1.0+"
|
||||
platform: "Web (React)"
|
||||
good_for: ["Full control", "Unstyled primitives", "Custom design systems"]
|
||||
not_ideal_for: ["Quick prototyping", "Pre-styled needs", "Beginners"]
|
||||
components: "25+ primitives"
|
||||
accessibility: "WCAG 2.1 AA compliant (accessibility-first)"
|
||||
theming: "Bring your own styles"
|
||||
documentation: "Excellent"
|
||||
learning_curve: "Moderate to Hard"
|
||||
bundle_size: "Minimal"
|
||||
beginner_friendly: false
|
||||
|
||||
tailwind_ui:
|
||||
name: "Tailwind UI"
|
||||
platform: "Web (Any framework + Tailwind)"
|
||||
good_for: ["Tailwind users", "Marketing sites", "High-quality examples"]
|
||||
not_ideal_for: ["Non-Tailwind", "Free tier"]
|
||||
components: "500+ examples (paid)"
|
||||
accessibility: "Good"
|
||||
theming: "Tailwind theming"
|
||||
documentation: "Excellent"
|
||||
learning_curve: "Easy if familiar with Tailwind"
|
||||
bundle_size: "Minimal"
|
||||
beginner_friendly: true
|
||||
|
||||
headless_ui:
|
||||
name: "Headless UI"
|
||||
current_version: "1.7"
|
||||
platform: "Web (React, Vue)"
|
||||
good_for: ["Unstyled primitives", "Full control", "Tailwind users"]
|
||||
not_ideal_for: ["Pre-styled needs", "Quick prototyping"]
|
||||
components: "13 primitives"
|
||||
accessibility: "WCAG 2.1 AA compliant"
|
||||
theming: "Bring your own styles"
|
||||
documentation: "Good"
|
||||
learning_curve: "Moderate"
|
||||
bundle_size: "Minimal"
|
||||
beginner_friendly: false
|
||||
|
||||
mobile:
|
||||
ios_hig:
|
||||
name: "iOS Human Interface Guidelines"
|
||||
platform: "iOS"
|
||||
good_for: ["iOS apps", "Native feel", "Apple ecosystem"]
|
||||
not_ideal_for: ["Cross-platform", "Custom branding"]
|
||||
components: "Native UIKit components"
|
||||
accessibility: "Built-in VoiceOver support"
|
||||
documentation: "Excellent (Apple HIG)"
|
||||
learning_curve: "Moderate"
|
||||
beginner_friendly: true
|
||||
|
||||
material_design:
|
||||
name: "Material Design (Mobile)"
|
||||
platform: "Android"
|
||||
good_for: ["Android apps", "Google ecosystem", "Accessibility"]
|
||||
not_ideal_for: ["iOS", "Custom branding"]
|
||||
components: "Material Components for Android"
|
||||
accessibility: "Built-in TalkBack support"
|
||||
documentation: "Excellent"
|
||||
learning_curve: "Moderate"
|
||||
beginner_friendly: true
|
||||
|
||||
react_native_paper:
|
||||
name: "React Native Paper"
|
||||
platform: "React Native (iOS & Android)"
|
||||
good_for: ["Cross-platform", "Material Design", "Quick development"]
|
||||
not_ideal_for: ["Native platform guidelines", "Highly custom designs"]
|
||||
components: "30+"
|
||||
accessibility: "Good"
|
||||
documentation: "Good"
|
||||
learning_curve: "Easy"
|
||||
beginner_friendly: true
|
||||
|
||||
button_hierarchy_patterns:
|
||||
standard:
|
||||
name: "Standard Button Hierarchy"
|
||||
primary:
|
||||
description: "Most important action on screen"
|
||||
style: "Filled with primary color, high contrast"
|
||||
usage: "One per screen (save, submit, next, create)"
|
||||
example: "Submit Form, Create Account, Save Changes"
|
||||
|
||||
secondary:
|
||||
description: "Alternative or supporting action"
|
||||
style: "Outlined or subtle fill with secondary color"
|
||||
usage: "Secondary actions, cancel alternatives"
|
||||
example: "Cancel, Go Back, Learn More"
|
||||
|
||||
tertiary:
|
||||
description: "Least prominent action"
|
||||
style: "Text-only button, minimal styling"
|
||||
usage: "Low-priority actions, links"
|
||||
example: "Skip, Dismiss, View Details"
|
||||
|
||||
destructive:
|
||||
description: "Dangerous or irreversible action"
|
||||
style: "Red or error color, often requires confirmation"
|
||||
usage: "Delete, remove, clear data"
|
||||
example: "Delete Account, Remove Item, Clear All"
|
||||
|
||||
feedback_patterns:
|
||||
toast_notification:
|
||||
name: "Toast Notification"
|
||||
good_for: ["Non-blocking feedback", "Success confirmations", "Quick info"]
|
||||
not_ideal_for: ["Critical errors", "Required user action", "Detailed messages"]
|
||||
placement: ["Top-right", "Bottom-center", "Top-center"]
|
||||
duration: "2-5 seconds (auto-dismiss)"
|
||||
actions: "Optional undo or action button"
|
||||
|
||||
inline_message:
|
||||
name: "Inline Message"
|
||||
good_for: ["Form validation", "Contextual errors", "Field-specific feedback"]
|
||||
not_ideal_for: ["Global messages", "Unrelated to visible content"]
|
||||
placement: "Adjacent to related element"
|
||||
duration: "Persistent until fixed or dismissed"
|
||||
actions: "Minimal (usually just dismiss or fix)"
|
||||
|
||||
modal_alert:
|
||||
name: "Modal Alert/Dialog"
|
||||
good_for: ["Critical errors", "Blocking actions", "Required confirmations"]
|
||||
not_ideal_for: ["Non-critical info", "Frequent messages", "Quick feedback"]
|
||||
placement: "Center overlay"
|
||||
duration: "Requires user dismissal"
|
||||
actions: "Clear action buttons (OK, Cancel, etc.)"
|
||||
|
||||
banner:
|
||||
name: "Banner Notification"
|
||||
good_for: ["System-wide messages", "Important updates", "Persistent alerts"]
|
||||
not_ideal_for: ["Transient feedback", "Frequent changes"]
|
||||
placement: "Top of page/screen"
|
||||
duration: "Persistent until dismissed"
|
||||
actions: "Optional actions or dismiss"
|
||||
|
||||
form_patterns:
|
||||
labels:
|
||||
above_input:
|
||||
name: "Labels Above Input"
|
||||
good_for: ["Clarity", "Mobile-friendly", "Accessibility"]
|
||||
not_ideal_for: ["Horizontal space constraints"]
|
||||
style: "Label above, left-aligned"
|
||||
|
||||
floating_label:
|
||||
name: "Floating/Inline Label"
|
||||
good_for: ["Space efficiency", "Modern aesthetic", "Material Design"]
|
||||
not_ideal_for: ["Accessibility (can be confusing)", "Complex forms"]
|
||||
style: "Label inside input, floats on focus"
|
||||
|
||||
side_by_side:
|
||||
name: "Side-by-Side Label"
|
||||
good_for: ["Dense forms", "Desktop layouts", "Admin panels"]
|
||||
not_ideal_for: ["Mobile", "Long labels", "Accessibility"]
|
||||
style: "Label to left of input, aligned"
|
||||
|
||||
validation:
|
||||
on_blur:
|
||||
name: "Validate on Blur"
|
||||
description: "Check field when user leaves it"
|
||||
good_for: "Immediate feedback without being disruptive"
|
||||
timing: "After user finishes typing and moves away"
|
||||
|
||||
on_change:
|
||||
name: "Validate on Change"
|
||||
description: "Real-time validation as user types"
|
||||
good_for: "Password strength, character limits, format checking"
|
||||
timing: "As user types (debounced)"
|
||||
|
||||
on_submit:
|
||||
name: "Validate on Submit"
|
||||
description: "Check all fields when form submitted"
|
||||
good_for: "Simple forms, avoiding interruption"
|
||||
timing: "When user clicks submit"
|
||||
|
||||
progressive:
|
||||
name: "Progressive Validation"
|
||||
description: "Validate completed fields immediately, others on submit"
|
||||
good_for: "Balance between guidance and interruption"
|
||||
timing: "Hybrid approach"
|
||||
|
||||
modal_patterns:
|
||||
sizes:
|
||||
small:
|
||||
width: "400-500px"
|
||||
usage: "Confirmations, simple alerts, single-field inputs"
|
||||
|
||||
medium:
|
||||
width: "600-800px"
|
||||
usage: "Forms, detailed content, most common use case"
|
||||
|
||||
large:
|
||||
width: "900-1200px"
|
||||
usage: "Complex forms, content preview, rich media"
|
||||
|
||||
fullscreen:
|
||||
width: "100% viewport"
|
||||
usage: "Mobile primarily, immersive experiences"
|
||||
|
||||
dismiss_behavior:
|
||||
click_outside:
|
||||
description: "Click backdrop to close"
|
||||
good_for: "Non-critical modals, user-initiated"
|
||||
not_ideal_for: "Unsaved changes, critical confirmations"
|
||||
|
||||
escape_key:
|
||||
description: "Press ESC to close"
|
||||
good_for: "All modals (accessibility)"
|
||||
implementation: "Always include for keyboard users"
|
||||
|
||||
explicit_close:
|
||||
description: "Must click X or Cancel button"
|
||||
good_for: "Critical modals, unsaved changes, confirmations"
|
||||
not_ideal_for: "Frequent, non-blocking interactions"
|
||||
|
||||
navigation_patterns:
|
||||
sidebar:
|
||||
name: "Sidebar Navigation"
|
||||
good_for: ["Desktop apps", "Many sections", "Persistent navigation"]
|
||||
not_ideal_for: ["Simple sites", "Few sections", "Mobile-only"]
|
||||
variants:
|
||||
- "Always visible (desktop)"
|
||||
- "Collapsible (hamburger on mobile)"
|
||||
- "Mini sidebar (icons only, expands on hover)"
|
||||
|
||||
top_nav:
|
||||
name: "Top Navigation Bar"
|
||||
good_for: ["Marketing sites", "Few sections", "Mobile-friendly"]
|
||||
not_ideal_for: ["Many menu items", "Deep hierarchies"]
|
||||
variants:
|
||||
- "Horizontal menu"
|
||||
- "Mega menu (dropdown panels)"
|
||||
- "Hamburger menu (mobile)"
|
||||
|
||||
tabs:
|
||||
name: "Tab Navigation"
|
||||
good_for: ["Related content sections", "Switching views", "Settings"]
|
||||
not_ideal_for: ["Unrelated sections", "Too many tabs (>7)"]
|
||||
variants:
|
||||
- "Horizontal tabs"
|
||||
- "Vertical tabs"
|
||||
- "Pill tabs"
|
||||
|
||||
bottom_nav:
|
||||
name: "Bottom Navigation (Mobile)"
|
||||
good_for: ["Mobile apps", "3-5 primary sections", "Quick switching"]
|
||||
not_ideal_for: ["Desktop", "Many sections", "Deep hierarchies"]
|
||||
best_practices: "3-5 items, icon + label, highlight active"
|
||||
|
||||
empty_state_patterns:
|
||||
first_use:
|
||||
description: "User's first time, no content yet"
|
||||
components:
|
||||
- "Illustration or icon"
|
||||
- "Welcoming message"
|
||||
- "Clear call-to-action (create first item)"
|
||||
- "Optional: Tutorial or guide link"
|
||||
|
||||
no_results:
|
||||
description: "Search or filter returned nothing"
|
||||
components:
|
||||
- "Clear message (No results found for 'X')"
|
||||
- "Suggestions (check spelling, try different keywords)"
|
||||
- "Alternative action (clear filters, browse all)"
|
||||
|
||||
cleared_content:
|
||||
description: "User deleted/cleared content"
|
||||
components:
|
||||
- "Acknowledgment (Content cleared)"
|
||||
- "Undo option (if possible)"
|
||||
- "Action to create new content"
|
||||
|
||||
confirmation_patterns:
|
||||
no_confirmation:
|
||||
description: "No confirmation dialog, immediate action with undo"
|
||||
good_for: "Low-risk actions, undo available"
|
||||
example: "Archive email (with undo toast)"
|
||||
|
||||
simple_confirmation:
|
||||
description: "Single confirmation dialog"
|
||||
good_for: "Moderate-risk actions"
|
||||
example: "Delete item? [Cancel] [Delete]"
|
||||
|
||||
typed_confirmation:
|
||||
description: "User must type specific text to confirm"
|
||||
good_for: "High-risk, irreversible actions"
|
||||
example: "Type 'DELETE' to confirm account deletion"
|
||||
|
||||
multi_step_confirmation:
|
||||
description: "Multiple confirmations or checkboxes"
|
||||
good_for: "Critical, irreversible, high-impact actions"
|
||||
example: "Delete account: check consequences, type confirmation, verify email"
|
||||
|
||||
loading_patterns:
|
||||
spinner:
|
||||
name: "Spinner/Circular Progress"
|
||||
good_for: ["Unknown duration", "Small areas", "Button states"]
|
||||
usage: "Indeterminate progress"
|
||||
|
||||
progress_bar:
|
||||
name: "Linear Progress Bar"
|
||||
good_for: ["Known duration", "File uploads", "Multi-step processes"]
|
||||
usage: "Determinate progress (0-100%)"
|
||||
|
||||
skeleton_screen:
|
||||
name: "Skeleton/Placeholder"
|
||||
good_for: ["Content loading", "Better perceived performance", "Layout stability"]
|
||||
usage: "Show content structure while loading"
|
||||
|
||||
optimistic_ui:
|
||||
name: "Optimistic Update"
|
||||
good_for: ["Instant feedback", "High success rate actions", "Smooth UX"]
|
||||
usage: "Show result immediately, rollback if fails"
|
||||
|
||||
responsive_breakpoints:
|
||||
mobile_first:
|
||||
sm: "640px (small phones)"
|
||||
md: "768px (tablets portrait)"
|
||||
lg: "1024px (tablets landscape, small desktops)"
|
||||
xl: "1280px (desktops)"
|
||||
xxl: "1536px (large desktops)"
|
||||
|
||||
common_devices:
|
||||
mobile: "320px - 767px"
|
||||
tablet: "768px - 1023px"
|
||||
desktop: "1024px+"
|
||||
|
||||
interaction_patterns:
|
||||
drag_and_drop:
|
||||
good_for: ["Reordering lists", "File uploads", "Visual organization"]
|
||||
not_ideal_for: ["Mobile (touch conflicts)", "Accessibility (needs fallback)"]
|
||||
accessibility: "Must provide keyboard alternative"
|
||||
|
||||
swipe_gestures:
|
||||
good_for: ["Mobile navigation", "Quick actions (swipe to delete)", "Cards"]
|
||||
not_ideal_for: ["Desktop", "Ambiguous actions"]
|
||||
best_practices: "Visual feedback, undo option"
|
||||
|
||||
infinite_scroll:
|
||||
good_for: ["Social feeds", "Discovery", "Engagement"]
|
||||
not_ideal_for: ["Finding specific items", "Footer access", "Performance"]
|
||||
best_practices: "Load more button as fallback, preserve scroll position"
|
||||
|
||||
pagination:
|
||||
good_for: ["Data tables", "Search results", "Performance", "Findability"]
|
||||
not_ideal_for: ["Social feeds", "Real-time content"]
|
||||
variants: ["Numbered pages", "Previous/Next", "Load More button"]
|
||||
|
||||
animation_guidelines:
|
||||
duration:
|
||||
micro: "50-100ms (button hover, checkbox toggle)"
|
||||
small: "150-250ms (dropdown open, tooltip appear)"
|
||||
medium: "250-400ms (modal open, drawer slide)"
|
||||
large: "400-600ms (page transitions, complex animations)"
|
||||
|
||||
easing:
|
||||
ease_out: "Decelerates (entering animations)"
|
||||
ease_in: "Accelerates (exiting animations)"
|
||||
ease_in_out: "Both (moving between states)"
|
||||
linear: "Constant speed (loading spinners)"
|
||||
|
||||
principles:
|
||||
- "Animations should feel natural, not robotic"
|
||||
- "Use for feedback, transitions, and delight"
|
||||
- "Don't slow down user tasks"
|
||||
- "Respect prefers-reduced-motion"
|
||||
- "60fps (under 16ms per frame)"
|
||||
|
||||
accessibility_patterns:
|
||||
keyboard_navigation:
|
||||
tab_order: "Logical, top-to-bottom, left-to-right"
|
||||
skip_links: "Skip to main content"
|
||||
focus_trapping: "Modal keeps focus inside"
|
||||
escape_key: "Close modals, cancel actions"
|
||||
|
||||
screen_readers:
|
||||
landmarks: "header, nav, main, aside, footer"
|
||||
headings: "h1-h6 hierarchy (don't skip levels)"
|
||||
aria_labels: "Descriptive labels for icon buttons"
|
||||
live_regions: "Announce dynamic content changes"
|
||||
|
||||
color_contrast:
|
||||
wcag_aa:
|
||||
normal_text: "4.5:1 contrast ratio"
|
||||
large_text: "3:1 contrast ratio (18pt+ or 14pt+ bold)"
|
||||
ui_components: "3:1 contrast ratio"
|
||||
|
||||
wcag_aaa:
|
||||
normal_text: "7:1 contrast ratio"
|
||||
large_text: "4.5:1 contrast ratio"
|
||||
|
||||
# Novel UX Pattern Examples (for inspiration)
|
||||
novel_patterns_inspiration:
|
||||
- pattern: "Swipe to match"
|
||||
origin: "Tinder"
|
||||
innovation: "Gamified decision-making through gesture"
|
||||
|
||||
- pattern: "Stories (ephemeral content)"
|
||||
origin: "Snapchat, then Instagram"
|
||||
innovation: "Time-limited content creates urgency and authenticity"
|
||||
|
||||
- pattern: "Infinite canvas"
|
||||
origin: "Figma, Miro"
|
||||
innovation: "Spatial organization without page boundaries"
|
||||
|
||||
- pattern: "Real-time collaborative cursors"
|
||||
origin: "Figma, Google Docs"
|
||||
innovation: "See others' activity in real-time"
|
||||
|
||||
- pattern: "Pull to refresh"
|
||||
origin: "Tweetie (Twitter client)"
|
||||
innovation: "Natural gesture for content updates"
|
||||
|
||||
- pattern: "Card-based swiping"
|
||||
origin: "Tinder, then widely adopted"
|
||||
innovation: "Binary decisions through kinetic interaction"
|
||||
|
||||
- pattern: "Algorithmic feed"
|
||||
origin: "Facebook, TikTok"
|
||||
innovation: "Personalized infinite content discovery"
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
# Create UX Design Workflow Configuration
|
||||
name: create-ux-design
|
||||
description: "Collaborative UX design facilitation workflow that creates exceptional user experiences through visual exploration and informed decision-making. Unlike template-driven approaches, this workflow facilitates discovery, generates visual options, and collaboratively designs the UX with the user at every step."
|
||||
author: "BMad"
|
||||
|
||||
# Critical variables from config
|
||||
config_source: "{project-root}/bmad/bmm/config.yaml"
|
||||
output_folder: "{config_source}:output_folder"
|
||||
user_name: "{config_source}:user_name"
|
||||
communication_language: "{config_source}:communication_language"
|
||||
document_output_language: "{config_source}:document_output_language"
|
||||
user_skill_level: "{config_source}:user_skill_level"
|
||||
date: system-generated
|
||||
|
||||
# Input requirements - We work from PRD, Brief, or Brainstorming docs
|
||||
recommended_inputs:
|
||||
- prd: "Product Requirements Document with features and user journeys"
|
||||
- product_brief: "Product brief with vision and target users"
|
||||
- brainstorming: "Brainstorming documents with ideas and concepts"
|
||||
|
||||
# Input file references (fuzzy matched from output folder)
|
||||
prd_file: "{output_folder}/bmm-PRD.md or PRD.md or product-requirements.md"
|
||||
brief_file: "{output_folder}/product-brief.md or brief.md or project-brief.md"
|
||||
brainstorm_file: "{output_folder}/brainstorming.md or brainstorm.md or ideation.md"
|
||||
|
||||
# Module path and component files
|
||||
installed_path: "{project-root}/bmad/bmm/workflows/2-plan-workflows/create-ux-design"
|
||||
instructions: "{installed_path}/instructions.md"
|
||||
validation: "{installed_path}/checklist.md"
|
||||
template: "{installed_path}/ux-design-template.md"
|
||||
|
||||
# Knowledge bases for intelligent UX decisions
|
||||
ux_pattern_catalog: "{installed_path}/ux-pattern-catalog.yaml"
|
||||
color_psychology: "{installed_path}/color-psychology.yaml"
|
||||
layout_patterns: "{installed_path}/layout-patterns.yaml"
|
||||
|
||||
# Output configuration - Progressive saves throughout workflow
|
||||
default_output_file: "{output_folder}/ux-design-specification.md"
|
||||
color_themes_html: "{output_folder}/ux-color-themes.html"
|
||||
design_directions_html: "{output_folder}/ux-design-directions.html"
|
||||
|
||||
# Workflow metadata
|
||||
version: "1.0.0"
|
||||
paradigm: "visual-collaboration-driven"
|
||||
execution_time: "45-120 minutes depending on project complexity and user engagement"
|
||||
features:
|
||||
- "Design system discovery and selection"
|
||||
- "Live HTML color theme visualization"
|
||||
- "6-8 design direction mockup generation"
|
||||
- "Adaptive facilitation by skill level"
|
||||
- "Novel UX pattern design for unique concepts"
|
||||
- "Progressive document building (saves after each step)"
|
||||
- "Visual decision-making with actual mockups"
|
||||
- "WebSearch for current design systems and trends"
|
||||
- "Serves as input to follow-up workflows (wireframes, Figma, prototypes, architecture)"
|
||||
Loading…
Reference in New Issue