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.

Ideas of Assignment Part 2

Then I do some research on some other parallax scrolling.

Pictures above show one of the website with parallax scrolling and make the hot air balloon move up and down.

Click HERE for visit the website.

Pictures above show another example of parallax scrolling, the item will move away smoothly by scrolling up and down. The last picture which the people is in space have a little bit of animation in there. 

Click HERE for visit the website.

Pictures above shows screenshot of website telling the story of Titanic. There will be a small ship to guide you while scrolling further more. While scrolling, there will be also a video.

Click HERE to visit the page.

Ideas for Assignments

Here are some ideas for my upcoming assignments. For this assignment, I'm planning to do a website which have parallax scrolling.

Pictures above shows one of the website which talks about Mantis Shrimp, after read through it, it looks like an encyclopedia of a Mantis Shrimp. 

Click HERE to visit the website.

Instead of storybook, I was thinking of making an encyclopedia of a certain animal, and make it animate when scrolling.

Third Class: Extra Exercise

After the lesson, we are require to do an extra exercise regarding the anchor.

And this is how it works.

Third Class: Edit Pages Part 2

After done editing the Gallery, I continue with editing another page.

Add in some content in Contact Us page.

Then I add in an anchor to make in animate by click on the button "Click This!", then it will go down to the page where the anchor was mark.

Third Class: Edit Pages

In this class, we were introduced to a new software, Adobe Muse. Before in touch with it, I'm quite unsure what is it about. But when start the lesson with this, realize that is a software that can create a website without using any coding. It is much, much more easier than Dreamweaver which I have use it for 2 semester and keep complaining about the coding...

To create a website using Adobe Muse, first start off with creating a new site. Then it will create a Home page once "OK" button was pressed.

Of course, other than Home Page, we also create a few more pages for this new site: About, Gallery and Contact.

Double click on the Home page, then customize the page by putting a nav bar. In Dreamweaver, we will need coding to create one simple nav bar, but in Muse, we will just have to go to Widget Library and drag out the nav bar, and it will appear on it without any coding.

After some changes on the nav bar, then preview it. But as shown in the picture above, the rollover colour is not suitable with the colour orange. So I will have to change the rollover colour.

After editing, preview again.

Third Class: Introduction to Adobe Muse

In this class, we were introduced to a new software, Adobe Muse. Before in touch with it, I'm quite unsure what is it about. But when start the lesson with this, realize that is a software that can create a website without using any coding. It is much, much more easier than Dreamweaver which I have use it for 2 semester and keep complaining about the coding...

To create a website using Adobe Muse, first start off with creating a new site. Then it will create a Home page once "OK" button was pressed.

Of course, other than Home Page, we also create a few more pages for this new site: About, Gallery and Contact.

Double click on the Home page, then customize the page by putting a nav bar. In Dreamweaver, we will need coding to create one simple nav bar, but in Muse, we will just have to go to Widget Library and drag out the nav bar, and it will appear on it without any coding.

After some changes on the nav bar, then preview it. But as shown in the picture above, the rollover colour is not suitable with the colour orange. So I will have to change the rollover colour.

After editing, preview again.