Screenshot standards

To ensure a consistent, accessible and high-quality user experience, all screenshots used on the University website, especially within instructional content, must adhere to the following standards.

By following these standards, we ensure that instructional content remains clear, accessible and visually consistent across the University’s digital platforms.

Dimensions and format

Standard size and orientation

  • Screenshots should be landscape orientation.
  • The standard size is 750 × 500 pixels.

Aspect ratio

Maintain a 3:2 ratio to preserve layout consistency across guides.

File format

  • PNG: Use PNG for sharp, lossless image quality.
  • JPEG: Use JPEG only if the file size must be reduced and no transparency is required.
  • WEBP: Do not use WEBP.
  • GIF: Do not use GIF or animated GIF. If you need to demonstrate a process that requires motion, consider embedding a video instead.

Capturing screenshots

For instructions on how to capture high-quality screenshots using built-in operating system tools, refer to the official documentation:

Quality and clarity

Resolution

  • All screenshots must be high-resolution and clearly legible.
  • Avoid using blurry, pixelated or compressed images.

Cursors

Generally, exclude the mouse cursor from screenshots to keep the image clean.

You may include the cursor if it is necessary to show a specific action (for example, hovering over a menu item or selecting a specific tool).

Contrast

Ensure adequate contrast between interface elements for readability.

Content and cropping

Focus the image

Crop images to remove unnecessary elements to focus solely on the interface or section relevant to the guide.

Remove:

  • browser tabs and address bars (unless relevant to the URL)
  • window bars
  • taskbars or docks
  • desktop backgrounds

Sensitive information

Avoid capturing any personal or sensitive information in screenshots (for example, names, email addresses, or internal ID numbers).

  • Redaction: If sensitive data is unavoidable in the capture, use a blur tool or solid blocks to redact the information.
  • Simplify: Consider using tools like Snagit’s "Simplify" feature to replace text with generic blocks, allowing the user to focus on the UI elements rather than the data.

Visual markup and annotation

Shapes and highlights

  • Emphasis: Use arrows, circles, or boxes sparingly to direct attention.
  • Colour: Use University Red, #ee312a, or a high-contrast colour that stands out against the background.
  • Consistency: Be consistent in colour, size, and style across all screenshots in a guide.
  • Stepped numbers: When illustrating a sequence of actions, use stepped numbers (1, 2, 3) placed near the relevant interface elements.

Text on images

  • Do not add textual notes directly onto the screenshot image. Text embedded in images is not accessible to screen readers and often becomes illegible on mobile devices.
  • Any necessary explanations must be placed in the webpage text or the image caption.

Accessibility

Alternative text (Alt text)

Every screenshot must include a descriptive alt attribute. Alt text allows screen reader users to understand the content and purpose of the image when it cannot be seen.

  • Wording: Do not start with "Picture of..." or "Image of...". Screen readers announce this automatically. However, "Screenshot of..." is permitted if it provides necessary context.
  • Capitalisation and punctuation: Write in full sentences. Start with a capital letter and end with a full stop.
  • Length: Keep alt text under 100 characters. If the image requires a longer description, provide the details in the main content of the page.

Example: "Wifi login screen showing the Connect button."

Links

  • Do not use screenshots as hyperlinks. Clicking an image should not take the user to another page as this behaviour can be unexpected and confusing for screen reader users.

Mobile screenshots

  • Context: Use device-appropriate screenshots that clearly show mobile interface elements.
  • Cropping: Crop out the status bar (battery, time, signal) unless it contains information relevant to the guide.
  • Templates: If needed for clarity, visually frame the screenshot in a simplified mobile device outline.
  • Consistency: Maintain the same alt text and markup rules as desktop images.

File naming and storage

Naming conventions

  • Standards: Ensure your filenames adhere to the University's Filename Standards.
  • Clarity: Use clear, descriptive filenames (for example, wifi-login-step-2.png).
  • Formatting: Filenames must be lowercase. Avoid capital letters and replace spaces with hyphens.

Storage

Organise screenshots in relevant folders based on the guide or service they support.