A product presentation expert that creates realistic mockups for showcasing designs in context. This skill combines design presentation best practices with Midjourney prompts to generate professional mockups for websites, apps, products, and branding materials.
From device mockups to product packaging, this skill helps visualize designs in real-world contexts, making them more tangible and compelling for stakeholders, clients, and marketing materials.
Core Workflows
Workflow 1: Digital Product Mockups
Define context
Product type (website, app, software)
Devices needed (desktop, mobile, tablet)
Use context (office, coffee shop, home)
Perspective (flat, angled, in-hand)
Generate Midjourney prompts
Device type and model
Screen content description
Environment and lighting
Style (clean, lifestyle, minimal)
Specify mockup details
Screen dimensions
Device frame (include/exclude)
Shadow and reflection
Background treatment
Create multiple variations
Different devices
Different contexts
Different angles
Light and dark mode
Provide usage guidelines
Best formats for each use
Export specifications
Placement recommendations
Workflow 2: Physical Product Mockups
Identify product type
Packaging (box, bottle, bag)
Print materials (card, poster, book)
Merchandise (t-shirt, mug, stationery)
Signage (billboard, storefront)
Design mockup scenario
Environment context
Lighting conditions
Perspective and angle
Supporting elements
Generate Midjourney prompts
Product description
Surface/material textures
Branding placement
Photorealistic settings
Create variations
Multiple angles
Different environments
Various lighting
Scale comparisons
Workflow 3: Brand Presentation Mockups
Plan presentation set
Business cards
Letterhead
Email signature
Social media profiles
Website in browser
Mobile app screens
Design cohesive scene
Flat lay photography style
Lifestyle context
Product family grouping
Brand story visualization
Generate mockup prompts
Scene composition
Props and styling
Lighting and mood
Color palette consistency
Create brand story
Hero mockup (main showcase)
Supporting mockups (details)
Usage scenarios
Application examples
Workflow 4: Marketing & Social Mockups
Define marketing goal
Product launch announcement
Feature showcase
App store screenshots
Social media posts
Ad creatives
Choose mockup style
Clean and minimal
Lifestyle and contextual
Bold and graphic
Authentic and candid
Generate platform-specific
Instagram: 1080x1080, 1080x1350
Facebook: 1200x630
Twitter: 1200x675
LinkedIn: 1200x627
App Store: 1242x2208
Create content series
Teaser mockups
Feature highlights
Before/after
Testimonial integration
Quick Reference
Action
Command/Trigger
Device mockup
"Create [device] mockup for [project]"
Packaging mockup
"Design packaging mockup for [product]"
Brand collateral
"Create brand mockup set for [company]"
App store screenshots
"Generate app screenshots for [app]"
Social media mockup
"Create Instagram mockup for [content]"
Print mockup
"Design business card mockup"
Mockup Categories
Digital Device Mockups
Desktop/Laptop
MacBook Pro/Air (most common)
iMac
Generic laptop
Browser window only
Dual monitor setup
Mobile
iPhone (latest model)
iPhone with hand holding
Android (Pixel, Samsung)
Flat lay phone mockup
Phone in pocket/bag
Tablet
iPad Pro
iPad mini
Tablet with pencil/keyboard
E-reader
Wearables
Apple Watch
Smartwatch
Fitness tracker
Multiple Devices
Responsive showcase (phone + tablet + desktop)
Device family
Continuity mockup
Physical Product Mockups
Packaging
Box (product box, gift box, shipping)
Bottle (glass, plastic, cosmetic)
Bag (paper, cloth, plastic)
Can/Tin
Tube
Pouch
Print Materials
Business card
Letterhead
Envelope
Postcard
Flyer/Brochure
Poster
Magazine ad
Billboard
Merchandise
T-shirt (front, back, folded, on model)
Hoodie
Tote bag
Mug/Cup
Notebook
Stickers
Hat/Cap
Water bottle
Stationery
Notebook
Notepad
Pen
Pencil
Folder
Clipboard
Environmental
Storefront sign
Window display
Banner
Vehicle wrap
Billboard
Office interior
Presentation Styles
Clean & Minimal
White background
Soft shadows
Centered composition
Product focus
Professional
Lifestyle & Context
Real environment
Natural lighting
Hands holding device
In-use scenario
Relatable setting
Flat Lay
Top-down view
Arranged composition
Complementary props
Cohesive color story
Instagram-friendly
Isometric
3D perspective
Geometric
Modern, tech-forward
Illustrative quality
Hand Interaction
Person holding device
Using product
Authentic usage
Adds human element
Midjourney Prompt Templates
Website Desktop Mockup
A MacBook Pro displaying [website description] on the screen, placed on a clean white desk, soft natural lighting from the left, minimalist workspace with a coffee mug and succulent plant, professional photography, shallow depth of field, modern office environment --ar 16:9 --style raw --v 6
Mobile App Mockup
An iPhone 15 Pro displaying [app screen description], held in a hand against a soft gradient background, clean product photography, centered composition, slight shadow, modern and professional --ar 9:16 --style raw --v 6
Product Packaging
A [product type] box mockup with [brand elements] on a textured surface, dramatic side lighting creating shadows, premium packaging design, close-up product photography, shallow depth of field, commercial photography style --ar 4:3 --style raw --v 6
Brand Stationery Set
Flat lay photography of brand identity materials including business cards, letterhead, and envelope, arranged on a white marble surface, soft overhead lighting, minimal shadows, elegant composition, professional branding mockup --ar 16:9 --style raw --v 6
T-Shirt Mockup
A [color] t-shirt with [design description] worn by a person in a [setting], lifestyle photography, natural lighting, authentic and casual, soft focus background, apparel mockup, fashion photography style --ar 4:5 --style raw --v 6
Best Practices
Choose appropriate context
Match mockup style to brand personality
Use realistic scenarios
Show product in believable situations
Mind the details
Quality of mockup reflects on design quality
Consistent lighting
Maintain cohesive look across mockup set
Proper scale
Ensure product/screen proportions are accurate
High resolution
Always create at publication quality (min 2000px)
Consider perspective
Angle should complement design, not compete
Background matters
Support the product, don't distract
Show in context
Help viewer understand use case
Create variations
Multiple angles tell fuller story
Test readability
Ensure text/design visible at display size
Brand consistency
Mockups should align with brand aesthetic
Technical Specifications
Screen Resolutions for Mockups
Desktop/Laptop
1920x1080 (Full HD)
2560x1440 (2K)
3840x2160 (4K)
Mobile (Portrait)
iPhone: 1170x2532 (iPhone 14 Pro)
Android: 1080x2400 (common flagship)
Tablet
iPad Pro 12.9": 2048x2732
iPad Air: 1640x2360
App Store Screenshots
iPhone 6.7": 1290x2796
iPhone 6.5": 1284x2778
iPad Pro 12.9": 2048x2732
Export Formats
For web/social
JPG or PNG (PNG for transparency)
For print
PDF or high-res PNG (300 DPI minimum)
For presentations
PNG with transparency
For video
PNG sequence or MP4
File Sizes
Social media: 1-5MB max
Website hero: 200-500KB (optimized)
Print materials: Full resolution, no size limit
Presentations: 500KB-1MB per image
Deliverables Format
MOCKUP SPECIFICATION
Project: [Name]
Type: [Digital/Physical/Brand Set]
Use Case: [Marketing/Presentation/Portfolio]
MOCKUP SET
1. Hero Mockup (Primary)
Type: MacBook Pro + iPhone mockup
Context: Modern desk with minimal props
Lighting: Soft natural light, left side
Background: Clean white/light gray
Midjourney Prompt:
"A MacBook Pro and iPhone 15 displaying [your design],
arranged on a white minimalist desk with a plant and
notebook, soft window lighting from left, professional
product photography, shallow depth of field --ar 16:9 --v 6"
Specs:
- Resolution: 3840x2160px
- Format: PNG with transparency option
- Aspect ratio: 16:9
2. Mobile Focus Mockup
Type: iPhone in hand
Context: Outdoor, natural setting
Lighting: Golden hour, warm
Background: Soft bokeh
Midjourney Prompt: [detailed prompt]
Specs:
- Resolution: 1080x1350px (Instagram)
- Format: JPG
- Aspect ratio: 4:5
3. Flat Lay Mockup
Type: Multiple devices overhead view
Context: Marble surface with accessories
Lighting: Bright, even overhead
Background: White marble texture
Midjourney Prompt: [detailed prompt]
Specs:
- Resolution: 2000x2000px
- Format: PNG
- Aspect ratio: 1:1
[... additional mockups ...]
USAGE GUIDELINES
Website:
- Use Hero Mockup for homepage
- Optimize to 200KB
- WebP format for best performance
Social Media:
- Use Mobile Focus for Instagram posts
- Use Flat Lay for stories
- Add text overlays in brand colors
Presentations:
- Use Hero Mockup for slides
- Ensure contrast with slide background
- PNG with transparency for flexibility
Print Materials:
- Export at 300 DPI
- CMYK color mode
- PDF format for press
VARIATIONS CREATED
Light Mode: [Mockup with light UI]
Dark Mode: [Mockup with dark UI]
Multiple Devices: [Responsive showcase]
Context Shots: [Lifestyle usage]
Close-ups: [Detail views]
ASSET DELIVERY
Files:
- hero-mockup-desktop-mobile.png (4K)
- mobile-in-hand.jpg (Instagram ready)
- flat-lay-devices.png (Square format)
- [additional files]
Editable Templates:
- [If applicable, PSD/Figma links]
Popular Mockup Resources
Free Mockup Tools
Artboard Studio: Browser-based, easy
Mockuper: Simple device mockups
Facebook Design: Free device templates
Screely: Instant browser mockups
Premium Mockup Tools
Rotato: Animated 3D device mockups
Mediamodifier: Huge mockup library
Placeit: Templates for everything
Smartmockups: Easy drag-and-drop
Create with Midjourney
(Recommended)
Most flexible
Unique, custom scenes
Perfect brand alignment
Unlimited variations
Tools Integration
Use
Midjourney
to generate all mockup backgrounds and contexts
Use
Playwright
to capture actual product screenshots for mockups
Use
ui-builder
to create the designs being mocked up
Use
brand-identity-builder
to ensure mockups align with brand
Common Requests
SaaS Product
Desktop browser + mobile app in clean office setting