#22 Develop Website with Adobe Muse

After prepared the important graphics for the site, I started to develop the website with Adobe Muse. I tried to figure few ways to develop the site including full screen slideshow style, timeline style and general parallax style. Yet the ways were all not so fit with the graphic styles. So I just tried to stick to the simplest and straight forward way, a story style. The website is for wedding invitation, and my graphics all are in very colourful way, so it is hard to choose the background of the site. It is not happiness enough if I choose dark colour as the background. I also have tried some patterns on the background, yet it is not so pleasing as thought. So I just using light/soft colours to match the graphic style. I designed arrows between the story parts to create interactivity with the readers. It is because the story part is long, it is quite tiring if keep scrolling. The arrow button is to let the readers enjoy the fun of "smooth-scrolling". I also did applied some scroll motion on the story part to let the user felt not boring with just typical scrolling. The navigation bar is stick on the top of the site to create convenience if the users want to view on certain section. The whole website designed follow cute and warm style. I also created a tablet style for this site. It is a little bit different  on arrangement for the content compared to desktop style.

The website have been uploaded at: http://weddinginvitation.businesscatalyst.com/index.html

#21 Graphic Design Progress

The graphic part actually is the new challenge for me, because it was the first time I drew all in cute style. In this session, I will talked about the rest graphic design in the site. So after completing the heads of character, I continue on drawing the body and background of the character. I purposely made the head became bigger than the body to make it look cute. Yet I faced problem with this kind of style because the head too big. When I draw the couple became closer, their head will blocking each other. So I adjust quite a lot on that part. When drawing, I also suddenly realised that those light colours on character are not fully colour on it. I need to have one deep or sharp colour layer on background to help me to colour the character when using soft or light colours. It is because the background in Photoshop is in white colour, when I coloured the graphics with soft colour, it is hard to see which part I still have not colour yet.

The images below showed some of the drawings I have did for storyline part in website.

#20 Cartoon Design Progress 2

I have drew the girl's heads out with drawing tablet and Photoshop layering. I have drew quite long on the long hair part to make it looks more natural. The images below showed few samples of outlining and colouring of the cartoon character.

#19 Cartoon Design Progress 1

For this project, I need to draw using drawing tablet for my characters design. In story part, I have 33 character images to draw, included 16 pieces of boy and  17 pieces of girl. Plus, it still required 20 background images for the story line. For the head parts, I took advices from my friend, Zhou who good in drawing comics, about the details of eyes, face and hair. It is because I am not so good in drawing cute characters. I started with outlining the cartoon head first and then just coloured it layer by layer. Then I save it as PNG file to use in my upcoming drawing. The images below shows the few example I have drawn.

#18 Final Storyboard

I have rearranged and edit some parts of my storyboard, included the storyline. I will showed the storyboard at below.

#17 Study on Other Wedding Invitation Website

Since I am doing wedding invitation parallax website, I will studied some others website to improve my developing on the project website. First and important, I looked for the content sections of the sites. It is because the website need details to invite the guests to come to the wedding, yet I have not much understanding on how the wedding invitation should be made. After going on through the websites I studied, I realised the three must-need-info in the website including who are going to marry, date and time, and venue to be hold. There are also few websites which introduce the personalities or characteristics of the wedding couple, but I will put this aside and just focus on the wedding invitation part. There may also have a RSVP section so that the wedding couple will know who can be attending, and who will be not. I will put this in considering.

There are different design styles of wedding invitation website which bring the styles of the couple. For example, the graphic style of Joy and Tom website is more to "university-style" which they experienced a lot together in university time. The orange and dark blue colour brought the feelings of cheerful yet mature. The navigation is also cannot be ignored in parallax website, since it is a single page website that put everything in one page. Some of the audiences may confused and lost his/her ways in the site, so I will take references from Joy and Tom's and Karl and Gina's website on the navigation part. Joy and Tom website made their navigation bar stick on the top of the browser which is convenient to those website that have a lots of content in a page, especially parallax. The users can go to the part they want by clicking on the menu. Karl and Gina website make the navigation bar on top too, but not pinned at top like the previous website. Yet they make the scrolling motion appearing which when users click to the menu they want, the website will show the scrolling and bring the users to the section. This benefit will bring the users to have more impacted memory point on the website and get to experience the fun of interactivity.

