A portfolio mockup introduces a product, but it cannot explain the decisions behind it. Treat the hero image as an invitation to read the case study. The rest of the page should show the problem, your role, the constraints and the evidence that shaped your design.
Pick one moment for the cover
Choose a screen that represents the main user task. A dashboard full of tiny charts may be less useful than a clear booking or checkout state. Use a simple composition and leave space for your title outside the device. A readable single-phone presentation often communicates more than a crowded five-device fan.
Use sequences for flows
A three-screen composition can show a beginning, decision and result. Match the viewport, crop and device finish across the sequence so readers focus on changes in the interface. Add captions in the surrounding case study explaining what happens between screens. Do not rely on the device image alone to explain an interaction.
Explain responsive changes
Pair a laptop and phone when their layouts demonstrate an important decision. Show how a navigation system, table or complex form adapts. Capturing unrelated sections on the two devices weakens the comparison. Keep the layout consistent enough that a reviewer can connect both views quickly.
Keep evidence separate from decoration
Present research findings, accessibility checks and outcome measurements as readable text or diagrams. Do not put the only copy of an important result inside a tilted device screen. Use real metrics only when you have permission and evidence. For confidential work, replace customer data and describe any limitations on what you can disclose.
Optimize for the actual portfolio page
Check the composition on a narrow screen. A large desktop hero may become too small to read on mobile. Use an efficient WebP, descriptive alt text and a nearby caption. Link to relevant prototypes when permitted. Lighting and angle guidance can help keep the visual treatment consistent across your project.