Workbook: Week 7.1

Promoting Sustainable Clothing Consumption

Sophia’s brainstorming on topics before finding a pair:


Independent Research

Aria knew some facts about the water-wastage that goes into the process of dyeing clothes in the fashion industry, so we went forward with the topic of Fashion & Waste. This page included synthesized research on the forms of waste produced by the fashion industry, as well as some problematic ethical concerns.


Information was taken from the following links:

Video and Infographic Examples & Sources


Infographic Moodboard

Featured post


For this project, we explored the textile waste and how it relates to our daily life. In the first motion graphic, we introduced how the textile waste relates to ourselves and our environment. Through telling the story of a shirt, we lead people to see why it happens and why it matters. People may not realize what will happen and what have had cost when they buying more and cheaper clothing and end up throwing them away. And showing the result of making one shirt through a different scene. Since each scene is quite individual, so I used a different way to transform. Secondly, the solution video continued the story from the problem. By presenting the direct result of water pollution, the fish we got is not clean lead people to really concern the problem is relating to us. Then, showing people how to make a change by everyday choice, and what we can benefit at the end. For the website, our targeted audience is women especially young women, so we used these pastel color to represent feminine. Regarding our topic is about textile and fashion, we drew the idea of sawing string and seam line as elements and tie each section together. And also by using the elements from motion graphic to create consistency.

Workbook: Week 12.1

Finalising Our Product

This week, Aria finished the first video showing the ‘Problem’ motion graphic, slowed down the speed of a few frame in the animation, and got the voice over from Sophia, and match them with each frame. And there are still some small changes need to fix.

Sophia has been unable to work this week, and as such, we are in the process of applying for an extension of some days to allow to catch up on missing aspects of our submission.

Things to Finish Before Hand-ins

  • Compile website through coding – Sophia will do because Aria created the website designs.
  • Finish 2nd motion graphic – Sophia’s responsibility.
  • Draft final wireframe of website.
  • Edit scanned PDF of storyboards to fit current motion graphic sequencing.
  • Fill in partner reviews.

Workbook: Week 11.1

Work & Development Session

During this time, we are working towards refining the animatic, resolving to get those as close to a final state as possible before the weekend, where we will focus on the web design aspect of this assessment.

The following are storyboard images recently rendered in Illustrator to be exported into our working files for the animatics.

Workbook: Week 10.2

Interim Critique & Advanced AfterEffects

We had our interim critique session, where we showed the following materials in class to Gray:

Sophia’s animatic sequence for the ‘Solution’ animated graphic, now including a music track sourced from, a placeholder read-through of the voice-over script, and a slightly shortened version of the storyboard.

The critique on this was to pick up the pace to make it more engaging, and to shorten the video further. It would also make the video more cohesive to have the beat of the music coincide with transitions and the voice-over.

[Aria Vid]


This was Aria’s progress with rendering storyboard images on Illustrator, and adding them in with transitions in AfterEffect to work towards finalising the ‘Problem’ animatic. This was overlaid with another placeholder voice-over, and another Creative Commons track.

Gray said that this was very effective in it’s pacing, and the paper cut-out style adopted in Illustrator worked very well as a conduit for the art style we have been trying to capture.

Few changes need to be made, the speed of each scene are too fast. Some graphics are confusing.

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.

Workbook: Week 9.2

Critique on Animatics and Working with Adobe Illustrator

We had already done both of the animatics by the time we had class, so although it was meant to tach us how to use Adobe After Effects, we didn’t work more with the software during class.

Instead, we spent the class receiving critique from Jason and Nikko on our animatics. It was suggested that we made transitions between animatic slides instant, rather than fade-ins and slow movement. It was also suggested that we script and record our voice-over now, so that we could apply it to the After Effects session and better time our transitions in time to the voice-over.

We also worked on Adobe Illustrator to start refining our images and make assets to add to the After Effects session. The following are some of the assets in progress.

Plans for Progress with Work

