An Interactive Incredibles iBook
Bob:
Well, what are *you* waiting for?
Little Boy on Tricycle:
I don’t know. Something amazing, I guess.
— The Incredibles, 2004
Like the above scene from The Incredibles (Pixar, 2004), my other team members and I were thinking of a subject that was universal, enjoyable and simply, “cool,” that we could build our iBook around. We knew that we could making “something amazing” by using the Disney/Pixar Incredibles movies as a subject and its inspiring material. The goal of this project was to create an informational iBook, while at the same time utilizing the features of iBooks author to insert interactive portions that would draw the reader in and encourage them to re-read the iBook many times over.
The Outline
As with most design projects, we started with sketches and collaborated on what we wanted to include, the style of the iBook and the layouts for each section. Right from the start we faced difficulty because we were not sure which movie to cover. As there are only two Incredibles movies, we decided to include elements from both and focus on consistent and/or major elements of each movie. Upon delegation, I focused on the Introduction pages, The Family section, The Elasticycle and hydroliner pages and the Parr Home section, while the other team members focused on the remaining sections. Although we had distributed assignments we remained in close contact and met frequently to confirm design points and make sure we were all consistent in look and interaction.
We broke down the book into three chapters with sections included in them. We chose to cover the Parr family (The Incredibles), supporting characters such as Frozone and Edna, villains from both movies, and lastly, the settings and vehicles.
These chapters made sense as we agreed that the iBook would be focused towards children but overall encompass general families. Since we knew we would have to cater towards many age ranges, we opted for many interactive elements for the younger ages, and also included videos and information pieces for the older ages. We also kept in mind that fans of the movie and uninformed readers would see the iBook, so we wanted the iBook to be a sort of “jumpstart” in the way it would read.
Although the list on the left appears long, the book would later be created in a digestible size using techniques to draw the reader in and make them not realize how many pages were present. The techniques we use to achieve this will be discussed further on in my documentation. While there were many parties we had to cater to, the iBook was intended to be a companion to the films and kindle or re-kindle people’s interest in The Incredibles.
Sketches & Mockups
Once we had decided on the subject, we were all raring to design mockups and sketches. Within a week we had drawn up basic layouts of how the iBook would look and moved onto adding some color in mockup stages. As stated previously, these sketches were to confirm a general layout for each page which differed slightly with each chapter, but for the most part, stuck to the pattern of a large hero image, title/header, slideshow or video, scrolling text box, and another (optional) interactive element.
For one of my final layout sketches for the family, I experimented with a full seamless background (see below). As stated before, the book had many pages so to help it flow more smoothly and to add another immersive design element, I planned to have characters overlap into the next page so that it made it look as though the family was continuously running towards a goal together.
The final stage sketches also assisted me with planning a few extra widget objects such as pop-ups and more integrated slideshows. These examples can be seen on the “Jack-Jack” page and second “Mr Incredible” page. The character Jack-Jack has a list of super powers, so I opted to do pop-ups so that more than one of his powers could be covered in detail. Installing pop-ups also opened the chance for a more interactive page. The Mr. Incredibles page included a simple picture slideshow, but to add further content I planned to include a slideshow with transparent PNG files of Mr. Incredible in his various outfits that are seen throughout the movies.
Gathering and Building
A large part of how we we were able to carry out this project was due to the extensive assets library that Pixar has available on their website. We were able to use concept art and screens of the movie and video directly from the official website, which made it so we had great quality video and images ready to use. Along with Pixar assets, we used promotional images and self-made objects to gather the elements needed to complete the iBook and build the ideas we had planned. Interactive elements such as slideshows, pop-ups, and the costume changing Mr. Incredible widget, relied heavily upon us securing quality content, which we luckily were able to find very early on.
In regards to building the book, we each stuck with our assigned chapters and followed our sketched layout designs. Throughout each iteration of the designs, we continually gave feedback on placements, how certain elements looked, and what could be improved. Since this was a group project, consistency was an important part for us all as we wanted the entire iBook to feel like one creator had made it. Knowing consistency was important, we gave further feedback in areas such as titles/headers, page layouts, and even down to text boxes and font.
For the pages delegated to myself, I created the initial gradient background using Adobe InDesign, as well as the faded “power” titles and character names. To make sure that the seamless images worked correctly, I used the pages feature of Adobe InDesign to place the large character images on the pages so that I was able to control their size and what area of the image would be included on the previous or next page. The seamless design was slightly difficult as I can be a perfectionist at times, therefore even a line being slightly off made me go back to editing the image. While it was slightly tedious at times, the seamless design of the character images was a staple for many of the chapter layouts.
Did It Work?
When it came to testing, the principle seemed simple as we were creating exclusively for the iPad. With us building the book in an iOS app, we thought that it would translate to the device close to perfect. For the most part it did, with a few features failing. Another factor that made testing interesting, and also beneficial, was that each group member had a different iPad. I have a generation 2 iPad that doesn’t even support AirPlay or updates past version 9.3.5. The other group members had a current generation iPad and the latest iPad Pro. With a wide range of iPads, this allowed us to see if the book would work on different models and how it would be accessed and experienced.
One of the first issues, came in the Introduction pages with the image of the Incredibles overlapping the introduction trailer (see above). When played, the trailer would come to the front, therefore blocking “Violet” in the group image, which didn’t happen when editing in the iBooks author program. With further testing I found that I wouldn’t be able to have the video play behind Violet, which was a shame, but I corrected it by making the video go full screen so that there would be no issue with other page elements.
Overall the tests were successful with all elements working as intended. Pop-ups were reliable and displayed the information and images correctly. The difference between each model of iPad provided us with insight into how the iBook looked, with the iPad Pro making some images look a little less HD. Taking the iPad Pro testing into account we changed out a few of the assets so that the resolution of those images were better quality for the iPad Pro. Although we discussed that most people would be accessing this content from a regular iPad or older iPad, we made the changes to plan for future consumption as the iPad Pro may become a more commonly used device than its siblings. Thus if our book was not up to a standard of quality, it could eventually look outdated. Quality changes can be seen in further detail by selecting the images above of the Mr. Incredible pages.
Little Boy on Tricycle:
THAT WAS TOTALLY WICKED!
— The Incredibles, 2004
With some solid assets, a great topic, well constructed plans, and a dedicated team, I feel like this has been one of the better projects that I’ve worked on. Each step felt well-planned and well-executed with only a few mishaps in the testing stage. The ability to collaborate beyond periodical feedback was a great help as it assisted me to really refine my designs and see other sides of my design choices or things that I hadn’t thought of. The iBook turned out exactly as planned and I feel confident in showing it to the public. While it’s probably not fully Pixar standard, I would be confident in sharing it with them as well.
Although it can seem complicated, iBooks author is a simple program with a good deal to offer. Honestly, I wish it offered more and some bugs were fixed, but overall it was a great platform to build this interactive Incredibles iBook and makes me want to build more iBooks like it. Overall, having solid assets, a great topic, well-constructed plans, and a dedicated team (or mentality if you’re working solo), you can create an iBook that is incredible.
- This project was a team collaboration with contributions from myself, Erick Perez and abenjaminperkins. To see other portions of this project, please visit their medium pages.
- Disclaimer: copyrighted material used in this project is used under the fair use law as the project is for educational purposes.