So, that is all about my research on those websites. The websites addresses are shown in references below.




References:
http://karlandgina.com/
http://www.gopal-seema.com
http://www.joyandtom.us/
http://www.geckomouse.com/

#16 Adobe Muse New Features: Opacity Scroll Effects

This report is about testing out the scrolling effect with opacity.

After making two sections in the page, I turned on the opacity under Scroll Effects to the texts. It comes out 3 points on the texts include Fade Position 1, Fade Position 2 and Key Position which are to adjust the opacities and positions. The Fade Position 1 represents the vertical scroll position when opacity start changing with the value that have been setted; the Key Position represents the vertical scroll position at which the top of the web browser window is in this location; the Fade Position 2 represents the vertical scroll position when opacity finish transitioning with the value that have been setted . I adjusted those knots/points to the position I wanted and also setted up the value I wanted to be. Then comes out the results, the texts with fades in and out when scrolling.

The video below explained better on this report.

#15 Adobe Muse New Features: Fullscreen Slideshow

One of the new features I really like in Adobe Muse is Fullscreen Slideshow which provided by Widgets Library. As its name, this slideshow will stay on the whole screen of users. In this exploration, I will use this Fullscreen Slideshow as the background of the site. When the users scroll, the background/slideshow will also changed followed the setting I have already setted.

First I used different icons to represent different section in the site. Each section will be heighten around 1000 pixels. Then I created some 100 pixels x 100 pixels different colours squares in Adobe Photoshop. Back to Adobe Muse, I inserted the Fullscreen Slideshow from the Widgets Library. The slideshow cover the whole interface of page, so I arrange it to back by right click. After that, I clicked on the little blue play-button at the slideshow's right hand side which made the setting window popped up. I unticked Auto Play, Enable Swipe and the Parts Display. So the slideshow would not auto playing the images and all the navigate buttons of the slideshow also disappeared. Then I added those colour squares to the slideshow. I just can see one colour, means one colour image at the slideshow. But if I select to view the Layers in Muse, I can see the elements that all inside the page. I confirmed that I already clicked on the slideshow and ticked on the Slideshow under Scroll Effects setting window. To make the slideshow work well at background, I unticked the Autoplay selection and chose Switch slides every 1000 pixels because each section lengthily around 1000 pixel. If I scroll down 1000 pixels already, then the slideshow will change to another slide. Yet to make the background/slideshow smoother, I setted the key position as -300 pixels, means 300 pixels before reaching to 1000 pixels, the slideshow will change.

For better explanation, I have recorded down the going through video.

#14 Adobe Muse CC Fall 2013 Update

On 13th November 2013, Adobe released an update to Adobe Muse.

According to their website, there are several new options or functions Adobe have added into Adobe Muse. The interesting one included full screen slideshow, more advanced scroll effects and social widgets in the widgets library.

So, on next report, I will explored few of the new options in Adobe Muse. References: http://muse.adobe.com/ http://www.youtube.com/watch?v=mUXZvsNcRtA

#13 Prototype Progress 1

The parallax site will be single-page-website which scroll vertical on browser. I need to adjust a lot in the scroll motion setting included key position and speed of (any) direction. These steps are to give a natural and smooth display to the viewers. The video below showed the preliminary prototype of the website. I will do more studies on the numerical setting of scroll motion next time.

#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.

#7 Use Edge Animation in Adobe Muse

This is the process how I import Adobe Edge Animate's element (.oam) into Adobe Muse.

