WEEK13 - FINAL PRESENTATION DONE!

Finally, after several though week to solve the problem in post-production page and found that there is limitation in Adobe inDesign. So, we decided to do presentation for post-production part in browser as sound mixer could run well in browser eventhough it is not working well in iPad as only 1 slider can be moved, can not do "increase and decrease" volume, can not mute bass or keyboard or guitar button, etc.

However, it is going well in browser. Everything went well. We did presentation slide in prezi and show the prototype from iPad while explained the problem of post-production page in browser.

Last but not least, everybody in our group did their job really well especially for Jared who spent mostly of his time to solve the post-production page. Thanks to Mr. Razif for helping us in solving the problem in fact, this is because of adobe inDesign limitation.

We started with "random picking-up" group members and ended up with satisfying outcome xD

WEEK12 - ALMOST FINISHING TOUCH WEEK

Finally! it is week 12 and our group almost finish all the problems. It is started from applying prototype to iPad which is working well eventhough post-production page has not been applied yet. Then, our group also did color correction for videos in pre-production page as well as convert the video into image sequence for production page.

As for contents page, we finalized the design and Jared will do the animation for this page while cover page needs to be animated and did some changes in arrangement of graph timeline in order to get a proper animation.

Furthermore, i would do bit of color correction for video of the studio in order to get same color and convert it to image sequence through Adobe After Effects for panorama purposes.

Overall, everybody did their job really really well and finally, we almost finish our stuffs for this subject! yippie! XD i could say that Adriana, Spencer, and Jared did really good job in solving post-production page while me... spent my time doing animation... ;A; and re-arranging the cover page as the band is changed~

Overall, here is the cover page that we have finalized and would be animated.

and here is the temporary animation of the cover before i did changes in ROTTW title and band

WEEK 11 - MUSIC STUDIO SETUP recording

Finally, Spencer got permission to use music studio. Then, we prepare for the stuffs like borrowing lighting, cameras, and ask our colleagues such as Adrian, Izzat, and Khairie to pretend becoming a band member. 

So far, we use 3 cameras and it started from Jared adjusting the camera. Then, recording started. It goes well eventhough we faced problem that there is no cable for connecting guitar to amplifier. 

First of all, we did instrument recording with focusing on every instruments and hands of the player. The instruments used are guitar, keyboard, and drum. 3 cameras used are focused on player's hand playing guitar and keyboard while another one shows those 3 players playing the instrument in 1 screen. 

After finish recording the instrument, we continued with studio setup by showing band members arranging the equipments. 

Overall, that's all for today section. All of recording is finally finished. Now, our group managed to do color correction and crop the audio.

WEEK 10 - TOUGHFUL FRIDAY

Today, i saw most of my friends were in not good health condition. I started to think, "is it caused by week 10??" as submission deadline become closer. Okay, back to the topic...

Today, our group arranged cover design as Jared, Spencer, and Adriana have another opinions to make it looked better. So far, Jared helped me to re-designed the cover. There is quite troublesome in solving cover page design as the wall texture lighting is not balanced and affecting color implementation in the text. Then, Jared suggested to adjust the lighting and make it as similar as another wall color. Finally, it works. We can see the words clearly. Another change is adding drop shadow for every texts to make it looked obvious.

Today, we also did research about indie rock band album to see their font face whom everybody agreed to use "secret agency" font as "Kluk Kluk Adventure" title. It is continued with the changing of color where we have to think the appropriate color for the band.

Then, we planned to do post-production page together on Monday as it is listed down the things that we have not finished yet in facebook group such as :

1. Post-production page
2. Cover animation page
3. Interview with band
4. Music studio recording
5. Setting up the article in Bahasa Malaysia for panorama page, pre-production, production, and post-production page

To be honest, the most challenging part for our group is finding a solution to solve post-production technical part. Hopefully, it will be settled soon :)

So far, this is the mockup of our cover page.

WEEK10 - AN ENDEAVOR WEEK

This week was filled up with solving the problem of creating sound mixer and scroll bar button in post-production page. Therefore, Jared, Adriana, and Spencer did  research to get the solution. So far, it could be done in Adobe Edge Animate. But, another problem appear which i was not so sure what is the problem about... hehehehe v(=u=)a

WAIT! so what have i done for this week?... O.Oa

Basically, my task is re-arranging the cover page as the artist and concept design is changed. Hence i did some research about band genre called "Kluk Kluk Adventure". It's quite different with our previous cover design whose artist is Metallica. A bit change have been done eventhough i have not shown it to group members. 

