Skip to content

MicroSim Layout Pattern Gallery

Run Fullscreen

About This MicroSim

This MicroSim helps designers choose the appropriate layout pattern for their educational simulations.

Iframe Embed Code

1
2
<iframe src="https://dmccreary.github.io/search-microsims/sims/layout-patterns/main.html"
        height="502px" width="100%" scrolling="no"></iframe>

Description

The Layout Patterns gallery presents three standard MicroSim layout approaches:

Layout Types

  1. Fixed Layout
  2. Single area with minimal structure
  3. Controls overlay or sit below visualization
  4. Maximum space for visualization

  5. Best for: Simple animations, demos, mobile-first designs

  6. Two-Panel Layout

  7. Visualization area + Control panel side-by-side
  8. Clear separation of view and controls
  9. Most common MicroSim layout

  10. Best for: Parameter exploration, most simulations

  11. Three-Panel Layout

  12. Visualization + Controls + Information/Output panel
  13. Dedicated area for data display and feedback
  14. Best for: Complex labs, data-rich simulations

Interactive Features

  • Click any layout to select it and see details
  • Toggle "Show Mobile View" to see responsive behavior
  • Live animated pendulum in each mini-example
  • Comparison table with color-coded ratings

Learning Objectives

After using this MicroSim, students will be able to:

  1. Select the appropriate layout pattern for a given scenario
  2. Compare trade-offs between visualization space and control capacity
  3. Apply layout patterns to their own MicroSim designs

Lesson Plan

Introduction (5 minutes)

  • Discuss why layout matters in educational software
  • Show examples of good and poor layouts in familiar apps

Exploration (10 minutes)

  1. Examine each layout type's structure
  2. Toggle mobile view to understand responsive design
  3. Review the comparison table for trade-offs

Design Activity (15 minutes)

  1. Present 3 different MicroSim scenarios:
  2. A simple pendulum demonstration
  3. A chemistry reaction simulator with multiple parameters
  4. A physics lab with real-time data output
  5. Have students choose and justify their layout selection

Discussion (5 minutes)

  • Share layout choices and reasoning
  • Discuss how audience (mobile vs desktop) affects decisions

References