Presentation Slides

Here is our presentation slide which we put only pictures. Basically is about out final mock up and it's own function.

This will be our cover page of the magazine, this will later show in a video on how the images are going to move.

This is our content page, and it will show how it function in video form.

 This will be the page for our lyrics part, there will two songs from a band to let the reader choose.

Once the reader have already pick on which song they are going to learn, there will two instruments for them to choose.

Let's say if the reader choose guitar, the tutorial page of guitar will be shown. The upper part will the song demo just in case the reader not familiar with that particular song, the lower part will be the tutorial of the song of how to chord should sound and the strung.

 This is the final mock up layout of behind the scenes part, the upper part will be the panorama of a studio, to show what is inside the studio.

After swipe the lower part, it will come out these three buttons, which is pre-production (interview), production (recording) and post production (sound mixing).

After the reader tap on interview, it will be the interview of an artist about the studio set up and writing the lyrics. The texts beside the video will a scrollable information, so that the reader can scroll up and down to see the explanation.

When the reader tap on interview button, the picture which place above will be a scrollable left to right frame by frame to show the process of setting up the instrument to the singer start singing. Text below will be the explanation of it.

This is the page where the reader can hear the multitrack of the songs. For example, when the reader tap on the microphone, only the vocal will be played; if tap one more time, it will stop. This apply to the same as other three instruments, keyboard, guitar and drum. Besides than stop and play the song, the reader can also adjust the pitch and volume of each of the instrument.

Presentation

Today is our presentation for final mock up of our design, and our client are suppose to attend to the class and look at our presentation, but because of he is quite busy lately, so he couldn't make it to attend the presentation. So our lecturer decide to use a camera to record our presentation slide, and we explain it. Wanting to save time, we let our leader, Jared to present it.

Picture above is our presentation with our lecturer who is standing at the tripod there, and Jared (sitting) explain it.

Final Mock Up for New Layout of Behind the Scene

During the discussion about the the mock up for the behind the scene part, our group mate Nathania come out with a new layout of behind the scene.

So we sketch it out for the rough idea.

After having a rough idea, we immediately execute it. I have come out with the design for the introduction of behind the scene part.

This will the introduction part of behind the scene, there is an arrow there which will lead it to another page.

This is the page where it will lead to. There are three part of it, which is pre-production (interview), production (recording) and post production (sound mixing).

 This will be the pre production page which design by Spencer, after the reader tap on interview. This will be the interview of an artist about the studio set up and writing the lyrics. The texts beside the video will a scrollable information, so that the reader can scroll up and down to see the explanation.

This will be the production page which design by me, when the reader tap on interview button. The picture which place above will be a scrollable left to right frame by frame to show the process of setting up the instrument to the singer start singing. Text below will be the explanation of it.

This is the post-production part which designed by Jared, this is the page where the reader can hear the multitrack of the songs. For example, when the reader tap on the microphone, only the vocal will be played; if tap one more time, it will stop. This apply to the same as other three instruments, keyboard, guitar and drum. Besides than stop and play the song, the reader can also adjust the pitch and volume of each of the instrument.

Scrollable Panorama Photo

Then I also found a link which show us how to create a scrollable panorama photo by using coding and jquery. I found this is useful as for the introduction part of behind the scenes, after discussion with each other, we decided to have one part of scrollable panorama photo of a studio, this is to show the reader how a recording studio looks like.

Click HERE for the link. 

Research on How to Create Play and Mute Button using Adobe Edge Animate

Recently I have found one link which show how to create play and mute button by using Adobe Edge Animate. I find this is useful as for the behind the scenes part, we are planning to have some sound mixing of a song, so this can be use as a button to play and stop the music.

Click HERE for visit the link.

Week of Being Leader of the Group

During the time when I was the leader of this group assignment, I have manage the time well and make sure that our group don't do last minute work, as that would be very rushing and we cannot ensure that we will make it on time.

And now it's time to choose a new leader, and the new leader will be Jared Yap.

Final Mock Up for Cover Page, Content Page, Lyrics Part and Behind the Scenes

After a group discussion, we have decided on the final mock up for cover page, content page, lyrics part and behind the scenes.

This is the final mock up for the cover page by my group mate, Nathania. We will make it animate.

And this is the final mock up for content page by our current leader, Jared Yap. Beside than just only a content page, he also decide to make it interactive in a way that the reader can tap on the content that they want to read, and it will straight go to that certain page. 

For the lyrics part, we have chosen the design from our group mate, Spencer Koh. He make it interactive by, the reader can tap on the songs that they want to have tutorial with, and then there will be two selection of instrument, guitar and keyboard.

After selecting the instrument that the reader want to learn, this page will appear. The upper part of it is the sample rhythm of the song just in case the reader are not familiar with the song. Whereas, the bottom part of it is the video tutorial for the songs. By the way, this page was design by Jared Yap, as we combine both of the idea.

 As for the behind the scene part, this was design by Nathania. The black rectangle above will the a panorama of a recording studio, as the reader scroll along, there will be a pin point on some of the recording equipment. The reader then can tap on that pin point, and read the description of the recording equipment. Whereas the three boxes below, the process of making an album will be explained. And the black rectangle which place on the left side will be a short video of an artist' interview.

Mock Up for Cover Page, Lyrics, Behind the Scenes Layout

Here are the layout mock up for content page, lyrics part and behind the scenes.

 Mock up for Cover Page.

Mock up for Lyrics part. Upper part of the page will be the picture of a certain band as a background and the one with darker grey will be the lyrics, and the one with lighter grey will be the chord.

The below part of the picture will be the tutorial of the songs, so the reader can choose which instrument they wanted to learn.

Mock up for behind the scenes page. The upper picture which show the guitar will be a short interview from an artists, and the three column below will be some explanation of how an album was produced.

Sketches for Cover Page and Content

Here are my sketches for both cover page and content.

The pictures above are the rough sketch for cover page, which I wanted to include the picture of a certain rock band.

 Pictures above is a rough sketch of the lyrics part content. There are three types of instrument below, which the reader can choose the instrument that they wanted to learn by watching the tutorial video.

Picture above is another rough sketch for the lyrics part, which share the same idea with three instruments as a tutorial video. But I add a play button on the right side, this is to play the whole song and let the reader to listen, just in case the reader are unfamiliar with the song.

Idea for the Content of the Magazine

After looking through the magazine, we discuss on the what we wanted to do for the content of the magazine that we going to create. We are require to create two content, one is improvising the original content of the magazine and the other one is come out with something new for this magazine.

After discussion, we have decided on improvising on the lyrics part to make it interactive. Besides than having song lyric, there is also a tutorial video for each of the instrument for the particular songs: guitar, bass and drum. We decide on this idea is because some people may not know how the song should sound like, so they could watch the video to know how the music sounds like, then they could learn from the video step by step.

Our second content of the magazine, would be behind the scenes of how an album was produced. As we thinks that maybe the reader will be interested in how an album of their favourite singer or band were produced, and what need to be done. 

Research on Magazine

Our group had done some research on some of the interactive magazine for our inspiration.

Picture above is one of the page for the interactive magazine, the purple tab in the picture is a link to the certain website.

There is also video in an interactive magazine for the reader to view and maybe the reader will be more understand about what the article is saying.