Interactive Prototypes
Ten ways to browse
site media.
Ten distinct interaction concepts for managing site documents — SOPs, risk assessments, medical certificates, policies, training records, site plans, and images. Each makes different trade-offs. Explore them all and compare.
The ten concepts
Each concept explores a different interaction paradigm. Click through to experience the full prototype.
Editorial Library
Long-form, readable, magazine-style browsing.
A spacious editorial layout designed for careful, immersive reading. Large previews, generous whitespace, and typographic hierarchy put content first — ideal when documents are complex and benefit from focused attention.
Spatial Canvas
Visual clusters, pan, zoom, explore.
A spatial, canvas-style workspace where documents are grouped visually by type. Drag to pan, scroll to zoom, click nodes for details. The best choice when you need to see relationships and groupings at a glance.
Command Centre
Dense, keyboard-driven, power-user focused.
A dense, keyboard-driven interface with strong search, multi-column filters, and a live preview panel. Built for users managing hundreds of files who need speed and precision over aesthetics.
Activity Timeline
Chronological, activity-led, change-focused.
An activity-led experience organised around revisions, expiry, and recent changes. See what's new, what's expiring, and what needs attention — chronologically. Ideal for monitoring and audit trails.
Knowledge Shelf
Category-first, bookshelf-style library.
A digital bookshelf organised by document type. Browse shelves, pull a document like a book, and open it in a slide-out drawer. The most intuitive, familiar metaphor for category-first browsing.
Liquid Grid
Masonry layout that adapts and breathes.
A fluid, masonry-style grid where document tiles shift and rearrange organically. Sizes vary by importance and expiry urgency — larger tiles for critical documents, tighter packing for archives. Beautiful and responsive.
Constellation
Star-map navigation with orbital clusters.
A star-map interface where documents are stars grouped into orbital clusters by type. Hover reveals connections; click to zoom into a cluster. An exploratory, spatial approach for understanding relationships and navigating by visual association.
Living Index
Encyclopaedic index with chapter intros.
A structured, encyclopaedia-style index where each document type is a chapter with its own introduction, statistics, and curated entry list. Dense yet readable — like a well-edited reference book brought to life.
Pulse
Document health monitor with vital signs.
A document health monitoring interface inspired by medical telemetry. Systems (document types) have vital signs, an ECG traces activity, and critical states highlight expired or expiring documents. Dense, data-rich, and alive.
Glass Vault
Frosted-glass 3D interface with real depth.
A frosted-glass, layered 3D interface where documents float as translucent cards at different depths. Spotlight search blurs everything except matches; selected cards lift forward into the light. Visually striking and spatially rich.
At a glance
A quick summary of where each concept shines. For the full matrix, see the comparison page.
Editorial Library
Spatial Canvas
Command Centre
Activity Timeline
Knowledge Shelf
Liquid Grid
Constellation
Living Index
Pulse
Glass Vault
Ready to dive in?
Pick a concept and experience the full interactive prototype with mock data.