Extra Content

At this moment, we should have at least all the pages needed to be presented to the client which is the Cover, Content and Tutorial page. All pages have already been included with the planned interactive content except for the content page which has 4 links to different pages and only 1 content is linked. Therefore, I had designed an extra 3 pages to ensure every page has full content.

magazine viewport

full design of content page

 For the first content, which features Green Day, links to this page.

The next page is the tutorial page followed by an article about Massacre Conspiracy.

Finally, there's an article about Deftones.

Advertisement section

Based on the tutorial page design, there is an advertisement section that fits at the bottom of the page. The section will display a slideshow of advertisements. So, I have taken 3 real ads from the internet and modified them to fit a specific dimension. The ads are musical instrument related.

engineering ad

guitar ad

amplifier ad

Developing the content page

After the whole video post-production, me and Marwan decided to take the time to design contents for the content page. I made the specific mock-up content in Photoshop while Marwan placed all the necessary files into InDesign. The end result looks very nice, all slide-able content works fine. The next step is to add a button for every content, this button allows users to quickly navigate through the desired page they want to go to.

full design of content page

Tutorial page - Article section

While Dhev and Wazif are working on the cover page, I've also helped Marwan in designing the article section within the tutorial page. As discussed before, the article talks about the song we have featured on the tutorial. More information about the band and album will also be included in the article. The language will, of course, be in Bahasa Melayu.

I have already included the album cover and details above, the article content is present as a mockup for the moment. I'll revise on that later. The next feature that needs to be inside this section is a song player and an advertisement section at the footer. 

After finishing my part, I will be combining my work with Marwan's other half of the tutorial page.

Week 10 Progress

The video was completed almost a week ago, during week 10. I had made final touch-ups, on the colour correction and added a few title cards on the video to be used as markers for the video tutorial. In total, the video clocks in at approximately 6 minutes. The file size is relatively huge which is 428 Mb, I may consider converting the MOV file to an MP4 in hopes of reducing the file size.

Week 9 Progress

For this whole week, I have been working a lot on editing the videos with Wazif. Me and Wazif are in charge of post-production for the video. So far, I've made a rough cut for the video section while I've delegated the audio production to Wazif. Expected to finish the whole video tutorial by Week 10. The rest that needs doing is color-correction and audio syncing. The whole video clocks in at 5+ minutes, I'm hoping the video would not provide any issue after the post-production.

Recording Session

For the video tutorial, we had discussed before to have Dhev perform. He will be playing Nirvana's "About a Girl". Yesterday, we've booked a recording studio in our campus to record audio and video for the tutorial section. 3 cameras and 1 Zoom recorder was used in the process. The 3 cameras was used to shoot Dhev's full body view, fret view and strum view. With all 3 views shot for each section of the song, all that is left to do is to edit the videos and sync the audio.

Developing the Content

Now is the time to create all of the content for the Tutorial Page. For this section, there is a lot to be designed, most importantly the video itself. The group planned to shoot the guitar tutorial in a recording studio. Wazif had planned to book the recording studio in the campus for this coming Wednesday. The tabs and chords display section needs to have images displayed in them. On a side note, the particular section will not only display tabs and chords but also lyrics.

For the tabs and chords section, me and Dhev will be designing the images. Wazif and Marwan will be designing the lyrics display. Below, is what me and Dhev have came up for the moment.

A full rendition of the tutorial

Intro + Verse 01 in progress

By the way, the group has decided to choose Nirvana's About A Girl for the song tutorial and Dhev will be the tutorial model.

Comments and Feedback of my group leader

Week 1 - 3: Dhevgan

During the first 3 weeks, Dhev contributes a lot of ideas and has shown good leadership in the first cycle. He delivers his own work well and communicates properly during discussions and presentations. He has very good knowledge when it comes to the Rock music genre. Not only the knowledge of music and artists but as goes with his talent in musical instruments.

Week 4 - 6: Wazif

Wazif maintained good leadership ethics during his first week as the group leader but eventually his pace slowed down after the second week. He has been good at documenting work progress but lacks the management as a leader, to command and communicate.

Next group leader, Marwan.

