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.
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.
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 http://dig.ccmixter.org/film: ‘gravitationalWaves’ by airtone; ‘4 Guitars’ by Stefan Kartenberg)
(Music from http://www.bensound.com: ‘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.
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.
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.
Animatics
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:
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’
Found these title fonts to experiment with, however, my laptop can’t run them, so the experimentation will have to happen after the crit session (Week 8.2). Source below.
We discussed our current ideas and progress with the tutors. We presented our research and proposed solutions, and were advised to pick a more specific direction within the topic of fashion and sustainability. It seemed that we were trying to address sustainability both at the production and consumer ends of the fashion industry; so we decided to focus on the waste produced in the production of fast fashion. Now, the goal of our website to show how the audience can make informed choices to support more sustainable brands, pushing the fashion industry toward more sustainable practices.
Identifying an Artistic Style
We researched various animated shorts and motion graphics, which we felt we could draw from for our videos. We decided we wanted to emphasise a more individual, hand-drawn style of illustration, with minimal text. The goal of our videos would be to tell a story to promote an emotive response in an audience of all ages, with textual information to support the motion graphic with factual evidence. We’ve decided to take the direction of the illustrations taking centre-stage.
Based on our research into the visual aspect of how to go about our website, we’ve decided to go into the direction of block colours with individual art style, most probably through the use of line art. The following moodboard captures what we aim to achieve, and the colour palette we want to create it with picked from key images.
![[No Annotation] Wireframe 1](https://i0.wp.com/ahskkaitiakitanga.wordpress.com/wp-content/uploads/2017/05/no-annotation-wireframe-1.png?w=364&h=515&ssl=1 "[No Annotation] Wireframe 1")
![[Annotated] Wireframe 1](https://i0.wp.com/ahskkaitiakitanga.wordpress.com/wp-content/uploads/2017/05/annotated-wireframe-1.png?w=364&h=515&ssl=1 "[Annotated] Wireframe 1")
Fashion & Sustainability 