Maggie McCausland
Published in

Maggie McCausland

Bringing Print and Augmented Reality Together

With this project I learned how to take print and combine it with Augmented Reality (AR). AR is something many are starting to use to provide users with a more engaging user experience. It’s an interactive experience that allows people to use their phone’s camera to see the real world enhanced with computer-generated information (visual, auditory, etc.).

For our assignment I learned how to include Augmented Reality with a 8.5x11 pamphlet. I created a tri-fold pamphlet in InDesign with QR codes to create a more engaging and informative pamphlet for the Loveland Living Planet Aquarium in Utah.

To begin the project I first had to brainstorm possible topic ideas for a pamphlet. Possible topics I thought of were:

  • Topic One: Utah state map pamphlet or a travel destination pamphlet for Mackinac Island: Will include information about the travel destination and have pop ups for highlights and places to see or activities to do with there.
  • Topic Two: Pamphlet for a zoo or aquarium: have popups showing videos or images with more information for some of the main events/activities.
  • Topic Three: 5 Seconds of Summer or BTS pamphlet: provides information about the band/group and has popups to show different album artwork and play some of their songs.
  • Topic Four: family tree for either Once Upon A Time or Harry Potter characters: For each person it will show their portrait, time line, and a fact about them.

In the end I decided upon topic two to create a pamphlet for an aquarium. I knew it would be an engaging topic and I would have a lot of content to work with. After settling on the topic of an aquarium, I decided to make the pamphlet for the Loveland Living Planet Aquarium here in Utah. I began making sketches for the pamphlet layout. I had browsed the aquarium’s website so I knew what information I generally wanted to use. I also spent time looking on Google at various aquarium pamphlets to help draw ideas from. Based on both, I was able to create sketches for the outside and inside of the pamphlet incorporating the information I wanted included (contact info, operating hours, text about the aquarium, activities and events happening, and the habitats) and incorporating different design ideas I saw and liked.

Beginning sketches for pamphlet

Next, I worked on creating a style guide for the pamphlet. For the font and color choices I got them from the aquarium’s website. I thought it best to use their font and color choices in order to help the pamphlet and the website feel similar and connected. In the end I only used four of the five colors. I never used the orange color. I focused on using the more subtle colors like the blues, white and black. I decided I would use the dark blue for the background color for the inside of the pamphlet and use white for the outside. I also decided to reserve the more prominent light blue for highlighting information like the different animal habitats and animal encounters.

Style guide for aquarium pamphlet

After having created a rough sketch and a style guide I decided upon which AR experiences to add to my pamphlet. I had already generally thought about what kind of AR experience to have, as depicted in my rough sketch for the pamphlet. I decided to incorporate some of the most fun and important things from the aquarium’s website. The first QR code I wanted user’s to be able to see and interact with was purchasing tickets. Buying tickets is one of the most important features so I thought it best to have it located on the font of the pamphlet ready for everyone to scan. The next QR code would be a photo gallery. I originally thought about having a separate photo gallery QR code for each animal habitat. However, in the end I decided to keep it more simple and make one photo gallery QR code for all the habitats to share. After all, you can only place so many images and information on a 8.5x11 pamphlet. By making just the one QR code I knew I would have more space to work with.

The last two QR codes I decided on are for viewing the aquarium’s event calendar page and to see a live video of their penguins. I thought the calendar would be good to help users see what else happens at the aquarium and use it to help plan their next visit. I thought the live penguin video would be fun and engaging for all ages. It’s a fun video that people would be able to enjoy and watch from their own homes or wherever they may be.

Once I had everything planned out I started collecting what I would need from the aquarium’s site. Such as: text, images, and links to get access to the live penguin video, calendar, and to purchase tickets. From this point I was able to start creating a 8.5x11 pamphlet in InDesign. I ended up using less text than I had originally planned. I tried incorporating the short descriptions for each animal habitat. However, it felt too crowded when I tried to incorporate text for each animal encounter AND animal habitat. So I decided to just list the animal habitat names and provide information on the animal encounters. I felt it would be more important to provide information on animal encounters than the animal habitats because they are more activity based and only happen at certain times each day.

I create various versions for the inside that showed different content placement. I wanted the QR codes to be spaced out enough that they wouldn’t be too close together when trying to scan them with your phone. I also wanted content to flow and have balance. Originally we were to use ZapWorks for creating AR experiences. So I had made a rough draft of an example ZapWork code I would implement into my pamphlet until we could get access to ZapWorks. However, the class was not able to get enough student licenses so the majority of us ended up using a free QR Code Generator.

InDesign: Some early different design options I experiment with for the inside

The outside of the pamphlet was the easiest to create in InDesign. The final version ended up looking remarkably close to my original sketch. I was able to easily create the curved white background in Photoshop using the pen and add anchor points tools and then export it to use in InDesign.

In the end, after many rough drafts in InDesign, for the inside I decided to use the same light blue color for both the animal encounter text background and the animal habitat name listings. I placed both the animal encounters and habitats on the outer inside flaps and the about us information in the center to help colors and the number of images feel balanced.

After I was able to finalize the layout for my pamphlet I began working on creating the actual QR codes for the pamphlet. You could create a free trial for the QR codes however, I was afraid they would expire before I could complete everything. So I decided to use only the free version that only allows for QR url scanning. This was fine for the ticket purchasing, viewing the calendar, and watching the penguin video. However, I needed to find a solution for the photo gallery. I looked around at different free site options such as Google Photos, Pixieset, and CloudSpot. In the end I decided to use a different site called myalbum. I was able to create a free basic account that allowed me to upload all of the photos I had collected and create a photo gallery using one of their several design options. I found it easy to use and more engaging than what the QR Code Generator Pro’s free trial image gallery would have been.

After I created my photo album gallery and got the necessary urls gathered I was able to create QR codes. I tested each one out with my phone as I made them to make sure the QR code worked properly. After which I downloaded each QR and inserted them into my InDesign document. I had to adjust the placement of information when I imported my QR codes. I made them larger than I originally planned on because I wanted them to be scanned more easily with phone cameras. Having the QR codes smaller took the camera more time to locate and provide access to the link. Therefore resizing the QR codes to be somewhat larger and simply moving text and information around a little helped to diminish that scanning wait time.

In the end for my final version, I feel all important information regarding the aquarium is easy to locate. I also feel I was able to successfully find balance and not have my pamphlet feel too crowded with information and or images. Although the QR Codes are less aesthetic than what the ZapWorks codes would have been I feel I still managed to include them in a way that didn’t ruin the overall aesthetic of the pamphlet.

Final Version: Outside of pamphlet
Final Version: Inside of pamphlet

Maggie McCausland is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. The following article relates to Print and Augmented Reality Design in the DGM 2260 Course and representative of the skills learned.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store