Screenshot specifications
For Dynatrace employees only
Screenshots are a captured view of the Dynatrace platform. Screenshots include all visible working areas of the product, including the Dock.
PowerPoint guidelines
There are two types of screenshots used in PowerPoint presentations: a full slide screenshot, where the image takes up the entire slide, or a partial slide screenshot, where the screenshot exists in addition to some text.
For global events like Perform and Innovate, see Events.
Specifications
| Screenshot type | Full slide | Partial slide |
|---|---|---|
| Use case | Use in slides where the screenshot appears across the entire slide. | Use in presentations alongside text blocks. |
| Aspect ratio | 16:9 (HD) | 4:3 (Classic) |
| Browser resolution | 1920 x 1080 | 1440 x 1080 |
| Image resolution | As high as possible while maintaining the correct aspect ratio and browser resolution guidelines. | Same as full slide. |
| Captured area | Inner part of the browser. No address bar, bookmarks, tabs, etc. | Same as full slide. |
| Screenshot format | PNG | PNG |
| Product state | Collapsed Dock | Collapsed Dock |
| Theme | Dark mode and light mode | Dark mode and light mode |
Additional requirements
- Themes: Capture your screenshot in both light and dark mode for reference. Never mix light and dark modes in a single presentation. Dark mode is preferred; only use light mode if the presentation style requires it, in which case, use light mode consistently.
- Generation: Take all screenshots in a 3rd gen environment (latest Dynatrace). Capture both 3rd gen apps and 2nd gen "classic" apps alongside the 3rd gen Dock.
- Dock: Include the Dock in all browser resolutions and aspect ratios.
- Security: Follow all screenshot privacy and security standards.
- File format: Prepare all screenshots as PNG files without transparency (WebP and JPEG are acceptable where required; however, we recommend PNG by default).
Post-production
After you capture your screenshot, don't reduce the size or compress the image (for example, scale it down by 50%). You may, however, crop the image if required.
After capturing a screenshot with the browser’s built-in tool, you may use Snagit for edits, modification, annotations and callouts. Don't resize or compress the image when making changes.
Global event guidelines
Global events–such as Perform, Innovate, or other local customer events–may include mainstage events as well as breakouts and other, smaller events.
Specifications for mainstage events
There are two types of screenshots used on the mainstage: a fullscreen or a super-wide screenshot.
| Screenshot type | Fullscreen | Super-wide |
|---|---|---|
| Use case | Standard use for all mainstage slides. | Special use; only if requested. |
| Aspect ratio | 16:9 (8K) | 21:9 (Cinematic) or 27:9 (Cinematic wide) |
| Browser resolution | 1920 x 1080 | 2520 x 1080 (Cinematic) or 3240 x 1080 (Cinematic wide) |
| Device pixel ratio | 4.0 | 4.0 |
| Image output resolution | 7680 x 4320 | 10080 x 4320 (Cinematic) or 12960 x 4320 (Cinematic wide) |
| Image resolution | As high as possible while maintaining the correct aspect ratio and browser resolution guidelines. | Same as fullscreen. |
| Captured area | Inner part of the browser. No address bar, bookmarks, tabs, etc. | Same as fullscreen. |
| Screenshot format | PNG | PNG |
| Product state | Collapsed Dock | Collapsed Dock |
| Theme | Dark mode and light mode | Dark mode and light mode |
Specifications for breakouts and other events
There are two types of screenshots used at breakouts and smaller events: a full slide screenshot, where the image takes up the entire slide, or a partial slide screenshot, where the screenshot exists in addition to some text.
| Screenshot type | Full slide | Partial slide |
|---|---|---|
| Use case | Use in slides where the screenshot appears across the entire view. | Use in presentations where large text blocks are required. |
| Aspect ratio | 16:9 (HD) | 4:3 (Classic) |
| Browser resolution | 1920 x 1080 | 1440 x 1080 |
| Device pixel ratio | 2.0 | 2.0 |
| Image output resolution | 3840 x 2160 | 2880 x 2160 |
| Image resolution | As high as possible while maintaining the correct aspect ratio and browser resolution guidelines. | Same as full slide. |
| Captured area | Inner part of the browser. No address bar, bookmarks, tabs, etc. | Same as full slide. |
| Screenshot format | PNG | PNG |
| Product state | Collapsed Dock | Collapsed Dock |
| Theme | Dark mode | Dark mode |
Additional requirements
- Themes: Only dark mode is accepted for events and large-screen presentations. Always capture screenshots in both light and dark mode for reference.
- Security: Follow all screenshot privacy and security standards.
Website guidelines
These specifications are for screenshot use on all website pages.
Specifications
| Specification | |
|---|---|
| Use case | Use on all website pages. |
| Aspect ratio | 16:9 (4K) |
| Browser resolution | 1920 x 1080 |
| Device pixel ratio | 2.0 |
| Image output resolution | 3840 x 2160 |
| Image resolution | As high as possible while maintaining the aspect ratio and browser resolution guidelines. |
| Captured area | Inner part of the browser. No address bar, bookmarks, tabs, etc. |
| Screenshot format | PNG |
| Product state | Collapsed Dock |
| Theme | Dark mode and light mode |
Additional requirements
- Themes: Capture your screenshot in both light and dark mode. For 3rd gen pages, capture the full screen in both light and dark mode. When pages display a 2nd gen screen, it is not required to change the mode of the screen, but it is required that the Dock is captured in both light and dark mode.
- Dock: Include the Dock in all browser resolutions and aspect ratios.
- Security: Follow all screenshot privacy and security standards.
Hub guidelines
Screenshots used in the Hub use a 16:9 aspect ratio.
For global events like Perform and Innovate, see Events.
Specifications
| Specification | |
|---|---|
| Use case | For use in the Hub. |
| Aspect ratio | 16:9 |
| Browser resolution | 1920 x 1080 |
| Image resolution | As high as possible while maintaining the correct aspect ratio and browser resolution guidelines. |
| Captured area | Inner part of the browser. No address bar, bookmarks, tabs, etc. |
| Screenshot format | PNG |
| Product state | Collapsed Dock |
| Theme | Dark mode and light mode |
Number of screenshots
It's mandatory to provide at least one screenshot, but you can upload up to eight. Include the number of images you feel is required to communicate the value of the technology and to show the most essential features. That said, try to avoid visual fatigue. If a screenshot does not add additional information or value, it does not need to be included.
Use of a storyline
To provide a realistic screenshot of the platform that matches user expectation, create a storyline that walks through the ideal journey or experience. Additionally,
- Think about the order the screenshots should be provided in to best reflect this storyline.
- Use sample data and follow all screenshot privacy and security standards.
- Avoid using empty states and try to capture the screenshot with a clear focus point.
- Start with screenshots that provide a good overview of the whole product, afterwards, add screenshots that show the product "in action" or that show details.
Description of screenshots
To help users understand the special feature or benefit shown in each screenshot, add a short description. Descriptions should be limited to within 100 words. Tie the description into the storyline you create. If displaying on a website, be sure to repurpose these descriptions as image Alt text for SEO purposes.
Callouts
Avoid callouts, reduce visual clutter, and do not rely on these screenshots to train or onboard users. The screenshots should only give an overview of use cases and functionalities of the technology listed in the Hub.