About the Project
Architectural Record is a monthly magazine that is dedicated to architecture and interior design, published by BNP Media (see my other project with BNP media here). As the production designer of this project I have been producing the digital editions of the magazine to iPad, iPhone, Android tablet and Android phone apps. The goal was to create digital editions of the magazine that would emphasize the beautiful architectural imagery and include multimedia content such as, links, slideshows and videos, to enhance user experience and make the digital editions visually appealing and interactive. Take a look on the video above to see the app experience. Or download the app on iTunes store.
The company needed a low cost and fast solution to adapt the print content to the digital content. The project manager decided to use Mag+, a digital publishing software for Adobe InDesign users.
Because of the company’s time and budget constraints, redesigning the entire digital edition wasn’t an option, so instead I use the print pdf version of the magazine and adapt to fit the iPad, iPhone and Android phone and tablet screens. I was trained by a Mag+ employee and read and watched their tutorials online to understand how to create the digital content for the magazine app. In addition, I have trained other colleagues on how to use Mag+ and assisted my manager on writing a manual for the Digital Edition workflow.
After learning everything I needed to know about the project, I started sketching wireframes for the screens that needed to be designed: dual orientation, contents, slideshow, video, help and feedback.
dual orientation design
The team decided the best way to display the pages of the magazine was on a vertical orientation, but the pages that had a horizontal image across the spread looked cut off.
The Mag+ software allowed us to do dual orientation of the screens, but unfortunately on horizontal view it would repeat the same spread twice. Because of this glitch, we decided we couldn’t do dual orientation on the entire issue.
I had the idea of creating a dual orientation screen. I added a button, “Turn to view image,” to guide the user of turning the iPad on the horizontal orientation view and be able to see the image bigger, it also allowed the user to either pan or zoom the image to see more.
CONTENTS & BOOKMARKS
I convinced my manager that was important to create a drop down menu for the contents with jump links to help the user to navigate. I designed different templates to fit the different iOS and Android devices. In addition, I added bookmarks to highlight special sections of the magazine.
I designed a slideshow template to fit tablets and phones screens. When the user taps the “Tap to see slideshow” button, the slideshow appears on a popup screen.
To display videos I included a “Tap to see video” button, when tapped the video appears as full screen, on both portrait and landscape orientations.
The team and I determined to add 200% zoom for iPad and Android tablets screens and 400% for iPhone and Android phones to improve legibility.