Create comprehensive error and empty state designs that transform frustrating moments into opportunities for engagement and guidance. This prompt helps designers develop clear, empathetic, and actionable state designs that maintain user trust and provide pathways to recovery and success.
Use this prompt to create a complete error and empty state design system that turns negative experiences into positive opportunities. Fill in the bracketed placeholders with your project-specific details to receive tailored patterns, messaging frameworks, and visual specifications that align with your brand voice while following UX best practices for error handling and empty state design.
Establish a clear classification system for errors based on severity and impact. Critical blocking errors that prevent users from continuing should use modal dialogs demanding immediate attention, while non-blocking warnings can use banner notifications that users can dismiss. Inline validation errors appear next to form fields for immediate feedback, and full-screen error pages handle catastrophic failures like 404 or 500 errors. Match the visual prominence and interruption level to the error's actual impact on user workflows to avoid alert fatigue while ensuring critical issues receive proper attention.
Write error messages using clear, plain language that avoids technical jargon and never blames users. Structure messages with three components: what happened (clear headline), why it happened (brief explanation), and what to do next (actionable steps). Instead of "Error 403: Forbidden access," use "You don't have permission to view this page. Contact your administrator to request access." Maintain your brand voice whether professional, friendly, or playful, but always prioritize clarity and helpfulness over cleverness. Include progressive disclosure options for technical details that advanced users or support teams might need.
Design empty states that provide value beyond simply stating nothing exists. First-use empty states should guide new users with clear calls-to-action and educational content about how to get started. No-results states from searches or filters should suggest alternative actions like broadening criteria or exploring popular content. Completed-task empty states can celebrate user achievements with encouraging messages. Include relevant illustrations that reinforce your brand personality, but ensure they enhance rather than distract from the primary action users should take to populate the space.
Ensure error and empty states meet WCAG accessibility standards with sufficient color contrast ratios (4.5:1 minimum for text). Never rely solely on color to convey error status; combine red highlighting with icons, borders, and clear text labels. Include proper ARIA attributes for screen readers announcing error messages and status changes. Design animations that respect prefers-reduced-motion preferences and provide keyboard navigation for all interactive elements. Test error states with actual assistive technologies to verify they communicate effectively to all users regardless of abilities.
You are an expert UI/UX designer specializing in motion design and animation specifications. Create comprehensive animation and transition specifications for [PROJECT NAME OR INTERFACE TYPE]. Project Context: - Platform: [WEB/MOBILE APP/DESKTOP/CROSS-PLATFORM] - Design System: [MATERIAL DESIGN/FLUENT/CUSTOM/OTHER] - Target Audience: [USER DEMOGRAPHIC AND TECHNICAL PROFICIENCY] - Performance Constraints: [DEVICE CAPABILITIES, BANDWIDTH CONSIDERATIONS] Generate detailed specifications covering: 1. **Duration Standards** - Micro-interactions (buttons, toggles, hovers) - Medium transitions (modals, dropdowns, notifications) - Large transitions (page changes, screen transitions) - Loading states and progress indicators 2. **Easing Functions** - Entry animations (elements appearing) - Exit animations (elements disappearing) - Emphasis animations (drawing attention) - Interactive feedback animations 3. **Animation Behaviors** - Fade specifications (opacity transitions) - Scale transformations (size changes) - Movement patterns (directional motion) - Combined animations (multi-property transitions) 4. **Implementation Guidelines** - CSS/JavaScript specifications - Accessibility considerations (prefers-reduced-motion) - Performance optimization techniques - Fallback behaviors for low-performance devices 5. **Use Cases and Examples** - Navigation transitions - Form feedback animations - Content loading patterns - Error and success states - Contextual overlays and modals For each specification, provide: - Exact timing values in milliseconds - Easing curve specifications (cubic-bezier values or named curves) - Properties being animated - Rationale for the chosen approach - Code snippets or pseudo-code where applicable Ensure all specifications prioritize user experience, maintain consistency across the interface, and follow accessibility best practices.
You are an expert UI/UX designer specializing in loading states and skeleton screen design. Create a comprehensive loading state and skeleton screen design system for [PROJECT NAME OR APPLICATION TYPE]. Project Context: - Platform: [WEB/MOBILE APP/DESKTOP/PROGRESSIVE WEB APP] - Content Types: [TEXT-HEAVY/IMAGE-HEAVY/DATA TABLES/MIXED CONTENT/VIDEO] - Average Load Times: [FAST <500MS/MODERATE 500MS-2S/SLOW >2S] - Target Network Conditions: [4G/5G/VARIABLE/LOW-BANDWIDTH] - Design System: [MATERIAL DESIGN/FLUENT/CUSTOM/BRAND-SPECIFIC] Generate detailed specifications covering: 1. **Skeleton Screen Patterns** - Text content placeholders (headlines, paragraphs, captions) - Media placeholders (images, videos, avatars) - Card and list item structures - Data table and chart placeholders - Navigation and menu skeletons - Form field placeholders 2. **Animation Specifications** - Shimmer/pulse animation timing and easing - Wave progression patterns - Fade-in transition from skeleton to real content - Staggered loading sequences for multiple elements - Animation duration recommendations (1-2 seconds optimal) 3. **Visual Design Guidelines** - Color palette (neutral grays #e0e0e0 to #f5f5f5 range) - Shape specifications (rectangles for text, circles for avatars) - Spacing and hierarchy maintenance - Border radius and styling consistency - Dark mode adaptations 4. **Loading State Hierarchy** - Immediate feedback states (<100ms) - Short loading states (100ms-1s) - minimal indicators - Medium loading states (1-3s) - skeleton screens - Long loading states (>3s) - enhanced feedback with progress/educational content - Progressive loading strategies for complex pages 5. **Implementation Guidelines** - CSS-based vs component-based approaches - Performance optimization techniques (lightweight, GPU-accelerated) - Responsive behavior across breakpoints - Accessibility considerations (ARIA labels, reduced motion support) - Server-side rendering compatibility 6. **Alternative Loading Patterns** - Spinner/progress indicators (when to use vs skeleton) - Progress bars with accurate percentage tracking - Placeholder content vs blank states - Error state transitions and retry mechanisms - Optimistic UI updates 7. **Content-Specific Strategies** - Feed/timeline loading patterns - Search results progressive disclosure - Dashboard and analytics loading - Media gallery lazy loading - Infinite scroll continuation states For each specification, provide: - Visual descriptions or ASCII representations of skeleton layouts - Exact timing values and animation curves - CSS/JavaScript implementation examples - Rationale based on perceived performance research - Responsive behavior guidelines - Accessibility compliance notes Ensure all designs prioritize perceived performance reduction, maintain visual continuity with final content, and follow WCAG accessibility standards.
You are an expert UI/UX design system architect with extensive experience in creating scalable, accessible, and maintainable design systems and component libraries. Create a comprehensive design system and component library for [PROJECT/PRODUCT NAME] that serves [TARGET USERS/TEAM SIZE]. The design system should support [PLATFORM/TECHNOLOGY STACK] and align with [BRAND/DESIGN PHILOSOPHY]. ## Core Requirements: 1. **Design Principles & Foundation** - Define [NUMBER] core design principles that reflect [BRAND VALUES/PRODUCT GOALS] - Establish design tokens for colors, typography, spacing, and elevation - Create a cohesive visual language that ensures [SPECIFIC CONSISTENCY GOALS] 2. **Component Library Structure** - Design [SPECIFY COMPONENT TYPES: e.g., buttons, forms, navigation, modals, cards, data tables] - Include component variants, states (default, hover, active, disabled, error), and responsive behaviors - Ensure WCAG 2.2 AA compliance with proper ARIA labels, semantic HTML, and keyboard navigation - Provide [LIGHT/DARK/BOTH] theme support 3. **Documentation Requirements** - Component usage guidelines with do's and don'ts - Code snippets for [FRAMEWORK: React, Vue, Angular, Web Components, etc.] - Accessibility implementation notes and screen reader compatibility - Visual examples showing component applications in real contexts 4. **Technical Specifications** - Design tokens in [FORMAT: CSS variables, JSON, SASS, etc.] - Responsive breakpoints for [DEVICE TARGETS] - Grid system with [COLUMN COUNT] columns - Naming conventions following [BEM/ATOMIC/CUSTOM] methodology 5. **Governance & Maintenance** - Version control strategy and update process - Contribution guidelines for team members - Quality assurance checklist for new components - Roles and responsibilities (owner, contributors, review board) Deliver the design system with: - A style guide covering typography hierarchy, color palette with contrast ratios, spacing scale, and iconography - A component library with at least [NUMBER] reusable components organized by category - Pattern library addressing common design solutions like navigation flows, forms, and data display - Figma/Sketch files or code repository structure for [DESIGN TOOL/DEVELOPMENT ENVIRONMENT] - An onboarding guide for new team members Ensure the design system achieves measurable outcomes including component reuse rate above 70%, WCAG compliance, style consistency within 5% variance, and reduced design-to-development handoff time.