Combining print designs with augmented reality to create a better user experience
Augmented Reality (AR) is a growing trend in the world of design. Many mobile apps use it to provide excellent user experiences. For example, there are furniture and home goods businesses that have features in their apps that allow you to “imagine something in your space”. The camera on your phone can scan your room and then place an object in it for you to see on your screen. It can be super helpful when designing a space in your home.
Another way AR can be useful is combining it with print, like a book or a brochure. I designed a tri-fold brochure with Zapworks widgets to create an informative document about one of my favorite music groups.
I sketched out my basic ideas on how I wanted my brochure to look and what information I wanted on it. I knew I wanted to talk about each member of the group, as well as give the viewer an opportunity to hear the music and purchase it if they wished.
In my sketches, I used one panel per musician: Julien Baker, Phoebe Bridgers, and Lucy Dacus. I did this because I think each musician is just as impressive as the collaborative album they made, and I wanted to showcase that. I didn’t know where I’d place my ZapWorks codes so I drew them at the bottom of some of the panels. The placement of these definitely changed throughout the iterative process.
My next step was creating a style guide. Since the brochure is about a specific music group who only produced one EP, I based my color scheme off the image they used on the cover. The photo is gray-scale on the album, so I wanted to follow the theme of black and white, but I found the colored version of the photo and pulled my accent colors from that (I didn’t end up using the green colors, but the final design does implement a lot of the red accent color). I found the group’s Bandcamp profile, and I really liked the font used. It was very clean and legible, so I used the same font for my brochure.
After creating a style guide, I decided what kind of AR features to add. I wanted to include a lot of things, like links to Spotify to listen to the music, and a few links to YouTube videos. In the end I chose to have a link to their Tiny Desk concert, an Amazon link to purchase the record, a swipe-able photo album of the group’s 2018 tour, and a picture of Pitchfork’s rating of the album. When I was making the ZapWorks widgets I learned I could add a song in the background when the user scans the code. Since I own this record, I uploaded some of the songs as background music for each code.
Once I had my widgets planned out, I collected images and quotes about the band. Luckily for me, each artist has released two of their own records, so I featured pictures of each album and it turned out looking really cohesive. I had a lot of information I wanted to include, so I had to take out a couple quotes from music critics, but I decided it was more important to let the music speak for itself.
At this point I was ready to make the brochure in InDesign. I experimented with moving some of the content around. I originally had the Tiny Desk Concert video on the back, but I realized that was a pretty important part of the design, so I moved it to the inside center panel. I also switched Lucy’s and Julien’s placement on the panels because the background color of Lucy’s photo was too similar too the background of the outside panel I originally had her in.
I was worried about the ZapWorks codes being too close together on the inside center panel, but when I tested it with my phone, I was able to scan the correct code each time. You can scan the codes with ZapWorks’ app, Zappar, available for free for Android and iOS.
Erin Hancock is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. The following article relates to AR Design in the (DGM 2660 Course) and representative of the skills learned.
