How to present screenshots of your work

When it comes to presenting screenshots of your work the most obvious choice would be to use a straightforward screen-grab. Today, however, we’re going to look at some alternative methods and discuss how they might be able to make your screenshots that little more interesting.

Not only that, but we’re also going to provide you with some useful freebies and resources to help you present your mockups however you’d like.

 

Browser window mockup

If you want to give your standard screenshot a little something extra, there are plenty of resources available that allow you to showcase your designs in a mockup browser window.

Browser Mockup

Suitable for: websites and web apps

Useful freebies and resources: 

 

Monitor screen photo/mockup

Another way of presenting your screenshots, which has become particular popular with the Dribbble community, is to use angled photographs of the monitor displaying your work. You can also achieve this effect by using photoshop mockups or actions that mimic the effect of a photographed monitor, in which case you won’t have to worry about things such as lighting, reflections or focus.

Monitor Photo

Suitable for: websites, web apps and desktop apps

Useful freebies and resources: 

 

Device photo/mockup

There is a growing selection of device mockups available online that allow you to showcase your designs on a range of devices such as mobiles, tablets, laptops and desktops. The more comprehensive resources provide mockups from a range of different angles.

Device Mockup

Suitable for: websites, web apps, desktop apps and mobile apps

Useful freebies and resources:  

How do you usually present your screenshots? Do you use a method different from those above? Let us know in the comments.

0 shares
  • Daniel Mullins

    There’s also PlaceIt, by Breezi for the low, low, price of $0!

    http://placeit.breezi.com/

    • Pedro Góes

      Not free anymore.

    • Fabian Sanchez

      Thanks for the recommendation Daniel. Placeit will have a new feature next week that will really blow your mind. Take a glance at placeit.net next week around Wednesday.

      • http://shimansky.biz/ shimanskybiz

        commercial stuff – free 400×300 low resolution shots – greedy people

      • http://www.deepsoni.me Deep S.

        Ikr, so expensive.

  • Paulus

    Containing your design within a browser or mobile mockup adds a much needed perspective. When you look at an actual website or app you will also see the device. But using angled shots I don’t get. The design often isn’t that visible anymore. It’s nice for a tease on Dribbble, but shouldn’t be used for any promotional ends (IMO). Arguments can be made for shots with an app used in context/enviroment.

  • Arshad

    Thanks for the collections Sam;

    I have also published free iPhone5 Mockup collection (20 pieces)

    http://designbeep.com/2012/11/09/20-free-and-very-realistic-iphone-5-mockups-to-showcase-your-ios-apps/

  • Rene

    How come i cant see the photos in this article? Its just grey boxes with a tiny picture icon in the middle? Using Chrome…

  • http://www.fasttrackcreations.com/blog Nikhil Malhotra

    Browser window mockup option looks more user friendly some how:)

  • Mane

    Thanks for suggesting my Photoshop Action – 3D Screenizer
    Cheers :)

  • SMG Designs

    Great ideas here guys. We usually place the mock up directly on an image of a computer screen but the angled monitor screen also works and I think we will need to try it out.

    You can view our portfolio here:

    http://smgdesigns.co.uk/portfolio.html

  • Hermann

    You could try iSweetIt (View in App Store), just for iPhone and iPad, but does what it should do, places your design in over 50 templates.

  • http://medialoot.com/ Medialoot

    Thanks for including our freebie in your list. We definitely agree with the unique mockup factor. It totally helps bring attention to app designs and we love making these types of resources :)