I will show the cover page on Friday as everybody seems quite busy with their own tasks >.<. Pictures below is a temporary cover page for our group.

If the cover is agreed. Hopefully next week could come up with the animation as well. At least, we capable to show on Friday or the week after. Cheers! 

WEEK9 - prototype for the first 2 pages

Adobe inDesign takes part in the making of interactive part. However, my part is to do the first 2 pages which i think the solution is quite simple and prototype turns into something like this.

Pictures below is previewed with Adobe Content Viewer. Overall, the button works except for 3 circles on 2nd page as it has not been set up yet. 

1st page     : using image sequence

2nd page   : using panorama

3rd page    : using pan and zoom

So far, panorama prototype for studio environment is being explored with those options. Furthermore, our group will choose either pan&zoom or panorama for the outcome.

WEEK8 - FRIDAY

Actually, there is not much thing done in Friday. As for our group, we did research and try to apply in Adobe inDesign. However, we do not have adobe edgecommons plugin which is really important to add sound in Adobe Edge Animate as an interactive way needs this software.

Then, Mr. Razif suggested us to do in Adobe Muse and reminded us that Adobe Flash can not be used in lots of circumstances.

Furthermore, we tried to solve our cover magazine by replace the previous cover image with "Kluk Kluk Adventure". It comes different and we need to adjust everything.

But, our focuses for mid-term break is finishing our Behind The Scenes task. Another improvement for cover and contents page will be done after we solve our "Behind the Scenes" page.

WEEK 8 - MONDAY... QUESTIONNAIREDAY

For today, we did some tutorial to add sound and stop it in Adobe Edge Animate. Adriana, Jared, and me did. However, when Adriana tried out the tutorial, it was not working until we did not get it anymore.

Then, we just realized we only need to do 1 section. All of us really happy to hear that! like "thanks God it almost over" *loh* :B pardon my sentence. As for our section, we decided to do "Behind the Scenes" page instead of "Tutorial page" as we had already thought more critically to solve the layout for "Behind the Scenes" page and it is seldom to be put. 

Furthermore, Monday section is ended up by showing up our questionnaire to Mr. Razif and deleted some unnecessary or repeated. Also, we planned to interview the band and borrow studio on next Thursday after midterm break. 

Lists below is our questionnaires for interview later. 

INTRODUCTION


1. Could you tell us a little bit about Kluk Kluk Adventure - the band's background? [how, when, why]
2. Who are your major influences?
3. What is your role in the band? How about the other members? Have you had any changes of member or roles? If yes, has it affect band's music style from the beginning till now?
4. What has been your biggest challenge as a band? Have you been able to overcome that challenge? If so, how?


PRODUCTION

5. What is the message that the band is trying to potray or tell through the song?
6. Who writes the song lyric for the band?
7. How about the music-making process?
8. What was the most challenging part when introducing the album or song?
9. What are your rehearsals generally like? Do you have a set time each week in which you practice or are rehearsals more spontaneous? How can fans get access to your music? Do you have a website with sample songs or a demo CD?
10. Do the band have any upcoming gigs or events?
11. What advice do you have for people who want to form their own bands?
12. Is there anyone you'd like to acknowledge or feel thank you to? 

Actually, i was told to remind him about sending band photos. But, i just told him around 1am last night and he has not replied yet. So, to be continued... ~

1 more! Mr. Razif!!! please reply meeeeee..... >o<   >o<   >o<

WEEK 7 - tutorial and discussion

It is started with tutorial in Adobe InDesign. However, i do not have "folio overlays" and just pay attention of it.

First of all, workspace should be changed into "digital publishing". Then, go to windows -> folio overlays. There will be several options given such as media, video, etc. Make rectangle on the page and apply file format that you want. The image or video will appear.


Today discussion section started with picked up the local band for our magazine. We chose Kluk Kluk Adventure for our main local band and Laila's Lounge for another local band.

After structuring the questionnaire and asked Mr. Razif, we re-arranged again as the questions did not follow the flow and did not ask about band a lot.

That is all for today. We will show our questionnaire to him on Monday i guess.

2ND LEADER REFLECTION - JARED

During his period, everything went well and we solve our problem in designing "Behind the Scenes" page as well as finding new ideas to make it looked more interactive. Then, everybody did their research to solve this problem. It is evidenced by the remake of our Behind the Scenes page. 

However, there is a moment where everybody stucks with this idea and he always tries to get inspiration which helps other members find new ideas as well. 

Actually, i do not know what to comment because he did well. But sometimes, i quite difficult to catch up his voice which is for me, a bit mumbling. Of course this one is my problem XD 

REFLECTIVE OF MEMBERS

