Image size
Screenshots should be of a large enough area of the screen that the user can identify where on the page you're directing them.
- If it is a large area of the screen, blur out areas that do not relate to what you're trying to point out.
- If you are on a PC, use the Spotlight & Magnify option - that is the best way to point out the area you want folks to see and blur out the rest of the screenshot.
Arrows, callouts, text, etc.
- Use sparingly. If they are necessary, that is fantastic - use them! But let's try not to have ridiculously busy images.
- If you find you're adding a ton of callouts of various sorts, perhaps it's time to rethink the screenshot / split it into multiple screenshots.
Screenshots support text -- not replace it
Never use a screenshot as the only explanation of how to do something.
- Text should always be in the box with step-by-step instructions on how to do something.
- The screenshot should accompany the text, not replace it.
- This is very important for Accessibility
- Leave the alt text empty by entering a space in the alt text field. (e.g. alt= " ")
Annotation colors
Do not create clown pants images! ;)
- For callouts: use either a bright pink or orange with black text.
- Do not use the bright pink or orange as the text color, as it's too difficult to read.
- If you are adding text over a busy area of the screen, make sure it's in a text box that has a solid white background (with pink or orange edge) so the text can be read.
- If pink / orange do not show up well against the background, use another bright color that does. Basically, the idea is: make the arrow / box / whatever visible.
- Use red if you are telling someone to not do something (either arrow, icon, or text).
Tip: Consider creating a consistent theme for your SLLC that you use on every screenshot
Annotation fonts
Do not use 50 million different fonts.
- Arial works in most cases and is readable.
- As for font size, think about how large the image will be on the screen and make sure the font size is readable.
- Use 16px as the default font size on the site, so try to keep it at least that. Do not go below 12px unless there is a very, very, very good reason.
Adding images to guides:
- Add alt text to images except for purely decorative images or if alt text is not needed based on image context.
- Do not leave the height & width numbers as added by the system.
- Use percentages instead of pixel numbers if you need to resize it at all.
- Remember to put the percentage in BOTH height (always 100%) and width boxes
- If adding a border to the image: 1px solid black.
- If you want to center an image, edit the HTML and assign it the "center-block" class (e.g. <img class="center-block">).