Rationale

For our small impact, big change brief, we decided to look at the large problem surrounding the waste of plastic water bottles. We called this, 'The Plastic Project'. We were looking to target an audience between the ages of 15 and 35, as this is the age in which most people will be secondary or tertiary students, or in full-time employment. It's these people who are most likely to be on-the-go, and likely to purchase a plastic water bottle for convenience, rather than take a refillable bottle with them. Our aim, was to create an awareness of the damage this has on our environment, and how one simple, cost-effective change can actually have a significantly large impact on sustaining a healthy environment.

For our website, we decided to use a clean, crisp aesthetic, utilizing a few shades of blue, and white. These colours were used to act as symbols for water and the plastic, while the clean appearance helps to create a nice, tidy aesthetic, a symbol for the potential cleanliness of our environment. At the top of the page, we have a navigation bar, in order to assist with user interaction, and make it easier to navigate their way between each section of our website. The 'About' section, aims to give a general idea of what 'The Plastic Project' is all about, and is our website's introductory page. As the user scrolls down the page, there are a few other sections that they will come across, 'Video', 'Statistics', 'Visuals', and 'Join Us'. The 'Video' section has our video embedded, with a crisp design in the background, with white water droplets reversed out of a blue shade. The 'Statistics' section consists of 6 statistics aiming to awaken the user to the size of the environmental damage, and show why buying a refillable bottle is the best option. The 'Visuals' section has some info-graphics, running hand in hand with the statistics above, again trying to show the extent of the environmental impact. The 'Join Us' section down the very bottom gives a brief description about us, the two co-creators of 'The Plastic Project', and has some links to social media pages. The footer has again utilized the blue and white colour scheme which is apparent across our whole site.

The video, embedded near the top of our website, just below the 'About' section, has been used as our main 'call to action'. By having it near the top of the page, we are aiming to get the viewer to watch the video and become interested in the project, and then continue to scroll down the page and find out more information. In terms of the video editing, we have two contrasting parts to our video. Our establishing shots, which have some shots of nature, has a Maori voice-over, which helps to set the scene, and highlight that it is set in New Zealand. The Maori voice over translates to "Welcome one, welcome all, it's time to make a change". For the majority of the video, there is a voice-over talking about the problems at hand, and speaking about some of the negative statistics regarding the number plastic bottles being wasted. During this 'negative' section, all of the shots have been saturated, giving an almost dystopian feel to the video. The background also consists of some dramatic sounds, which slowly build up as the video goes on, during the rising action creating tension. The climax of our video, is when it comes to our call of action, where we instruct the audience to buy a refillable bottle. At this moment, the music changes to a much brighter, up-beat song, and the shots are no longer desaturated, and there is no more dialogue. Throughout the video, we have carefully considered the composition of each shot, and taken footage from various angles at all times (using a camera, phones, and a GoPro), so that we can get some interesting cuts within our video. We made sure that we used an iPhone to record sound at all times for increased clarity.

Overall, we are pleased with the outcome of both the website and the video. We feel that they both link together well, and effectively communicate our call to action, the issue at hand, and the small change required to result in the big impact. We had no troubles cooperating and collaborating as a group, and managed to find lots of time to work on this project together rather than individually. If we were to repeat this process we would consider topic more carefully as we wasted a lot of time trying to gain access to the land fill and dump, for no outcome.

Lesson Two - Week Six

Today in class we presented our final product to the entire class. We briefly spoke about our interpretation of the small change, big impact brief before giving a run through of our website. From there we showed our video content embedded in the website. We didn't receive any feedback which was good and bad, as it meant there where no major problems or faults that needed our attention. However we did notice some small mistakes in the video and website ourselves, that we were able to fix before the end of class. These consisted of small timing issues near the end of the video which were the result of a touch up of a section earlier on which had pushed some elements out of sync with the music. The issues surrounding the website where to do with the fonts, we had specified a font in our html however had failed to package the font file in our final folder. This was quickly sorted using a @font-face element before finding the file on our computer to add to the package. 

Our final website is shown below:

