Workbook: Week 10.1

HTML & CSS Coding, and Working Towards Finalising Our Animations

We attended the lecture on coding for websites, and spent the tutorial playing with coding to see what we could do. We both found it easier to play around with web design when editing the coding of existing websites, and tested this on Tim’s sample website templates using Brackets.

We decided that our approach to webdesign will be to edit ‘Template 4’ from Tim’s examples, as we felt this most accurately resembled what we wanted our final website to look like. Sophia drafted this wireframe to illustrate what we wanted to do as our final website interface. The notes on the bottom of the page include notes on goals to be reached by session 10.2.


Re-Drafting Wireframes

These show our working draft of the wireframes which we will be using as reference to create the website. These were drafted in Photoshop, one representing the basic layout, and the other including annotations of what each element will include.

Creating Voice-overs for the Animatics

We had decided to incorporate a conversational tone for a voice-over on the animatics, while emphasizing certain statistics and facts with type on the motion graphics. I our initial versios of our animatics, we found timing difficult in assuming how long it would take the audience to read the information. We want to use the voice-over to help relay information, as well as setting the pace for our animations. The following are the rough scripts for the voice-overs.

And here is Sophia testing the script for timing:

Animatic/Animation Iterations

We met together at Massey on Wednesday to work jointly on our animatics, and prepare them for the interim presentation. We used the voice-over audio tracks voiced by Sophia earlier in the week as place-holders, and timed our animatics to the pace of how it would be read aloud as in the voice-over. Where illustrations had been redrafted in Adobe Illustrator, we updated that information in the existing animatics.

We decided on Creative Commons music to use for each animatic. We chose songs with similar instrumentation so it was clear that the animations were connected, although the ‘Problem’ animatic uses a more minor scale, and the ‘Solution’ uses a more major scale. We felt that this would lend a sense of optimism/pessimism where appropriate to the message.

So the following videos show our second iteration on the animatics.

[Problem Animatic]

(Music from ‘gravitationalWaves’ by airtone; ‘4 Guitars’ by Stefan Kartenberg)

(Music from ‘Little Idea’ by Bensound)

Building Our Website

Using the component created in the past week, created the following drafts in Photoshop of the Website background components, and how that would change with the wireframe overlaid.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Blog at

Up ↑

%d bloggers like this: