Skip to main content
creative advanced

Design User Interface Wireframes

Create detailed UI wireframes with our expert AI prompt. Perfect for designers and developers building user interfaces quickly and effectively.

Works with: chatgptclaudegemini

Prompt Template

You are an expert UX/UI designer tasked with creating comprehensive wireframes for [PROJECT_TYPE]. Design detailed wireframes that demonstrate optimal user experience principles and modern interface patterns. Project Details: - Project Type: [PROJECT_TYPE] - Target Platform: [PLATFORM] - Primary Users: [TARGET_AUDIENCE] - Key Features: [CORE_FEATURES] - Business Goals: [BUSINESS_OBJECTIVES] Create wireframes that include: 1. **Information Architecture**: Define the overall structure and navigation hierarchy 2. **Layout Structure**: Specify grid systems, spacing, and component placement using standard wireframe conventions 3. **Content Priority**: Establish visual hierarchy through size, positioning, and grouping 4. **User Flow Integration**: Show how each screen connects to create seamless user journeys 5. **Responsive Considerations**: Address how layouts adapt across different screen sizes 6. **Interactive Elements**: Detail buttons, forms, navigation, and other UI components 7. **Accessibility Features**: Include considerations for inclusive design principles For each wireframe screen, provide: - Screen name and purpose - Detailed ASCII or text-based layout representation - Component specifications (header, navigation, content areas, footer) - Annotations explaining functionality and user interactions - Notes on responsive behavior and breakpoints - Accessibility considerations and alternative text descriptions Ensure wireframes follow established UX principles including clear visual hierarchy, consistent navigation patterns, appropriate white space usage, and logical content flow. Include specific measurements, alignment guides, and technical notes that developers would need for implementation.

Variables to Customize

[PROJECT_TYPE]

Type of application or website being designed

Example: e-commerce mobile app for sustainable fashion

[PLATFORM]

Target platform or device type

Example: iOS mobile app with responsive web version

[TARGET_AUDIENCE]

Primary user demographics and characteristics

Example: environmentally conscious millennials aged 25-40 with moderate tech skills

[CORE_FEATURES]

Main functionality and features to include

Example: product browsing, sustainable brand filtering, wishlist, secure checkout, user reviews

[BUSINESS_OBJECTIVES]

Key business goals the design should support

Example: increase conversion rates, build brand trust, encourage repeat purchases

Example Output

# E-commerce Mobile App Wireframes ## 1. Home Screen ``` [HEADER: Logo | Search | Profile] [HERO BANNER: Featured Sustainable Brands] [CATEGORY GRID: 2x2 layout] - Clothing | Accessories - Footwear | Home Goods [TRENDING SECTION: Horizontal scroll] [SUSTAINABILITY SCORE: Prominent display] [BOTTOM TAB: Home|Browse|Wishlist|Profile] ``` **Annotations:** - Header maintains 44px touch target minimum - Hero banner auto-rotates every 5 seconds - Category grid uses 16px padding between items - Sustainability scores use green color coding - Bottom navigation remains fixed during scroll ## 2. Product Listing Screen ``` [SEARCH BAR with filter icon] [FILTER CHIPS: Price | Brand | Rating | Sustainability] [PRODUCT GRID: 2 columns on mobile] - Product image (16:9 ratio) - Brand name + product title - Price + sustainability badge - Quick add to wishlist heart icon [LOAD MORE button at bottom] ``` **Responsive Notes:** - Mobile: 2 columns with 8px gutters - Tablet: 3-4 columns with 12px gutters - Filter chips scroll horizontally on smaller screens **Accessibility:** - All interactive elements minimum 44px - Alt text for product images includes brand and item type - High contrast mode support for sustainability badges

Pro Tips for Best Results

  • Start with user flows before designing individual screens to ensure logical navigation paths
  • Use consistent spacing and grid systems throughout all wireframes for professional cohesion
  • Include detailed annotations explaining functionality - developers need technical specifics
  • Consider edge cases like empty states, error messages, and loading screens in your wireframes
  • Test wireframe concepts with stakeholders before moving to high-fidelity designs to save time on revisions

Tags

Want 500+ Expert Prompts?

Get the Premium Prompt Pack — organized, tested, and ready to use.

Get it for $29

Related Prompts You Might Like