This the fist section of the website that appears after the pre-load page. This section includes the header which contains redirects to the various sections on the website, the title of the project and our catch phrase before giving a brief overview of the purpose of the project and our desired outcome. Sitting adjacent to this is the logo for the plastic project. 

 This next section displays our video in the full height of the page. The image displayed is a image from the end of the video, we have used this to tie the clean crisp and simplistic aesthetic of the website together. The video its on a simple design we have developed in Photoshop specifically to sit behind the video. 

From the video the website progresses to a section of statistics clearly laid out in order to allow the message to come across as efficiently and effectively as possible.  

Continuing on from the statistic the website morphs into a section of info graphics which we have developed to incorporate our specific blue colours as well as a juxtaposition with the green in order to reference the effects on the environment. 

To tie the website together we have developed a footer that contains information about the creators of the project, this was done in an attempt to formalize the website to a point whilst also showing it is a personal project and not run by a large corporation. We have also once again provided redirect links to the various sections of website. Social media links make up the last layer of the footer, these would redirect to the respected pages if the project where to actually come to life.

In terms of the video development, we have finalized our video after making a few small changes. We removed the pitch-shifters/bass boosters which were on part of the dialogue, as this was becoming quite distracting. The original audio however sounds much more authentic and less distracting.

Fraser

Lesson Two - Week Five

This morning we presented our website and video to a small portion of the class. Our feedback was minimal, with one group stating that they like the domino 'metaphor' that is used throughout the video. One thing we took away from this presentation was a need to clarify our target age/demographic. After discussing this after wards we have decided to narrow it down to 15-35 year old to include students and young professionals who seem to to buy into the need for convenience products such as single use plastic water bottles. 

From there we trouble shot a few specifics for the website with Tim. One of these was the need to place a background image behind the video segment. We have had trouble with this in the past and it was good to finally get it sorted, and have the know;edge and controls to manipulate between now and next week.

- Fraser

Lesson One - Week Five

Today in class, for the first hour, we spent it as studio time, just continuing to work on whatever we felt like we needed work on. The tutors were also coming around to offer feedback and help, although there wasn't enough time to get feedback on ours, so we will hope to get some feedback in tomorrow's studio. For the next two hours, we were given the chance to split ourselves between two floors, one dedicated to helping with web design questions, and the other focusing on Premiere Pro editing techniques.

After class, we continued to work on each of these aspects of the assignment. This evening, we shot some more footage, so that we can vary up some of our sequences and cuts. Below, I have attached our most recent video development. Once again, the video appears in low resolution, as it needed to be below 100MB to upload to Blogger.

With hand-in next week, we will make sure we are able to get some valuable feedback and critique in tomorrow's session, so that over the course of the next week we are able to make some critical refinements to our project.

- Blake

Video Developments

Over the past week, we have been working on improving and refining the video, along with the website. In terms of the video, there has been a slight reshuffle with some of the dialogue and footage, and we have been playing around with moving bits around. However, some sequences are still quite similar, and we have tried to follow the "action-time" graph we were given at the start of the brief.

In terms of the video, I feel like it's coming along pretty well, and is conveying the intended message we were after. The start consists of the slow background music, along with voice overs, in order to portray a negative and almost dramatic atmosphere. Once the dialogue mentions "buy a refillable drink bottle", the music gets a lot happier, and the footage is no longer desaturated, and appears in it's full unedited colour, to further brighten the mood. In the 'positive' part of the video, where we are stating how to make a change, we have used the actual diegetic sounds from the recordings rather than voice-overs.

There are still some parts where I feel the footage seems almost "repetitive", so we will try to get some more footage shot over the next couple of days, so that we can put this in if needed. One part I would like to experiment with more footage is just before the "cheerful" soundtrack comes on (dialogue saying "you know you should recycle that plastic bottle..."), as I think we could have some more interesting shots, which have better compositions and help to ensure the viewer stays focused and interested in the video, especially since our 'climax' and 'solution' are coming up (most important messages in the video).

However, we will continue to work on editing and developing this, and hopefully in class we will be able to get some more feedback on what to change, what's working well, and where we could experimenting on going next.

- Blake

Website Developments

