How to make a step-by-step guide with numbered screenshots
Use numbered pins to explain a setting, answer a support question, or create a short screenshot walkthrough in Framio.
Some instructions are much easier to follow when you can see where to click. A numbered screenshot gives your reader a route through an unfamiliar interface. It works especially well for a small task: changing a setting, finding a document, or checking a connection.
1. Decide where the guide starts and ends
Pick one task and name the outcome. “Turn on email notifications” gives the reader something concrete to complete. “Understand the settings page” is harder to finish and usually leads to too much detail.
Start from a screen your reader can recognize. Capture that area in Framio, or open an existing image. Crop out unrelated content while keeping the navigation and headings needed to find the right place.
2. Place pins in the order of the task
Add pin 1 beside the first control, pin 2 beside the next, and continue in the order the reader should follow. Move a pin if it hides a label. Adjust its pointer so it clearly refers to the intended control rather than a neighboring one.
Keep the same pin style throughout a guide. If you rearrange the sequence, renumber the pins so the image and written steps stay in sync. Split a crowded walkthrough into separate captures when the interface changes between steps.
3. Write one action per step
Write a short instruction for each number in the document or message where you will share the image. Begin with an action such as Open, Choose, or Save, and use the label the person will see on screen. Mention a prerequisite before the step that depends on it.
Describe the expected result when it helps the reader check their progress. For example: “Choose Weekly. The summary will arrive each Monday.” Avoid instructions based only on position or color, which can change between window sizes and themes.
4. Export and try it as a reader
Save the annotated screenshot as PNG or WebP, or copy it directly into your document or message. Keep the written steps beside the image so they remain readable and can be copied into documentation or a support reply.
Follow the finished guide once without relying on memory. Check the numbering, the control labels, and the final result. Remove private details from the exported image before you send it, and revisit the guide when the interface changes.
Give the reader a clear starting screen, a short sequence of actions, and a way to know they have finished. Everything else is optional.