Design a Modern User Profile Page with Engaging Layout

Create a detailed user profile page design specification with responsive layouts, metrics, and accessibility best practices.

📝 The Prompt

Design a comprehensive user profile page for a [PLATFORM_TYPE] application targeting [TARGET_AUDIENCE]. The design should follow [DESIGN_STYLE] aesthetics and prioritize user engagement and clarity. Please provide detailed specifications for the following sections: 1. **Header/Hero Area:** - Avatar/profile photo placement and dimensions (recommend sizes for [DEVICE_TYPE]) - Cover image or gradient background treatment - Display name, username/handle, and verification badge positioning - Bio/description area with character limit recommendation 2. **Key Metrics Bar:** - Identify 3-4 primary stats to display (e.g., followers, posts, achievements) - Layout pattern: inline, card-based, or tabular - Typography hierarchy for numbers vs. labels 3. **Action Buttons:** - Primary CTA (e.g., Follow, Connect, Message) - Secondary actions (Share, Report, Block) - Button states: default, hover, active, disabled, loading 4. **Content Tabs/Sections:** - Recommend 3-5 tab categories relevant to [PLATFORM_TYPE] - Content grid vs. list layout for each tab - Empty state designs for tabs with no content 5. **Responsive Behavior:** - Describe layout shifts from desktop (1440px) to tablet (768px) to mobile (375px) - Sticky elements and scroll behavior - Touch-friendly tap target sizes 6. **Color and Typography:** - Suggest a color palette with primary, secondary, and accent colors - Font pairing recommendations - Spacing system (8px grid or custom) Include accessibility considerations such as contrast ratios, focus indicators, and screen reader-friendly markup suggestions.

💡 Tips for Better Results

Always design the profile page for the 'empty' state first — a new user with no avatar, no bio, and zero metrics — to ensure the layout degrades gracefully. Use real content samples instead of lorem ipsum to validate text truncation and overflow behavior. Test your color palette with a contrast checker tool to meet WCAG AA standards.

🎯 Use Cases

UI/UX designers and product teams use this when building or redesigning profile pages for social platforms, SaaS dashboards, 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