week 6 - PRESENTATION THROUGH VIDEO

Hello! today we did presentation with our mockup consisting of cover, contents, lyrics, and behind the scenes page. We did some brainstorming on last Saturday and finalized our animation for cover, contents, and behind the scenes page.

Finally, we got it and below is the finalization mockup of our magazine starts from cover, contents, lyrics until behind the scenes pages.

FINALIZED COVER PAGE

Basically, it is started with cover title, actress, and magazine edition. Then, it is followed by red slanted banner as main topic of the magazine, quotes or short opinion as well as another yellow part given in the magazine.

FINALIZED CONTENTS PAGE

Animation is shown through video below.

FINALIZED LYRICS PAGE

For lyrics part, it comes out with album title and once it is clicked, instrument options will appear and we could choose either one of it. 

Then, lyrics page appear and could disappear as the song passed by. Also, we could "play or pause" the songs and skip it to another timeline. 

Video below is for instrumental tutorial of learning the music key through guitar or keyboard. Furthermore, we could choose music chords based on "verse1" part below.   

FINALIZED BEHIND THE SCENES PAGE

Once you click "right thin arrow" or swipe it right, it goes to the next page consisting of pre-production, production, and post-production options where we can choose which pages we want to go. 

Pre-production is based on interview section of how they set up their equipment and preparing lyrics through video.

Production is more to their recording section where images could be swiped to the left or right to see another images.

Whereas for post-production, we do the arrangement for musical instrument through sound mixer analog and could see sound wave on the graph above. While on the top-left, there is 4 options of musical instrument which we could choose to hear the melody of each instrument. 

(E.G.) When we choose 1 instrument on the top-left, that instrument will play and we could adjust the melody of another instruments based on the sound mixer analog below.  

another random week --> WEEK 5

It's another week of presentation. Meanwhile, i do not know there will be a presentation on Monday and Mr. Razif commented our progression whose progression is not that much. Then, Jared suggested us to do mindmapping. So, we can elaborate our ideas in point form.

As this week stil running with discussion, we still thinking of how our behind the scenes page will be. Whereas cover part animation has already being discussed. We only need to animate it as our mock up for the next section with doing some changes on the cover.

Hereby, image below is our finalization for next presentation.

Another NORMAL week4..

Okay, for Monday section, it was a presentation about our magazine mock up which is for my group, we do not do much changes since we consulted last time. Hence, we started our presentation with cover, contents, lyrics, and behind the scenes mock up. Nonetheless, we still need some ideas for behind the scenes as interactive section seems quite limited for this part.

Then, we fixed our magazine cover and abbreviated lyrics part, also brainstorming the ideas for behind the scenes. However, i asked Mr. Razif because i feel like my group really stuck in behind the scenes idea and he gives suggestion to us. After that, Jared found the web which is playing several instruments and once we click the instrument, it will stop until we click again to play.

Based on discussion and some improvement in design layout, below is the images of cover design, contents, lyrics, and behind the scenes part which is still not yet changed.

cover design

contents page by Jared

lyrics part by Spencer

Behind the scenes rough layout

So far, we still discussing about behind the scenes part until Friday. Nonetheless, the solution of layout has been settled with doing panorama and parallax scrolling for each parts. However, for interactive media, it still quite difficult to be applied into "behind the scenes" part. 

Week 4 is like a brainstorming week to find out ideas for behind the scenes part which has lots of limitation as every steps (pre-production, production, post-production) seemed having not too much interactive way...

To be continued to week5~~ 

1ST LEADER REFLECTION -> ADRIANA

During this 3 weeks, Adriana becomes our leader and she arranged it well. She managed and write notes during our discussion and gave feedback rationally. During her period, we finalized the page we want to focus which is lyric and "behind the scenes" as additional section.

She also active in Facebook group and gave reminder.

Regards,

Nathania

week 3 - DISCUSSION

So far, we discussed about how the tutorial instruments will be looked like. The conclusion is doing instrumental tutorial with swiping up or down the strings together with "listen to video" button below. The chord could be chosen and will be highlighted once we select. Instrument is played and reader could learn the song. If they feel bored or not understand, video of finger playing the song can be played.

