Create comprehensive animation and transition specifications for user interfaces that balance aesthetic appeal with usability. This prompt helps designers and developers establish consistent motion design guidelines including timing, easing curves, and behavior patterns for optimal user experience.
This prompt helps you create a complete animation specification document for your UI project. Fill in the bracketed placeholders with your specific project details to receive tailored timing, easing, and implementation guidelines that align with industry best practices while meeting your unique requirements.
Provide detailed information about your platform and constraints. Web animations typically run 150-200ms while mobile apps use 200-400ms durations. Specify any design system you're following (Material Design, Fluent, custom) as this influences timing standards. Include performance constraints like target devices and network conditions to ensure animations remain smooth across all user scenarios.
Organize animations by size and complexity. Micro-interactions (100-200ms) provide immediate feedback for buttons and toggles. Medium transitions (200-400ms) handle modals and dropdowns. Large transitions (300-500ms) manage page changes and full-screen elements. Establishing this hierarchy ensures consistent pacing throughout your interface and helps users build predictable mental models.
Different animation types require different easing curves. Use ease-out for entering elements (quick start, gradual stop), ease-in for exiting elements (gradual start, quick stop), and ease-in-out for moving elements. Specify cubic-bezier values for custom curves that match your brand's personality while maintaining natural motion physics.
Always implement prefers-reduced-motion media queries to respect user preferences. Consider users with vestibular disorders who may experience discomfort from excessive motion. Optimize animations by using transform and opacity properties which perform better than animating layout properties. Provide clear fallback states for devices that cannot support smooth animations.
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 designer specializing in error state and empty state design. Create a comprehensive design system for error states and empty states for [PROJECT NAME OR APPLICATION TYPE]. Project Context: - Platform: [WEB/MOBILE APP/DESKTOP/CROSS-PLATFORM] - Application Type: [E-COMMERCE/SAAS/SOCIAL MEDIA/PRODUCTIVITY/CONTENT PLATFORM] - User Technical Proficiency: [BEGINNER/INTERMEDIATE/ADVANCED/MIXED] - Brand Voice and Tone: [PROFESSIONAL/FRIENDLY/PLAYFUL/EMPATHETIC/TECHNICAL] - Critical User Flows: [LIST KEY WORKFLOWS THAT NEED ERROR HANDLING] Generate detailed specifications covering: 1. **Error State Classification System** - Severity levels (informational, warning, error, critical) - Error types (user input errors, system errors, network errors, permission errors) - Impact assessment (blocking vs non-blocking errors) - Recovery complexity (self-recoverable vs requires intervention) 2. **Error State Design Patterns** - Inline validation errors (form fields, real-time feedback) - Toast notifications and dismissible alerts (temporary, non-critical) - Banner messages (persistent warnings, system-wide issues) - Modal dialogs (critical errors requiring immediate attention) - Full-screen error pages (404, 500, no connection) - Contextual error indicators (icons, color, borders) 3. **Error Message Guidelines** - Clear headline structure (what went wrong) - Human-readable explanations (avoiding technical jargon) - Actionable next steps (specific guidance for recovery) - Tone and voice alignment (empathetic, non-blaming language) - Progressive disclosure (basic message + expandable details) - Accessibility compliance (ARIA labels, screen reader support) 4. **Visual Design Specifications** - Color palette (error red, warning amber, info blue with WCAG contrast ratios) - Iconography (alert symbols, illustration styles) - Typography hierarchy (headlines, body text, action links) - Spacing and layout principles - Animation and transitions (shake effects, fade-ins, attention-drawing) - Dark mode adaptations 5. **Empty State Design Patterns** - First-use empty states (onboarding, getting started) - User-cleared empty states (intentionally deleted content) - No-results empty states (search, filters returning nothing) - Permission-based empty states (access denied, locked features) - Completed-task empty states (inbox zero, completed todos) - Error-driven empty states (failed to load content) 6. **Empty State Components** - Illustrative imagery (custom illustrations vs icons vs imagery) - Headline and description copy (encouraging, educational) - Call-to-action buttons (primary actions to populate state) - Alternative pathways (secondary options, educational links) - Educational content (feature discovery, usage tips) - Success state transitions (congratulatory messaging) 7. **Content Strategy for Each State** - Messaging framework (headline + explanation + action) - Personality and brand voice integration - Microcopy guidelines (button labels, helper text) - Localization considerations - User education opportunities - Humor and delight appropriateness (when suitable) 8. **Implementation Guidelines** - Error severity decision tree - Pattern selection flowchart (when to use which pattern) - Responsive behavior across devices - Error logging and analytics tracking - Retry mechanisms and fallback strategies - Performance considerations (lightweight error states) 9. **Specific Error Scenarios** - Form validation errors (per-field and form-level) - Network connectivity issues - Session timeout and authentication errors - Server errors (500, 503) - Page not found (404) - Permissions and authorization failures - Payment and transaction failures - File upload errors - Rate limiting and quota exceeded 10. **Testing and Validation** - Error state checklist for designers and developers - User testing scenarios - Accessibility audit requirements - Edge case coverage - Error message content review criteria For each specification, provide: - Visual layout descriptions or wireframe concepts - Exact copy examples with variations - CSS color codes and styling specifications - Rationale based on UX research and best practices - Real-world examples from successful products - Accessibility requirements and ARIA attributes - Implementation code snippets or pseudo-code Ensure all designs prioritize user empathy, provide clear recovery paths, maintain brand consistency, and follow WCAG accessibility standards. Transform potentially frustrating moments into opportunities for engagement, education, and trust-building.
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.