We are refreshing some parts of our site and are adding a slider to show some screenshots - does anyone have any advice on taking interesting screenshots / images to use for these purposes?
The application is quite data driven so lots of forms and tables and they are quite hard to make look interesting or sexy - I sometimes see people take screenshots but only use a small part of the screen or rotate them etc. Are there any guides out there to help with things like this?
Thanks
I’m not a professional designer, but I’ve done a couple different things to make my screenshots stand out.
Angling a screenshot to give it perspective is a great way to make it really stand out. Enlarging subsections also help make a boring clip more interesting (use a shadow behind the enlarged clip, and reduce the brightness and contrast of the rest of the image). Overlaying text in a script font is another technique to draw attention to specific areas of the image. Simply populating the screen with interesting/amusing fake content before taking a screenshot can yield screenshots that engage a viewer’s interest. And a simple shadow behind the image can help. I used Trello and Basecamp’s tour pages as inspiration.
Examples of all of the above on my startup’s tour page. I used Paint.NET on Windows to do these, along with the Perspective plugin.
https://placeit.net/ is a handy tool for creating interesting screen shots, you can drop your shot into a variety of scenes on different devices.
First of I’d say if the app is heavily data driven and that’s what helps the customer in the long term that that’s probably what you should display. That said, you could use a magnifying glass effect: http://dribbble.com/shots/91506-Game-on?list=show&tag=zoom or mix the screen shot with copy, arrows and other illustrated elements. Though try and keep it as simple as possible, in my experience if you’re showing a screenshot then people generally want to see what’s on the screen.
I’d also suggest re-considering the use of a slider. They aren’t really effective in getting users to read the content past the first scroll. For example: shouldiuseacarousel.com
I recently did something similar for the SaaS app I’ve been working on. Would this sort of magnifying glasse effect be helpful? http://imgur.com/kOB4BJb
The magnifying glad effect looks good esp where there is a table which can look very boring - is there an “easy” way to achieve it?
I can’t remember where I saw it but I remember reading that you should also try A:B testing the content. Some site tried filling the fake data with different themes as some lead to higher conversions. I think they tested Star Trek vs. Star Wars for example!
This is kind of an aside, but once you have a set of screenshots you like, consider putting them together as a press kit that bloggers and journalists may use, in case they ever write about your product.
That way, you make their job easier while encouraging them to use the best possible visuals of your product as possible.
Also, would like to add that if you’re saving screenshots as png files, check out https://tinypng.com/. It will reduce images by probably more than 50%. I the massive screenshot on https://getmadprops.com was 300k raw and went down to around 70k. Sometimes images end up compressed by 90%!