Project Reflection

For my infographic I decided to document a process rather than an event, or a step by step guide for something. I felt for an interactive infographic, documenting a life cycle of a creature would be the perfect choice so, after researching, I settled on the cicada’s interesting life cycle.

Based on the examples recorded on my blog and other sources I came across, I think I have created a cohesive interactive experience that blends visuals and interaction together well. I achieved the look I was aiming for by mixing the simplistic styling with light contrasting colours. The subtle animations also all help to make the cicada seem more real and more alive on the screen, making the user that much more interested in the infographic. The interaction also fits with the subject matter by using simple controls and allowing the user to control the subject matter of the infographic. This control provides the user with a tighter connection to the subject matter and therefore (ideally) strengthens their memory of the facts presented to them.

Something to note as well is the 'light-heartedness' of the project. As this is aimed at a less scientific audience (as an eduction centre information terminal thing), the users need to be able to relate to accept the information that is being provided. Being more light hearted about the subject matter allows for the users to be more receptive.

I think that I also succeeded in portraying the information of the cicada’s life cycle in a simple and easy to understand manner. The information is well segmented and does not overwhelm the user.

On a side note:

Another benefit of choosing a life cycle as the subject for my infographic is that it can infinitely loop. The user will be able replay it as much as they want - which would also serve an eduction centre well as it would be easy to reset.

Development screenshots

Here is just a small number of development screenshots.

I didn't really remember to take screenshots during the creation of my infographic but here are some that I did take.

This screenshot shows the scene where the eggs hatch. It also demonstrates me using a tracer.

This screen shows the splash screen with the hit markers for the entrance button.

Here is another one of the hatching scene. This one shows the timeline and some eggs hatching.

Here is the Sap Inn. Cicadas come here after hatching (from the left) to spend most of their life drinking sap before heading above ground (to the right).

Idea settled on

I have now settled on creating an infographic around the life cycle of the north american cicada.

These bugs are interesting in that they hatch from eggs on a stick on a branch. They then fall to the ground and burrow in to spend the next 17 years underground before coming up to the surface. They then hatch from their exoskeleton and live for a very short time after hatching before dying. During this time above ground they make a lot of noise and lay more eggs.

I would like to also be fairly light hearted in my approach as well. The sort of thing that might be found in a nature reserve interactive display - which can relate to children as well as adults.

Here is the brief/quick guide of the steps to follow:


The life cycle of the north american cicada

-eggs in the bark
-hatch
-fall to the ground
-burrow in
-drink sap for 17 years
-dig a tunnel out
-find a place on the tree
-molt
-find a friend
-female lays eggs
-death
- -

rinse and repeat

Toying with Ideas

I have briefly toyed with the idea of using the creation of a film for my infographic.

It would follow these lines:

1 have an idea

2 flesh it out - script it

3 create a storyboard

4 develop the film aesthetic

5 assemble a crew

6 cast the film

7 scout locations

8 gather equipment

9 film the movie

10 edit it

11 sound effects and music

12 assemble the credit sequence

13 promote the film

14 initial screening and release

I started making this too and here are 3 screens from them

This is the splash screen.

The clapperboard is the entrance button.

And this is the first slide.

At this point I re-evaluated what I was creating and decided to change topics for my infographic. I'm now looking at life cycles of various creatures.

Infographic style examples and thoughts

Here are some infographic examples which will serve as some inspiration for this project.

This one has uses simplified elements and characters to convey the message.

This one is a website: http://neomam.com/interactive/13reasons/

This one uses subtle animations and a striking colour palette to keep the user engaged.

This one uses simplified symbols in its presentation and also makes use of contrasting colours.

Another website: http://futureofcarsharing.com/

This one uses just the left and right keys for navigation and scrolls sideways.

Things I would like to include in my infographic:

- simple but bold colour scheme

- stylised or simplified characters and objects

- simple interaction (but not boring)

-subtle animations

(UPDATE) And here is another one:

(open it in a new tab so you can zoom all the way in)

Week 2

This week was an introduction to actionscript3.

So I made a face and coded some aspects of it. Things like: width, height, alpha, and rotation as well as its position on the page.

Here is the result of some changed values. Nice.

Then I added a trace value - useful for debugging.

Same thing but with a trace being used.

A more useful trace being coded.

A more useful trace being used.

Learning how to reference inside symbols.

In this instance it was changing the look of the face.

Some more actionscript and trace code.

And here is the result.

Week 1 of assignment 2 - Class work

We were introduced to flash.

I made a face...

and turned it into a movie clip symbol.

Then I made a ball...

...and I animated it using a shape tween...

...so it was bouncing.

Then I put the face back in and made it a motion tween so its mouth was moving...

...like this...

...and this.

Afterwards I made a button.

This is another variation on it.

And so is this.

Project 2 starts here

Reflection

In this project I achieved mostly everything I wanted to achieve. As a functional tool for my community - a place to share ideas, chat about events, and get to know people in their industry, as well as find people to work with on a project - I think it (would) works very well (if made live).

There are a few design decisions which now, looking back on I would change. I would tweak the colour scheme to be less bold, change the ratio of the film strip inspired navbar to 16:9 (which is a more modern film ratio anyway) instead of being square - to allow for more screen space to be used - and probably change the background to something which would look less black on other viewers screens. 

My aim was to fill a gap on the web (or at least I know of no tool like this) and I thin I did that. Maybe one day a tool like this will exist. All in all though, I think my site and project was a success.

Development

Here are some screenshots I took during the development.

This is leftover from the blue stage of development.

I have started building the navbar here. And added the background image.

In between the last image and now I forgot screenshots. It was a long time in between these. I found out how to use some java script to create the scrolling part and to change the scroll bar. I used some html webkit stuff to create the drop down panels above the navbar too which I was quite happy with.

Here is the crew search page.

This is the open animation projects page - with search bar and scroller. Only one page is actually linked though.

And this is the homepage. Take note of the top right (for the next image) 

You can see it slides down with a mouseover :)

After playing around with many background colours and images, I have settled on this textured one. It may be too dark for some but it looks quite nice on my screen so I hope it will be fine.

The mocks

Here are the 3 options I have.

Mock 1

Mock 2

Mock 3

I have decided on mock 3

Colour scheme progression

I realised the current design didn't have any colour and thought it didn't really relate to the group very well. So I went to https://kuler.adobe.com/create/color-wheel/ and had a fiddle. I also changed the navbar to squares in a strip to represent frames of film.

Here is the initial redesign. Colour pallet can be seen at the bottom.

This is a page lower down the sitemap. I extended the bar under the nav to extend to the full 970px. - And added a search bar below it aligned with the middle 3 frames in the navbar.

I gave the search bar its own segmentation.

Back to the homepage. I added a horizontal line to tie the navbar together.

Back to an inner page. I have added a scroll bar. and split the lower page navbar in two to make it easier to see the options.

I filled up the scrolling portion of the page with some fake film title ideas. and removed the background to check I was still all fine with the grid layout.

I thought it was too blue so I went back to the colour website and started playing around with new colours.

This is before.

And this is after.

For now I have settled on this. (I have also made the search bar span more of the width of the page.)