Design a Modern User Profile Page Layout with Engaging UX Patterns

Create a detailed user profile page design specification with responsive layouts, UX patterns, and accessibility guidelines.

📝 The Prompt

Design a comprehensive user profile page for [APPLICATION_TYPE] targeting [TARGET_AUDIENCE]. The platform's primary purpose is [PLATFORM_PURPOSE] and the visual style should align with [DESIGN_STYLE, e.g., minimalist, vibrant, corporate]. Please provide a detailed design specification covering the following sections: 1. **Header/Hero Area**: Define the layout for the user's avatar, display name, bio, and key stats (e.g., [STAT_1], [STAT_2], [STAT_3]). Specify dimensions, spacing, and how the header adapts between desktop and mobile. 2. **Navigation & Content Tabs**: Propose a tab or segmented navigation structure to organize profile subsections such as [SECTION_1], [SECTION_2], and [SECTION_3]. Describe interaction states (active, hover, disabled). 3. **Content Grid/Feed Area**: Design the primary content display area. Specify whether it uses a grid, list, or card-based layout. Include details on card dimensions, gutters, lazy loading behavior, and empty states. 4. **Sidebar or Secondary Info Panel**: Outline what supplementary information appears (e.g., badges, achievements, contact info, mutual connections). Describe placement on desktop and how it collapses on mobile. 5. **Action Buttons & Social Interactions**: Define the primary CTA (e.g., Follow, Message, Hire) including button hierarchy, placement, and micro-interaction feedback. 6. **Privacy & Edit Mode**: Describe how the profile differs when viewed by the owner vs. a visitor, including inline editing affordances. For each section, provide specific recommendations on typography scale, color usage relative to [BRAND_COLOR_PRIMARY] and [BRAND_COLOR_SECONDARY], spacing tokens, and accessibility considerations (WCAG AA minimum). Include responsive breakpoints at 1440px, 1024px, 768px, and 375px.

💡 Tips for Better Results

Start by defining the 3 most important actions a visitor takes on the profile page and make those visually dominant. Always design the mobile layout first, then scale up to desktop to ensure nothing essential gets lost. Test your design with both 'power users' who have rich profiles and new users with sparse data to handle empty states gracefully.

🎯 Use Cases

UI/UX designers and product teams use this when building or redesigning user profile pages for social platforms, marketplaces, or SaaS applications.

🔗 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