Designing Seamless iBook Backgrounds for Better UX Experiences
Designing and building unique visual experiences is an enjoyable creative process, even if somewhat of an arduous task, given time and platform constraints. Our tools often dictate the design and development approach to be taken, and often times, severe restrictions may hinder our efforts. In the end, does the time and effort matter? Absolutely! In my mind the challenge is at the heart of Digital Product Design –
NOTE: All images, content, and processes used in the article are part of a demo given in the DGM 3260 Immerive Authroing II course at Digital Media UVU)
One of the coolest ways to enhance a visual experience in an interactive space is the creation of seamless backgrounds, especially when dealing with mobile device experiences like iBooks on an iPad. Regardless of development platform, what do seamless backgrounds offer to a participant? Well, there are several reasons to consider them. First, movement from point-to-point across screens can be made more pleasing, engaging, and visually cohesive to the content. Broken visual elements strewn across a screen can be a death blow to maintaining the attention of a reader. Secondly, using a swipe gesture to invoke actions on tablets adds to the experience; a sense of control by the ‘user’ is now at the heart of the visual experience, and has the ability to heighten visual and auditory senses as a participant moves across and explores coordinated screens. Lastly, remember, a designer’s first task is to use visuals to communicate with people, so find a way to make it special. Seamless backgrounds offer this ability!
What’s more, seamless backgrounds are relatively easy to create given that students have patience and test, test again, and then test one more time. Oh, and planning a design is crucial to success–without a common process–seamless backgrounds can also become the bane of a project if not approached properly.
The following information is meant to be an in-depth guide when creating seamless backgrounds for an iBooks Author publication as required in DGM 2260 Immersive Authoring I and 3260 Immersive Authoring II. Of course, the concept can be applied across almost any development platform, just know that new technical considerations must be researched, tested, and implemented to get optimized results.
Building Backgrounds
Before anything is ever designed or developed electronically, it is critical to sketch ideas on paper first to determine a direction. As students have been taught, it is not proper to just jump into Photoshop and start designing–that is a recipe for wasting time and energy. The ‘Sketching the Idea’ section will address this; however, here we will cover the concept development of a seamless background to focus on how to create a seamless graphic within our design. Sketch sheets are used as a way to stay focused and provide a clean environment for making notations or listing project details.
“The key is to optimize the sizing of backgrounds appropriately and taking into account where the custom image will be used.”
iBooks Author requires that custom backgrounds in general be properly fitted. Graphics must be optimized effectively by resolution (dimensions) and ppi (pixels per inch) to properly appear on an iPad. Of course, from the creative side, custom backgrounds must be carefully crafted in the visual sense using color, typography, interactions like popups or embedded media, as well as animated html-based objects, just to name some obvious considerations. We’ll get to that later.
For iBooks Authoring, custom backgrounds specifically, Apple suggests 2048x1536 px be used; however, this will make the image exceed the page. Obviously, this is not ideal. A simple search on the Web for optional dimensions to solve the issues can be found like this on Quora. It’s nice to know that others have dealt with the issue and come up with, and shared, a solution that makes the custom background fit properly.
As we can see in the Quora post, using a new resolution setting of 2048x1496 px will resolve the issue of overextending the page size when placed in the build environment and also in the iBooks Reader. In addition to the resolution, images will also need to be set to Pixels Per Inch (ppi) setting to ensure that visual media properly displays on an iPad. For this example, we will use a minimum of 264 ppi, which will cover older iPad devices. If we wanted to address newer devices we could use 300 or even 350 ppi to ensure future use of an iBook file is ‘future-proofed’ on higher screen resolutions, but in testing the minimum seems to work just fine.
Step 1 in the custom background process is to build a Photoshop template. In this example I have planned to have a 4-panel seamless background, but the best place to start is to create a template at 2048x1496 at 264 ppi as only one panel. Later, once created and a design has been started, the template canvas can be expanded to meet the new px needs.
Note: By using the 1496 px value will make the image exactly center on a page in iBooks Author. This will also work for full screen interactive images as well as for gallery widgets, too. The key is to optimize the sizing appropriately and taking into account where the custom image will be used.
Step 2 is to create the entire 4-panel background (2048x4 = 8192 px width and 1496 px height) that will be sliced into individual parts when completed. The basic background will include a pavement image that is replicated across the panels and yellow lane markers to add visual interest as well as strategic alignment points for additional objects placed within iBooks Author. Notice the placement of the yellow lines on the pavement background. Each line up according to the guidelines that demarcate the slices, but they also ever-so-slightly overlap individual screen areas to provide a way to disclose that additional material is available–basically visual cues to move readers through the experience.
Step 3 completes the process by slicing individual panel sections, naming and storing the files appropriately, and then integrating the files into iBooks Author to ensure the seams line up properly. The individual panels have been created from the template can be seen moving from top-left to bottom-right.
Planning the Idea
Before creating the background as was done above, a proof of concept was detailed first in sketches. Every object can, and should be considered, down to pop-up graphics, icons, and even visual elements like line art–the goal is to flesh out the ideas first–design them electronically second. Oh, and notations on sketch sheets are critical to ensure that ideas are not forgotten. In essense, sketch sheets are akin to 3x5 note cards. Use them effectively!
One of the hardest things to do when using seamless backgrounds is planning the layout so that media objects flow from panel-to-panel effortlessly.
The proof-of-concept sketches below show the basic ideas for building on top of the background in panels 2 and 3 specifically.
Moving from concept sketch, stock hi-res images from Ford.com of the new Ford GT were acquired. These allowed for perfect integration options.
Using one of the images as the center of focus for interactive elements needed to showcase parts of the car, it was determined to extract the car from the original image and then slice the car image in half so each half could be positioned on different panels. In this particular case, it should be noted that the edges are not totally clear of previous image artifacts. The reason is that by blending in with the pavement it saves time and creates a softer look. In essence, it doesn’t have to be absolutely perfect due to the background.
By doing this, visual interest can be obtained, and a unique experience from page-to-page would also be achieved as a reader could explore content more earnestly. With the idea formulated, and the GT image now sliced, the media could then be integrated onto the seamless background panels, and the concept made into reality!
Integrating Media Objects on Seamless Backgrounds
One of the hardest things to do when using seamless backgrounds is planning the layout so that media objects flow from panel-to-panel effortlessly. It takes time and patience to master it. Don’t get frustrated, but trust in the iteration process.
As can be seen, the GT slices were positioned on top of the seamless background panels, and tricked out with all sorts of cool add-ons directly within iBook Author: round-plus symbols placed on top of the GT offer pop-ups to view hidden content, as well as a scrolling sidebar with unique formatting to highlight GT technology on the right, and image galley objects used on the left to add zest. The GT, however, remains the focal point of both panels and lends itself to exploration by nature of its arrangement. As mentioned in the Building Backgrounds section, the seamless background panel design of pavement really pulls the composition together with the yellow lane markers acting as unique separators.
…a designer’s first task is to use visuals to communicate with people, so find a way to make it special.
Let’s not forget that there were four panels in the template. These were to be integrated with other iBook pages to complete the section. As can be seen, the final design included panel 1 of the seamless background template being used to transition from the GT Cover Page with an element added to panel 1 to bridge from red to pavement. GT information was added here to help in this visual process, which is also a scrolling element itself, giving readers a unique opportunity to explore directly after swiping. Notice also that interactive audio elements have been added in panel 1, as well as line art, to draw attention to interactive media, as well as from one panel, to the next, connecting the 2017 GT on panel 2 and 3. This use of line art helps to move readers across the page and use the swipe action to keep the investigation alive. This is the perfect use of a seamless background–never abusing a layout that feels cut-up or clumsy–rather a more friendly and inviting environment to engage a participant.
As can be seen in the iBooks Author environment example below, the entire 4-panel system can be seen integrated into the section. What’s so great about the iBooks Author platform is the ability to see the entire visual layout from start to finish. If everything has been planned out effectively, created with care, and integrated with a flare for interactive exploration, seamless backgrounds can form the core of a unique experience. In addition, who said that a simple tool couldn’t be powerful? Most students under estimate the power behind simplicity in tools. iBooks Author can be a very practical and valuable creative tool in the hands of a forward-thinking professional.
The following screen capture on an iPad demonstrates how a seamless background can function after integrating panels into iBooks Author and sending out to an iPad to test. While this example is only a test, it shows how much more immersive a seamless background series can be when interacting on a touch-based system.
Lastly, while the authoring tool is important, it’s critical to document everything! Documentation is probably the most undervalued element in the design and development process. In the Digital Media program at UVU, students are taught from the very first class to document everything down to explanations of why a particular design decision was used, the consequences of making a certain design decision, and how such decisions may affect the experience. If that cannot be done in each-and-every project by the time of Portfolio Review, well, then a student cannot effectively defend a design and may run the risk of not being advanced into the Bachelor’s program.
Below is an example of what is expected in a design document when a student turns in a finished project. In this case, this is a two-page spread of a larger document that explains how the Seamless Background has been implemented within iBooks Author. Everything that has been explained in this article has been detailed in this document–as it should be.
Conclusion
In almost any media experience, designers will be faced with many opportunities to push the limits of development platforms. It really doesn’t matter the platform used in digital publishing production of interactive media, be it iBooks Author, InDesign with the MagPlus framework, or some other platform, each have unique ways of development that must be considered. Don’t fight it, embrace it!
Michael Harper is an Associate Professor in the Digital Media Department at Utah Valley University, Orem Utah. He is lead faculty for the Interaction & Design concentration of the Web Design & Development Degree.
All assets used in this demonstration project are in accordance with copyright laws. GT is a trademark of Ford Motor Company and image assets have been used under educational conditions.
