Architectural Record Digital Edition

digital publishing design

 

About the Project

Architectural Record is a monthly magazine dedicated to architecture and interior design, published by BNP Media. 

As the Production & Visual 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. 

My role

Production & Visual Designer

Date

February 2014–Present

URL

itunes.apple.com/us/app/architectural-record-digital-edition-bnp-media/id1068285546?mt=8

 

 

Design Challenges & Process

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 used the print pdf version of the magazine and adapted to fit iPad, iPhone and Android phone and tablet screens. In this process, I designed some screens and interactions to enhance the user experience.  

 
IMG_0854.png

Dual Orientation Design

AR_dual.png
 

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.

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 Screen Design & Bookmarks

AR_contents.png
 

I created a drop down menu for the contents with jump links. I designed different templates to fit the different iOS and Android devices. In addition, I added bookmarks to highlight special sections of the magazine.

 

Video Screen

AR_video.png
 

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.

 

Slideshow Design

AR_slide.png
 

I designed a slideshow template. When the user taps the “Tap to see slideshow” button, the slideshow appears on a popup screen.

 

Help & Feedback Screens Design

AR_help.png
 

I designed both Help and Feedback screens. Help screen is placed after the cover page in every issue of the magazine and the Feedback screen is placed after the last page. Users can write us an email by tapping the email icon.