Reference

This video really influence our style and interactivity for our magazine.

Development (5)

For the table of contents, we got the idea to make it like the picture above. The idea is we can pull the text upward. When we pull it, we also automatically pull the picture upward, it's kinda like an illusion.

Development (4)

In this article, actually we wanted to put the read more button, so readers have to press the button if they want to proceed to the next page. But the problem is, the background images is in image sequence (edited in photoshop) and we couldn't put the button over the image sequence even we have "bring to front" command to the button. So, we decided not to put the button.

In this article, we got the idea to to match the audio sound with the image sequence to give more interactivity. We also provide the readers the audio button to mute the audio when reading the articles. Sometimes readers are disturbed with audio, sometimes readers want to listen to their own audio, so we put the audio button there to mute the default audio.

In this page, we faced a problem. As you can see the bottom right images is in triangle shape right. We saw this triangle also in our indesign screen. But when it came to preview this on iPad, the result is different. It became rectangle not triangle. So, actually we missed the illusion a bit in this page. The idea was, an image divided into 2 parts in triangle shape, so when they meet each other, they become a full image. For our lack of knowledge of indesign DPS, so we left the image in rectangle shape. 

In this page, you can see the arrow below the text. The idea was to pull that and it comes horizontal scrollable images. So it is a horizontal scrollable images inside of a vertical scrollable frame. And that scrollable things are put inside object states. Sounds so complicated. For the result it didn't work. The horizontal scrollable images didn't work. So, we decided to make the images not scrollable but we can click it to view it bigger.

Development (3)

(LEFT PICTURE) At first, we use the little circle button (in the 2 guys picture) to give signal to readers where they are now in the magazine

(RIGHT PICTURE) But, we changed the circle idea into the rectangle idea

And for the page separator we use that lines

In this part of article we got no information about what is that art and who made that. So, we just put only pictures.

In this article, we figured out a fun layout. So, basically we made the layout continue from one page to another page. There is continuity (lines).

In the picture, you see the 2 arrows above. Actually, the idea was swiping

the images and behind the image there is the article title. But the lecturer said that a title is a must see things when you read an article. So, we might not hide the title. Then we decided to changed the title hidden with "South India" where Kerala is located and put the title bigger above the picture.

Development (2)

When designing a magazine, a thing that is really important to be considered is FONT. Here, for the Little Bowl of Heaven article, we use Gill Sans which is easy to read. The left and right picture show the difference of leading measure. The right one is easier and more comfortable to read. 

(Left: 19.2pt ; Right: 19.7pt)

For the My Big Safari Surprise, we use Helvetica Neue Light font. In here, we compare left picture and right picture with different size of font and also play with leading. For result, it is easier and more comfortable to read the right one.

Development (1)

When we made the very first sketch (sketch for printed magazine version) of our first article, which is My Big Safari Surprise, we are given ideas of the iPad version by our lecturer. From that point, we knew what we are going to do with the magazine. For example, in the picture above, for one article we swipe up and down, but if we want to go to next article, we swipe right and left. Also, we need to design the front cover, table of contents, contributors as well.

From out first digital sketch, we still need to add the page trigger, which give a clue that there is still another page below.

In here, we need to put a signal/symbol where the readers are at, so they are not confused where they are now in the magazine. For example, that little circle button. The grey one is location where the readers at. And the total of the button is the numbers of page the article has.

We also made dummy or prototype for iPad. We printed the articles in paper with actual size of the iPad (768 x 1024 px) in portrait version. So de can know is it good enough or not.

Wireframe Original Magazine

This is the wireframe of the original Magazine (Conde Nast Traveler)

In here, we noticed that there are too many advertisement in the magazine.

Even, they put advertising in the middle of articles, which confuse the readers. Is the article done or not? So, we decided to put the advertisement before the article.

Pre-Eliminary Parts

My Big Safari Surprise - Article Layout Fix

Return to Kerala - Article Layout

So this is the layout for Return to Kerala article. It is about tourism to Kerala, India. In this article, we use many interactivity than the other article, because this is our main article for the magazine. Also, we use specified color in every article to differenciate each sections/articles.

Little Bowl of Heaven - Article

This is the layout for Little Bowl of Heaven article.

The Best Gifts & Souvenirs from Asia

So, this is the layout for The Best Gifts and Souvenirs from Asia. Basically, this article just viewing several images with little texts in it.