Steve Jobs: Interactive eBook
Sometimes things don’t go as planned…
My original ideas for my interactive eBook on Steve Jobs were way more complex than I had realized. If I would have followed through with my original plan, I wouldn’t have met the deadline so I had to iterate my designs and change my approach — I had to simplify my thoughts. Since I thought that I already knew what I was going to do my eBook on, I went straight to the ideation stage.
1. Ideation
Original Sketches
Initially, I was going to create an eBook that covered the same chapters that I did in my previous Steve Jobs project, the not-so-interactive eBook. I wanted to cover Steve Jobs’ personal life and highlight some major events that had influences on his character. To do this, I was going to divide up the eBook into sections on Steve’s childhood, college years, the origin of Apple and how it came to be, Apple’s Initial Public Offering (IPO), and the legacy that was left behind by Steve.
Original Content Creation
In order for me to get a better feel for the layout of my project, I decided to design everything in Adobe inDesign.
Original Plan — Tumult Hype
Once I created the content that I wanted, I went straight to Tumult Hype, an animation system. I was going to make my entire project using Tumult Hype and then import the Hype widget to iBooks Author but I ran into a problem… I couldn’t quite wrap my head around implementing features (like the Table of Contents) from iBooks Author to my Hype widget.
More Challenges
I also had a hard time deciding on what content I wanted to present in this project. As mentioned before, when I first planned out this project, I was going to cover the same content that I went over in my previous Steve Jobs projects, the audiobook and eBook. I wanted to maintain a consistent theme by covering the same chapters from the Steve Jobs book by Walter Isaacson but that was a little much for this project. If I were to have gone that route, this interactive publication would have been extremely text-centric. That wasn’t what I was aiming for; I wanted to focus on the visuals more.
New Plan
After getting some feedback from people and gaining inspiration from my classmate, Matt, I decided to create a digital publication that would cover various products that Apple released over the years. Essentially, this interactive eBook will help educate readers about Apple through an immersive experience.
How was I going to create an immersive experience?
I had to come up with another plan so that I didn’t end up wasting even more time trying to figure out how to make the layout the way that I had envisioned it. Instead of making this project with a lot of Hype animations and interactions, I decided to build everything in iBooks Author instead. Although I couldn’t include as many effects as I wanted to, I was able to work around iBooks Author to create this project.
Goals and Objectives
- Create consistent media assets
- Place emphasis on visuals, rather than text
- Create a seamless experience that still ties into my previous two Steve Jobs projects — the audiobook and eBook
New Outline & Sketches
I found myself at the beginning of the design process — research. I had to figure out what products I was going to cover so I went to my go-to resource, Google. I Googled “Apple products over the years” and found some very helpful sites to build my project around.
2. Implementation
Like my previous Steve Jobs projects, I kept the art consistent and implemented the mini-Steve so that as the reader progressed in the publication, he subtly moved across the screen.
Design Inspiration
Although I followed the same style guide as I did in my other projects, as shown below, I made some minor changes to the overall design of this publication.
I wanted to put more of a modern twist to this project since I decided to place focus on Apple products, rather than Steve Jobs’ early personal life.
My design was heavily influenced by Apple’s wallpapers. To get the color bursting effect, I went to Photoshop and used a cloud brush to create individual overlays. I created four different types of these overlays — orange, pink, blue, and white (white isn’t shown here).
Once I imported these overlays to iBooks Author, I then rotated them and made them the way I thought was most ideal in presenting the content.
Tying it all together
How was I going to create a cohesive experience? This was the number one question that I repeatedly asked myself when I was creating this project. Since I was going for the more modern Apple look, I used one of their wallpapers as the chapter art in the table of contents.
Assets
Some of the best pictures that I could find of the founders — Steve Jobs, Steve Wozniak, and Ronald Wayne — were in black and white so as a way to keep a consistent feel across the entire publication, I edited all the pictures so that they looked pretty similar.
Simple breakdown of what I did:
- Collected assets
- Edited out the backgrounds in the photos in Photoshop
- Made the images black and white
- Added a light blue overlay over the images
Features
After figuring out how I was going to create a cohesive look and layout, I then began working on the features. What’s cool about iBooks Author is that it already has built-in features so it made my life a little easier.
I used the following features:
- Gallery
- Media
- Scrolling Sidebar
- Pop-Over
- HTML ( Google Maps & Hype widgets)
- Hyperlinks (to external links)
Metadata
There wasn’t too much that I had to input in the metadata fields. It was pretty straightforward so I just filled out the “Author”, “Title”, “Keywords”, and “Comments” fields. For the “Comments” section, I put a brief overview of what this eBook is about.
3. Testing
- iPad Air Test: This was probably the hardest part of the project because I wasn’t able to use the UX/Product Design Wall to test my publication on multiple iPads at once (since the devices were all dead). Although I have an iPad Mini, I wanted to test my project on other iPad models just to see how my publication appeared on different screens. Luckily, a friend of mine let me use his iPad Air so that I could test this publication on at least two different models.
The first thing that I noticed when I tested my eBook on the iPad Air was that the text was unaligned. Some parts, like in Steve Jobs’ and Steve Wozniak’s biographies had huge gaps in between words. However, when tested on the iPad Mini, this wasn’t a problem.
- iPad Mini Test: Since my iPad Mini is an older model, I didn’t have the option to record my screen like in my iPad Air demo because the screen recording apps weren’t supported with mine…. Also, I just want to apologize for how slow my iPad Mini is. Even though my Mini has been good to me, my gosh, it’s super slow so I had to skip some features (like the Google Maps widget and external hyperlinks) because it took way too long to load.
I also noticed that even though I was able to view my Hype widgets on my computer, when transferred over to the iPads, the last Hype animation on page 36, didn’t function properly. This is what it was supposed to look like:
So, what did I do to fix this problem? Instead of importing the beginning video (the apple logo changing into a gradient) as a Hype widget with the other two scenes, I decided to import it as a single video to iBooks Author, like so:
By doing this and making it so that the video played automatically, I was able to make the entire video play on my iPad Mini without it breaking. Yayyy! :)
Conclusion
Even if things don’t go as planned in a project, it’s okay. Designing for any platform is an iterative process. All you have to do is go through the repeating cycle of the design process — research, ideation, implementation, and testing — so that you can come up with better design solutions.
The beginning of this particular project was a bit rough for me because what I thought was a good idea at first, turned out to not be so ideal for this medium. In the end, it all worked out though! For the most part, everything functioned properly in my project but there were a few things that I noticed while testing that were a little off. If I wouldn’t have tested my project, I wouldn’t have known that the text was unaligned on the iPad Air or that my Hype animation didn’t work properly on both iPad models. Since I don’t have an iPad Air of my own, I wasn’t able to test it as much as I would have liked to so I placed my focus more on my iPad Mini. I learned a lot from this overall experience of having to design and build something in iBooks Author. So, what’s the main takeaway besides being adaptable?
You can accomplish more than you think. When starting a new project in an entirely unfamiliar application, it can be difficult to know what your capabilities are at the beginning. But through trial and error, you’ll come to find what features and tools are possible within an application and work your way around it. That’s how it was for me using iBooks Author for the first time. With this project being my second publication in iBooks Author, I now have a better understanding of it and was able to do a lot more with the features than what I thought I was capable of.
If you’re interested in viewing my eBook on your personal Mac, iPhone, or iPad, you can download it here.
If you read up to here, thank you! Here’s a fun little fact for you:
Apple sells a 300-page book called “Designed by Apple in California”, for $200. Yes, TWO-HUNDRED DOLLARS. It not only shows their products through the years, but also captures the processes they went through to make them. Cool, right? For more info, go here.
Ellie Hoyt is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web Design with an emphasis in Interaction & Design. This article relates to the DGM 2260 Immersive Authoring course and is representative of the skills learned.
