Creating an Interactive Experience
Last year I designed and developed an interactive media experience in the form of a digital publication. I used nearly a dozen tools to accomplish this. Primarily I learned how to use Mag+, a plugin for Adobe InDesign.
While learning a few new tools was an outcome of the project, the focus was on creating an interactive experience using a variety of media. I was to design a digital publication based on personal research on a subject I didn’t know much about. I chose to study Geology for my subject. It proved to be an interesting topic. My overall experience with this project was positive, but there were a lot of things I could have done better.
My Process:
1) Research → 2) Gathered Media → 3) Designed Layout → 4) Combined Media → 5) Created Interactivity → 6) Tested → 7) Back to Step 3 → 7) Tested → 8) Presented to Peers
This project helped me develop my skills in five main areas.
Interactive Design
Before doing this project I researched several digital publications and examined what different kinds of gestures they used. I decided to keep it simple and stick to four gestures that most readers would be familiar with. I included a “How-To” page at the front of my publication to ensure that readers would understand how to navigate and interact with the digital magazine.
The most interactive feature I included in my digital publication was the controllable volcanic eruption. I used around one hundred images in a slideshow in the Mag+ Feature Builder tool to allow the reader to drag their finger left or right to play the images in a rapid sequence — effectively creating an interactive video of the volcanic eruption. The eruption itself was actually taken from a YouTube video (which I linked to on the demonstration video’s page) and exported into around one hundred images using After Effects. The demonstration video is right here.
Research
For this particular project I gathered a ton of research. In fact, I think I spent too much time researching and the final product lacked as much polish as I would have liked as a result. With all of the research I had to be sure to manage all of the content I gathered. I will talk more about content management later. I had PDF’s, text files, InDesign files, images, and web links all as part of my research. I made sure to remain organized with all of those files.
Taking notes is a crucial part of research. I used Visual Studio Code for my notes for several reasons:
- VS Code allows you to have multiple documents open at once
- I am familiar with it because I use it for coding
- Has a clean, customizable interface
- Lightweight Editor — doesn’t tax the performance on my computer
- It’s Free
- VS Code has great, easy to use formatting options — easy to indent etc.
- I save my notes as .txt files because they are tiny
- VS Code is available on both Mac & PC (I use both)
Media
One of the main focuses of this project was to be able to incorporate several types of media into a single document. I used audio, video, and images in this digital publication about geology. For each media type, I made sure to be mindful of the file formatting options. This is important for balancing file size and quality. That’s the nature of any digital product.
Audio
The audio I included in my project was an art piece called “The Sound of Earth”. Basically an artist traveled to the deepest hole in the world which is located in the Czech Republic and they recorded the sound of the Earth with a special microphone and seismograph. It is a really unique piece of art and I included the link below the picture of my page from my digital publication. As far as interaction goes, I made a vector-based play button to tap on to trigger the sound. It is a simple solution, but often those are the best ones.
Audio is a really important aspect of many digital media projects. Unfortunately it is often overlooked and many designers do not know enough about properly distributing audio. Sadly, many designers will use MP3’s in their projects and they don’t realize how that makes the audio experience fall flat. Audio plays a crucial role in enhancing the immersive experience and should not be thrown in carelessly.
Video
Everyone loves videos, and I made sure to include one in my publication. I did the same design as the audio — the grey play button. I should have included a preview of the video to capture the reader’s interest instead of just including a play button. Lesson learned for my next project.
Images
Another important media type are images. I tried to maintain a consistent look of images as best as I could with those found on the internet. I would like to get my Photoshop skills up a bit more so I can fine-tune images to have a similar look and feel because it will be a few years before I am able to have the luxury of a professional photographer to do photo shoots for the images I will need.
Tools
This project forced me to use a lot of tools. I gained a lot of practice working with so many different tools for a single project. Mag+ and Designd were both new to me. It was good practice to use all of the other tools on top of learning those two new software programs.
Content Management
As with any project it is imperative to remain organized. I like to organize my folder in two ways. One is by subject — such as Documentation, Research, and Resources. The other way is by program used to create that file. I have folders for this project called Designd, Illustrator, and InDesign. I also like to be intentional in how I name my files. I generally capitalize the folder or file and use the Camel Case naming convention. For files I always add “_verx” to the end of the last word in the file name — where x is the version number.
Besides content management there is also resource management. Another name for this is asset management. I organized my resources into sub-folders corresponding to the type of media that was within each sub-folder. Audio files went in the “Audio” folder, Image files went in the “Image” folder, and so on.
I developed a cohesive interactive experience that captivated the reader to learn a little bit about Geology. It took a lot of research, careful planning, and energy to develop this digital publication into a novel experience. I think it worked well but it could use more polish. I spent far too long in the research and planning phases for the limited amount of time I had to work on this project. I should have started incorporating some of my ideas into tangible rough drafts instead of leaving the actual implementation until the end.
Learning the lesson of getting too caught up in research is a lesson that I think will serve me well. While research is extremely important, we shouldn’t forget that we have to actually deliver a product at the end of the day. I would like to make a “Geology: The Study of Earth” 2.0 at some point. It may be a while due to the demands of school and work, but when I do get it done, I will be sure to add it to the blog.
Russell Andlauer is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. The following article relates to the Digital Publication I course and is representative of the skills learned.
