14: DIGITAL DESIGN (MICRO-SITE)
The Endless Letter: Web Experience - RT
Microsite for social media project
|Title of Entry:||The Endless Letter: Web Experience|
|Product/Service:||Microsite for social media project|
|Entrant Company:||RT Creative Lab|
|Creative Team:||Creative Director: Kirill Karnovich-Valua
Designer: Revaz Todua
Creative Producer: Elena Medvedeva
Producer, Artist: Ania Fedorova
Social Media Strategy: Gleb Burashov
Art Direction at RANEPA: Katerina Terekhova
Curator at RANEPA: Serge Serov
Music & Sound design: Maxim Makarychev
Producer: Eldar Salamov
PR: Lilly Kazakova
Producer: Ivor Crotty
Administrative Manager: Margo Tskhovrebova
Research & data: Ivan Fursov
Producer: Katya Motyakina
Creative Director, Red Collar: Denis Lomov
Designer, Red Collar: Anna Mironova
Creative frontend developer, Red Collar: Denis Safonov
|Sector:||03: PUBLIC INTEREST OR CHARITY|
|Notes:||Background: Endless Letter became the final part of #VictoryPages, a project by RT Creative Lab, which was released on social media platforms in 2020. Instagram became one of those platforms; during several months, short lines from World War II–era family letters were published as Instagram Stories, and every quote was followed by an illustration from students of the RANEPA School of Design in Moscow. Red Collar created a website to house the project, with the goal to immerse users into the story, find a bright way to communicate the emotional element of the letters and unite a great deal of information onto one digital platform.
“The essence of letters from the front is tragic, emotional and true to life,” says Denis Lomov, creative director at Red Collar. “It’s first-hand wartime history. As the ones responsible for the website’s design and development, we created an unusual user experience by fully immersing you into the moment, placing the letters into a 3-D space.”
Design core: The letters are displayed alongside a fixed range of objects: text, imagery and a special particle system used to create atmosphere. There’s a lot “going on” on the website: rain, fireflies, snowflakes, machine gun bursts, sparks of flame and even human silhouettes can be seen.
We’ve implemented a number of special algorithms to make the movement look realistic. For example, mathematical turbulence algorithms were used for the snowflakes and the flames. Lighting effects enabled us to make the scenes more natural. Among them are flashes of lightning in the rain, the orange backlight of the flames and the spotlight effects on the bullets that appear from below.
Challenges: A lack of envelopes and paper on the front lines of World War II gave rise to “triangles,” so to speak, where soldiers would write letters on one side of a sheet of paper then fold it into a triangle to write the address on the other side. We encountered some difficulties while “folding” a digital object on screen. The triangles have very sharp angles. The digital paper itself cannot be folded; it’s not a canvas that can be bent physically. Every angle of the letter is a separate plane, and there are ten planes altogether that each act like a separate object. And, since the digital paper has no thickness, all the planes ended up being so close to each other that Z-fighting problems occurred. One plane would clip through another one, which would also interfere with the shadow output. To prevent this from happening, we chose the coordinates very carefully: for example, letters were bent at 179.999° instead of 180° in order to avoid intersecting.
Navigation structure: We combined more than 200 letters in an endless flow and provided clear navigation on each page so that everyone would get a chance to learn more. The letters are sorted by their creation date from 1941 to 1945. Users can move from letter to letter by scrolling or by the menu located in the right half of the page, just by clicking on the necessary interface part.
To implement the endless flow, we put 20 letters on the page which move up and reappear down below. By scrolling, the page content attached to each letter is updated.