Vidrio: better screenshots on the App Store

I assume people are finding Vidrio via the App Store. I suspect there are people hitting that page and not quite understanding what the tool is for. The current two “screenshots” don’t do Vidrio much justice. Let’s improve them to make Vidrio look more professional, to explain what Vidrio is, and how to use it.

First, let’s look at some other apps’ screenshots. They aren’t literal screenshots! They use the space to explain the app in whatever visual way they see fit. They’re slides, not screenshots. This is great for Vidrio, because screenshots are pretty difficult.

magnet example

I’m going for the Magnet approach: wireframes. Here’s the breakdown of slides:

  1. Vidrio is Tony Stark’s presentation app. Show a laptop screen with some windows. Show me overlaid, pointing to something on the screen.
  2. Vidrio works with your screen-sharing app. Explanation of steps: (1) Launch Vidrio. (2) Present using some screen-sharing tool (give specific examples).
  3. Vidrio menu bar features.

In the Mac App Store, these screenshots are 800px wide by 500px tall. In the web preview, they are 657px wide. Weird. Let’s design for the 800px size.

On submission, here’s the spec:

These are all at 1.6 aspect ratio, like 800 * 500.

I’m using Inkscape, because I know Inkscape. The macOS support is crap, but I’ll suck it up.

Let’s create at 800*500, and upload at max raster resolution.

I’ll use SF Pro throughout, for that Mac look. Justified on the basis that these are mockups.

Examples of screen sharing apps: