Learning interactive ibooks with Mountain Dew

Purpose and Objective: Spring Semester of 2020 I was assigned to create an iBook on any subject that I wanted, with only having guidelines for length, having four “features,” and having proper metadata while keeping it consistent and creative.

Strategy and Inspiration: Due to the unique situation with Covid-19 and the inability to work in a group for the last part of the semester, we were given the option to forgo working on the iBooks project as a group and then work on it solo.

I chose to do something I know a lot about. So I chose Mountain Dew! I would consider myself a little bit of an addict. So why not turn my knowledge of this into something productive and be able to get a grade on?

I began looking up different promotional info and assets to figure out a way that I would go about designing everything. I visited the mountaindew.com website and pulled some images to reference for the design.

I got the inspiration for the background spanning across three pages from this image that I found on their website and decided to recreate it in InDesign and then drop them into iBook Author. I added white boxes for the text to fall into so it would be easier to read and there would be fewer shapes for iBooks Author to have to deal with.

I labeled all of the chapters differently and kept it consistently designed throughout the whole project. I used official colors found on a website that replicated the Mountain Dew style guide.

Laying out the iBooks we had to include “features” and widgets that help make the iBook interactive. The widgets that I thought would be the best for this iBook was the video widget, gallery, pop-up, and quiz.

The video was pretty straight forward when it came to getting it to work properly. I made sure that it wouldn’t loop or autoplay. The way iBook functions with when it comes to auto-playing media is not ideal. Even when scrolling to other pages, it keeps the audio playing. In some cases that would be good, but there should be an option to chose one or the other.

Next was the gallery. At first, I wasn’t sure as to why my images weren’t fitting properly into the frame, but then I figured out that you can adjust the clipping mask in the frame to adjust how zoomed in the image seems or the positioning of it.

One thing that I wish I would have done more research on was adding my own widget. One that I really wanted to be was one that would survey the people taking it on what they thought their favorite flavor of Mountain Dew was. However, I decided to do a quiz widget instead and just rephrase it to be something that would work better as a question.

Doing a popup (in this case several) was the last widget that I decided to do. Having an invisible popup overlayed on top of each bottle of Mountain Dew, allows the user to click on each bottle to learn more about each flavor that is currently popular.

Testing: Having an iPad pro helped when it came to testing the iBook. Throughout the process though, I actually tested most of it out on the Macbook because it is much easier to push it to the Macbook (for me at least) that it was to keep pushing it to the iPad. I really didn't have any issues, I planned out a lot of the measurements so I didn’t run into any problems.

Conclusion: Overal I felt like this was a great experience and added another skillset to my list of things that I know how to do. Though this seemed like a pretty small introduction I am excited to see how this could be more useful and different kinds of implementations of a wider spread of widgets.

Brady Hale is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. The following article relates to (ibooks Project) in the (DGM 2260 Course) and representative of the skills learned.

Husband | Father | UI/UX Design Student at UVU | Gamer