COMPASS — A digital magazine case study
Experimenting with the Mag+ plugin for Adobe inDesign
Introduction
Compass magazine features successful local businesses within the north-central area of Utah. In this digital publication, Compass will be highlighting the following stories:
- Bear Butt: Outdoor Gear Business
- GOGA: Goat Yoga Business
- Joe’s Cafe: Southern Breakfast, Lunch, and More
- Penguin Brothers: Ice Cream Sandwiches Business
The goal of this publication is to establish a clear, consistent, and effective visual identity for the Compass magazine to ensure that users will have an optimal digital experience through the Mag+ platform.
1. Research
I wanted to feature stories of unique businesses around the north-central part of Utah (since I wanted to learn more about local businesses). Out of the four businesses, I found three of them online through Facebook advertisements, Instagram, etc. The one business that I actually found locally, on UVU’s campus, was GOGA.
One day after walking home from school back in the spring of 2017, I saw two guys with goats and had to stop to ask them what they were about.
By talking to them, I learned that they had a business “where goats and yoga meet.” Fast forward about a year, here I am working on a project covering their story. I wanted to cover stories of businesses that were unique in their own ways like GOGA, so I reached out to all of the owners to learn more about their businesses.
In order to get content for this project, I contacted the four companies and asked them the following questions:
1. What’s the history of your business?
2. What inspired/motivated you to start this business?
3. What’s your mission?
4. What advice do you have for marketing a company/building a brand?
5. What does success mean to you?
6. What career advice would you tell your younger self when you were starting up your business? For example, what did you learn from your failures?
7. What are the benefits of working for yourself?
2. Ideation
One of the first things that designers must go through when starting a new project is to organize their thoughts on paper. Therefore, to get a better idea of what my project was going to be focused around, I organized the content that I’ll be including onto sticky notes. I planned on having a total of eight pages or verticals.
Publication Map
Initially, I was going to cover the stories of Bear Butt, Haugen Creative, GOGA, and the Penguin Brothers but since Haugen Creative never had the chance to get back to me, I decided to replace it with Joe’s Cafe’s story.
Structure Map
Each gray box represents a vertical or page within the magazine. To create a well-structured project, I included the following elements:
- Cover
- Table of Contents
- Help Page
- Bear Butt
- GOGA
- Joe’s Cafe
- Penguin Brothers
- Advertisement
I organized the verticals into three separate sections so that it was similar to a layout of a book — beginning, middle, and end.
Vertical Layouts
Cover: The cover of this publication will have a picture of a mountain to not only reference Utah, but to also have a cryptic-like analogy that could help emphasize that success is like climbing a mountain. As the user scrolls up, I would like the A-layer to smoothly go over the B-layer as an overlay.
** Layers within the Mag+ plugin will be explained later in this article. **
Table of Contents: The table of contents is a pretty straight-forward layout. I utilized jump links on this page so that people could easily go to the pages that they want.
Help Page/Gesture Navigation: On this page, I simply explained the types of gestures that are possible within this publication.
Overall layout: For the layout of the company articles on Bear Butt, GOGA, Joe’s Cafe, and the Penguin Brothers, I will be utilizing a similar and consistent template. The beginning of the article will give a brief overview of the company and as the user scrolls through the article, I will present photos and videos, and answers to the questions I asked them.
Advertisement: At first, I was going to create an advertisement page for the Penguin Brothers’ catering service but because I wanted to include a VR object for this page and couldn’t think of anything else besides an ice-cream sandwich to create into a VR object, I decided to change it up a bit. Technically, I probably could have created a VR object for the ice-cream sandwich but that would have been messy so I chose something a little easier — a hammock. Instead of featuring Penguin Brothers’ business, I chose to do an advertisement for Bear Butt.
Content
When I contacted the four different companies, they all responded with excitement and were willing to help. After receiving content and approval to use each company’s photos and other videos, I began collecting assets. Once I got all of the content that I wanted to include in this project, I started organizing my files. Something that I’ve been strongly working on this past year has been getting better organized so that I don’t have to scramble through everything to find what I need.
To learn more about how I got in the habit of organizing and managing my files, you can check out my article here.
3. Implementation
Once I collected all the assets that I wanted to include in this project, I began plugging them into my vertical layouts. The hardest part was grasping how layers worked in the Mag+ plugin for Adobe inDesign. If I wasn’t careful, sometimes I placed things in the wrong layer and it would break certain elements or even the entire vertical. Paying attention to every little thing I did when making this was extremely important for this project. I’m usually detail-oriented but I had to be EXTRA detail-oriented.
Mag+ 101
Within the Mag+ plugin, there are predefined layers that I had no knowledge about. Even though I didn’t understand the layers very well in the beginning, over the course of this project, I became really familiar with the following layers:
- B — Layers: The main background/base layer
- A — Layers: The layer that scrolls over the B-layer
- C — Layer: The layer that contains all the hotspots that reference an element on either the A or B-layers
- D— Layer: The layer that contains all media files like videos or audio
Features
My goal of this project was to properly implement Mag+ features to create an effective interactive experience. I demonstrated the following elements and features in this project:
- Snapping: Lining up elements on the A-layer (top layer) with content on the B-layer (main background layer)
- Pop-ups: Triggering the appearance of an element
- Media Files: Embedded videos
- Slideshow: Swipeable photo gallery
- Long Start: A seamless two-vertical spread
** For whatever reason, possibly because of a template issue, a black line appeared in the middle of this long start layout. **
- Dual-layout: Layout supports both orientations (portrait & landscape)
- Panning: Ability to scroll an image inside of a box that’s smaller than the image itself
- Scrolling: Scrollable text
- Jump links: Internal navigation (mainly used for the Table of Contents) that allows people to jump to a specific spot on a vertical or to an entirely different vertical
- HTML Object: With the help from a good friend of mine who let me use his hammock, I was able to make my VR object! Yay!
Challenges
I have to say, the three biggest problems that I faced when creating this digital publication were the following:
- Slow Wifi/Bad Network: Of these three challenges, I think the one that I got frustrated with the most was the bad network. I probably spent as much time waiting for my files to transfer over to my iPad Mini to test my project as I did creating the entire project. Okay, I’m over-exaggerating… but the point is that when I couldn’t review my vertical(s) very fast, it got a little frustrating. Maybe I’m just impatient.. Ha. :’)
- Snapping: Getting the timing right on the snapping between pages was really difficult. I wasn’t able to get the snapping to my liking but it’s a lot better than my original version. There’s definitely still a lot of work that needs to be done with this feature.
- Layers: As mentioned before, I had to be very mindful of what I was doing when I added new elements to a vertical. For example, if I didn’t properly place an invisible box over a text (for a jump link) in the “B — Slides — main content” layer instead of the “A — Main Tower — for inline body text” of my “Table of Contents” vertical, it broke the layout and put a white box over the text, like so:
Figuring out what went wrong was the most time-consuming part but after playing around with the elements, I was able to eventually fix it. Once I found out what was causing the problem, I was able to create jump links that actually worked.
What Worked
Like any other project, it’s beneficial to stay organized as much as possible. Here are a few things that helped me the most:
Naming Layers: In order for me to make sure that things were where they were supposed to be, I had to name my layers properly. I had to be very descriptive so that I could easily find elements on a vertical. Doing this was especially helpful when I created pop-ups because I liked to toggle the popped-up images’ visibility so that I could work on other parts of the page without having these images in the way. Shown below, is an example of how I organized my layers for one of my verticals.
- Grouping Layers: Another way I tried to keep track of things was by creating groups. I selected layers that were similar to each other and grouped them. One major problem, however, was that I had to be careful of what I grouped together because I found out that some features (like jump-links) broke when objects were grouped.
4. Testing
Testing any project is critical but unlike any other project that I have done before, I tested my publication countless times. To test my project, I utilized the Mag+ Production Tool.
It was critical to test my verticals every time I made changes just so that I could make sure that nothing broke and to see if everything was functioning the way they should be.
Walkthrough
Conclusion
Although I wasn’t able to effectively master all of the features the way that I would have liked to in this publication, I now have a better understanding of the Mag+ platform and feel confident that through practice, I will be able to develop a more well-designed, tablet-centered digital publication in the future. With this project, I ran into many problems that were difficult to fix. Luckily, by collaborating with others and getting advice from them, I was able to fix most of the issues that I had within Mag+.
****************** As always, thanks for reading! ******************
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 2270 Digital Design I course and is representative of the skills learned.
