Final Artefact - What's That Animal?

After 40 long hours, the final artefact has finally come to life. It was fun producing this artefact, because it is a new experience for me and I've never tried doing a website in a video platform and I hope the outcome will also be engaging to the users.

Enjoy!

Annotation on Youtube

The videos of the website are all done by now. So I have moved on to upload them on Youtube and give them annotations for user to interact with the website.

Putting up the video and inserting annotations in the video is not difficult. However, it is time consuming as I have to upload the video and create different sizes of annotation for the buttons. I have used two types of annotations which are spotlight and speech bubble. I use spotlight for the buttons that links to different webpages and using speech bubble as a button of indication on the timeline where different speech bubble represents different information from the animals.

Here's the example of the annotation:

Animating the Website

All the assets are prepared, and I've move on to animate the website in After Effects. It is because I will be using Youtube's timeline as an interactive tool for user to interact. Each information of the animal will be played in a certain amount of time for example 10 sec. User may skip to the first 10 sec to view other information about the current animal.

Here are the progress of animating the assets in AE:

I've faced issue on wanting to have a still background of flying polys. However, I generate the polygons using CC particle world and it will keep on playing repeatively. After further research I learn that I can save a still frame from AE and export it into PSD then import it back into AE as the background.

Designing the UI

After finishing off the polygon animals, I move on to UI design. The UI designs includes the basic information of the animals. Most of the information are very general and direct. The UIs are rather simple and minimal, it is easy to navigate because it is designed for a video platform.

Here are the examples of the UIs:

The UIs are made up of small icon button which leads to different animals and a home button, which is the logo.

40 hours, Starts now.

After deciding on the platform and finish deciding on the project contents. It is time for me to start to produce the artefact in 40hours.

I've spend most of my time designing the UIs, especially the polygon animals. I have to study the lighting, shadow and tone of the image to make polygon as 3D as possible. First of all, I will research on different images on Google and use them as my assets.

After that, I will have to trace triangles on the images. I started off with just one plain color of triangle and filling up different tones later on.

I've decided to do 6 polygon animals in total, dog, cat, bird, goat, cow and horse. Here are the results:

I've spend 2 days to finish off the polygon animals. It is more time consuming than I thought. Although there are presets such as triangulator, but the outcome is not what I wanted so I've decided to do it manually.

Changing from Web to Video Platform

Initially, I was to code and create the website using Dreamweaver and publish it into a web platform. However, after I have further research and brainstorming for new ideas, one of my friend showed me a Youtube based website - BooneOakly. I find it is quite interesting and it may be able to save up some of my time in coding and I can focus more on designing the polygon animals.

It is also a new experience for me, designing a website using a video platform. After checking back on the requirement of the competition, it did not state that the website must be in a web platform. Therefore, I decided to take the risk and execute my website in the video platform - Youtube.

Here's the Youtube web agency that my friend showed and inspired me:

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

The idea of the website is somehow similar to interactive video in Youtube. By using the annotations as an interactive tool. I think it is very creative and a new experience to try.

Art style Research

My approach of creating the website is using a sarcastic provocative way. I want the user to guess the animal on the website. I've made it easy and direct for the user to guess it but not too visible for the users. My intention is to let the user feels as it is too easy to get the answer and there are 0 challenges then sending out a message in the end of the website.

Firstly I've thought of using Japanese origami style to develop the animals. I've realised it is lacking of depth, too flat and not interesting to look at. Also with the limited amount of time I could not think of any linkage between Japanese origami and animal welfare. Therefore, I've scrapped the initial idea of using Japanese origami.

http://www.jccc.on.ca/en/programs/activities/origami.php

Secondly, I've tried to refer to my previous knowledge of using tangrams to build animals out of it. Although the outcome will be more interesting and harder for the user to guess. But it shares the same problem with Japanese origami. It is lacking of depth, way too flat and boring to look at.

http://www.bcps.org/offices/lis/models/Tangram%20Gr1/index.html

Lastly, I've been inspired by one of the project in Behance - Change the Current some time ago. It is a polygonal fish. It looked abstract and at the same time it is visually attractive. Using polygons can create depths and it looked more 3D and interesting. Therefore I've decided to experiment on polygons as my art style. And I've did further research about it.

https://www.behance.net/gallery/11009399/Change-the-Current

https://www.behance.net/gallery/11963437/Autumn-Leaves

http://barbourdesign.wordpress.com/2012/10/16/polygonal-animals/

From the research, I've found out that the shapes are made out mostly by triangles. And to make it to look as 3D as possible, I will have to pay a lot attention on the light source and its shadow. Previously, I've did a project on 3D and I've build a character out of it. I think with the 3D skill I've learn from previous class will be able to aid me in building the polygonal animals in Illustrator.