Over the past few days, we have been working on developing our website for 'The Plastic Project'. We have included some attached screenshots within this blog post, and the photos have annotations with them to explain what we are trying to achieve, as well as what we are going to develop.

The initial page that appears is a pre-loader page. Which has just the navigation bar, a blue screen, and a white globe icon appear. Once the page has completely loaded, the blue screen slowly fades away and reveals our website. The navigation bar remains at the top, even as you scroll down the page. The tabs on the navigation bar change colour as they're hovered as an indication for the user to click. Each tab is linked to a section on the page, for example the 'Video' tab will take the screen down to our Plastic Project Video.

Below, is a screenshot of the initial page. We've experimented with using an image behind the heading, with white text. Even though it looks quite appealing, and the gradient aesthetic draws the eye to the heading, it doesn't quite fit with our aesthetic, which is looking at more of a clean, crisp appearance. Utilising three different solid shades of blue. The text is currently centred, although we will look to left justify this. We will also look to change the fonts in each of our headings, do varying font widths and sizes in order to make certain parts of the blocks of text stand out as headings.

In the screenshot below, we have included a 'Statistics' section, which consists of some shocking statistics which we are looking to emphasize. This page is directly below the 'About' section, and can be located by either scrolling downwards or clicking on the 'Stats' tab on the navigation bar. We really like how the blue circles really pop from the page, and add a nice aesthetic. Again, we will look to play around with the fonts. However, we would like to play around with adding info-graphics above or below our existing statistics, that way we will have more than 6. 

Below, we have got our 'Video' section, which can be accessed via scrolling or clicking on the 'Video' tab in the navigation bar. We just have a placeholder video in there at the moment, since we are still developing our Plastic Project video. The image in the background is again much like a placeholder, as we were simply experimenting with how to put an image behind the text by using HTML or CSS code. We are going to move this 'Video' section higher up the page, as it is one of the most important parts of our project, and the best way to make sure viewers want to know more about The Plastic Project. This will help us draw them in, and then if they want to know more, they can continue to scroll down the page for more information.

In the below screenshot, is the bottom of our website. Currently, it has a small description about the two of us involved in the creation of 'The Plastic Project', and a small message saying "Buy a Refillable Bottle, and Spread the Word". Below that, we have some links in the footer, which, when clicked, redirect the user to the respective part of the page. We also have a few social media links, which just link to Fraser Malpas' Facebook and Twitter pages. If we were to make this project an actual project, we would have these link to Facebook pages created for "The Plastic Project". We are looking to change the colour of the footer to a blue (to match our logo), and the text/social media icons to white. We will also play around with the fonts used.

