Design a Modern User Profile Page for Web and Mobile Apps

Create a detailed user profile page design spec covering layout, stats, responsive behavior, and accessibility for any app type.

📝 The Prompt

Design a comprehensive user profile page for [APP TYPE] targeting [TARGET AUDIENCE]. The platform's primary purpose is [PRIMARY PURPOSE], and the visual style should align with [BRAND AESTHETIC, e.g., minimalist, vibrant, corporate]. Please provide a detailed design specification covering: 1. **Header Section**: Define the layout for the user's avatar (size, shape, upload interaction), cover image or background treatment, display name, username/handle, and a short bio area. Specify character limits and truncation behavior. 2. **Key Stats & Metrics**: Identify 3-5 relevant statistics to display (e.g., followers, posts, achievements) based on the app type. Describe their visual hierarchy and tap/click behavior. 3. **Action Buttons**: Specify primary and secondary CTAs (e.g., Edit Profile, Follow, Message). Define button states: default, hover, active, disabled. Include logic for own-profile vs. other-user-profile views. 4. **Content Tabs/Sections**: Propose [NUMBER, e.g., 3-5] content tabs or scrollable sections that organize the user's activity and content. Describe the content within each tab and empty-state messaging. 5. **Settings & Privacy**: Outline accessible settings such as visibility toggles, account preferences, and linked accounts. Describe how these integrate without cluttering the profile. 6. **Responsive Behavior**: Describe how the layout adapts across desktop (1440px), tablet (768px), and mobile (375px) breakpoints. Highlight any elements that reorder, collapse, or hide. 7. **Accessibility**: Include color contrast requirements (WCAG AA minimum), focus states, screen reader labels, and keyboard navigation order. Deliver the output as a structured design brief with annotated wireframe descriptions suitable for handoff to a UI designer.

💡 Tips for Better Results

Always design two views—'own profile' and 'visitor profile'—since the available actions differ significantly. Test your stat placement with both single-digit and six-digit numbers to ensure the layout holds up.

🎯 Use Cases

Product designers and UX teams use this when building or redesigning user profile experiences for social, SaaS, or community-driven applications.

🔗 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