First I created the animation I wanted in Adobe Edge Animate. Then I need to save it as a .html so that I can publish it as .oam file. If did not save, it would not allow the users to publish it. In Publish Settings, I ticked the Animate Development Package, chose the Target Directory folder and typed in the Publish Name, and finally publish it as .oam file. After that, in Adobe Muse, I Place the .oam file on the interface of webpage. The animation works well in Adobe Muse. The video below is a go-through progress of the using of Edge Animate Deploment Package (.oam) in Adobe Muse:

#6 Adobe Muse: Fade Effect Scrolling

In this section, I tried to explore on fade effect when scrolling the page. It is quite complicated because it may need to count to get the exactly perfect effect.

First I created a PNG image in Adobe Photoshop. The image is a gradient which transparent at above and white colour at bottom. In Adobe Muse, I overlaid this PNG image to the image that I want to have fade effect. I setted up the scroll motion for the image in speed 0.5 to move up. Yet for the PNG, I turned on it's scroll motion effect and setted it up in high speed, around 7, to move up both in before key and after key. Yet after some adjustments, finally the fade effect work well with well-speed-and-positioned-transparent-image.

The video below shows the result of the fade effect I have explored.

#5 Adobe Muse: Header & Footer + Title of Page

I am quite confused with the header and footer in Adobe Muse.

First, I studied on the tips displayed in Adobe Muse first:

1. First above horizontal guide line: Top of Page - drag to adjust padding above page.
2. Second above horizontal guide line: Header - drag to adjust position. Items in the header appear at the top of the page above the page content.
3. First bottom guide line: Footer - drag to adjust position. Items in the footer appear at the bottom of the page below the page content.
4. Second bottom guide line: Bottom of Page - Drag to adjust minimum page size.
5. Third bottom guide line: Bottom of Browser, Drag to adjust padding below page.

Then I looked into some references online and explored it myself and finally understand what they actually do. The Top of Page determine how much browser the designer want to see in the page, as same as the Bottom of the Browser too. Bottom of Page used to set up how much for the minimum height the designer want to display. Header and Footer drag to adjust the column of content. Besides, the header and footer's shape need to be stick to the side to make sure it follow the size/duplicate images(work on Tiles only) of browser and would not leave blank space on it.

In addition, I did found out how to set up the title on each page of the site. I right click the Master and select Page Properties, under Metadata tab, I typed in the website name in Page Title Prefix's column since I want the title format become " Website | ?? Page".

For further understanding, I have recorded my go-through video in below:

References:

http://www.youtube.com/watch?v=zc3pMIHdPKM

http://tv.adobe.com/watch/muse-feature-tour/muse-define-headers-and-footers/

#4 Adobe Muse: Build A Site

In this report, I will recorded down the process or experiment I have did with Adobe Muse to build a demo site.

First, under Plan tab, I created several pages for the site including Home, About, Work, Blog and Contact. I also designed 2 different styles of Masters to apply to the pages. A-Master is for Home and Contact pages, while B-Master is applied to the rest pages. On A-Master, I want a picture to become the background of the page. I done it by clicking the Browser Fill and insert Image plus setted up the the Fitting to Scale to Fill to make the background look good. Besides images, the background also can fill up by solid colour and gradient followed the design by the designer. Then, I added the logo to the top of the site which is in PNG format. Although the size of the logo image is too big, but I can resize it by dragging. Actually at first, I thought the way to resize regularly is to press on Shift key and drag the image like other Adobe series software, but come out the opposite result which resize randomly, not followed the resolution size of the image. So I release the Shift key, and realised that in Adobe Muse, the image can resize well by just dragging it without pressing any keys. The Widgets Library contains several elements of website which the user can just simply add on and use it such as various types of Forms, Menus, Panels and Slideshows. I insert the navigation bar by selecting Widgets Library -Menus - Vertical since I want the vertical menu for this Master. I also changed the font and colour of the menu to the design I want. Besides, it got freedom to edit the design of menu when doing different tasks on it by applying different design to different stages like rollover and active. I used system font on the menu texts which Adobe Muse will convert it to image, so that the viewers can view the font styles on their screen too. Surprisingly, the Menu can be "auto-build-and-name" followed the Plan I have already arranged at first step. While for the B-Master's design, besides using the same logo image, I created a different style of menu which in horizontal way. In this Master, I just let the background to be in solid colour, but not with background image. With the different design of both Masters, I can see that the Home and Contact pages' design are different with the other pages which applied with B-Master.

