Skip to content

Image copy style guide

Image Styling Tools: Use Skitch (available free through Evernote) for applying image styling (blurring, emphasizing image components, cropping).

Don’t embed important text inside images: Avoid embedding text inside images as not all users can read English text (and page translation tools do not translate images). This text should be provided in the article. Provide alt text for images for maximum accessibility for users.

DoDon't
Example of correctly not embedding text in an image.Example of incorrectly embedding text in an image.

Optimize placement and sizing: Whenever possible, place images near relevant text and be mindful to use image styling markdown to resize larger images. For some content, this should be done by anchoring text to the left or right side of the page depending on the image and the space available.

DoDon't
Example of correctly optimizing image placement.Example of incorrectly optimizing image placement.

Cropping: Crop relevant sections closely. Unless necessary, do not include the left navigation bar and instead include navigation directions in the article. This limits the number of images that need to be changed when UI changes occur.

DoDon't
Example of a properly cropped image.Example of an incorrectly cropped image.
Example of a properly cropped image.Example of an incorrectly cropped image.

Censorship: Blur sensitive information like names, emails, and API keys. Blurring can be done through Skitch.

DoDon't
Example of correct blurring.Example of incorrect blurring.

Emphasizing Components of Images: Do not emphasize components of images unless necessary. Use blue squares (the most colorblind-friendly option) with a thin-medium thickness to highlight different components of images, this can be done through skitch. Make sure the “highlighted sections” do not obstruct the normal UI. Absolutely no skitch arrows

DoDon't
Example of correctly emphasizing components in an image.Example of incorrectly emphasizing components in an image.
Example of correctly emphasizing components in an image.Example of incorrectly emphasizing components in an image.

Cropping Explanation continued {#cropping-continued} Because Braze docs already add a border to each image, omit borders in a section screenshot. We are looking for a clean crop. The border can be left in if there are components that live outside or within the border, see the third image for example.

Do: Example of correctly cropping an image.

Don’t:
Example of incorrectly cropping an image.

Do:
Example of correctly cropping an image.
Github   Edit this page on GitHub
New Stuff!