Celebrating the Birth of the Theremin
In 2021, the Theremin, a magical instrument played without being touched, turned 100 years old. To celebrate this ethereal instrument, I put together a working kiosk that highlighted both the creator as well as those who have utilized the theremin in their musical endeavors. Below is an analysis of the project and its work:
In 1921, the theremin was created by accident when Russian cellist and electronics engineer Leon Theremin was experimenting with sensors that detected closeness by sound. Leon realized that he could, in effect, manipulate the radio waves in the air and create a variation of sounds by moving his hands close to or away from the device. Leon patented his creation in the late 1920s. His invention met with critical acclaim by Bolshevik leader Vladimir Lenin who commissioned Leon to go on an international tour showing the success of the instrument. Leon performed at many large venues including Carnegie Hall.
In 1938, Leon returned to the Soviet Union abruptly. It was rumored that he was kidnapped by Russians. Upon his return to the Soviet Union, he was forced into labor camps where he created listening devices and other tools of spyware for the regime.
Leon continued to make various inventions and devices during this time. One of Leon’s listening devices was a listening device placed inside a wooden seal of the United States and presented it to the U.S. ambassador as a gesture of friendship. The device transmitted secret communications to the Russians from 1945 to 1952 until it was discovered. Leon worked for the KGB until 1966. He also worked at the Moscow Conservatory of Music here he created various electrical instruments and taught cello.
Leon continued his work with the Theremin and piloting new technology until his death in 1993.
Designing a Kiosk:
In putting together a kiosk, I began by first creating an attraction loop that lasted 30 seconds. This loop aimed at pulling people in to create interest in the theremin. To start with, I put together a mood board of various images highlighting the theremin and its inventor. Most of these images were gathered from the film: Theremin: An Electronic Odyssey (1993), which highlighted Leon’s life and works along with the history of the theremin.
For the kiosk, I originally set out to create an experience like the theremin pictured below:
I wanted the kiosk to have a wooden-feel with earthy tones similar to the original theremin. To aid in this, I chose a combination of wood oriented colors along with a navy blue for contrast:
When it came to fonts, I initially chose Hoefler, but fell out of love when I realized that it didn’t have a lowercase version. The Moog font was chosen to pay tribute to the musical inventor Robert Moog, who later pioneered a
DIY-Theremin-Kit for would be electronic enthusiasts. Lastly, Josefina Sans and Adobe Garamond Pro were used in the interactive aspect of the kiosk because of their simplicity and elegance.
To navigate the site, I started with a blue background and a theremin for the home button. However, I ran into trouble with getting the home button to look beveled when clicked on.
With the second design, I spent a good portion of time trying to get the orange navigation bar to have a wood-grain effect, but was unable to make it work in Adobe Illustrator. Additionally, I planned on having the navigation bar at the bottom of the kiosk with the theremin to the right on the infographic. However when I went to design the infographic, there wasn’t enough room. I had to delete the original theremin image that sat in the right corner of the Navigation Bar and move the navigation bar to the top of the page. To highlight which item had been clicked, I utilized a wooden brown for the background.
I went through two versions of the storyboard before starting my design in Hype. The storyboards highlighted my grand vision for the project; but when it came time to creating the attraction loop in Hype, I soon realized it would be too long and had to parse it down.
Original Loop:
The original attraction loop can be seen on the link below:
However, I ran into an error with my original design. When creating the document in Hype, I accidentally sized the dimensions wrong. This didn’t seem to be a problem at the time, but when it came time to work with the infographic, it became apparent that all the documents needed to be the same size.
Since I had to recreate the attraction loop from scratch, I changed a bit of the sequences to make the loop feel more interactive. Once completed, I used Adobe Premier Pro to turn it into a .MOV file. This in itself was a huge hassle, since I had little working knowledge with PremierPro resulting in lots of trial and error.
The finalized design of the attraction loop can be seen below:
Note: The video will only play after a commercial is shown. This is because the music is from Клара Рокмор Муки любви Фрица Крейслера, which is a song played by Clara Rockwell and is under copyright. However, it is available for educational purposes.
Infographic:
The kiosk design consisted of two proponents. An attraction loop to pull people in and an interactive infographic. For my infographic, I wanted to highlight the various usages of the theremin in pop culture. Because the attraction loop and the infographic were completed at different times, I found myself not sticking to my style guide or pivoting with the infographic. This made for a somewhat disjointed connection between the proponents.
For prototyping the infographic, I gathered movie and audio images of bands and movies that utilized the theremin. The most challenging aspect came with writing content for each movie board and song. Additionally, I had to search for audio clips that highlighted the theremin.
When a poster is clicked, the user is taken to a page highlighting the band or movie name and playing a short clip of audio featuring the theremin. To establish interactivity, I added a play button at the bottom of the page. I wanted to be able to pause the play button and have it be able to be toggled, but the project required a stronger understanding of JavaScript than I currently have. The play button works to start the audio, and the X in the top right corner takes the user back to the infographic timeline ending the audio.
The last portion of the project consisted of outputting the kiosk into HTML through the Hype engine. This process was somewhat time consuming and lengthy, but the end results were an interactive kiosk.
To see the attraction loop and infographic in working order, click on the following link below. To get the attraction loop to start, right click and open the video in a new tab. Autoplay is disabled on most browsers requiring the user to right click to play.
Major Takeaways:
The project left me with some major takeaways:
1) Start with the end in mind. I didn’t have a holistic vision of the combination of the attraction loop and the infographic. The overall feel of the project was somewhat disjointed. This could have been remedied by starting with paper drafts of the project highlighting what I wanted to accomplish overall rather than treating the kiosk as two separate projects.
2) I came to realize that I really liked being able to create animations that were interactive. In the future, I would like to play more with Hype or Adobe After Effects to create more interactive tools.
Lastly, creating the infographic turned out to be a rich learning experience of gathering data and making it interactive and user-friendly. Rather than being stuck with bland data points, infographics allow you to make the data come alive. This in turn establishes an opportunity for users to better engage with the data and learn more.
In conclusion, although the overall experience was somewhat disjointed, I was happy with the overall experience of the interactive Kiosk and was glad to be able to celebrate the magic of the theremin as it came upon its
100th anniversary!
Alex Strasburg is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. The following article relates to (Kiosk Project) in the (DGM 2280 Course) and are representative of the skills learned.