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.

Statement of Intent Part B [Add-ons]

Statement of Intent (Part B)

Objective

Previously I have stated that my objective of creating this website is to create an awareness which able to help the endangered animals which are mass killed. To raise this awareness, I’ve decided to use a more provocative method, sarcasm. The way of the execution is using a very simple general knowledge about basic animals such as dogs, cats, cows and etc and let the audiences to guess. It is very easy to understand and easily to answer by the current generation. However, will it still be easy to guess for the future generation if mass killing continues and extinction keeps going on?

Design Language

The design language was inspired by Japanese origami. As it is more abstract and the silhouette will be used to let the audience to do the guessing. However, as I progress I’ve evolved the design language from Japanese origami to polygonal animal. The reasons is Japanese origami is too flat and is lacking of depth. By using polygons to construct animals, it may look more 3D and more interesting to interact with.

The UI is an artistic piece where users will have to guess what animals are the polygons showing. Besides that, the UI will also be showing some simple and basic knowledge of the animal showed, the simple and basic knowledge is also to be used as a sarcasm element in the website.

Target Audience

The target audiences are for people who are already aware of the situation of animal extinction. However, even though people understand the situation but they did not take further action. In Malaysia, the advertisements are exaggerating in terms of the talents act and the product advertised but still it is lack of impact on the advertisements. Therefore, I want to use the other approach to send out the message of animal’s are facing extinction – sarcasm.

Technical Specification

After further research, I’ve decided to change from a web platform to a video platform to execute my website. It is a new experience and a new way of creating a website.

Platform: Computer, Youtube
Browser: Google Chrome
Resolution: 1280 x 720

New Skills and Learning

I will be exploring on new media in terms of creating the website. I will be using Youtube to execute the website, making the UIs into a video timeline and using annotations in Youtube for users to interact with. For me, it is feasible because I’ve done a Youtube interactive video previously and I can apply my existed knowledge and explore something by putting a website into a video platform.

Working Timeline [40hours]

25 hours – UI designs

10 hours – Animating the UIs

5 hours – Upload into Youtube and create annotations for user to interact

Benchmark

Previously, I did not further analyse the advertisements critically and think of how and why the advertisements from both of the benchmarks are so provocative and the message they send out are so strong.

Firstly, the dead bird advertisements. The message is also about animal welfare. The bird is dead due to taking in rubbishes that human litter everywhere. The corpse of the dead bird is full of rubbish in its stomach. The tagline indicated “if you don’t pick it up, they will.” The message is very strong using a corpse of a dead animal and putting the blame on human’s bad behaviour of littering.

Secondly, the tuna advertisement is to show that tuna are being mass killed too. One of the tuna is wearing the mask of a panda. Panda is well known as an endangered animal, and most of the peoples know about it. Therefore, the advertiser uses a panda mask and put it on the tuna to send the message out as the tuna are as important as the panda. The tagline turns into a very strong message by putting it together with the picture: “would you care more if I was a panda?”

Design Research

The competition I've chosen to take part in is the one I've pitched, Horizon Interactive Awards. It doesn't have any specific brief, but the competition have different categories. The category which I've chosen to take part is advocate/ non-profit website, which reflects back to my life principle: doing good.

I get to do a more personal idea for the project since it does not have a specific brief. The topic I will most probably doing is on animal welfare, creating awareness and sending a message to the society about animal rights.

I've explored different websites to get myself inspired. Here are some of the great websites I've found which inspire me.

http://www.1md.be/

Killer Sounds (website not available anymore)

http://www.little-big-room.com/en

http://ueno.co/fitbit2013/#squid

Statement of Intent

Topic

The topic I’ve chosen for my CFE project is to produce UI focused website design. It will be published in web platform. The coming brief is to produce an artefact within 40 hours. Therefore I pitch an idea of producing 6 quality UIs of webpages and also a workable website within 40 hours. I am proposing to take part in this website design competition because my ambition is to be a UI/UX designer. A UI/UX designer needs portfolios which are based on UI and UX designs. My other portfolios are also UI/UX focused: Rhythmic Strategy game (Final year project), Foodice a mobile application which helps user to decide where to eat, W.O.L.F a paintball club website which promote to students to help them to recruit members and Halloween Town a flash game which allows people to enjoy and explore the world of Halloween. However, I would like to further improve my skills on UI/UX therefore I decided to produce an artefact based on the brief of this Horizon Interactive Awards.

