Generate Mockup Placeholder Images
Create placeholder images for device mockups including laptop screens, phone screens, tablet displays, and browser windows. Common screen sizes and aspect ratios.
Use Cases
Detailed Explanation
Mockup Placeholder Images
Device mockups display your designs within realistic device frames — laptops, phones, tablets, and browser windows. To create effective mockups, you need placeholder images that match the exact screen dimensions of each device.
Common Device Screen Sizes
Phones
| Device | Screen Size | Aspect Ratio |
|---|---|---|
| iPhone 15 Pro | 1179×2556 | ~9:19.5 |
| iPhone 15 | 1170×2532 | ~9:19.5 |
| iPhone SE | 750×1334 | ~9:16 |
| Pixel 8 | 1080×2400 | 9:20 |
| Samsung Galaxy S24 | 1080×2340 | ~9:19.5 |
Tablets
| Device | Screen Size | Aspect Ratio |
|---|---|---|
| iPad Pro 12.9" | 2048×2732 | 3:4 |
| iPad Pro 11" | 1668×2388 | ~5:7 |
| iPad Air | 1640×2360 | ~5:7 |
| iPad mini | 1488×2266 | ~2:3 |
Laptops
| Device | Screen Size | Aspect Ratio |
|---|---|---|
| MacBook Air 13" | 2560×1664 | ~3:2 |
| MacBook Pro 14" | 3024×1964 | ~3:2 |
| MacBook Pro 16" | 3456×2234 | ~3:2 |
| Standard 1080p laptop | 1920×1080 | 16:9 |
Generating Device-Specific Placeholders
For mockup tools, you typically need images at the device's native resolution:
- Enter the device's screen dimensions (width and height)
- Choose a neutral or branded background color
- Add descriptive text like "App Screenshot" or "Website Preview"
- Download as PNG for lossless quality
Tips for Mockup Placeholders
- Match the device orientation — Phones are usually shown in portrait, laptops in landscape
- Use the device's status bar area — If your mockup template includes the status bar, account for that space
- Consider safe areas — Modern phones with notches and rounded corners have safe areas where content should not extend
- Include realistic content hints — Instead of just solid colors, consider adding simple rectangles to suggest a UI layout
Use Case
Designers and marketers create device mockup presentations to showcase app designs, website redesigns, or product features. Using correctly sized placeholders ensures the mockup looks realistic and the design fits naturally within the device frame.