Take the right screenshot
A full-page browser capture is tempting, but for a mockup it's usually wrong. The device's screen only shows the first view, and an 8,000-pixel page turns into an unreadable strip inside a phone.
- For a laptop, set the browser window to about 1440 × 900 and capture the first screen. On a Retina display the capture comes out at twice the resolution, which is what you want.
- For a phone, use the device view in the browser's developer tools, pick an iPhone size and capture from there.
- Close cookie banners, chat bubbles and pop-ups. They're the first thing people notice in a mockup.
If you want to show the whole page, make a scrolling video instead of an image. More on that below.
Choose the device
- MacBook: the most common choice for portfolios and SaaS sites. A MacBook at a slight angle makes a site look real and still readable.
- iMac or an external display: for big, airy pages and dashboard interfaces.
- Browser window: no device, just the window frame. Looks clean in docs and blog posts.
- Phone: the mobile version. Most visitors open sites on their phones these days, so leaving it out leaves a gap.
The classic way to show a responsive site is all three side by side: laptop, tablet and phone in one scene.
Scrolling video
The best way to show a long page is a short video where the page scrolls slowly on the device's screen. There are two ways to make one:
- Record the browser while you scroll by hand. Easy, though the speed can be uneven.
- Put a full-page screenshot on the device's screen and scroll it from top to bottom inside the screen. The motion comes out smooth.
Keep the scroll slow so people can read the headings. Three or four sections in 10–15 seconds is plenty.
Background and angle
A light tint of one of the site's own colours makes a good background. Busy colours or photos compete with the screen.
Don't overdo the angle. A slight tilt makes the device look alive, but the more the screen turns, the harder the text is to read. When the point is to show the site itself, keep the device almost face-on and save the angled shots for the opening image.
Tips for portfolios
- One laptop image, one phone image and a short scrolling video per project make a good set.
- On Behance and Dribbble the first image becomes the cover, so make it your strongest scene.
- Use the same device, light and background tone throughout. The portfolio looks consistent instead of scattered.