Strength and Weaknesses of my group members

3M1I

• Marwan Shagul
• Dhevgan Sivanathan
• Wazif Hassan
• Izzat Asad

For this particular post, I will be commenting on the Strength & Weakness of each of my group members.

Marwan Shagul

For the past 6 weeks, he has shown a lot of dedication and contribution to the group. By far, I have seen a lot of valuable research material gathered by him. Furthermore, he has shown a lot of talent in leading the group for the past 6 weeks. The work could not be more organized if it were not for Marwan. Also, Marwan knows how to communicate within the group whether during discussions or presentations. Overall, Marwan has good management and his work ethic manifests a positive energy within the group. While he has good leadership and communication skills, he lacks complex software knowledge such as After Effects. Thus, he could improve more on software knowledge to aid the group the executing the final prototype.


Dhevgan Sivanathan

Dhev has been the group leader for the first 3 weeks. So far, Dhev has contributed a lot to the group. He managed to participate a lot in discussions and group work; thankfully for his passion and knowledge of the Rock music genre. Fortunately, he has a very good knowledge in musical instruments that aids us a lot in work, particularly in designing the "Tabs/Chords display" in the Tutorial page. Aside from that, he's been very communicative in the group, especially during presentations. The only weakness he has is his art direction and sense. His design knowledge could be more improved to aid us in designing mockups.


Wazif Hassan

Wazif has been showing proper communication within the group, whether it comes to contributing and being critical on ideas and design. Software research gathered by him were valuable since his first week as a group leader. He has also been helpful at aiding other group members in designing mockups, such as assisting Dhev in animating the cover page using After Effects software. Furthermore, Wazif is good at documenting work progress as he takes pictures during discussions and presentations.  The only downside is his time management as he can absent at uncertain times.

Mockup Proposal Presentation

It is week 6 and by now, we have presented our finalized mockup designs to our client, Abang Rom. For today's presentation, we have showed the client our Cover page, Content page and the Video Tutorial section. This presentation only required us to record in front of a camera for the client to see.

Dhev, leading the presentation

Recording the presentation

Here are some of the mockup designs that we have presented:

Cover

Tutorial w/ Chord/Tabs Display

Tutorial w/ Lyrics Display

Content Page

Content Page

Besides the Cover and Tutorial page, we have the Content page to design. Of course the page needs to have some form of interactive element inside. For this little section, me and Marwan worked on the designs and concepts of the page. Below are my initial designs.

Content flows horizontally. Each column displays an image that relates to the specific highlight content. More highlights can be viewed by scrolling horizontally.

Also, each column displays an arrow and a number to label the page number. Users can swipe the column upwards to reveal extra content and even go straight to the page.

Elements to reconsider:

• Descriptions of each highlights must be displayed at all times

Mockup Design Finalization

Only a few days before the actual draft presentation to the client and we had to revise some of the elements inside the page based on the feedback given on our last presentation to the class.

This time, we have improved the following parts of the page:

• Lyrics display at the Tabs/Chords display
• -1 (Guitar) Player features a visual audio seeker
• Advertisement Gallery has been changed to a slideshow

Mockup Presentation

As mentioned before by our client and lecturer, we've revised and improved the first design based on the client feedback. We had finalized our initial design for the mockup of the tutorial page and presented them to the class.

Added features:

• Improved the design of "Tabs/Chords display".
• Added an advertising gallery at the bottom of the page.

Full page design

Mockup with extra content

Developing the Page

We started off by having a short view on Guy Kawasaki's TED talk on the art of innovation and then we continued on developing the Tutorial page. We focused on figuring out methods on implementing all of the video elements and how the user would navigate through the video. We have looked up on Youtube to find video tutorials on implementing videos in InDesign.

Here are some helpful links to regarding videos in InDesign

• Adding videos in InDesign

• Adding navigation points to videos

Besides that, our group had a short tutorial with Mr. Ajeep to help give us feedback on the mockup design.

Based on his feedback, it is recommended to:

1. Come up with another design for the tabs/chord display
2. Add more features to aid users to navigate through the page. E.g. tips/hints for the "minus 1(guitar) button"
3. Change the font size for the article section.
4. Add advertisements at the bottom of the page as said before by the client.

