A portfolio full of flat screenshots looks like a spec document. The same work presented on realistic devices — a phone in a hand, a laptop on a desk, a watch on a wrist — tells a story. Clients and hiring managers don't evaluate UI in isolation; they imagine it in use. Device mockups bridge that gap.
Why mockups matter in portfolios
A mockup does three things a screenshot can't: it creates spatial context ("this is a mobile app"), it signals professionalism ("this designer cares about presentation"), and it makes the case study thumbnail stand out in a grid of competitors on Dribbble or Behance.
Portfolio mockup recipes
- 01Hero shot — one large device mockup at the top of the case study. Use a dramatic angle (slight tilt, studio lighting) to make it the visual anchor. This is the thumbnail that shows up in grid views.
- 02Multi-screen flow — 3-5 phone mockups in a horizontal row showing the user journey. Best for illustrating an onboarding flow, checkout process, or navigation pattern.
- 03Cross-device showcase — phone + laptop + tablet together to demonstrate responsive design. Floating device compositions work well here.
- 04Before/after — a flat screenshot next to the same screen in a device mockup. Simple but effective for redesign case studies.
- 05Lifestyle context — a hand-held phone mockup or desk scene to add human warmth. Use this when the project is consumer-facing.
Platform-specific tips
Dribbble
Dribbble shots display at 800 × 600 in the feed. Use a centered device with a clean background so the mockup reads clearly at thumbnail size. Avoid cluttered compositions — they turn into visual noise at 800 px.
Behance
Behance projects are long-scroll, so you have room for multiple mockup styles within one case study. Start with a hero shot, break up text sections with lifestyle mockups, and end with a multi-device showcase.
Personal website
On your own site, you control the background color. Match the mockup scene background to your site's palette for a seamless look. Export as WebP for fast loading and use lazy loading for mockups below the fold.
Common mistakes
- Using the same template for every project — it makes your portfolio look monotonous. Vary angles, devices, and scene types.
- Low-resolution exports — if the mockup looks soft when zoomed in, it signals carelessness. Always export at 2x minimum.
- Mismatched devices — showing an iOS app on an Android phone frame (or vice versa) is a detail that design-savvy viewers will catch.
- Overloading the composition — one strong mockup per section is better than five competing for attention.
- Forgetting dark mode — if your app has a dark mode, showcase it. A device mockup with a dark UI on a light background creates a striking contrast.
“A portfolio case study is a product demo. The mockup is your hero image. If the hero doesn't hook them, they won't read the process section.”