The topic of artefact I will be producing is focusing animal welfare. The reason is to create an awareness to help the animals which reflect back to my life principle, doing good. Horizon Interactive Awards have the advocate category which allows me to apply my life principle into the artefact. Besides that, from a UI/UX designer perspective, I can do good in terms of creating a good UI/UX for the website which helps people to navigate the website easily.

Problem

The problem I’ve faced is animal extinction. A lot of animals are at the edge of extinction due to human’s doings; producing products such as bags, scarf, wallet and etc using animal’s parts. Some of the animals are mass killed to have them as foods and some of their habitat has been taken over by human causing them to lose their place to live.

Objective

My objective of creating this website is to create an awareness which able to help the endangered animals. The awareness is also to tell people to appreciate animals which are going to extinct soon.

Design Language

The website is inspired by Japanese origami. It will be executed using basic shapes (tangrams) to form the shapes of animals and product produced by the animal. The shape of the product will change into the shape of the animal when user mouse over it. There will be fixed shape on the first webpage, when the user scrolls the website different shapes from the other webpage will merge with the fixed shape and form different type of animals. The website will have a smooth transition of the merging of different shapes, using CSS 3.

Project Scope

My objective for my final project is to present a workable website which consists of 6 good UIs of the webpage within 40 hours. The webpages will be focused on UIs rather than the experience because of the limitation of time.

Genre
Horizon Interactive Awards do not have any specific briefs. However, they do have different categories to take part in. The project I decided to focus on is advocate website. It is a non-profit website which helps on raising awareness and creating social movement.

Form
The website will be developed by using either Adobe Dreamweaver or Adobe Muse. It will be run on web platform. The web will be designed on UI focused and some simple transition will be applied on the website.

Target Audience

My target audience is for peoples who are unaware of the situation of the animal which is at the edge of extinction. It is for both genders, male and female and targeted on them who are the consumers of product made by using animal’s parts. The age group of target audience is between 20 years old to 30 years old.

Technical Specification

Platform: Computer, N/A on mobile & tablet
Browser: Google Chrome
Resolution: 1366 x 768

Existing Skill & Knowledge

Software
In terms of software, the skills that I need to have in order to develop the mobile game that I’ve proposed is Adobe Illustrator and Adobe Dreamweaver.

Adobe Illustrator, I have been learning it since my Foundation year in Degree. This software will be useful as it helps me to generate graphics as assets which I needed it for the website. For the website I might be using graphics rather than images due to the limitation of time.

As for Adobe Dreamweaver, I’ve learnt it since Level 4 of my Degree year. However, I did not utilize the software much as I use Adobe Flash more often. But, the skills I have for Adobe Dreamweaver are still sufficient for me to complete this artefact.

Skill set

I have some knowledge that benefits my artefact which is the consideration of UI and UX for the user. I’ve learnt building UIs for the in level 5 by making web, game and application. All of the projects require good UI and UX.

New Skills and Learning

The new skill that I will have to learn is Adobe Muse, a new software. This software will ease me on creating the website which I can put more focus on designing the UI. Adobe Muse can easily create the website without needing much knowledge about coding. It can ease me in terms of creating a better UX in a short amount of time compared to Adobe Dreamweaver.

Working Timeline [40hours]

10 hours - Researching

15 hours – UI designs

10 hours – coding in Dreamweaver

5 hours – troubleshooting and refine bugs

Competitor Research

www.dadaabstories.org

www.noonedeservestodie.org

Both of these websites are the past winners for Horizon Interactive Awards – the competition which I’m taking part in. Dadaab Stories is the winner of 2013, the website tells great story using short video for each webpage, and there are explanations written on the video. The compositions of the texts are well organized according to the video. As for Noonedeservestodie, they have great UX such as the transition when user scrolls down. Besides that, they also have great content which able to bring out the impact of the awareness.

