• Images and Diagrams

    We use images and diagrams to help learners visualize what they’re learning, illustrate concepts, and show work in progress in guides. These are produced in Figma, and exported in high resolution as PNGs.

    Specifications

    Aspect ratio
    16:9
    Canvas size
    1920×1080
    Export at
    1×
    Format
    PNG

    File organization

    Images are created and managed in Figma.

    Images are kept in their own project, with separate files for each unit (week) of the course.
    Within a unit’s file, images are organized into pages—1 for each lesson, guide, exercise, and project in the unit.
    Each image has its own row. The most recent version of the image is the leftmost, with drafts and revisions trailing to the right.
    To keep track of needs and progress on each image, we keep a title card for each. This can include a title for the image, as well as a caption of its surrounding text and/or a gist of what the image should include.

    A set of components are available for internal usage, and to support creating images.

    These components are currently duplicated between all the files. They should be extracted into a library, and expanded.

    Visualizing construction

    Diagrams help learners visualize what they’re making and how the pieces fit together and work.

    Hug and fill
    Layout regions
    Icon construction
    Component construction
    Content patterns
    Nested components

    Draw attention with contrast

    Help the learner focus on the important content of the diagram.

    • Give content sufficient contrast with its background.
    • De-emphasize less important areas by fading them out.
    • Remove unimportant details.

    Use annotations to add context and explanation

    Annotations can support the intended meaning of a diagram.

    • Consider adding annotations to the side when it’s important not to obscure the learner’s view of what’s being annotated.
    • Place annotations on top of interface elements for easier structural clarity. This approach obscures the content below, so consider placing an unobscured copy side by side with the annotated version, either in the same image or a separate image.
    • Use short, direct labels for clarity. Longer explanatory copy should be kept in the flow of the document, not in the image itself.
    • When annotating design mockups, make sure the visual style of the annotations is distinctive from the design itself. Otherwise, a learner may have difficulty differentiating between the design and its annotations.

    Planning diagrams

    Initial sketch
    Final diagram

    Effective diagrams communicate one idea clearly. Starting with a sketch can help focus attention on the most important details and layout of information in a diagram, before committing to full production, where layout and visual clarity can be refined.

    Simplified screenshots

    Screenshots show important snapshots for learners to confirm their progress as they follow step-by-step guides and learn new software features.

    Component properties
    Instance properties
    Nested instances
    Edit component property
    Selected layers
    Scoping variables

    Clarity and focus

    Screenshots are simplified in order to take full advantage of the canvas, providing learners with an unobstructed view of the most important elements, juxtaposed in helpful ways.

    • Choose which parts of the interface are most relevant to show, and remove the rest.
    • Prioritize clarity over fidelity. If some parts of the screenshot can benefit from scaling larger than the others, don’t be afraid of the potential mismatch. (The discrepancy in scale should not be distracting, however.)
    • Show one thing at a time. Each screenshot should illustrate one particular idea, feature, or stage of a process.

    Composing screenshots

    Original screenshot
    Deconstructed elements
    Simplified screenshot

    Preparing screenshots for production takes some care to achieve the best results.

    1. Set your window to full screen for the highest available resolution.
    2. Frame the design content within view.
    3. Set the zoom level to an appropriate predetermined size, like 100%, 150%, or 200%.
    4. Leave clear space around any UI toolbars which should feature in the final image, so that they can be cropped.
    5. In complex cases with multiple toolbars and panels, take multiple screenshots for each element.
    6. Crop each piece of the screenshot: design contents, toolbars, menus, and panels.
    7. Lay out the pieces on the canvas for clarity and focus.
    8. For cropped UI elements like toolbars, menus, and panels, add back in rounded corners, borders, and drop shadows.
    9. Adjust the scale of each piece for improved visibility. For crisp upscaling, only use 1×, 1.5×, or 2×.
    10. Use the eyedropper tool to match the image background to the canvas.
    11. Make final adjustments to the layout.
    Deconstructed elements
    Scaled for clarity
    Final composition