30 Beautiful Examples of Screenshots in Web Design

Screenshots are commonly used in the design of portfolio sites, template/theme shops, and web app sites. In many cases the screenshots are a major part of the design that helps to attract the attention of visitors. It may be a single screenshot or a group of several screenshots with a 3D effect.

In this post we’ll showcase 30 websites that are using screenshots effectively in their design. Take notice of how the designers are using these images in the design and maybe it will provide some inspiration or ideas that could be useful in you own work.

Shopify

Shopify

HiFi

HiFi

WPZOOM

WPZOOM

Podio

Podio

Syxer

Syxer

Hello Themes

Hello Themes

Theme Shift

Theme Shift

Acosmin

Acosmin

Elegant Themes

Elegant Themes

Huddle

Huddle

Pulse

Pulse

Econeve

Econeve

Envision Theme

Envision Theme

Gravity Forms

Gravity Forms

Graph Paper Press

Graph Paper Press

Invoicera

Invoicera

Highwire

Highwire

Ronin

Ronin

Theme Fuse

Theme Fuse

Sketchdock

Sketchdock

Bara Mail

Bara Mail

Gallery Rush

Gallery Rush

Liveline

Liveline

Skyclerk

Skyclerk

Image Spark

Image Spark

Cobblestone

Cobblestone

PageLines

PageLines

Foundation Six

Foundation Six

Apollo

Apollo

Visua Design

Visua Design

Easily Add Screenshots to Your Own Designs

At Vandelay Premier we have two resources that can help to make it easier for you to create mockups using screenshots. We have a set of 7 PSD files that use 3 different screenshots, and we also have a set of 7 PSD files that use 5 different screenshots. Each is easy to customize with your own screenshots and the effects will be automatically applied. As a special promo for our blog readers you can get either of these resource packs for just $2 (normally $5 and $6). Simply add one or both of the resources to your cart and enter the discount code “readerssave” to get the discount.

For more design inspiration please see:

Published April 26th, 2011 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

12 Responses

Comments are now closed on this post.

  • bigguns, April 26, 2011

    I can see a trend emerging here

  • fractalfrog, April 26, 2011

    Funny to see that almost all screenshots that include the browser are from Safari/Mac considering the market share ;-)

  • Manish Chauhan, April 26, 2011

    Great post and thanks for including Invoicera screenshot in your post :)

  • Ashok, April 27, 2011

    The screenshots are awesome…. Nice post keep it up….

  • Tristar Web Design, April 27, 2011

    I’m not usually a huge fan of screen shots in web design but there is a really nice clean selection here. I like the ‘Econeve’ Usually in sites that incorporate screen shots as their main design, they tend to lay off the colour so the work stands out more. Out of all the sites in this list, it jumps off the page. Very impressive!

  • Larry, April 27, 2011

    These are some real nice screen shots. Wish all the ones I have seen looked this good.

  • Spencer, April 28, 2011

    Another great post guys! Thanks for including Visua :)

  • Leonid Jack, April 28, 2011

    one more, cool screenshot
    http://www.travolutionary.com/

  • sandy thomas, April 29, 2011

    Very nice screenshots. Where we could possibly buy this templates? They all looked professional websites. I like it!

  • WebWhites Design, May 11, 2011

    I love the acosmin design … That’s the one I particularly like; no apparent reason.

    Keep up your good work and I’ll be back to give you some more feedback in the future!

    Bookmarked already :)

  • Joanna, June 16, 2011

    There are very nice screenshot, thank you for putting these together.

    I’m a newbie to photoshop & dreamweaver, just wondering does anyone know what is the common software for these amazing website designer use to create such beautiful sites?

    Or is there any easy-to-use software to create a ‘semi-pro’ website?

    Cheers :)

  • Christian, December 8, 2011

    Thanks for the screenshots! A lots of inspiration :)