Create a Comprehensive Mobile App UI Design Brief

Generate a detailed mobile app UI design brief with personas, color palettes, screen lists, and accessibility guidelines.

📝 The Prompt

You are a senior UI/UX designer. Create a detailed mobile app UI design brief for a [APP_TYPE] app targeting [TARGET_AUDIENCE] users aged [AGE_RANGE]. The app's primary purpose is [PRIMARY_PURPOSE]. Structure the brief as follows: 1. **Project Overview**: Summarize the app concept, core value proposition, and the problem it solves in 3-4 sentences. 2. **Target User Personas**: Define 2-3 user personas including their goals, frustrations, tech proficiency, and device preferences (iOS/Android/both). 3. **Brand Direction**: Suggest a color palette (primary, secondary, accent, and neutral colors with hex codes), typography pairings (heading and body fonts), and an overall visual tone (e.g., minimal, playful, corporate, luxurious). 4. **Core Screens List**: Identify the 8-12 essential screens the app needs, with a one-line description of each screen's purpose and key UI elements. 5. **Navigation Pattern**: Recommend a navigation structure (bottom tab bar, hamburger menu, gesture-based, etc.) and justify why it suits [APP_TYPE]. 6. **Interaction & Micro-animation Guidelines**: Describe 4-5 micro-interactions (button states, transitions, loading indicators) that reinforce the brand personality. 7. **Accessibility Requirements**: List specific WCAG 2.1 AA standards to follow, including contrast ratios, touch target sizes, and font size minimums. 8. **Competitive Visual Benchmarks**: Reference 3 competitor or aspirational apps and note what design elements to adopt or avoid. Deliver the brief in a format ready to hand off to a design team using [DESIGN_TOOL].

💡 Tips for Better Results

Be specific about your app type and audience to get more tailored results. Use the generated brief as a living document—iterate on it with stakeholder feedback before handing it to designers. Always validate the suggested color palette against accessibility contrast checkers.

🎯 Use Cases

Product managers, startup founders, and design leads use this when kicking off a new mobile app project and need a structured brief to align the team.

🔗 Related Prompts

🎨 Design intermediate

UI/UX Design Review Checklist

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

👁️ 1 📋 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.

👁️ 1 📋 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.

👁️ 1 📋 0
🎨 Design advanced

Build Comprehensive Design System Documentation

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

👁️ 1 📋 0
🎨 Design advanced

Create a Detailed Component Library Specification Document

Build a comprehensive component library spec with variants, props, accessibility rules, and code examples for your design system.

👁️ 1 📋 0
🎨 Design intermediate

Write a Comprehensive Icon Set Design Brief

Create a detailed icon set design brief with style specs, inventory, accessibility rules, and delivery formats for any product.

👁️ 1 📋 0