Week 4 - Website updated with new illustrations

Below you can see screenshots of our current version for our website. The new illustrations were done based on ideas that worked well in our previous drafts and a stronger focus on resembling the atmosphere within our video.

Overall the website is a image of a paper towels that expands down the page. This resembles the excess of paper towels used  as well as the motion of pulling down.

The illustration uses a photograph of our filmset as well as a range of hand drawn digital elements. It was drawn in a comic mark making style mimicking the comedic approach of the video. The headings are inspired by bathroom wall graffiti art I saw online and in public toilets around Wellington. The different sections of the website (informational facts, videos, About, etc) are divided by the "ripping lines" in-between towels. This also enforces hierarchy between the elements.

At the bottom of the page, for the About section, are images of our group members also using the minimal black and while style.

In addition to illustrating the website, I also developed a couple of drawings we can use within our video. They were printed on sticker paper so we can attach them to the wall without damaging the site. We will use them as little hints for the audience, to enforce our message and as a way to interlink the video and website.

Week 4 - Mock up coding of website (Part 2)

Note: Web Template 3 from stream was used as starting point and altered.

Below was a quick coding of the website and mock up illustration done in photoshop while Franziska is working on the final layout.

We temporarily used a mock up design from photoshop to place as a background. By using the CSS file, We were able to play around with the margins and alignment of the contents. 

The main problem that we had was the contents does not sync with the background. We wanted the paper dispenser and all the contents to act as one. We had to do a troubleshoot---- working on a small screen and Mac PC with bigger screen. By opening the file on a big screen, all contents scattered all over the page.

Mock up design and coding

Resolution:

By taking some time in playing around with the CSS coding and watching the CSS guide video on stream. We were able to sort how to make the dispenser image contain and be in sync with the HTML contents.

• The bathroom tiles was set as the stationery background for the body (HTML  page)

• The Web Template 3 from the stream was divided into 3 sections to achieve the long page layout. We added a 4th section for our website.
• All four sections were grouped into one and had a class name "sec"
• By using the "sec" class, we coded the dispenser image to be its background --- acts like the second layer & separate from the bathroom tiles.

• We also had to make sure that "sec" class has a margin of 0,  for this to move at the centre of the page, no matter how the screen is viewed by the user.

After resolving the problem with the background images, we were able to adjust the margins and paddings of each section. This were coded to match the background. We also put this to test in small and wide screen to make sure the appearance of the webpage will be intact.

Week 4 - Reworked Idea for the Website

As a group and during the interim, we realised that our website still needed some work. 

We combined the ideas from the first 2 designs we had:

• Keep the bathroom tiles as our background (from design 1)
• Keep the long page layout- all contents on it (from design 2)
• We shall add an index page that will lead to the main page
• If there's enough time, we will add a third/final page

These are the digital illustrations for the website design. 

Week 4 - Feedback from the interim presentation

During the interim of our most recent class, we got some valuable feedback from our tutors and class mates. One of the points that were raised regarding the website was that it did not really reflect the aesthetics and atmosphere of our comedic video. We will be working on this over the next couple of days.

In terms of the video, we were given the following ideas:

• Insert a title at the beginning/ work on the intro
• Write a script for the conversation between the person and the tree
• Highlight the call of action more clearly/ Do we really need a second video with suggestions?

Week 4 - Rough cut of our video

Week 3 - Start of shooting for final video

Below are selection of raw footage for the final video. We began shooting this week and was able to get a friend of Josh to portray the character for our movie. In the next days, we are hoping to start with editing and re-shoot if needed.

Week 3 - Mock up/Trial Video Shoot

Below are selection of raw footage for our mock up shoot.

We all met the weekend before week 3 to finalise some test shot before proceeding on the final shoot. We also kept this as our back up for the interim presentation on Monday's class.