Screenshots

Basics

  • Screenshots should be taken from the "People in Space" demo instances of our products, on a retina laptop display
  • Consider how much screen context is necessary to comminicate your concept. For example, when introducing a product where context hasn't been set, it makes sense to use a fullscreen view – but when communicating a specific concept, like SLAs, it makes sense to use a stripped-down, focused view
  • Small adjustments to UI elements or omissions of UI elements are acceptable as long as the change doesn't misrepresent or set false expectations of the product
  • Within your frame, make the screenshot as zoomed in as possible while still maintaining breathing room between UI elements to the frame edge. For on-screen images (as opposed to print pieces), don't let the screenshot size exceed the actual size of the product
  • Be "no bullshit" – show the product truthfully. If you're tempted to create an abstracted image of the product use our illustration style to clearly communicate the concept.
screenshot example
screenshot example
screenshot example

Highlight

Use highlights when you want to focus attention on a specific UI component while still revealing its surroundings to aid comprehension.

  • Highlighting is achieved by tinting the background behind a focus object. The background tint is 10% opacity black
  • The focus object can either be a contained UI object – such as a modal, tooltip, button (fig A) – or a circular container (fig B)
  • The contained UI object should be unaffected by the tint layer
  • The circular object should have a 1px silver (#ccccccc) stroke and a drop shadow at: 12% opacity, 135º angle, 6px size, 6px distance. The circular object can optionally be placed so that it extends beyond the bounds of the rectangular frame
screenshot example Fig. A
screenshot example Fig. B

Annotation

Use annotation to call out particular areas of the UI with added explanatory text. Use no more than three callouts per image. Use no more than 150 characters per callout.

screenshot example

Framing

Standard window framing

Either a rounded rectangle container with a 5px corner radius, or a circle, with a 1px silver (#cccccc) stroke.

screenshot example
screenshot example

No frame

If a UI component can be decoupled from its surroundings, you can let it free-float without a container.

screenshot example

Devices

If it's useful to show the screenshot on a device, use a flat illustration of the device. Show the full view of the screenshot, not a zoomed or cropped view.

screenshot example