We will take our website to class on Monday and Tuesday in order to get some feedback and critiques. Also, if there is anything we need help with in terms of coding (that we can't find on the intenet, we will ask Tim for some help. Until then, we will look at making a few minor adjustments to a few sections.

- Blake

Lesson Two-Week Four

Today was studio time were we could work on our projects in our groups with the tutors there to answer any questions. 

We continued to develop the website and video and looked at how we could link these to create a continuous aesthetic. We realised that the starting frame of the video is the one that is displayed on the website, and that it will play a vital role in the websites appearance.


Screenshots of the website:

This is the middle of the website currently. The section outlines what the Plastic Projects is and aims to achieve before showing out video. We will code the video display so that it takes up the entire screen. 

The two boxes that contain the lists and headings "local" and "global" will contain stats specific to New Zealand and then Global. The boxes are coded to to expand as the mouse is placed over top of them. We plan for this to reveal info graphics for each of the different sections.

The rest of the page contains information on how they can reduce the amount of plastic bottles used in their day to day life, before a footer gives links to our various forms of social media.

Fraser

Video Development

Following the interim presentation on Monday, we have been working on developing and refining both our website and our video.

Below, we have posted our video development, which we have made a few changes to, as well as extending it to the full 2 minute mark. There is a section of about 20 seconds which only has dialogue at the moment, as we are still working on the footage to go in this section. We will continue to work on this so we can have a completely rendered video by Monday, where we will be able to get more feedback on what to keep, and what to change.

Note: The video render quality is pretty low, as the file size must be below 100MB to upload to Blogger, so it was rendered in H.264 at a medium bitrate.

We are still playing around with adding more footage, cutting sections, and also experimenting with which parts of the dialogue to use (from our longer recordings), so there is still plenty of developing to do.
- Blake

Lesson One - Week Four

Today in class we had a small interim presentation. We had 3 groups at a time head over and present their current mock-ups to Tim and Nikko, in order to show how much progress we had made, along with getting some valuable feedback, and clarifying what direction we were planning on heading in next.

For our website idea, we had presented a mock-up template made on Photoshop (an image posted in the previous blog post), and a basic cut of our video. Nikko and Tim gave us some good feedback, on what they liked and would like us to consider trying in our developments, which will help us refine our video/web page.

For the rest of the class time, it was just studio time working on our video and website in our groups, in order to further refine and develop our designs. We continued to edit and cut the video footage, while also trying to create the website mock-up in Brackets.

The video presented during the interim presentation has been attached below. The video quality has been reduced in order to lower the file size (to below 100MB), to allow us to upload the video to Blogger.

- Blake

Website Mock-up

Today we met up to put together a rough cut of the video content for our site, as well as a mock up layout of the website interface. 

We are currently looking at only having one video which we will build our site around. This video will state the purpose of our project as well as ways to fixing the alarming stats surrounding the number of plastic bottles being thrown away. 

This mock up uses a simple vertical and centered layout that makes the information clear to read as you scroll down the page. The Video content will be placed in between text that give information and context to the video before and after you play it.


Fraser

More Footage

This afternoon we went out and got more footage that we felt we could use in our video. We made sure that everything was shot from multiple angles (which would allow us to use various cutaway effects to improve the video), as well as filming it a couple of times over, that way we can choose the best shot, in case something unexpected occurred in any previous shoots.

We used a camera with a tripod, iPhone, and a GoPro to film this afternoon. This allowed it to be shot from the varying angles. By using smaller devices such as GoPro's and iPhones, it also allowed us to shoot some footage from angles or areas where the larger camera couldn't fit, or wasn't designed to shoot from (such as tight spaces, or even underwater etc.)

Tomorrow we will work on the script, where we can come up with exactly what we want the voice-over to be saying during our video, so we are prepared for Thursday afternoon's recording session with Mark. Now that we have a lot more footage, and have planned to have the script and recordings done by Thursday, I feel like we are comfortably on track to have a basic mock-up done for our interim presentation on Monday.

Over the next few days, we will prepare for the presentation on Monday. So we will have a rough idea of how we want our website to look, as well as a quick-cut video mock-up.

- Blake

Lesson Two - Week Three

Our homework to complete by today was to watch Tim's one hour video tutorial on an 'Introduction to CSS'. After watching this last night, it was interesting to see how much freedom you can have when actually styling your website. However, there was quite a lot to remember, although we were confident that once we started practicing, we would get the hang of it.

So today in class, we spent most of our time playing around with the CSS styling in Brackets, and seeing how we can make our 'playful' sites from yesterday look. Slowly but surely we started to get the hang of it, and even started using other sites to find new effects and make our page look a bit more interesting.

Also in today's lesson, we spoke with Nikko about our existing storyboard, and our plans for development. He quite liked a lot of our ideas, although insisted that we get the dialogue script sorted and recorded as soon as possible, so we can then have a better idea of how to sequence our footage. Therefore, we made arrangements with Mark Pope, who agreed to do the voice-over for us, and we will meet him on Thursday afternoon for recording. That way, we have this afternoon, tomorrow, and Wednesday to get a refined version of the script for him.

This afternoon we will go out and get a whole bunch of footage that we could potentially use in our video, based on our existing storyboard ideas.

- Blake

Lesson One - Week Three

Today in class we were introduced to the open source web editing program Brackets. We watched a 30min tutorial on editing html and how this can be updated live on the web page using brackets. 

We were then left to explore writing html pages for about an hour, for this we each created a page about our group saying who we are etc. 

For homework we are to watch a longer video on creating css pages, which control the aesthetics of the page. 

Fraser