Mockup

After our presentation with Abang Rom last Monday, we have been given valuable feedbacks by the client to improve on our ideas. For yesterday's discussion, we proceeded with rendering a draft mockup of the Tutorial page. While illustrating the mockup, we had to consider the amount of work we have to do in 1 complete page.

Aside from that, Mr. Ajeep has confirmed to shift leadership roles every week for each group. This would allow every person to have a chance at leading the group. Thus, for week 4, Wazif will be the group leader.

Below is the draft mockup of the Tutorial page.

Tutorial mockup

Things we have to consider when building the tutorial page:

• Video must be shot in 3 different angles as proposed
• Tabs and Chords should be available to be viewed by the user
• Users will be allowed to change their 'key'

Conceptual Sketches

Based on our discussions in the last few weeks, I have made a few sketches for the concept of the pages. They are all very rough drafts and hopefully we could improve the concept a lot in the future.

Cover

Gear Review

Song Tutorial

generation 01

In this exercise, we were required to develop 4 questions that could be valuable for our upcoming survey/questionnaire. The questions were needed to improve and to introduce the segments. We discussed and came up with a few questions for Mr. Ajeep evaluate on it. From all the questions we've thoroughly discussed, we have chosen 4 to use for future reference:

1. Would you like to learn the tutorial with narration or with just the video visual?
2. Would you like to include tabs/chords or would the video be sufficient for the tutorial? 
3. Would it be better to have a celebrity review(video) or would a professional insight be fine? 
4. Do you prefer to view a list of available stores or to view the nearest store to your location? 

For each questions from above, we will need to gather 10 participants to answer them for better user feedback on e-magazines.

discussion 01

In this subject, the whole class is tasked to collaborate with a magazine publishing client named ROTTW (Rhythm of the Third World) to create a digital magazine that focuses on local rock music scene. The class will be divided into groups, whereby each group will focus on a particular segment to improve from their magazine. Each group will need to improve and introduce a new segment for their magazine.

For our group, 3M1I (Dhev, Marwan, Wazif & me), we were discussing on which area to improve from the magazine. We were trying to find segments that would allow us to implement a variety of multimedia elements. In the end we have decided to improve the Gear Review section. To introduce new sections for the e-mag, we have chosen to input a new Tutorial section for readers to learn featured music using videos. The group had to look at different e-magazines on the iPad for us to generate ideas.

The first brainstorming exercise

Friday, 28th March 2014.

Today marks the first day of learning stuff in this class. We were taught about how to brainstorm ideas in different methods. So far, there are 3 methods but we have bee taught how to use 1.

The 3 brainstorming methods are called:

1. Imaginary Brainstorming
2. Random Stimulation
3. Brain writing 6-3-5

The ones that was taught to us all by Mr. Ajeep was Brain writing 6-3-5. This method of brainstorming focuses on asking ourselves a certain question that relates to solving the main problem.

Here are the exercises that we have done in class.

My Creative Profile

First off, I like to say that there is no definite level in creativity but I cannot really say that since I am not creative in every aspect of the design field. There are some points to which I cannot generate enough creative ideas and it all depends on my area of interest in the design field.

My creative level also reflects my creative style. I like to say that my creative style is ever changing and adaptable but then again, one's would not develop themselves an identity without a simple creative style. So my style is significant to the minimalism style. I would say it is my "base" creative style before I morph into other type of design styles.

As to my motivation for designing, I am interested in the art of motion and 2D graphics design. Whereby, motion pictures and photography plays as a main inspiration to my designs.

I hope to put in good use of my design skills for the future of motion designs.

Prologue

Hi readers, my name is Izzat and this is my blog for a subject that I'm studying in my Multimedia Design course. The subject is called Innovation & Collaboration. This blog follows the journal of my group's work and how we generate ideas to solve our problems related to client work. Our task is to redesign an existing magazine from a client and to digitize the magazine. This task will test our communication ability and our multimedia skills. I will try and make this blog enjoyable enough to read. That is all.

- Izzat