To ground the University of Dundee Motion System in the institution’s heritage as a UNESCO City of Design, the motion language prioritises forward momentum, academic clarity, and a distinct visual depth.
Rather than relying on flat, two-dimensional transitions, the core of this system is dynamic layering and progressive disclosure, elements overlapping, sliding across one another, and revealing rich content from behind structural blocks. This reflects a modern research university dedicated to discovery and revealing new horizons.
1. Core Motion Principles
Dundee’s brand values—Respect, Collaboration, Integrity, Impact, and Excellence—translate directly into four foundational digital principles:
- Layered: Content rarely appears from nowhere. It unmasks from behind existing UI layers or elevates over overlapping elements, creating a sense of depth and structured discovery.
- Direct: Avoid sluggish, overly bouncy, or decorative animations, transitions are decisive and crisp.
- Accessible: Motion must never disorient or alienate. It respects user cognitive load and device performance, favouring clarity over spectacle.
- Impactful: Every animation serves a functional or navigational purpose, guiding the user’s eye to high-priority actions like Open Day bookings or course applications, or giving visual feedback for an action.
2. Signature Brand Mechanic: Layering and Reveals
The defining characteristic of the Dundee digital interface is the overlapping reveal. Instead of standard cross-fades, structural elements interact through physical depth and stacking.
The Layer Reveal
When a user navigates to secondary information, such as entry requirements or tuition fee breakdowns on a course page, the primary foreground panel slides vertically up into place to present the body content to the user, this acts as visual feedback, showing that the page content has changed (when the layout is otherwise the same).
Overlapping Elevation
Interactive components, such as news items or research highlights, sit in an overlapping arrangement. Upon selection, the target card elevates along the Z-axis and expands across the foreground. Surrounding cards recede slightly in scale and opacity, reinforcing focus while maintaining spatial context.
Masked Emergence
Typography, photography, and graphical blocks do not simply fade into view during page loads. They unmask by sliding smoothly from behind solid, branded colour blocks. This technique mimics physical print layers sliding apart to display the content underneath.
3. Easing Tokens (The Curves)
The motion system uses three tailored easing curves designed for modern web and mobile applications. Each curve conveys a confident, natural rhythm.
| Token Name | CSS cubic-bezier | Visual Behaviour | Primary Use Case |
| Dundee Impact | cubic-bezier(0.15, 0.85, 0.30, 1.0) | Rapid initial acceleration followed by a long, graceful deceleration | Sub-layer reveals, hero image unmasking, major modal overlays |
| Dundee Direct | cubic-bezier(0.20, 0.00, 0.20, 1.0) | Smooth, even acceleration and deceleration with minimal lag | Accordion toggles, overlapping card expansion, menu dropdowns |
| Dundee Subtle | cubic-bezier(0.40, 0.00, 0.60, 1.0) | Linear and subtle shift with a soft easing at both ends | Hover states, colour transitions, background opacity shifts |
4. Duration Scale
To maintain a responsive and snappy feel across complex interfaces, durations are kept deliberately tight.
| Token | Duration | UI Application |
| Micro | 100ms - 150ms | Button hover states, filter tag selections, form focus rings |
| Responsive | 200ms - 250ms | Dropdown menus, accordion expansions |
| Structural | 300ms - 400ms | Overlapping panel reveals, mobile navigation drawers, card elevations |
| Narrative | 450ms - 600ms | Full-page transitions, onboarding sequences, major visual unmasking |
5. Accessibility & Inclusivity
Accessibility is a structural mandate rather than an optional enhancement:
- Zero-Movement Fallbacks: When a user’s operating system requests reduced motion via
@media (prefers-reduced-motion: reduce), all spatial translations—including overlapping slides, elevations, and masked reveals—must be disabled instantly. - Opacity-Only Transitions: Under reduced-motion settings, layered reveals fall back to a clean, simple opacity fade capped at
150ms, ensuring content is still accessible without spatial movement. - Cognitive Safety: No interface element may loop an animation indefinitely. All parallax effects across overlapping campus imagery must cease immediately after the initial scroll or page reveal.