#12 Initial Storyboard

#11 The Design Style

I have designed two different style of cartoon for my parallax site design.

The first style is followed the comic-cartoon style which I used drawing tablet to draw it in Adobe Photoshop software. The sample cartoon I have drawn out is the first idea which included details of favourite band I like. The characters are in virtual cartoon way and full of colours to attract the attentions from people. The picture below shows the design of the characters.

The second style of cartoon is more to doodle way, which will be more simple and clean, yet not so colourful as the first style's. It has been drawn in Adobe Illustrator by using the pen tool (main tool). The picture below shows the style and concept of doodle cartoon.

#10 Parallax Site Concept & Storyline

So, after some considerations and studies. I have come out some ideas for my parallax site.

The first idea is showing the biography of my favourite musician group. It will contented about details like hobby, favourite music, favourite food, and others all. The texts will come out with small little cute images related to the content beside. When the users scrolling the site, the contents will flow up followed the interaction between the users.

The second idea is like a birthday party invitation card, but is in a parallax way, which means in interactive digital way. The owner will showed the date, time, dress code and other details of the party in this site to the viewers. The way to display the messages is by using the cute cartoons and doodle bubbles which convey the information of the birthday party in a more attractive way, but not just on plain paper card.

The third idea, which is my last idea or concept for this parallax site is a little story about how a boy meet a girl, then they get into love, and finally get married. The end of the story will be an invitation to the weeding party of that sweet couple.

So, that is all my roughly ideas for the parallax site project.

#9 Active Hyperlink in Parallax

This report will written on the active hyperlink function in parallax, single page website.

I used the logo, menu bar and rectangle background as the header of the site. I made them all pinned at top of the browser. Then I created the demo content page of the site by naming ONE, TWO, THREE and FOUR to separate the site's pages. Since this is single page website, after I dragged in the menu bar from the widgets library, it is blank without menu's name. So I need to change the Menu Type to Manual to type in the page's names myself. I added in the other three menu tabs by clicking on the arrows aside the previous menu tab. After that, I setted up different colour for the actives hyperlink design on the menus. Besides, I also need to inserted link anchor to separate the pages of menu. I did not place the anchor right into the content, but placed it before the content of page. The reason is to make convenient to the active menu tabs. For example, when the users scrolled down to the TWO's content, then the TWO menu will straight away become active mode, but not wait until the users scrolled to the centre of TWO, the TWO menu just become highlighted.

The video below will showing the go-through of this exploration.

#8 Scrolling in Adobe Muse

Today I will focus my experiences on scrolling in Adobe Muse which I will use a lot in my project.

I start from the easiest first which the background of the page will scrolled slower compared to the content. I putted texts as the content and filled the browser with a background image which fitting with Tile. Then I ticked on the Scroll Motion of the Browser Fill and set the scrolling speed as 0.4 which will make it scroll slower than the contents.

The second exploration is how to make the content keep scrolling down without disappear on the screen. I used the sky image as background (browser filled) which fitting with Tile style. I also turned on its scroll motion and made it scroll up at 0.4 speed. Then I placed a rocket as content element which will followed the scrolling along. Next I ticked on its Scroll Motion and selected "move object down" rather than the typical "move object up". It is because "move object up" is the typical scrolling screen we have seen always that the content will go up after we scroll down. Yet the "move object down" will make the element keep moving down followed the scrolling of the users. I setted the speed as 0.2 on "move down" and others on 0. I locked sync both Motion Before Key and Motion After Key, so the element will go with the same speed a whole time. To make the rocket disappear first and just come in when the users scroll, I setted the Key Position as 328 pixel. I will explained this situation clearer in the recorded video at bottom of this report article.

It was really amazing that I found a way to design a timeline in Adobe Muse. Yet I need to create the timeline PNG file first in Adobe Photoshop. I made the path which want to fill in the colour become transparent and then Place it into Adobe Muse. I just simply did a demo/prototype on the timeline. So, in case, the webpage have a header image first, then come to the timeline. Behind the header image, there is a dark red rectangle which I want the colour to fill in into the timeline. I pinned the rectangle on top of the browser, so that it would not move along with scrolling but just stay at above. So when the user scrolling, with the dark red rectangle at behind, the colour will fill in to the timeline.

It is quite confusing showing my progress without images or evidences, yet I have a prepared a video for these three scrolling functions for better understanding.