Annotated project images: how do you make design decisions visible?

Give each image one explanatory job

Write one sentence describing what someone should learn from the image. For example: how was the route from the entrance to the display area organised? If one picture tries to explain every material, lighting choice and process stage, annotations can compete. Use separate overview and detail images when they have distinct responsibilities.

Verify that the decision you describe genuinely belongs to your work. For a collaborative project, identify architecture, photography, implementation and content responsibilities separately. Presenting another team’s solution as your own can make an otherwise attractive portfolio unreliable.

Use markers to connect information, not replace it

Place a short number or simple marker on the image, with a readable explanation nearby. “01 — Entrance” may identify a point without explaining a decision. A concrete observation, such as a separation between arrival and waiting areas, adds meaning. Do not attach unmeasured waiting-time or visitor-growth claims to a visual change.

On phones, keep long explanations in a nearby numbered list rather than baking them into the picture. Match notes to markers using numbers as well as colour. If a hotspot opens information, ensure that keyboard users can reach the same content. Information available only through mouse hover should not carry the essential story.

Explain the conditions of a before-and-after comparison

Say when the two views differ in camera angle, scale or scope. A draft and a completed implementation are not equivalent photographs from the same point in time. Label edited images, redrawings and illustrative models. Do not deliberately degrade the earlier picture to manufacture a more dramatic transformation.

Include a client outcome only with appropriate evidence and permission. Otherwise describe the visible change: for example, the form fields were brought into one column. That observation does not establish that more enquiries followed. Preserve the distinction between an intervention and its measured effect in the accompanying copy.

Read the cover plan notes

Carry the meaning beyond the picture

A short alternative description can identify the image without squeezing every relationship in a complex plan into one sentence. W3C’s complex-image guidance describes ways to pair a brief description with a more detailed accessible explanation. Nearby text can also help sighted visitors unfamiliar with the subject.

In this example, the relationship between entrance, display and route appears in the text list too. “Project image” would not convey that meaning. Conversely, describing every decorative line could obscure the decision. Let the communication purpose determine the detail included in the explanation.

Deliver the explanation with visual and rights checks

Check that every marker points to the same detail on desktop and mobile. If cropping leaves a number visible but removes the object it identifies, revise the crop. Keep the photographer, usage permission and any required client approval in the publication record. Review documents separately when they contain names or private information.

For movement between multiple images, consult our project-gallery guide. The 3A Elevator project page provides portfolio context; the plan in this article is not from that project. Add explanations, rights records and mobile framing checks to the website design handover, alongside the image files.