“Pop” is a pretty common request in design. While it’s not the most descriptive edit, I typically translate it into adding more contrast to an element. That can be done in lots of different ways, but here are some easy ways to give a more physical feeling to your screenshots or photos.

A Physical Piece of Paper

These shadows have a realistic shape that makes the screenshot look like an actual piece of paper. The realism created with these shadows is what attracts the user’s attention.

http://www.getzcope.com/

http://www.reinvigorate.net/


The Small Bottom Shadow

These are a subtle and easy way to give your screenshots a feeling of depth. This technique makes the screenshots appear to be on a foreground above everything else.

http://paramoreredd.com/

http://www.cobblestonecn.com/

The Angle

Don’t just angle screens for fun, the great thing about these is that they can direct a users attention in a particular direction. While ImageSpark makes it easy to scan from their selling point to the images, eWedding angles the screens to keep the focus on the center image.

http://www.ewedding.com/

http://www.imgspark.com/

The Apple Reflection

Apple made this technique popular, but Panelfly takes their own spin on it and blurs the reflection. The reflection gives the feeling of something being clean and smooth, but still with a certain degree of realism to grab the user’s attention.

http://www.apple.com/

http://www.panelfly.com/

Glowing Background

If you want your screens to “pop” why not have some serious contrast with a light screen on a dark background. The glows in the background give a real physical spotlight feel to focus the user on the screenshot.

http://www.mailchimp.com/

http://www.ohmedia.ca/

Conclusion…

Does that mean every single screenshot, image, icon, button and header text should have these sort of treatments? Of course not. These examples “pop” because of the contrast they make between real world objects (in this case the screenshots) and graphics (gradients, fonts, etc.). These examples are effective because they draw the user in to focus on the product without having to over-design. These different lighting effects also create depth, and present the screenshots in the foreground.

As a portfolio, software, e-commerce site, screenshots are the product and therefore it’s important to show them to users in an effective way. Judging a book by it’s cover may be wrong, but it’s what people do, so win them over with a well presented product.

Related Articles

Comments
  • Chuck Longanecker

    Great post Rick. Screenshots really are the window shopping of the web. Sometimes it’s the only believable impression you can make with a user.

  • Dan

    What about using a 27″ imac with the cosmic purple background and putting the screenshot in the browser window?! This makes everything look great 🙂 I kid.