STRENGTH AND WEAKNESS from group members

STRENGTH --->

1. Jared Yap

- He has lots of ideas, 

- He did lots of research,

- His design sense really helps to form the pages,

- As a leader, he arranged and understand the entire contents in our magazine,

- Giving part for each other to talk during presentation, 

- Accept another ideas fairly

2. Spencer Koh

- Research about magazine was done really well. Mostly main sources at the beginning comes from him

- His idea in structuring lyrics page give new inspiration for us to design better

- He accept and listen to another member's idea wisely

- He wants to redesign his page after we discuss

3. Adriana Teh

- She was the leader before and give her ideas and opinion well

- She is an open-minded person in deciding our ideas

- She did her page parts really well and ask other members about her design

- She, Spencer, and Jared knows music much better than me

Overall, everybody did their work really well and submit what we have planned in Facebook group on time. So, we avoid procrastination in decided our rough design page and all of us arranged it to be better.

TIME MANAGEMENT for our group is arranged well.

WEAKNESS ?

1. Jared Yap

- I do not know what to say

2. Spencer Koh

- His page design is quite general. But, it is not a problem as we still learning to think in designer way 

3. Adriana Teh

- She quites lack in design sense, but it does not a matter as we still learn to be a better designer

Overall, i feel comfortable and convenient to work with my group members eventhough we were selected randomly XD~

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.

ELABORATE THE GROUP IDEAS! for E-MAGAZINE

Q : How to create E-magazine more interactive and show the genre of it?


IDEA 1 : Featuring music band and musical sheet column sections on how the particular music genre is performed while the musical sheet have a play button to play the music.


Then, color choice, font face, and size take part in designing the magazine to identified the genre whether it is for the cover or contents inside. By doing so, the contents could be abbreviated into the sections (e.g. there is a page number for music band profile section. Once it is clicked, lists of band profile will appear concurrently with the page number on the right side). Readers will find the section they want to read easily without read through the whole contents.

For the music band profile, every members could be introduced by clicking the arrow near them (photo) while the band history is provided in text form or click the logo on it. Meanwhile, font is used to differentiate the title and articles so, reader will find the words easily.

Next, another section is musical sheet column where it provides the music lyrics in words while providing their official MV on another side. Once the MV is clicked, the music and video clip is played. Furthermore, providing the process of video making is necessary so reader will know how the MV is created. It could be played once reader click the music info on the table given.

Whereas, showing the album cover in 3D form (turned into 360 degrees) makes reader find out easily where they could get the songs as well as knowing the other music lists inside the album.



IDEA 2 : Design the cover as attractive by playing with font face, size, and color.


The idea is creative to show the reader about what the magazine stands for. By designing the layout (adjust the font face, size, and color) according to the music genre (rock, classic, etc), it makes reader understand the contents of magazine inside and attract those who interests in those genre to read it.

Also, moving to another section in E-magazine could be done by swipe left or right while the section contents is read with slide up and down the page as it shows how many pages the specific section have on the top left of the page.

SELF REFLECTION

My background before come to university is really not related with design where i have to deal with some experiment in laboratory and so on. Hence, joining the design course improve my skill in using certain software as well as develop my creativity sense to create new design ideas.

I remembered i was very dull in Adobe Photoshop, etc on the first time i joined design course. It is evidenced by my ugly magazine design in the 1st term as well as movie poster design which is messed up and drawing was not satisfied. But, as time goes by, i could understand the design principle and explore the stuffs until i feel convenient with it and find out my own style. However, doing research helps me a lot to improve my skill until how my design is looked like now.

The reason i joined Multimedia Design is to know and learn some multimedia stuffs especially 2D and 3D animation as i feel interested in it. Once i know and explore some research regarding to cartoon art, i found that my creativity comes easily while designing cartoon or character in illustration or texturing the object. I enjoyed the moment i did eventhough it needs a lot of time.

Furthermore, my motive is to make people laugh and happy when they see my works as i could convey the message clearly and communicate indirectly with the person through my design. Other than that, i want to satisfy and raise the quality of the place i am studying or working. So, i could help that place to be well-known and remembered. Also, multimedia design area is dominated by group work where i could interact with other members and learn how is another design style as well as accept the idea suggestion to improve my design better and gain new ideas.

Actually, i know there is bunch of opportunities in multimedia design field as long as we have lots of creativity inside. Furthermore, learning multimedia design provides new skills in art media stuffs such as designing animation, web, games, film, etc where i need to suit with my prefereable field. By learning that stuffs, i could determine the working area whether working as a worker in the office or doing everything at home as a freelancer.