3 ways to show screenshots of your product


As I’ve been working through and applying my 9 Principles behind an Effective Landing Page, I’ve been experimenting with different ways to “show” what Braintrust and Tout does. So far, I’ve found about 3 ways to effectively show people what your app does, and 1 that I’m absolutely in love with.

There is the “show the app in all its glory, and point to stuff and explain what is going on without getting in the way”

Braintrust Screenshot 1

Then, there is the “show the app in all its glory, but don’t count on people moving their eyes back and forth AND reading so put it the explanations on top of the app” way

Tout Screenshot 1

While this worked pretty well, I never liked the messyness this introduced. And then, I saw Panic’s amazing solution to this problem.

Screen Shot 2010 05 05 at 5.59.13 pm

So far, I love this one the best. It has these emitting red dots around interesting areas. The red dots emmit a red halo and basically call out “hover over meeee!!” and when you do, the explanation appears gracefully.

I haven’t gone on to implement this technique yet, but it looks like this tutorial on mimicking imagemap behavior using CSS is the way to get this going along with some jQuery tools tooltip action.

  • Peter Jennings

    Interesting approach. My documentation could do with some improvement, so this has given me some useful ideas. Just of interest, what software do you use to create the first two example screenshots?

    • http://www.tawheedkader.com Tawheed

      I use Omnigraffle.