Now I started to design the Home page. I double click on the Home page on Plan tab to go to the Design tab for that page. I created a button by clicked File - Place Photoshop Button. After the selected the PSD I want, it will popped out a little windows with state options on it which the user can control the button design by layers. It have normal state which the image/button in general view in website without any action on it. Besides, it have rollover state, mousedown state and active state. The design of button will change follow the layers action selected by the designer when rollover and mouse over it. Another very beneficent characteristic of Adobe Muse is the designer can insert the Edge Animate component (.OAM file) to the Muse design file. It means the Muse website can add on with animation and interactivity. For this demo site, I will add on an animated welcoming words which created by Adobe Edge Animate at early.

In the About page, I inserted an image (PSD image) and some texts on it. The user can straight away insert PSD file image on web design at Adobe Muse. After user edited the PSD image in Photoshop, the image in Adobe Muse also can be updated followed the latest design. For experiment, I tried to crop the image in Muse by pressing the Ctrl key and drag it. It works well and convenient. For the text part, I tried to experience its align style, font type and font size too. I highlighted the word "news" and link it to another website by typing the web address at the Hyperlink column and Enter it. When the user click the "news" word, it will bring them to the selected website. Besides, Adobe Muse allowed designer to attach the audio and PDF files inside. It created by the same way as hyperlink, yet just change to click on Link to File and selected the file the designer want to upload to the website.

For the Work page, I have tried another font's method by using web fonts on the text part. I also used the texts to created the new paragraph style, so next time I can just apply the paragraph style to texts but no need to take the editing steps again. Additionally, I insert the slideshow element from the Widgets Library by choosing the Blank template, so I can just add on my own images but no need to delete the already-have-images from the template. The designer can adjust the slideshow setting by clicking the play-alike-button on the side. It got several useful options like Auto play, Transition, Thumbnails and others all. I also doing a little changes on the design of slideshow by deleting the caption part and moving the left and right arrow the position I satisfied with.

I want to add a sub-menu/sub-page under Work page. So I went to the Plan tab again and added the Video page by clicking the plus sign at bottom of the Work page. I applied B-Master on it. I need to go to the both Masters to re-edit the menu of the site. It is because the Video menu would not show with the current setting now, I changed the Menu Type from Top Level Pages to All Page. Thus when the user rollovers the Work menu, it will showed its sub-menu, the Video menu. Adobe Muse do not have the function which the designer can just upload the video to it. So I copied the embedded codes from the Youtube video I want, and paste it under Object - Insert HTML... . The designer can paste in any HTML codes he/she want to fulfil the page.

Actually for the Blog page, I want the users go the other independent website rather than other page of the site. At the Plan's Blog section, I right clicked on it and select Menu Options - Include Page Without Hyperlink. After that, I went to the menu of both Masters again to insert the hyperlink of the website on Blog tab. That was all the steps for straight away link to site/page outside the website.

Furthermore, I also did some experiments by adding Tablet and Phone version on this site. The designer actually need to re-apply and re-arrange the interface because it will just copy the amount and name of the pages from desktop version only. For both tablet and phone version, it is better not to have sub-menu on it since the gadget normally do not have rollover function as desktop. So I pull out the Video page to make it same "level" as other pages. The Edge Animate file still can insert in both these versions. In Phone version, I tried another design of menu. First I applied Accordion Panel from Widgets Library to the Home page and deleted and leave just one tab on it. I named the tab Menu. Then I also deleted its texts part at bottom, yet inserted the vertical menu on the original text column. On setting part, I chose Can Close All and Overlap Items Below which the menu can be closed and just overlap the content below without making them move down after the menu collapsed. To make the menu just close once the page displayed, I need to make the menu close first in Design section. These steps made me the slide menu.

