A Digital Publication Journey
Abstract: Using Mag+, I created a digital publication about Pokemon using A-layers and multiple B-layers. I added content that included images, text, HTML Hype animations, and video. I used overlays, snap-to-top, jumplinks, slideshows, pan boxes, and a simple dual layout to create my digital publication.
The Idea
This digital publication didn’t necessarily solve a problem but enhanced a brand’s product. The Pokemon brand has plenty of iterations. Within that, there is an older product they have sold: the original Pokemon Handbook. Its pages bring the Pokemon and the story of the anime to life. Taking this idea and developing an interactive publication was the main idea of this project, with a couple of tweaks.
The Process
The requirements for the project were to have 6–8 verticals, making each of them an interactive experience. I had two topics that I was interested in. One was Pearl Harbor, and the other was Pokemon. I decided to create an interactive publication on Pokemon. I wanted the publication to show people in my generation, 20–30-year-olds, why they loved the first season of Pokemon. My plan for the verticals started with the things I wanted to add to it, then went to where I would put each item within the verticals.
I started my plan by collecting assets. This included adjusting images, creating icons, finding and downloading videos, and cropping those videos. This process took a long time, and further down the road, I needed to find more images.
I started building the cover. It was straightforward with the Pokemon logo and title of the publication. As an easter egg, you will see this if you scroll up past the bottom of the B-layer.
When you flip the screen to horizontal, this easter egg will show the original Pokemon theme song. I added this feature for nostalgia at the beginning of the publication. I know those who find and view it will love the idea.
The following page was the storyline. I added a map of the Kanto region in the background. The idea behind this comes from books about epic adventures. In the beginning, they add a map to show the reader where they are within the book's world. The map comes from the Leaf Green version of the game. I used that image from the internet to base the interaction of where the characters were within the storyline.
Within Mag+, there is a feature called snapping. I used this feature on this page to have the points on the map snap to where they needed to be. You include the selector image and an invisible box to implement the feature. Grouping them, you add a snap to the top using the digital publication tool under the designd object panel. Once the map markers and the written content's correct location were set, I spaced them evenly on the A-layer. The spacing fit the size of a tablet screen so that each map point was by itself. There were 16 map points, meaning 16 pages of content.
The amount of content on the storyline page created a problem in the final implementation. I needed multiple verticals within the InDesign page, 3 in total. On each vertical you have to change the content of the B-layer, otherwise, the page will have white space. Each time the B-layer switched, the movement of the B-layer detracted from the content on the A-layer as it switched between the images. Lost on how to fix this problem, I asked my teacher and a classmate how I could fix it. They suggested using overlays.
Overlays are another layer covering the A-layer and B-layer on a verticle. To start, you create the original verticle with the central portion of your content. In my case, this was only the content on the B-Layer, the map. The next step is to take a new InDesign file and put the content you want to appear on top of the A-layer and B-layer. In my case, I put the content on the A-layer from my previous attempt into this new InDesign document. After the content is added, within the designdvertical panel, there is a radio button labeled overlay. You activate the button, and the document will now be available as an overlay. The final step within InDesign is to have a blank InDesign file. That file will cancel out the previous overlay.
To implement the overlay within the Designd Production tool, you right-click on the background content of the vertical, and this option box appears,
You add a new section before and a new section after the vertical. You put the overlay with content within the first section and then the blank file within the section after the main verticle—a verticle sandwich.
The following section I added was the characters. The character page took the longest. My basic plan for this was to introduce the characters through text images and videos. I didn’t want the article to be as long as the previous section, so I combined some characters. The groupings were Ash, Misty, Brock, Team Rocket, Ash’s mom, Professor Oak, Nurse Joy, and Officer Jenny. Then, there were two more characters, Giovanni and Gary Oak.
The videos for each grouping of characters were made into a slideshow. When adding the videos to the slideshow, sometimes the grouping box would cut off the content of the video. To fix this, I had to line each video up perfectly. I would get a white space where I didn’t want it if I didn't.
The next problem I ran into within this vertical was lining up the A-layer and B-layer so the changing of the B-layer wouldn’t show. If you put the content from the previous artboard on top of the subsequent sections B-layer, the transition will be seamless. The correct layering of items fixed the issue shown below but switched how the transition worked at the bottom of the page. There wasn’t enough content from the previous artboard on the final artboard of five to cover the B-layer transition. Instead, I switched the image on the B-layer onto the A-layer to cover the transition.
The final four verticals all followed the same pattern. This design decision was based on a book that was created in 1999.
The book used the same color scheme as the rest of my digital publication: yellow, red, and light blue with accents of white. Each page had a tri-color background, a circle under where the A-layer image would be, and the title of the verticle on the top left corner and followed the color scheme chosen. Then, the A-layer had the text and cut-out images of each Pokemon the trainer has as a partner.
Each of the cut-out images came in varying sizes. In one case, this image size variation negatively affected how the slideshow was implemented within Mag+. The images are put in a grouping box when you create the slideshow. The box conforms to the size of the biggest image within that box. This conformation causes any smaller images to expand to fit the larger image's size. To combat that problem, you only have to make the grouping box smaller. If you fix the image sizing within the grouping box, it doesn’t fix the issue.
The final two sections I had to create were the ‘how to use’ page and the table of contents. On the ‘how to use’ page, I arranged the icons and other information based upon an example of a ‘how to use’ page I found using Google.
It explains the fundamental interaction of the digital publication and informs the user what the icons mean.
The table of contents was basic, with the names of the pages and animations off the side to create interest. I began with the page titles. I made a concave shape within Adobe Illustrator on one side and a rectangular one on the other. I added the text within the shape and adjusted the shape to fit each line's length better. I added the asset into InDesign and began creating the animation. The animation I chose to develop was a rotating image of a Pokeball. Using the program Hype3, I took the image of the Pokeball, adjusted the image, and animated it to spin in a circle continuously. I exported the asset as both a video file and an HTML file. The HTML file worked better than the video file. I used the HTML animation.
My original intent was to have the Pokeball partially off the screen. However, the way I created the animation within Hype 3 made it more sense to display the full Pokeball.
The last step was adding minor details to bring the whole experience together. This last step included linking the different verticals, adding wayfinding items like arrows, and adjusting the colors of the text to blue. The jumplinks were challenging to figure out. You must change the hotspot type to a jumplink, not just a link. I also tried to create a jumplink to a specific area in a different vertical. It didn’t work and wasn’t important enough for my design for me to figure out how to fix the problem. I added the wayfinding and was officially done designing the publication.
I have exported all the verticals to the design production tool and organized them according to my plan.
Outcome
The video link below shows off the final product.
What I Learned
This project has continued to teach me that user experience design isn’t only for websites and apps. It includes a wide variety of mediums and platforms. UX design will play a part as long as a user is involved. Honestly, the user experience could be anything. It’s only limited by our imagination.
