Creating a catalog of the Evolving Boy Bands…

A case study of the creation of an iBook

Chloé Ferre
Chloe’s Portfolio
5 min readDec 13, 2018

--

By: Logan Cameron, Stowe Collective & Chloé Ferre

Introduction…

When we were given this project we had a couple different ideas floating around. Logan had this idea to make a, catalog type, book about boy bands. We all decided this would make the most unique project so we moved forward with it. Here were our initial sketches. There isn’t much detail but it was enough to give us a pretty clear idea of how we wanted it to turn out.

sketch idea 1
Different bands we could use.

As you will see, our original design idea included a timeline at the bottom of the page. However, iBook Author wouldn’t let us so we decided to simplify and just create it chronologically.

To create buttons that would play the song we uploaded it all into Hype. We made the play button and the pause button interactive. When you click on the play button it played the song we chose.

We also found the album art for the album that the song came from and made it background for the button.

When we tried to place the hype animations into the iBook, the widget defaults to a smaller size than the original hype animation artboard. We had to stretch them in iBook Author to get them to the size we wanted even though we created them in the right size inside of hype.

After we decided on 3 songs to use we wanted to have a little description of the song. Something interesting about it, maybe a little background of how it came to be, maybe some meaning behind the lyrics and even some logistics like who came up with it. A website that was helpful for finding these fun facts was www.songfacts.com. This website gave some cool and quick insight.

After we found all of the elements needed to create our iBook we gathered them all on a sketch file that had the same dimensions as the iBook.

We created a template in sketch which was helpful for us to lay everything out how we wanted it to look. They acted as prototypes for how we wanted our iBook to turn out. To our happiness, we could select the whole art board in sketch, copy it and paste it right into the iBooks Author and it would show up exactly how we laid it out as long as the dimensions were correct. This made the switch from a prototype to our actual iBook an easy transition.

Testing

First I want to talk about our table of contents. I have always had a hard time getting the table of contents to work properly. Our teammate Logan is the one who created this beauty. When I asked him how he created this he told me some of his concerns. iBook author does not let you put animations into the table of contents. We wanted to use the collages, that we ended up using for the chapter art, as part of the table of contents. Since it wouldn’t let us we decided this was a good alternative. I love the simple text design that we ended up using for the table of contents.

The iPad table of contents.

The Seamless Flow…

the transition from the info page to the song page
Cover Page

The picture above is just a snippit of how seamless this iBook is. This looks like maybe 2 different pages however it is actually 6. The first 2 pages are the chapter art. You can’t see that they are an animation right now because it is just a screenshot but when you are actually on the device, whether it is the computer or an iPad, it animates. It transitions through different pictures. When some pictures are being traded out by others, other pictures stay the same. It is like a collage of slideshows.

Another thing that worked great within the iBook was the widgets that we created. There was a little album cover with a play and pause button. We talked about this previously but I wanted to chat a little about what happened when we tested the buttons. When we first swipe onto the page, the buttons don’t work immediately. I don’t know if it needs some time to load or if the iBook itself has a quick delay. Either way, the songs don’t always play right when you press the button, sometimes, it needs a second to warm up, but after that, they work great. You push play, the song plays, you push pause, the song stops.

Conclusion…

Overall the iBook turned out pretty close to what we all originally wanted. When testing it, things worked properly and there wasn’t need for much fixing. This was a fun project for us to do. It was fun to work with a team. All of us had different ideas throughout the project, some ended up working out and others didn’t but overall we feel good about the final outcome. It is simple yet unique which is what our goals were from the very start.

By: Logan Cameron, Jonah Stowe & Chloe Ferre

--

--

Chloé Ferre
Chloe’s Portfolio

Hi, I’m Chloé! Along with all this tech stuff, I love to be outdoors mountain biking, hiking, running or just a nice walk usually with my sisters.