We decided by next session that we would like the voice-over recorded, and to continue working on refining assets in Illustrator. We would also like to create a refined wireframe for our website, and some further iteration on Web Design.

Wireframes & Web Design Iterations

Some examples of wireframes we are using for reference for our own website, sourced from various websites.

Workbook: Week 9.1

Storyboard Critique & Animatic Building

We presented our storyboards in class, pinning them up in order and each talking through the actions, messages and effects that would be in each frame. We were given feedback that they were both very good and well thought through, although they didn’t work too well together. The artistic styles were quite different, since Aria’s work was more heavy on illustration in a narrative style, filling the page with the image and relying on voice-over audio to provide statistics and information. Sophia’s work incorporated type as part of the composition, with simpler illustrations and written statistics conveying information without the need of a voiceover. It was recommended that we resolve what style we would be adapting to our motion graphic, and that we sit down to collaboratively build the animatics in person rather than using digital discussion as we had been doing thus far.

With this feedback, we decided to go back to the drawing board and re-imagine our storyboards. We gave each other our storyboards which we had presented in class, and went home to draw the other person’s storyboard in their own style. The next day, we met in person to discuss our changes and combine the styles – hopefully to create a more consistent approach to our motion graphics.

Sophia’s Re-imagining of the ‘Problem’ Storyboard (Originally Drawn by Aria)

The drawings were left largely the same as Aria had originally drawn them, although space was created to include type and statistics in the infographic style.


Aria’s Re-imagining of the ‘Solution’ Storyboard (Originally Drawn by Sophia)

Here the drawings were given more detail and depth of understanding, removing aspects of type to leave room for a voiceover.


Conclusions from the Storyboarding Exercise

After looking over the two, we decided that we would retain some aspects of type, although a voiceover may be used for longer sentences – that way, only the statistics need be included in the visual aspects of the motion graphics.

We used Sophia’s A5 panels as a foundation for the storyboarding scenes, laid them out on the floor, and replaced several with enlarged images which Aria had designed which we decided better communicated the messages of the problem/solution.



Now that we had finalised our storyboards and combined our artistic styles, we created our animatics for the problem/solution. Aria made the ‘problem’ animatic:

… and Sophia made the ‘solution’ animatic:

Workbook: Week 8.2

Critique & Storyboarding

Sophia’s lecture notes:


Interim Critique

We received critique on our progress so far – our sample static images of our webpages, sample static images from our motion graphics, and the cohesiveness of our concept for submission.

It was suggested that our work needs to be of a more similar artistic style. Sophia’s static webpages could use iterations with vector images in Adobe Illustrator to match the style of Aria’s motion graphic samples, and Aria’s motion graphics could incorporate more textures to communicate more thoroughly the layered-paper style we were aiming for.

Our next steps should be to iterate more on our existing designs, and work more towards outlining and storyboarding the 2 concepts for the motion graphics. We decided each person would work on 1 motion graphic and 1 web page. In order to make sure our design styles work together to make a cohesive website, Aria’s motion graphic will accompany Sophia’s webpage, and vice versa. Both of us will be editing one-another’s work as we go along, and contribute to what the other is doing.

Concepts for our Motion Graphics & Webpage Cover

The following sketches were done in class as a visual representation of our discussions and ideas – more like a brainstorm of what message each of our motion graphics would be giving, and how they will talk to one another across the website.

Aria’s motion graphic will be on the first webpage, which Sophia will design. This motion graphic deals with the problems created by the fast fashion industry on the manufacturing side. Sophia’s motion graphic will be on the second webpage, which Aria will design. This motion graphic presents the ‘solutions’; what the consumer can do to make wise choices in supporting more ethical and sustainable brands and practices.

Sketches for our front cover of the website (and potential character):


Sketches of how our 2 narratives could go (both concepts were more or less scrapped before we started storyboarding):

Storyboard for Aria’s Motion Graphic: The ‘Problem’


Storyboard for Sophia’s Motion Graphic: The ‘Solutions’




Large drawings of panels (A5), carrot for scale:


Blog at

Up ↑