Design a Modern User Profile Page with Engaging UX Elements

Create a detailed user profile page design spec with responsive layouts, accessibility standards, and interactive states.

📝 The Prompt

Design a comprehensive user profile page for [APP/PLATFORM TYPE] targeting [TARGET AUDIENCE]. The profile page should balance information density with visual clarity. Please provide a detailed design specification covering: 1. **Header Section**: Layout for avatar/profile photo (size, shape, upload interaction), cover image area, and user display name with verification badge placement. 2. **Key Stats Bar**: Design a horizontal stats section showing [METRIC 1], [METRIC 2], and [METRIC 3] with appropriate visual hierarchy. Specify typography sizes, spacing, and tap targets for mobile. 3. **Bio & Details Section**: Structure for user bio (character limit: [NUMBER]), location, join date, website link, and up to [NUMBER] custom tags or interests. Define truncation behavior and 'read more' interaction. 4. **Action Buttons**: Primary CTA ([e.g., Follow, Connect, Message]) and secondary actions. Define button states: default, hover, pressed, loading, and completed. Specify button dimensions and color tokens. 5. **Content Tabs**: Design a tabbed navigation for [TAB 1], [TAB 2], and [TAB 3] with content preview cards beneath. Include empty state designs for each tab. 6. **Responsive Behavior**: Describe how the layout adapts across desktop (1200px+), tablet (768px), and mobile (375px) breakpoints. 7. **Accessibility**: Specify ARIA labels, contrast ratios, keyboard navigation order, and screen reader announcements for interactive elements. Design system tokens to define: color palette (light/dark mode), spacing scale, border radius, and shadow values. The overall style should feel [DESIGN STYLE, e.g., minimal, playful, corporate].

💡 Tips for Better Results

Always design empty states and error states alongside the happy path. Test your profile layout with both very short and very long usernames to catch edge cases. Consider progressive disclosure — show essential info first and let users expand for more.

🎯 Use Cases

UI/UX designers and product teams use this when building or redesigning profile pages for social platforms, SaaS apps, or community-driven products.

🔗 Related Prompts

🎨 Design intermediate

UI/UX Design Review Checklist

Get a comprehensive UI/UX review covering hierarchy, accessibility, and responsiveness.

👁️ 2 📋 0
🎨 Design intermediate

Generate a Custom Color Palette for Any Brand or Project

Generate a complete, accessible color palette with HEX values, usage guidelines, and dark mode variants for any brand or project.

👁️ 2 📋 0
🎨 Design intermediate

Find the Perfect Typography Pairing for Your Design Project

Get expert typography pairing recommendations with type scales, spacing guidelines, and CSS fallback stacks for any design project.

👁️ 2 📋 0
🎨 Design advanced

Create a Detailed Wireframe Description for UI/UX Design

Generate a detailed, section-by-section wireframe description with layout specs, interaction flows, and responsive behavior for any page.

👁️ 1 📋 0
🎨 Design intermediate

Generate a Custom Color Palette for Your Brand or Project

Generate a complete, accessible color palette with hex codes, usage guidelines, dark mode variants, and brand-aligned reasoning.

👁️ 1 📋 0
🎨 Design advanced

Create a Detailed User Flow Diagram for Your Digital Product

Design a comprehensive text-based user flow diagram with decision points, error states, and UX annotations for any digital product.

👁️ 1 📋 0