Merge pull request #11851 from opf/minor-update-to-docs-style-guide-22dec

Added tips on highlighted areas and numbered labels
pull/11881/head
Maya Berdygylyjova 2 years ago committed by GitHub
commit 36491f3b64
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 21
      docs/development/contribution-documentation/documentation-style-guide/README.md
  2. BIN
      docs/development/contribution-documentation/documentation-style-guide/screenshot_area_highlight.png
  3. BIN
      docs/development/contribution-documentation/documentation-style-guide/screenshot_highlights_example.png
  4. BIN
      docs/development/contribution-documentation/documentation-style-guide/screenshot_numberedlabels_highlight.png

@ -399,7 +399,6 @@ Images, including screenshots, can help a reader better understand a guide. Howe
Before including an image in the documentation, ensure it provides value to the reader.
### Capture images
Use images to help the reader understand where they are in a process, or how they need to interact with the application.
@ -410,7 +409,25 @@ When you take screenshots:
- Be consistent: Coordinate screenshots with the other screenshots already on a documentation page. For example, if other screenshots include the left sidebar, include the sidebar in all screenshots.
### Highlight specific areas and add numbered labels
You can highlight a specific area of a screenshot to draw the reader's attention to it. Additionally, add numbered labels to refer to specific parts of the screenshot in the documentation text. These should, however, be used sparingly, since any future changes to the interface require the highlighted areas and labels to be manually added to each updated screenshot.
A highlighted area should be marked with a green rectangle (2px width, *Accent/Accent* color in our design system: #308720). The size of the area will naturally depend on the size of the area you wish you highlight.
![screenshot_highlights_example](screenshot_area_highlight.png)
The numbered labels should be light grey text *(Basic/Grey 6*: #F3F3F3) on a 24-pixel green circle (*Accent/Accent*: #308720) with a light grey outline (2px, *Basic/Grey 6*: #F3F3F3).
![Style guide for numbered labels](screenshot_numberedlabels_highlight.png)
This is an example of a screenshot with both highlighted areas and numbered labels:
![A screenshot of the Notification center with highlighted areas and numbered labels](screenshot_highlights_example.png)
When referring to the numbered labels in the documentation text, use either an ordered list starting at number 1, with the numbers corresponding to the labeled parts of the screenshot. You may also refer to them within a line of text by using the word "Area" followed by the number, in parentheses, like so: "(Area 1)".
### Save images

Loading…
Cancel
Save