---
title: "Handbook Image Strategy"
slug: "handbook-image-strategy"
updated: 2026-10-27T23:12:51Z
published: 2026-10-27T23:12:51Z
canonical: "ims-handbook.cenosco.com/handbook-image-strategy"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://ims-handbook.cenosco.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Handbook Image Strategy

The Handbook Image Strategy aims to ensure visuals in our documentation improve clarity, reduce user effort, and remain maintainable over time. Think of images as functional elements, not decoration.

## When to Use Images

Use images only if they provide clear added value:

- **Explain complex concepts** (architecture diagrams, workflows, data flows). If the reader must “picture it in their head,” consider a visual.
- **Support UI navigation** (when users must locate or recognize elements, follow a navigation path). Even clear text instructions can be ambiguous in a complex UI.
- **Clarify multi-step procedures** (especially when small visual details matter). Use images ONLY when small differences matter and one wrong click leads to failure. A good rule of thumb is to focus on steps where users commonly get stuck or make mistakes.
- **Show expected results** (correct UI states, outputs, comparisons). Use images ONLY when a correct vs incorrect configuration could lead to excessive issues in the future.

## When to Avoid Images

Do not use images if:

- The same information is clear in one sentence.
- The image duplicates the text (it does not offer any additional value).
- The UI or feature changes frequently.
- The image adds no new information.
- The content is better as text (code, commands, values) that users can copy and paste.

## Best Practices

When using visuals, keep the following best practices in mind.

1. **One image = one idea**. Each image should represent a single concept or step. Do not combine multiple steps or highlight several actions in one screenshot, as this reduces clarity and makes instructions harder to follow. To clarify, use an image to highlight features in IMS (with numbers), but avoid using an image to highlight several steps/actions.
2. **Make every image purposeful**. Unnecessary images dilute attention and make content harder to scan. Users start ignoring visuals altogether if too many feel irrelevant. For example, keep a screenshot showing where a hidden setting is located, but do not include a screenshot of a clearly labeled “Save” button.
3. **Keep visuals simple and focused (crop, remove noise)**. Crop to the relevant section, blur or remove irrelevant areas, and avoid full screen captures unless necessary.
4. **Annotate when needed (highlights, arrows, boxes)**. Keep annotations minimal and simple.
5. **Always pair images with text**. Users often scan text first. NEVER use images only. Visuals support text. For this reason, no captions are required.
6. **Choose the right visual type**.
  - Screenshots – UI actions
  - Diagrams – architecture or relationships
  - Flowcharts – processes and decision paths

