Loading ...

Responses by Akufen.

Background: For the last 40 years, many survivors have shared their lives with the visitors of the Montreal Holocaust Museum. To celebrate their contributions, this virtual exhibit presents 30 portraits of survivors captured by photographer Stéphanie Cousineau. Taken in the privacy of their own homes, these portraits share memories and precious personal possessions that represent hope.

Design core: We created the experience with a dark atmosphere in order to mirror the physical museum. As the exhibition is meant to be positive and hopeful, a light follows the user throughout the experience. The animations are fluid and smooth, and the design highlights the photographs with its simplicity. We also had lots of fun playing with the title animations through the user’s scroll position. The typographic blur effect helped create a lightness within the material.

Challenges: The budget and limited time were the most restrictive elements. Our desire was to create an experience that matched the poignant content offered by the exhibition. Although we are very happy with the final result, we would have liked to add certain elements, such as custom transitions from one portrait to another or a sound atmosphere to the experience.

Navigation structure: We tried to keep the navigation very simple. Users can view the triptychs in an exploratory way, as if the visitor were moving freely through an exhibition, or in a more cartesian way by browsing the objects according to their respective periods. Also, we decided to present the portraits in a random way in order not to put more importance on one story over another.

Technology: For the front end, we used our own custom framework and routing system for the management of page transitions and animations, built in JavaScript ES6+. We also used very practical libraries such as GSAP, Howler, Lazysizes, Locomotive Scroll (shout out to our friends at Locomotive) and Swiper. The back end is built with WordPress on a LAMP stack. Needless to say, HTML5 and CSS3 were definitely a big part of the development process.

witnessestohistory.museeholocauste.ca

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In