Assignment 2A - Group Project to produce a Movie and Game Microsite Concept

(24 Sep 2013, Tuesday) After a very successful individual project about producing a movie teaser poster basic on our fictional story, is time to begin assignment 2A, a group project that required us to produce a movie  and game microsite concept.

There are five people team members in my group and they are Ariff, Suet Yee, Azra, Fydah and myself Clement.

As instructed by Mr. Michael, we are to choose what movie we are using for the microsite and we have decided as a group that we are using Suet Yee's movie "Aqualantis". 

(27 Sep 2013, Friday) In this class, we are to learn What are mircrosite?, How to make a mircosite in Adobe Photoshop?, and what are the contents in a microsite?

What are microsites?

A microsite is an individual webpage or a small pages which are meant to function as an individual websites within an existing website or to complement an offline activity. The microsite's main landing page can have its own domain name or subdomain.

(1 Oct 2013, Tuesday) We are to come out a concept, theme, idea and contents for the microsites. In this assignment there is a new twist to it, that we are to create an event to create awareness of this movie.

For this part of the project we are to get into groups and chose one of our movie stories to work on further and create a microsite for the movie and games.

Due to the content, and story line, we decided on Suet Yee’s fantasy Merman movie plot called Aqualantis which had potential to be made into a very interesting microsite, merchandise and event.

We did however decide to twist the story a bit to add a dramatic plot so that the flow of the story is smooth and doesn't defy logic in the story.

So The Journey Began

I volunteer myself to in-charge of compiling, making and designing the microsite because I had clear visual in my head how does the microsite looks like. (And of course, is a team effort and decision making that make this possible) haha.


I decided to follow the exact same colour used in Suet Yee's Teaser Poster in the microsite, with a layout that could bring the wow factor to the audience.

The main idea was to give that underwater feel and a journey experience into our microsite. So me and my team have came up with an idea, instead of clicking a button to lead the next page, we will use the scrolling method to scroll down to the next page.

But before that, we gave each of our members a task to design 5 wallpapers to put on the microsite using Adobe Photoshop to create it and include it into the microsite.

In order to make it easier for me to begin on screen, I begin a simple sketch first to see the overall.

Social Media (Facebook & Twitter)

Not to waste time, my team members have come out with the design background to put it into the social media like Facebook and Twitter to post any future events and updates for the event Aqualantis as well as to connect to our fans and visitors.

(Done by Ariff)

(Done by Ariff)

(Done by Ariff)

(Done by Afiff)

(Done by Suet Yee)

Mockup of the Microsite

In order to show my group mates the picture i had in my head, I did this quick mockup of the Microsite I imagined. The background image use in this microsite is more towards the illustration. This is because we want our visitors of our microsite to have an excitement to boost up before the movie realises.

Thanks to this website (http://www.hongkiat.com/blog/movie-website-designs/) i'm able to have an idea and an inspiration to get starting on the microsite.

After many round of group meetings and discussion, we have decided that each of us should design the background for the microsite. Due to our Lecture Mr. Michael have told us that our background should have an impact to show that WOW! factor. We are given 1 week to complete the background for the microsite and below are the background that we have design i Adobe Photoshop.

(Suet Yee's Background Design)

(Azra's Background Design)

(Ariff's Background Design)

(Fydah's Background Design)

(My Background Design)

After rounds of discussion, We have decided to use my background for our microsite. 

Microsite Layout 

The inspiration of our microsite is from this website called ITS (http://www.bunchofits.com/) .The website have a similar concept and idea that we have it earlier in our group discussion, after we have discover this website. After round of discussion we have decide to use the main menu bar in ITS website to put it into out movie microsite Aqualantis.

(Aqualantis Microsite Layout)

After designing the movie microsite finish, I have put it all to get to see the overall of the microsite, the arrangement of fonts and image, the colour balance, the navigation buttons and the layout of the microsite. After viewing the overall microsite and edit some changes to the image and screen browser size, FINALLY we have finalise the design layout of the microsite.

(Aqualantis Finalise Microsite Overall View)

Below is how the microsite pop-up to another page, when click on the buttons or an image

(Aqualantis Microsite Pop-up Page Overall View)

To balance up the main menu bar, I have come out with a solution, instead of having "Home" button on the menu bar, I have decided to convert our Aqualantis logo as our Home button just to balance up the weight of the button from left to right of the main menu bar.