Despite of inserting music instrument tutorials, it will show the lyric passed up and disappear as singer has sung the part. Furthermore, he suggested to create 2 instruments which are guitar and keyboard.

Then, behind the scenes page is using parallax scrolling to show what are they doing during the process with dividing into sections which is pre-production, production, and post-production video parts concurrently with articles on the left side. Once the video is clicked, another box will appear and we can swipe left or right to see the progress (parallax scrolling).

This is my idea about cover, contents, lyrics, and behind the scenes page.

Font in my idea : BEBAS - ALFA SLAB ONE - GEORGIA- JFROCKSOLID

COVER DESIGN

WHERE IS THE INTERCTIVE PART FROM COVER ?

- Once gadget shows cover page, magazine title will fade out 

- Continuing with slanted red box in the middle and pop out the main topic of the magazine

-It is followed by the actress slightly coming inside the magazine from the right side if the finger touch the screen

- Then, text on the left part will appear horizontally as well as texts at the bottom. Only the coming side is different 

- It shows barcode and edition in the end with ease in. 

CONTENTS PAGE

Normally, there is less interactive in contents page. For this magazine, both of the circle above are able to give short explanation about what is inside the "lyrics" and "behind the scenes" page once we touch it. 

WHAT DO I FEEL OF THIS PAGE ?

- I do not feel "rock" enough

- It seems having many spaces available

LYRICS PAGE

HOW TO MAKE THIS INTERACTIVE ?

- Once icon is clicked, instrument tutorial will be shown either for practice ourself with choosing the specific music key and reader will learn through the song played or watching the video directly with press button given. The idea came as we did discussion before. 

- Song can be listened without going to instument icon by pressing the play button below album lists. As song is being played, lyrics will come up following the song sequence. 

- Album is made into 3D where it could be turned so reader would see the whole album design cover.

BEHIND THE SCENES PAGE

HOW TO BUILD INTO INTERACTIVE AREA ?

- Based on the suggestion, at the top of page, it shows the panorama of whole studio condition and activities

- It is followed by scrolling text for each sections which is for me, i divide into pre-production, production, and post-production part

- On the left side, there is box to be clicked and zoom in into larger screen. Then, we could see the progress of each sections by "parallax scrolling" the screen

- On the right side, text is able to be read with scroll up or down the text

Overall, it has not been decided yet for either cover or another pages. 

WEEK 3 --- > PROPOSAL AND PRESENTATION day !

Basically, we have to show our rough sketches to the client. The sketches consist of cover, contents, lyrics, and behind the scenes pages. It will be better if we present our wireframe as well.

For the cover page, i put main actress in the middle to make the words on the left and right side balance as well as playing with fonts to show which article is really important in this magazine and what is for additional only.

Then, content page focused on the main topic with creating circle icon on top above with number page and inserting the play button on the right side of the words for reader to click the button and see page explaination. Pictures below is for my cover and contents page ideas.

So far, my group (Adriana, Jared, and Spencer) is doing magazine layout for lyrics and behind the scenes page. So, we have to make an improvement for our lyrics page which i add some guitar, bass, and drum tutorial on it by inserting the button. Then, i put album cover on the right side to show reader how the album looked like by turning the album into 360 degrees and song lists in it. Moreover, lyrics title and chord should be inserted. Below is my sketch of doing lyric page.

Furthermore, i have not thought about "behind the scenes" page yet as my group still needs to interview other people to get the page concept of it as we still arguing between showing the video together with behind the scenes and interviewing an artists or separated by divided into parts.



Luckily, draft proposal has already being done last week where we only share and show where our ideas come from and we did some questionnaire to ask interviewer about our additional page. Nonetheless, the questionnaire must be pending for a while due to re-confirmation with the lecturer again. The image below is about our questionnaire ideas...

Overall, this is for today. The presentation went well. We got motivation feedback from ROTTW magazine editor itself.