Process and Production: Heritage Quay with Sara Nesturuk

Creating an Infographic for Heritage Quay

Today is our final motion graphics workshop with Sara Nesturuk, instead of learning a new technique we are going to be creating our own infographic animation for Heritage Quay for the Quayside building at the university. 

This was an unexpected surprise because all I knew about this workshop session was that we would be picking a 'statistic' and working from it. Turns out the statistic is different segments that we will individually work on in order, I got number 11 which was 'We produce over 5000 archival items for researchers every year.' So what I took from this is to create a box asset and documents that would represent an archive. The inspiration for this is this idea of the box and documents can be found below (disregard the shutter stock watermark, it was a quick screen grab for the purpose of referencing) 

Heritage Quay has it's unique colour scheme of white dark grey black and orange which is a great colour palette in my opinion. These are the colours that we have to use for this workshop however we are allowed to created lighter and darker shades of them to help with creating assets on a 3d plane, for example I want to create a box like above, the right side of it is a slightly darker blue to portray shadow. Limiting the class to a set colour palette will help with producing assets on a deadline, we had to have a rendered animation that was at least 10 seconds long by the end of the session so Sara could upload them into a composition ready to be sent to Heritage Quay

Additionally we were limited to using the font 'Helvetica Neue', we were allowed to use any style just as long as it was Helvetica Neue, I decided to use Bold because I personally think Helvetica looks better as a bolder, thicker typeface. Below is an example of this font.

No time to lose! To begin with I created my assets on Adobe Illustrator, I had this basic idea that I wanted the documents could either pop out or land into the box then have the box seal with a lid followed by more boxes land on top to resemble a large quantity seeing that the statistic states 'over 5000' below is a screen grab of all the assets I created for this workshop, I added the logo to the box and edited it slightly to make it wrap around the box on the corner which I think looked pretty good, this is actually similar to the exhibit stands at Heritage Quay and these could actually be boxes Heritage Quay could own for archives. I also decided to add the number 5000 seperated between the documents just to incorporate the statistic into the animation a little bit. 

There are two designs to the box, one which is a full illustration which includes a lid (top right) and the box that contains the animated documents (top left) the box containing the documents is actually made up of three different illustrator layer groups. the back of the box serving as a background for the documents, the front serving as a foreground and the lid which lands on top of the box afterwards. The reason why the box is created in separate layers is due to when I import it into Aftereffects they will become their own layers that I can edit seperately so I can animate the documents between the box to give the illusion that they are going inside of It. I will also use the masking tool on the documents for when the lid lands but I will cover that a little later. 

Once I had all of the assets created on illustrator I imported them over to Aftereffects and started creating the composition, I decided to create some more document assets to add to the box to make it look more full, With the original illustration it looks slightly bare in comparison. Now for the animation I chose to have the 4 documents rise out of the box, spread and then go in reverse back into as the documents return into the box, I made the other documents jolt slightly as a form of kinetic reaction. This Jolting is made by using a lot of position key frames, this is an effect I normally use to create shaking animations (there are probably effects that actually do that on Aftereffects but I don't mind doing it via key frame. 

below is the text for the statistic, seeing that the number 5000 is the statistic itself I decided to have it at a higher point and a different colour to the rest of the sentence. The font used as stated before is Helvetica Neue set at bold.  

I imported the closed full box illustration and duplicated it 4 times, my plan for these assets were to have them fall from the top of the composition and land next to one another and as they land they also create the shaking animation that I created for the documents. One thing I noticed at the end of the session however is that there is a slight inconsistency with the boxes all together, minus certain parts of shading that might need applying, the main box containing the documents has a white handle (it's the documents) whilst the closed boxes have grey handles, this is something that I would like to edit and change before Sara sends it off to heritage Quay. 

Minus a few tweaks with animating, all that was left to do was create a transition for when Sara puts all infographics together in a composition, they smoothly transition between each other. I decided not to do anything fancy and used a simple black circle transition. However I accidentally did it the wrong shade of black and if you look closely It appears in the centre out of nowhere and then transitions. This was due to trying to rush the completion of the animation because I spent so long working on the asset design I fell behind slightly. I think that having a time limit to create something is actually really good because it helps give us practice for industry when time is everything especially with deadlines for clients, doing timed workshops like this can help us plan, develop and create ideas quicker. However, if I have enough time (before Sara sends it over to Heritage Quay) I would like to tweak some parts that I don't particularly like about the animation. 

Edit: I asked Sara about tweaking some of my animation before she submits it and she told me that due to a couple of spelling mistakes on other infographics and that she has to correct them, so she said that she'll be sending the whole composition at the end of the following Wednesday giving me a week to work on it. (great stuff) seeing that the tweaking is just minor editing I won't be documenting any further on this blog post. Below is a Vimeo link to the Infographic Animation. Overall I enjoyed the outcome of this workshop and found it enjoyable to be under pressure trying to get the animation complete before the end of the workshop. For the next workshop with Sara we will be having a look at showcasing the infographic on screen as a final.