Even simple designs benefit from status differentiation. Use color changes, size variations, or icons (e.g., pins or checkmarks) to indicate available, next, or completed activities.

Active state design:

• The active state of an image is triggered by a mouse-over or hover effect.
  Tip: If you prefer your students to explore the activities independently without visual guidance, you can simply avoid uploading an active state. In this case, students will need to click on the objects to discover whether an activity is linked to them.
• Adding a simple glow effect or shadow to your available image or making the color slightly brighter will provide a subtle but noticeable highlight.
  Note: If you choose to add shadows, be aware that the object will become slightly larger. This can cause a “jumping” effect when switching states unless you export your files as an artboard, ensuring consistent dimensions.

Unavailable status:

• A grayscale image is an easy way to indicate unavailable activities.
• If no image is uploaded, Level Maps automatically applies semi-transparency and a lock symbol to the ‘unavailable’ image.
  Tip: If you don’t have a specific unavailable image but want to avoid semi-transparency, simply upload your available image as the unavailable image as well.

Creative Progression:

Tip: Variations in the size or position of objects should occur within a defined artboard that always has the same dimensions. Export your file as artboard (png with transparent background) to create the following effects.

Create zoom effects by variation in size:

Convey a sense of movement by variation in position:

Play with transparencies of images to show progression:

Bring activities to life by telling a story through their status changes. Pins can indicate the status of your activity, too:

Add surprise elements like something transforming into an unexpected object upon completion:

Use GIFs to animate activities as shown in our demo courses: