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.