Graphics

Frame Device

The frame device refers to the rectangular outline that is used in certain designs to frame a shape, text, or image.

Frame Device Usage Guide

Stroke thickness:

Stroke thickness should be adjusted based on scale and background complexity.

Standard thickness: In most cases, a 4–5 pt thick stroke should be used.
Small-scale use (e.g., business cards): A 1 pt stroke is acceptable when placed on light or white backgrounds at a small scale.
Busy or photographic backgrounds: Use a 4–5 pt stroke to ensure sufficient contrast and legibility (as shown in the example above).

In general, the busier the background, the thicker the stroke should be to maintain visual clarity and consistency.

Visual Examples

Frame usage for quotes

Frame usage on QR code

Icon Cluster Framing

Icon cluster framing is where the NEXTDC Acronym icons are arranged in a way to frame content

Icons framing a photo and its caption

Icons framing a box of content

Duotone Images

Duotone imagery is a powerful way to add visual interest and depth to a layout, but it should be used intentionally and sparingly to maintain impact.

Duotone image layout from thenextdc.org

How to make a duotone image?

Duotone images may be created in Photoshop or Canva. Due to variations in image brightness, color, and contrast, manual refinement is often necessary. There is no universal duotone formula and each image will require individual adjustment.

Duotone Steps in Photoshop

Step 1

Image > Mode > Grayscale

Step 2

Select "discard" when the modal pops up for a query to discard color information.

Step 3

The image will now be in black and white.

Step 4

Image > Mode > Duotone

Step 5

A new "Duotone Options" modal will appear.

Ensure "Type" is set to "Duotone"
In "Ink 1" choose a light color
In "Ink 2" choose a dark color
Then press "OK"

Step 6

Bam! You have a duotone image.

Note: You may need to make manual adjustments to the image to ensure it looks correct. Every image is different. (Contrast, brightness, colors)

Duotone Steps in Canva

Step 1

Click on the image in the canva design that you would like duotone.

A contextual toolbar will appear above it
Select the "Edit" option

Step 2

The "Edit Image" sidebar will appear.

In the sidebar, scroll down to the "FX" section and then select the "Duotone" option in the carousel

Step 3

A new grid of options will appear.

Select the "Custom" option

Step 4

For "Highlights" select a light color.

Step 5

For "Shadows" select a dark color.

Step 6

Bam! You have a duotone image.

Note: You may need to make manual adjustments to the image to ensure it looks correct. Every image is different. (Contrast, brightness, colors)

Duotone Use Cases

Accessibility-Friendly Layouts

By simplifying color ranges and contrast, duotone images can improve text readability when used behind copy—especially when paired with proper contrast checks.

Examples:

Text overlays on photos
Headlines placed directly on imagery

Hero Images & Section Headers

Duotones work especially well at large sizes where mood and impact matter more than detail. They create strong visual presence without competing with typography or UI elements.

Examples:

Website hero banners
Landing page section headers
Presentation cover slides

Background or Supporting Imagery

When photography needs to support content—not overpower it—duotones help reduce visual noise while maintaining interest and depth.

Examples:

Website background images
Content blocks behind text
Slide backgrounds

Consistency Across Mixed Photography

Duotones are a smart solution when working with images from different sources, lighting conditions, or quality levels. Applying a duotone treatment can visually unify otherwise inconsistent photos.

When Detail Is Not Critical

Duotones are best used when the subject matter is recognizable through shape, composition, or motion—not fine detail.
Avoid duotone when clarity, realism, or color accuracy is essential

Page updated

Google Sites

Report abuse