• Developing Visuals, Interactives, Starter Files

    status
    Draft

    Asset Types & Purpose

    Images

    • What we’re making

      Reference examples, annotated diagrams, before/after comparisons, and fictional UI mockups to illustrate concepts.

    • Why we use them

      To support visual understanding, trigger critique and discussion, and show patterns or principles in action.

    • Real vs. fictional

      • Real UIs = for observation, critique, case studies
      • Fictional UIs = for clarity, didactic examples, or controlled demos (esp. interactives)

    • Style notes

      • Should feel realistic and grounded.
      • Not all in the same visual style.
      • Use system-ui or Inter as defaults unless the point is about typography.
      • Tailwind palette is common, but varied color use is encouraged (esp. in contrast or color-based examples).

    Interactives

    • When we use them

      When the learner needs to adjust something, observe the effect, and form visual judgment.

    • What they look like

      Usually small, focused UI fragments. Full app views only when the larger context is essential.

    • Authoring complexity

      Each is like a mini-project — complexity varies. Some may be difficult for non-developers to contribute to, but technically possible.

    Starter Files

    • Format

      Figma files, ideally standalone and exportable.

    • When we use them

      To scaffold exercises or projects that require a jump-start.

    • What makes a good one

      • Clear orientation and onboarding inside the file
      • Consistent cover image
      • Cleanly organized structure
      • Avoid pre-baked solutions or finished styles that confuse intent

    • Common pitfalls to avoid

      • Learner confusion (unclear scope or objective)
      • Including solution content or “finished” variables/styles
      • Creating expectation that a solution will be provided

    Shared Process Patterns

    Most assets start out as a rough “we think we’ll need something here” — which becomes more specific as content drafts mature.

    A “planned” asset usually includes:

    • A clear description (for images or interactives)
    • Realistic notes on what should be shown or adjusted
    • For starter files: scope, structure, early copy, and asset needs

    Task breakdown depends on context:

    • Related assets (like a set of walkthrough images) should be grouped together
    • Interactive sequences should be bundled when part of a larger flow
    • This requires some judgment — there’s no rigid rule