HMS Belfast 80th Celebration

Imperial War Museum

The Imperial War Museum is a British national museum organisation, with five locations in England which document the conflicts that have shaped the world.

Tools & Skills:

Vue.js, Web Audio & Video, GSAP

About the project:

Staak were approached to develop an interactive website to complement and accompany the HMS Belfast 80th anniversary celebrations.

The website was built to consider a wide range of users, from school children to families and military enthusiasts through to those who remember The Belfast as a serving military vessel.

The website is built around a central ‘timeline’ which branches off to specific events the Belfast was involved in.

Bringing to life the wartime contributions of The Belfast whilst contextualising these stories against the wider backdrop of WW2 was a challenge. We employed a number of techniques across the site including a bespoke audio soundtrack, embedded video backgrounds and archive cinematography to create an emotive and immersive experience.

To add a further level of gravitas, we leveraged exclusive footage from the servicemen and women telling their stories and sharing their memories and integrated these throughout the site.

Each timeline milestone was developed using modular components to quickly and easily make page templates for each of the Belfast’s stories.

The timeline display uses a carousel with custom CSS animations to set the tone for the overall story of The Belfast and engage users to click through and learn more about its past.

HMS Belfast 80th Celebration thumbnail

HMS Belfast 80th Celebration.

Image showing one of the HMS Belfast events seen from the timeline

The main landing page of the HMS Belfast website showed the main events in the Belfast's history, in the form of a carousel. Background video, audio and carousel animations set the atmosphere and encouraged user's to click through to learn more.