Both of the websites are great in terms of UI and UX. However I have restriction in terms of execution time: 40 hours. I will not be able to finish both UI and UX in time. Therefore I planned to focus on the UI and the contents of the website.

Benchmark

These two are advertisement about animal welfare which sends out great messages to the society. However these two are digital advertisements which are still. Using website I can explore different interaction to create a better outcome in terms of UI. I will be using minimalism and big picture web concept to apply on the project I am to produce.

Wireframes [Look & Feel]

Sitemap

P.S.: The statement of intent is still in pending for tutor to final approve it before I can start to work on the project itself. Minor changes on the project is still acceptable. 

3 Academic Posters

After researching on the 6 drafts, I have come to finalize my chosen 3 competition for the submission for project one. The 3 posters are from: Horizon Awards, Awwwards and Adobe Awards.

Horizon Awards

Awwwards

Adobe Awards

The final poster I've chosen to pitch is Horizon Awards. I started off explaining what competition I will be take part in, then about my future ambitions and how does it actually help on the future ambitions i wanted to be. Followed by my top 5 portfolio mix plan, which are my FYP, Foodice application, CFE project, Paintball club website and Halloween Town flash application, with explanation on what type of portfolio are they. The upper half content of the posters are mostly about my own information while the bottom half are about the contents of the competition itself. The contents consists of the info of the competition, brief, past winner, judges, submission requirement and reviews. 

During the pitch I did cover most of the points needed. Unfortunately tutor missed out the competition name which I've only mentioned once during the start of the pitching. Also the fonts in the printed poster is not very visible which is hard to audiences to read on.

After the pitch, I have to start choosing one of the competition/event to take part in, it doesn't have to be the ones that I've pitched or produced. After choosing the competition/event I will have to start to work on it, documenting and producing.

Identifying the competitions

During the first project brief, I have to research on different competitions; identify and pick 3 competitions/ events and make them as an academic poster. Out of the 3 academic poster created, I have to pick one that I am interested in the most and do a pitch presentation on it.

First of all, I've researched on 6 different competition as draft for me to narrow them down into 3 later on:

1. The Horizon Interactive Awards

https://www.horizoninteractiveawards.com/

- to improve and strengthen my personal skill on UI/UX on web design

- web/mobile industry
- UI/UX portfolio, web portfolio

2. Adobe Awards

http://www.adobeawards.com/us/

- to improve and strengthen my personal skill on UI/UX on game design

- app/game industry
- UI/UX portfolio, app and game design portfolio

3. The Global Awards

http://www.theglobalawards.com/

- to enhance visual communication skills based on the theme/brief set by the competition, also to improve on UI/UX on web design

- web industry
- graphic communication, web design portfolio

4. Youth Awards

http://www.youthaward.org/

- to enhance visual communication skills based on the theme/brief set by the competition, also to improve on UI/UX on game web/app design

- web/mobile industry
- UI/UX portfolio, graphic communication

5. IF Design Talents

http://www.ifdesign.de/talents_concept_design_award_kategorien_e

- to enhance visual design and creative thinking, improve and create a more professional graphics/design

- graphic/advertising industry
- graphic communication, digital media portfolio

6. Awwwards

http://www.awwwards.com/

- to enhance visual communication skills based on the theme/brief set by the competition, also to improve on UI/UX on web design

- web industry
- graphic communication, web design portfolio

Welcome!

Hello,
This is a blog to document my process of the making and documenting of the CFE project, a website as a product to take part in the selected competition I've chosen.

The making and documenting will include:
1. The final artefact produced for the selected competition/event
2. Statement of intent of the artefact
3. Blog entries which document the processes of the making
4. Within the 40 hours, the process of producing the final outcome

The final outcome will have to be submitted on Week 11 of this semester.

Hopefully, this blog will be able to show how I formulate my idea and produce the final project of CFE as one of my top 5 portfolio in my degree showcase.