Posts Tagged ‘Screenshot’

Screenshots are a part of web design process and we use them for many reasons; sharing with colleagues/customers, comparing versions, etc.

And, there are various browser extensions that simplify taking screenshots. qSnap is another good one which has support for all major browsers.

Browser Screenshot Extension - qSnap

You can choose to select to capture the visible part or the full screen. Once captured, a built-in editor can be used to edit it (crop, resize..).

Also, with a free membership, qSnap simplifies sharing the screenshot(s) with others.

When presenting web or app prototypes to people (clients, collagues, friends..), showing it inside a real-world-like environment helps them to imagine easier.

PlaceIt is an awesome and free service, created by the talented folks at Breezi, that allows us to upload the screenshot of our prototype and get it placed in different environments.

The service already has multiple themes (like a hand holding the device or the device placed on a desk) and it has shots for iPhones, iPads and Macs.


Screenshots can be uploaded with drag ‘n’ drops or mentioning the URL and the output will be rendered instantly.

New themes are added within time and, if you have similar themes, you can send them to the Breezi team and they may add it as well.

Website previews were always a part of web content: the thumbnails in CSS galleries, a website screenshot in an article, etc.

They were static as expected. But for the last few years, using live or instant previews became much easier which is a far better experience (for the reasons shared below).

And lately, Google launched "Google Instant Previews" in its search results making this more a reality than only a trend.

Now, it won't be wrong to expect such functionality spreading into other websites/web apps.

Instant Website Previews

Advantages for end-users

Better search accuracy

Once a user has made a search and seeing the result as not only links but with images, a better decision can be given on "if the result is related to the search or not".

Let's say, the user searched for "Ajax" (asynchronous JavaScript and XML), I'm pretty sure he won't prefer the link going to an article about the Ajax soccer team -if he's not a fan by chance- : ).

Prevent re-visiting same URLs

It is more likely to remember the look of a web page rather than the URL.

Users generally find themselves clicking on a URL that they had already visited. Previews can help preventing this.

Filter foreign and non-available websites

The link that is about to be clicked can have the information the user is searching for but it can be in a foreign language or the page may not be available.

For anyone who is clicking many links after a search, that can be a real time-saver.


Advantages for developers

Besides offering an option to users to find out where they are about to be forwarded, there are several advantages for developers:

Automated screenshots

If your web application is anything to do with the screenshots of websites, getting them automated would clearly be awesome.

It can be a CSS gallery, an ad network displaying images of websites, a directory, etc.

Flexible dimensions

As the previews are generated instantly, it should be possible to create them with any size preferred.

This is a great feature for a website whose design is changing regularly or if the same screenshot needs to be used in different layouts.


When to use them?

Like any other element to be used in web design, "functionality" is usually the right answer.

Instant thumbnails are definitely not for every website like a corporate one with few links or an e-commerce website who usually links to its sub-pages.

On the other hand, it perfectly fits into search pages, directories, social bookmarking or any other website with lots of links to external resources.

As usual, how Google does it is an example case: it is optional, so easy-to-use and helps reaching to the right point faster.


How to use them?

You have 2 options for that. Let's start from the easy one first.

Using Website Thumbnail Services



ShrinkTheWeb is a very stable instant website previews provider that offers many options for customizing the screenshots like:

  • real-time captures
  • multiple sizes
  • Flash embed or HTML
  • API support
  • optional permanent caching and more..

For basic usage, they have a free plan which can cover a high percentage of websites.

The service also offers plugins for popular applications like WordPress, vBulletin and more for faster integration.


SnapCasa LogoSnapCasa is another service which has free-to-paid plans with custom image sizes and slow-to-faster screenshot processing depending on the plan preferred.


websnaprwebsnapr also has free and premium plans.

Different image sizes can be served and it is possible to remove "powered by" info according to the plan you're in.

Setup a website screenshot tool

If your website is not hosted on a shared account and you have the control of the server, than there are various tools that can capture website screenshots from command-line like:

  • CutyCapt – for getting screenshots via WebKit browsers
  • IECapt – a tool for website previews with IE
  • SiteShoter – for getting screenshots via IE
  • khtml2png – for capturing on Linux machines

However, keep in mind that setting up such a tool may require extra coding like getting the image created to the folder you prefer, etc. Simply, it can become complicated.

Pattern App (previously UI Pattern Factory) is both an user interface design pattern library and UI gallery where it is possible to find the best practices, get inspired, and share your solutions with others.

The website is mostly focused on web-based business applications & shares patterns like:

UI Pattern Factory

Pattern App is also a place where you can ask & vote for new pattern ideas in their forum or add new images to the currently published ones via Flickr.

Well-categorized design patterns are great resources for inspiration. You can easily see how "others" found a succesful way for common design problems.

UI Patterns is an online library which shares design patterns in various categories like:

  • image zoom
  • input feedback
  • password strength meter & many more.

UI Patterns

There are 3 main categories in the website:

Also, you can easily contribute to the content & check out the UI Patterns blog which has informative posts.