INTRO.
It's difficult to stay immersed in an experience when it doesn't have "wow" or engaging factors. As a way to try to keep people interested in this eBook experience, I implemented several digital effects. I explored Tumult Hype to see what type of effects I could include within my project. The goal? Make it a more fun experience for people to learn about the history of Apple.
STEVE JOBS: eBOOK DIGITAL EFFECTS
CASE STUDY
APPROACH.
Immediately after I knew what direction I wanted to take for this project, I began sketching out my ideas.
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-as-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.
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.
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 & 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.
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.
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. 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. Yay!
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 that would make the overall experience with a product more immersive.
© ELLIE HOYT © 2018