Coco: Interactive Activity Book

Semira Kendall
Semira Kendall Portfolio
5 min readDec 13, 2018

Picking the Pixar movie Coco as the topic for our final assignment was an easy decision. We knew we were going to be working on this assignment for several weeks, so we figured we had better pick a topic that we could all enjoy working on. With its stunning visuals, beautiful music and amazing color palette, Coco fit the bill, and we weren’t disappointed!

Early on we struggled with what direction to take our interactive book. As this was a group project, keeping a cohesive and consistent look and feel was important, but a bit of a challenge.

We started with sketches. For us, sketching was a quick and fast way to transfer all the ideas from our brains to paper.

Sketches for the Hector and Rivera family Pages

We then freely designed a couple of pages on our own and not surprisingly, came up with 3 different ideas. We pulled our favorites from those ideas, and it morphed into our final template.

My initial ideas for the character pages

After considering our options and audience, we came up with the idea to make a character activity book for kids. Our template is simple: each character has its own chapter with a short descriptive text followed by an interactive activity such as a coloring page. For the intro media, we added a Coco trailer.

Between stunning high-quality pictures we found on Pixar’s website and other fan art online, we had no problem securing high resolution assets. We even found a typefont that matches the official Coco typefont.

My portion of the book covered the characters Héctor, the Rivera family and Ernesto de la Cruz.

Ernesto de la Cruz and the Rivera Family character pages — final iteration.

I worked on 2 interactive widgets for the Coco book: Hector’s drag and drop game widget, and the Rivera family drag and match game widget. I also kept a master copy of all our pages, and edited the final copy.

Most of our interactive widgets were created in Bookry. Bookry is a free service for iBooks Author that allows you to create amazing widgets to add interactivity to your iBooks for your readers.

In the Coco movie, Héctor dresses up as Frida Kahlo to try to cross the Marigold Bridge into the Land of the Living. I thought it’d be fun for the readers to help Héctor get into disguise.

I took apart a picture of Frida Kahlo in Adobe Illustrator to come up with assets that I needed for Héctor’s head— a wig, eyebrow, lips and earrings. I had to resize them twice in Adobe Photoshop to get the right sizing. I then made the widget in Bookry and added it to our iBook.

Héctor’s drag and drop game widget—Before and After

After deciding on what images to use for the Rivera family drag and match game, I opened them in Adobe Photoshop and made silhouettes of each image. The drag and match widget was easier to work with. I was able to resize the images in Bookry itself. No need to resize them in Photoshop.

Rivera Family drag and match game widget

I’m happy with how they turned out!

I created my character pages in Adobe Photoshop and Illustrator. We used a mixture of pictures, borders, banners, and other elements— I made a couple of them myself: a custom shape and border for the Coco logo, and a simple banner for the cover art.

Custom shape and border for Coco logo and banner for cover art

To show readers that they must continue to scroll sideways to keep on reading the iBook, most pictures on our Coco iBook took up a page and a half. These seamless transitions make for tedious work, but deliver amazing results.

Héctor pages 1 and 2

The process we took for this, consisted of creating one long page, then cutting it in half to make 2 pages. We then copy merged each half, and saved them into a new art board. We brought them into iBooks Authors, and lined them up just right next to each other. The downside is that this process had to be repeated many times whenever there was a typo or we decided on a change.

Editing Mamá Coco character page—again

iBooks Author is really a simple program, but I’m amazed how much can be done with such a simple tool. Sure, sometimes iBooks Author leaves my “cabeza shaking” with the “sense that it doesn’t make.” But, “I’ll count it as a blessing” that after all this time working on it, that “I’m only un poco loco.”

I immensely enjoyed working on this project in collaboration with the Coco team. This was by far the most fun assignment this semester. In the end, our Coco character activity book turned out colorful and festive—with amazing pictures and fun activities sure to delight any young fan—like we had hoped.

--

--