Rather than showing plain screen captures, I posted a go-through video for the experiencing above for a better and clear understanding.

#3 Adobe Muse: Parallax

Recently, I have gone through some articles and tutorials on how Adobe Muse used to develop parallax scrolling effect. I also view some other users' works (parallax) which done with Muse. Yet actually there are not much references on this topic.

So, here I am to start some basic simple explorations on Adobe Muse since I never used it before. First, I start with the "flying text" effect which the words will be coming in one by one in motion. I types in 3 "Heys" as the navigate button to the next section. Then on next section at bottom I typed each word with different text boxes and then go tick on "scroll motion" on the effects section to all the text boxes. The column in "Motion Before Key" is the speed that the designer want the word to come in to the page. By setting both "0" on "Motion After Key", it means the word will be freeze at place right after it reached to the key. Then, I added an anchor at the motion texts page to make it as a virtual hyperlink. After that, I linked the "Heys" words to the animated text pages. So the result is when I clicked on "Hey! Hey! Hey!", it will linked me to the "Play with Adobe Muse" page with motion flow. But the problem is I wonder why the "Adobe Muse" will be in overlapping on "Play with" at above. I have try several times yet the result is still same. I should go in to this problem by finding some other sources on it next time.

The next thing I tried is the scrolling images masking effect. The images will masking each other to create a smooth effect between the images. First, I needed to create multiple boxes vertically and then fill in with different pictures. One thing to remind, I must choose "tile" as the fitting style, so that I just can turn on the scroll motion on next tab. Otherwise, it will not allowed the users to turn on the scroll motion effect. Then I made all the strokes of the pictures to become "0" because I did not want to have border on each picture. After confirm all the scroll motions are in 0, then end my works on scrolling images masking.

The experiment I done last is the scrolling sliding texts which I loved it most. I prepared a long vertical image as background, then I added in two words on the screen, "support" and "TEAM A". Then I turned on the scroll motion on each text boxes then set the number value to the ways I designed. I purposely made the number value small to make it moving slow. So, the when the page in scrolled, the words will go right and left and moving a little follow the flow of scrolling.

The video below go through the experiment works I have done.

After these trying, I found myself is confused of the size that I want to set up on my site by using Adobe Muse. I will solve this problem in my next writing by finding more article references on it.

References:
Parallax Scrolling with Adobe Muse CC
Adobe Muse: Parallax Scrolling June 2013
Adobe Muse: the new features

#2 Parallax Scrolling | Experiencing Parallax - Stellar.js

Nowadays, the parallax scrolling has become one of the biggest trend in web design field. Yet it is not a really new technique in the design industry. But because of the improvement of technology and lifestyles of human, the designers can and willing to develop the parallax scrolling effect much more easier and convenient than last time. Now, the designers can do more with the upgrowth of HTML5 and jQuery.

Parallax website is actually a single page website which arranged the images and background in different speed of movement on the screen. It created a different illusion for the users who in control on scrolling speed and way. 

One of the famous jQuery plugin to make parallax scrolling effects is Stellar.js. This plugin is developed by Mark Dalgleish to make the parallax get more easier on way to develop it. It not only supports parallax effect on the images and texts elements, but also the background of website. This plugin can let the iPhone and iPad users experienced the scrollable contents too since it supports on iOS devices.

So, now I have studied some basic uses or functions of Stellar.js by doing some basic tutorials and exploring. The images below show the results I have done in Adobe Dreamweaver by following the guides and tutorials of webdesign tuts+.

From the experiencing of Stellar.js, I feel that this plugin is really easy to use, yet it did not give much parallax designs on freedom of animating and layering the elements which probably provided by SuperScrollorama and Adobe Muse.

References:

Top 60 Best Examples of Parallax Scrolling on the Web

All you need to know about Parallax Scrolling in Web Design

35 Interactive Parallax Scrolling Website Designs

18 Websites that Take Scrolling to the Next Level

