Design a Modern User Profile Page Layout with Key UX Components

Create a detailed user profile page design spec with layout, components, responsive behavior, and accessibility guidelines.

📝 The Prompt

Design a comprehensive user profile page for [APPLICATION TYPE] targeting [TARGET AUDIENCE]. The profile page should serve both the profile owner and visitors viewing the profile. Please provide a detailed design specification covering: 1. **Header Section**: Define the layout for avatar/profile photo (dimensions, shape, upload states), cover image area, display name, username/handle, and a short bio field with character limit of [CHARACTER LIMIT]. 2. **Key Stats Bar**: Identify [NUMBER] primary metrics to display (e.g., followers, posts, reputation score) and describe their visual hierarchy and placement. 3. **Action Buttons**: Specify primary and secondary CTAs for both the owner view (Edit Profile, Settings) and visitor view (Follow, Message, Share). Include button states: default, hover, loading, and disabled. 4. **Content Tabs/Sections**: Propose [NUMBER] navigable tabs organizing the user's content (e.g., Posts, Media, Activity, Saved Items). Describe what each tab contains and how empty states should appear. 5. **Privacy & Settings Integration**: Define which profile elements are publicly visible vs. private, and how privacy indicators are shown visually. 6. **Responsive Behavior**: Describe how the profile layout adapts across desktop (1440px), tablet (768px), and mobile (375px) breakpoints. 7. **Accessibility Requirements**: Include color contrast ratios, focus states, alt text guidelines for images, and screen reader considerations. The overall design should follow [DESIGN SYSTEM/STYLE] aesthetics with a color palette based on [PRIMARY COLOR]. Provide component specifications with spacing values, typography scale, and interaction patterns.

💡 Tips for Better Results

Always design for both the profile owner's view and the visitor's view since they have different needs. Start with the mobile layout first to ensure the most critical information is prioritized. Test your design with both new users (empty states) and power users (content overflow scenarios).

🎯 Use Cases

UI/UX designers and front-end developers use this when building or redesigning user profile pages for social platforms, SaaS applications, or community-driven products.

🔗 Related Prompts

🎨 Design intermediate

Design an Engaging Onboarding Screen Sequence for Mobile Apps

Design a complete mobile app onboarding sequence with screen copy, personalization flow, and success metrics.

👁️ 3 📋 0
🎨 Design advanced

Create a Micro-Interaction Specification Document for UI Components

Specify micro-interactions for UI components with exact animation values, haptic feedback, accessibility, and implementation notes.

👁️ 3 📋 0
🎨 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

Build Comprehensive Design System Documentation

Create complete design system documentation with tokens, component specs, accessibility standards, and contribution guidelines.

👁️ 2 📋 0