Creative Paths to Better Screenshots

Images comprise a large proportion of our sites. They give us depth and perspective in ways that text simply cannot produce on its own. Yet as web designers, many of our portfolio sites take advantage of one common type of image above all others, the screenshot. Showcasing our work effectively and using screenshots in new and innovative ways can really boost our visitor’s experience of a portfolio, yet many of us simply stick to boring fixed dimension thumbnails that don’t do our hard work justice.

Creative Paths to Better Screenshots


Producing great screenshots can be challenging. Knowing how to maximize the use of the space you have available can be the difference between getting a visitor’s interest and chasing them away. This article will show you what factors you need to take into account to turn that quick snap of a website you built into something artistic. Screenshots aren’t just images: they’re artistic, digital photographs which deserve to be portrayed in the best way possible to provoke your visitors own imaginations.

First Impressions Really Matter

When we talk about images in the scope of web design, one overriding factor which can’t be avoided is the size of the image. With slow connections still abundant, cellphones with limited data plans and trying to connect to a public Wi-Fi (at a popular event) suffering bandwidth restraints, getting to see those all important images can be tricky. As you produce screenshots, it really pays to try and reduce the size of those images. Compression, color reduction, size reduction and more can help with this.

Smushit
Tools like Yahoo SmushIt can really squeeze some extra juice out of your images.

Yahoo SmushIt

Another tip for fantastic screenshots relates to the quality of the image. With decorative images, the odd blemish or quirk may go unnoticed. But as screenshots actually become part of the content in displaying a physically created work such as your layout or product or service, the quality needs to be high enough not to put people off. A classic mistake many make is (for example) to only include a tiny low-res thumbnail without a “full size” equivalent served via lightbox, links or something else.

A low quality image with lots of artefacts won’t appeal to users or look professional.

Awesem

Of course, while the quality of the image on its own can be problematic if there’s lots of artefacts on the screen or lossy compression going on, the size of images can be problematic too! We have just mentioned about the need for a full size (to scale) version which has no distortion if the site or a working demo isn’t available), but it’s also worth mentioning that how you stretch or skew an image can adversely affect its legibility. So always take the time to check your screenshots make sense.

Size really does matter in the overall context of your screenshots on-page visibility.

Awesem
Screenshots on Page

Your screenshots should be a good file size the acceptable range may differ, be of a good quality readability and be sized appropriately for your site consistency is key, so if they’re shown together make them of equal size. Another good tip for screenshots is to decide which method of capture will best showcase your content as you could grab the full screen and force it to scale to a size you require or a portion of the screen at its full size (the situation should determine which route is best).

Sprawsm
You could either increase or decrease the image scale or just grab part of the screen.

Sprawsm

Visual Unique Selling Points

At this stage, you’re probably wondering how we can give our screenshots a bit more of a unique sense of self as currently all of the tips have been pretty generic to images in general. The first tip which can give your images a bit of a unique flair is the use of angles and shapes. Rather than having just a boring rectangular box, perhaps you could examine using ovals, circles, squares, stars or other “cookie cutter” effects to make those images a bit different even rounded corners can be cool.

Advuli
Using shape as well as texture can really improve the uniqueness that is offered.

Advuli

Another tip which can draw focus to the shape itself is through the use of borders and depth. If you have applied borders to a box of content using CSS before, you’ll understand the impact it can have, yet few people seem to really explore using borders or shadows in their screenshots. Consider how a patterned border (perhaps even one that overlays the actual image) may help, experiment with the use of color in borders such as gradients and maybe even be daring enough to use shadow effects.

Foundation Six
Applying a border and shading to the edges will make the object more distinctive.

Foundation Six

Next up you could consider experimenting with the perspective of the image itself. Screenshots do not need to be 2D flat representations of the page, you could rotate the content at an angle, make it explode out of the page using some visual effects or even rotate the entire image at a strange angle to give it a bit more emphasis upon the page. Often our images can feel “tied” to a page, so using these effects can help to boost its visual priority, making it feel perceptively closer to our eyes.

The Visual Click
Getting into the third dimension can be as easy as applying some angles and curves.

The Visual Click

In addition, other visual effects can be used to improve your work. Color filtration could be used to categorize your images visually based on their content like using yellow shades for design, blue for code, or red for other work. Also, blur effects draw attention to specific parts of images, opacity and transparency effects can fade the reference to the work if you don’t want to overload viewers, and you could even consider stripping away all of the color for some classy black and white snapshots!

It’s like being in an old movie! Using a graystyle filter can provide that film noir look.

Gray Style

Leaping Right Out of the Page

So you can optimize the image to work better, you can apply visual effects to portray a unique and cool visual look, what else is there? Well like with much of web design, it’s not about the objects just existing on the page, but what we can actually do with them. Interactivity plays as much a central role in the web design process as visual aesthetic and because images can be made interactive themselves, we shouldn’t eliminate the features that lightboxes, gallery scripts and other things could provide.

Huddle Together
Lightboxes allow you to provide a full screen preview for images in a smaller space.

Huddle Together

Animation is something that many screenshots never seem to take advantage of, which seems quite odd as if done correctly it could really draw some attention to the page you’ve never seen before! Just think of the average screenshot, snapping part of the page. Why not play with the thought of it slowly scrolling down the page, revealing other content as it goes. Perhaps this slightly hypnotic type of “reveal” isn’t for everyone – but screenshot production can be quite innovative and creative too.

When you have screenshots on the page, hover effects can be a quite classy way to make things a bit more fun and interesting for visitors. Perhaps you’ll have a black and white screenshot fill with color as it is rolled over, maybe you’ll annotate the image with some useful information, and perhaps you may even zoom into the page using some clever CSS sprite trickery. Taking advantage of a user’s own inquisitive nature could be beneficial in encouraging those views and clicks your portfolio requires.

Shyama Golden
You could have the above label appear as a hover event using some CSS code.

Shyama Golden

And one final tip to round things off. No matter how many screenshots you display on the page, you should always go out of your way to ensure that they are well labelled and aren’t just seen as a random image appearing on the page. Screenshots are a type of content rather than a visual flourish and it’s important for accessibility that alternative content is made available for users. Mystery meat navigation is never a good idea, so users should be able to work out what those visuals represent.

Apps to Get You Started!

Producing a screenshot has never been easier. While many OS’s have some basic screen capture option using the PrtSc aka “print screen” button or clicking the power and home screen button on iOS, a whole range of professional tools have appeared to really let you to maximize the quality and uniqueness of your images. The below lists just a few of the awesome tools that are out there, both paid, free and within the OS some drawing apps may have their own built in feature to do this.

The Windows to the Soul

Screenshots in general seem to end up pretty boring and not given too much thought perhaps due to designers hoping the work will speak for itself. By applying a few extra touches or by emphasizing the amazing work you’ve produced, it will not only make your portfolio look unique but may actually encourage more clicks through to those sites. Obviously when you take a screenshot, you want it to be a fair representation of what you’ve built but that doesn’t mean you can’t maximize its impact.

The designer’s portfolio is the hub of their creative output and screenshots are a fantastic method to communicate our skills to visitors. By throwing a few effects at our work we can enforce some kind of visual consistency and avoid some images hogging all of the attention, not only this but we can also better promote our content to those who may want to employ us. Designers spend a lot of time beautifying their layouts so it’s time our galleries and portfolios gained the same care and attention!

Questions

Have you got any really unique screenshots that you think really push the artistic value of the screen? How often do you make use of captures in your website (or do you prefer live sites in preference to images)? What’s your favourite screenshot on the web? Let us know in the comments!