5 Reasons You Should Be Using Parallax Scrolling Web Design

6 of the Best and Worst Parallax Scrolling Websites for Design Agencies

Parallax Scrolling effects- What it is and if you should use it.

Tips on How to Smartly Use Parallax Scrolling for Your Website

Create a Parallax Scrolling Website Using Stellar.js
Best parallax scrolling tools & tutorials

#1 Interactive E-book or Parallax Scrolling?

I have two ideas in mind to make it as my project in Experiential Design module, one is interactive book and another one is parallax scrolling site which I am interested on both. So I did research and studies on both of the titles to find out which is more closer to my interest and ability.

Interactive book is an e-book which can display on the screen of computers or even portable devices such as iPhone and Samsung Galaxy Note II. It can be considered as a digital interactive book which support the go green theme. It can help human to save paper or the trees. Interactive book is not a plain normal book which just showing its content on the screen, but it creates interactive between the users and some other animated stuffs, such as pan and zoom and 360 degree views. We can also have some animated or interactive motion which can catch people's attention and give impression. For example, the children can play an interactive little game in the e-book to get memory/highlights points from the story they read through text. This kind of movement will totally attract the attentions of the readers. I would like to use Adobe InDesign to develop and publish it. I probably will pack it as an app that can be install both in the smartphone or tablet devices.

The next idea in my mind is the parallax scrolling site. This kind of website can be considered as an one-page-website which just display all the contents in only one page. But the way it display can be more fun and interactive compared to the general website we normally view online. I have done horizontal parallax website before which was a trend at last few years. So I would like to try to develop a parallax site(in vertical way) which will be showing more animated and interactivity to the users. For example, when the user is scrolling down the page, the text, images and background will moving up with some layering effect which will make the user feel new on it. I will use Adobe Dreamweaver to build up this website, and the parallax effect can be create by using some extra jQuery plugin like Stellar.js.

After some considerations, I decide to choose the parallax site as my project for this module. It is because I am more interested on developing a website compared to an e-book and since I want to be a web designer after graduate. So I think the parallax site is the better choice for me and to build up my portfolio in future.

Findings on Parallax Scrolling

     The designer can use jQuery plugin to design parallax scrolling on the website.

1. Stellar.js - one of the famous plugin to use in parallax scrolling
2. SuperScrollorama - plugin for supercool scroll animation
3. Scrolldeck - can make use of left/right arrows to change the slides
4. jQuery Scroll Path - can define custom path for scrolling
5. Cool Kitten - responsive framework for parallax scrolling

Below are some tutorials that I have explored.

Beside, parallax scrolling can also design with Adobe Edge Animate and Adobe Muse which showing in the videos below.

The examples or inspirations of parallax website:

1. http://boy-coy.com
2. http://www.theqcamera.com
3. http://www.soundscape.nl
4. http://iveo.se/
5. http://www.dfdsseaways.co.uk/Documents/smart-way-to-travel/index.html#.Ui16Y8bPH-o
6. http://www.knowthesign.in
7. http://waaac.co
8. http://foyachts.ru

Findings on InDesign to Create & Design Interactive E-book/Magazine

     Adobe InDesign can use to create interactive magazine/e-book. The video below shows the top 5 favourite features of  the InDesign CS5 and InDesign CS6 user.

The webpage below shows how InDesign can work on creating interactive document. It shows the keyboard shortcut of InDesign which make a lot of efficient when using this software, animation feature tools, connection between Adobe Digital Publishing Suite and etc..




Findings below explained how InDesign create and design an interactive "project".

Below is the ways of creating digital magazine which possibly take it as extra reference on designing interactive e-book/magazine.




Besides, the references below give extra knowledge on how to convert InDesign files to app.








The video below shows how Adobe Digital Publishing Suite helps on designing interactive content with using of InDesign.

On the other hand, the video below give information on how to create interactive forms with Adobe InDesign.

To design a book or magazine, it is important to know the process of developing it. So the webpage below guides the entire process of designing magazine.