1. **Ensure consistency (style, labels, terminology)**. Always use the same highlight color, annotation style, and UI theme (do not mix light and dark mode). Use [Screenpresso](/v414/docs/handbook-image-strategy#using-screenpresso) to create annotations for screenshots. For diagrams and flowscharts use [Figma Jam](https://www.figma.com/files/1099293640106214971/team/1202239114970407794?fuid=1227976406162218181) and align with the Cenosco brand colors.
2. **Optimize for maintainability**. Use fewer, high-value images. Avoid screenshots of UI that are prone to changing every few releases. Outdated images are one of the fastest ways to lose user trust and they are expensive to maintain.
3. **Avoid using inline images**. Inline images tend to break layout consistency across devices and screen sizes, leading to misalignment and reduced readability.
4. **Use realistic data in screenshots**. Avoid placeholders like “TEST,” “DEMO,” or generic labels such as “Vessel 101,” as they reduce credibility and make the product feel unfinished. Using realistic names, scenarios, and data increases perceived value and helps users better relate the documentation to real-world use.

> [!WARNING]
> Caution
> 
> Realistic does not mean real. Do not share client sensitive data when making screenshots. Always blur real data (when it is sensitive) on screenshots you are using in the IMS Handbook.

### Using Screenpresso

We use [Screenpresso](https://apps.microsoft.com/detail/9n3grqtx1qpf?hl=en-GB&gl=HR) to create annotations for screenshots. To ensure consistency across the Handbook, always use the same annotation styles.

Although the tool is user-friendly, this section covers the most commonly used drawing tools and their recommended settings. You may need to adjust the settings the first time you use each drawing tool. After configuring them, click **Set Default** to reuse the same settings in the future.

The following drawing tools and settings are most commonly used:

****Arrow****

- **Type**: Simple arrow
- **Color**: Red (HEX code: FF0000) - Click the *Color* dropdown menu and select the second standard red from the left.
- **Opacity**: 100%
- **Pen width**: 5px
- **Shadow**: 50%

![](https://cdn.document360.io/e492a0e0-a4ba-4aca-8fc6-76b95f91fdf3/Images/Documentation/Arrow.png?sv=2026-02-06&spr=https&st=2026-10-28T10%3A53%3A24Z&se=2026-10-28T11%3A53%3A24Z&sr=c&sp=r&sig=ZQwVsWKBKOMZNvcYVebKYyWMQGNO53%2BQ6ybjSLHVkbQ%3D)

****Rectangle****

- **Color**: Red (HEX code: FF0000) - Click the *Color* dropdown menu and select the second standard red from the left.
- **Opacity**: 100%
- **Filling**: 0%
- **Pen width**: 2px
- **Border curvature**: 10px
- **Shadow**: 50%
- **Blur**: Select this optional checkbox if you would like to blur everything but the rectangle on your image.

![](https://cdn.document360.io/e492a0e0-a4ba-4aca-8fc6-76b95f91fdf3/Images/Documentation/Rectangle.png?sv=2026-02-06&spr=https&st=2026-10-28T10%3A53%3A24Z&se=2026-10-28T11%3A53%3A24Z&sr=c&sp=r&sig=ZQwVsWKBKOMZNvcYVebKYyWMQGNO53%2BQ6ybjSLHVkbQ%3D)

****Text****

- **Text alignment**: Default (left)
- **Font**: Arial
- **Text color**: Red (HEX code: FF0000) - Click the *Color* dropdown menu and select the second standard red from the left.
- **Font size**: 14 px
- **Opacity**: 100%
- **Glow options**: Feel free to ignore
- **Shadow**: 0%

![](https://cdn.document360.io/e492a0e0-a4ba-4aca-8fc6-76b95f91fdf3/Images/Documentation/Text.png?sv=2026-02-06&spr=https&st=2026-10-28T10%3A53%3A24Z&se=2026-10-28T11%3A53%3A24Z&sr=c&sp=r&sig=ZQwVsWKBKOMZNvcYVebKYyWMQGNO53%2BQ6ybjSLHVkbQ%3D)

****Numbering****

Use the default option.

- **Fill color**: Red (HEX code: FF0000) - Click the *Color* dropdown menu and select the second standard red from the left.
- **Text color**: White (default)
- **Opacity**: 82%
- **Filling**: 0%
- **Size**: 3
- **Shadow**: 50%

![](https://cdn.document360.io/e492a0e0-a4ba-4aca-8fc6-76b95f91fdf3/Images/Documentation/Numbering.png?sv=2026-02-06&spr=https&st=2026-10-28T10%3A53%3A24Z&se=2026-10-28T11%3A53%3A24Z&sr=c&sp=r&sig=ZQwVsWKBKOMZNvcYVebKYyWMQGNO53%2BQ6ybjSLHVkbQ%3D)

****Highlight****

Use the default option.

- **Color**: Yellow (HEX code: FFFF00)
- **Opacity**: 35%

![](https://cdn.document360.io/e492a0e0-a4ba-4aca-8fc6-76b95f91fdf3/Images/Documentation/Highlight.png?sv=2026-02-06&spr=https&st=2026-10-28T10%3A53%3A24Z&se=2026-10-28T11%3A53%3A24Z&sr=c&sp=r&sig=ZQwVsWKBKOMZNvcYVebKYyWMQGNO53%2BQ6ybjSLHVkbQ%3D)

****Blur****

Use the default option (**Blur level**: 17).

![](https://cdn.document360.io/e492a0e0-a4ba-4aca-8fc6-76b95f91fdf3/Images/Documentation/Blur.png?sv=2026-02-06&spr=https&st=2026-10-28T10%3A53%3A24Z&se=2026-10-28T11%3A53%3A24Z&sr=c&sp=r&sig=ZQwVsWKBKOMZNvcYVebKYyWMQGNO53%2BQ6ybjSLHVkbQ%3D)

## Common Mistakes

When used incorrectly, visuals do more harm than good. Avoid the following:

- Decorative images
- Duplicating text with visuals when unnecessary
- Unannotated screenshots with lots of details
- Too many images
- Outdated or low-quality visuals

## Final Checklist

- [ ] Does the image add value?
- [ ] Is it clear and focused?
- [ ] Is it annotated if needed?
- [ ] Is it explained in text?
- [ ] Is it consistent?
- [ ] Will it remain accurate?