final website

after restarting the website about 6 times we've finally finished! the last 'final' mockup posted earlier was a single page layout which wasn't really working as it looked a bit thrown together - Facts mixed with an app and a video doesn't really make a lot of sense being all on one page, so instead we've added a small navigation bar and a few different pages to better classify the information.  The infographics page holds a download link to a pdf of the sustainable fish guide, something people can print or save and help them to make the small change towards more sustainable seafood. The app is also available so that people can access the guide easier while they're out, and search for fish to see how sustainable they are and how they're caught.

website progress & development

video thumbnail

although this was not a part of the brief, i have uploaded this video online to share with friends and family members and to spread the word. https://www.youtube.com/watch?v=nF4YSwfFDl0&feature=share

final website photoshop mockup

website mockups,

3 one page mock ups that India created. She made them all on brackets but decided to move on from these ideas and create something a bit more interesting. These website designs are nice and simple, the colours and text match the video well. She also made an animation for the bottom two designs to have playing on a loop in the background.

brief plan

our audience: 

• targeted at people 18+, 
• young families, 
• people who are able to educate their children and carry on the knowledge so we can keep making a change.

audience needs: 

• video content, 
• to learn facts, 
• what they can do to help, 
• ability to share.

content we will provide: 

• a video which will state the hard facts but in a way the audience can easily understand
• a website following the video including extra facts, and ways everyone can make a small change to have a big impact
• an app mockup that will feature in our video and website. this will be for users to search fish and check their sustainability rating, along with information and background history of the fish.

small changes to make a big impact

Our small changes that can make a big impact:

• Changing the kind of fish we eat to more sustainable fish using our "nz's most sustainable fish chart"
• Cutting out fish all together
• Using our app every time you go to buy fish from the supermarket
• Sharing the video to other friends and family to spread the word about overfishing and what may come in years if we keep going the same way.

Animation thumbnails

Script for voice over

_{Ocean to plate, we all know where fish come from, but how do they get to our supermarkets?} 

_{The ocean is the largest source of food in the world, with seafood being the main source of protein for over 1.2 billion people.}

_{Over 70 million tons of fish are caught each year, and there’s infinite fish in the ocean right? so it’s totally fine? not exactly.}

_{Scientists have said that in the last 60 years’ stocks of large fish have fallen by 90%, and are warning that we are facing the collapse of the entire fish species in less than 50 years.}

_{There are currently 7 billion people living on 30% of the earth’s surface, and all of us are reliant on the other 70% - the ocean.}

_{By-catch is the industry name for commercially unusable fish trapped in trawl nets, long lines and gill nets. This causes the death and destruction of 20 million tons of marine life each year. This includes whales, dolphins and turtles.}

_{Trawling vessels can hold nets that have an opening of up to 23 thousand metres squared, or the size of 4 football fields. these nets are big enough to hold 13 jumbo jets.}

_{So what about fish farms, they seem pretty harmless, right? but not always}

_{some fish farms are poorly run, and can pollute our oceans with careless waste}

_{farms also face the risk of releasing their fish into the wild, fish that are often genetically mutated which can change the wild population and can upset the natural ecosystem.}

_{Without sustainable fishing practices our children could grow up in a world without fish.}

_{but it’s not all bad news, we have the opportunity to restore our ecosystem, but we must start today.}

<sub>visit our website or download the app for more information

written by India</sub>

Storyboard + Script

Illustrations for motion graphic videos.

Start of our storyboarding.

Wireframes

This was the start of our wire framing for our website. We liked the idea of a one page website so this is what we started to design.

Research

We began researching by looking online for some cool website designs that display infographics in interesting ways. Our favourite one we can across was http://www.evoenergy.co.uk/uk-energy-guide/ . It was a nice design and was interactive which made things more interesting. They had a really nice colour palette and the share bar on the side is a good way to get their audience to easily share the webpage with their friends.

We also looked at a range of motion graphic videos to start getting ideas on how we wanted to do things stylistically. I pinned a range of them onto a Pinterest board > https://nz.pinterest.com/maddiealbon/motion-graphics/

At this point we were both worried about how we would be able to do similar motion graphic videos as it is both very new to us, so I watched a few After Effects tutorials to get started.

First Class Brainstorming

On the first lesson we knew that we wanted to choose a topic around the main theme of meat/animal products and how cutting it out of your diet can make a huge impact environmentally.
After narrowing down to two topics (bad affects of cows milk & fish) we decided to choose sustainable fishing.