top of page

Londoners Book Trailer

The Brief :

once receiving the brief Me and Rosie set about dissecting and brainstormed an idea around our short story: Rinse the Rapper. As our story had a very unique spin, the character appeared to have a confliction of two pre-exhisting worlds. We decided to focus more on this and thought we could play with this issue visually as it was an unusual concept (Nerd Rapper)

After we brainstormed, we came up with the concept: Street vs nerd. we wanted to create the conflict between the two whilst still having a comedic element to it.


we set about researching existing trailers that were out there that had some sort of gang related narrative. This would help develop our idea further as we could start to think abut how visually we wanted to convey the narrative. My research included:

The Kenco Coffee bean advert

(the advert was focused around the conflict between the cartel and the life of a young boy being brought up in the favelas of Brazil/ mexico) i liked this advert because of the illustration/ animations scene at the end forming over the cartels face and body with a tattoo of a gun. i really liked how it was shot using a low angel to construct the perspective of the child and the hight variation creating the the metaphorical hierarchy that exists within the cartels and gangs. Majority of the shots including the cartels, were dark, and used mis en scenes to create a sinister atmosphere (atmospheric lighting) I found i wanted to add this atmosphere to our trailer as through the kenco advert the comparison with the use of light and dark contrasts highlighted the connotations associated with the ambient lighting of when the actor is in the bright happy life of working the coffee bean fields to the darker path of drug and cartel life behind bars.

Films Researched:

iconic landscape provides a setting and grounding for the audience. If they can place the location they can associate with and feel more compelled.

Over the shoulder shots give audience a sense of perspective and tension but also provides the communication between actors

iconic battle scene - inspired us for the final scene of the two gangs (hard and nerd) coming together to fight.

Variation of shots of the two gangs create interesting depth and softens the feel. camera angles low (makes the audience feel intimidated) - the gangs have the power.

We found that a lot of the films we research had 'epic' final shots during action scenes. WE screen shot the best angles and frames that we liked and used them to help construct our narrative and storyboard.

Story Board:

Storyboard page 1

storyboard page 2

We had a few issues with the story board, as we found we needed to move frames around to allow for the narrative to flow better. We chose to start our video with an action scene instead of an establishing shot to provide a hook for the audience. it would be a trailer on Youtube and we wanted it to be engaging as to stop the viewer from pressing the skip ad button. the first scene was of (rinse the rapper) running away from a gang of nerds in a dark tunnel towards the light. This foreshadowed the whole narrative as we constructed the concept of Rinse changing from a gang member to a nerd but remaining a rapper.

After constructing and creating our storyboard we created a script using a script software site called Celtex: we included all the locations (london bridge, south bank skate park, kings meadow playing ground and its tunnel)



Our script became more of a directors treatment as we didn't have any dialogue other than 'Rinse' running away screaming. we had planned to use music over the top. We had a rapper make us a 1 minute music piece to go with the video - collaboration with recording artist to produce a soundtrack for the videO

we also planned to collaborate with a film director for the video to help with shots and artistic direction.

we also planned to use multiple actors within the video

Character Profiles:

Once the completion of the narrative was made we set about hiring actors to play the roles we had created

We hired the actors and planned a shooting schedule, we planned to shoot over two days - 9am-5pm


we encounter a huge unforeseen situation. Our lead actor who was going to provide the rest of 'rinses mandem' created communication issues. We had agreed time and dates and two days before we had planned to shoot he said he was unavailable last minute. so we tried to rearrange the days however there were still issues. So me and rosie made a decision to scrap them. We were supposed to use his music aswell as we were going to get him to lip synch along to the track. we also decided that enough was enough and we were a week and a half away from our deadline. We had to scarp all the work we had previously done, however, this was mainly due to the fact we couldn't find any replace the actors.

we attempted to chop and change our preexisting storyboard and change our narrative with what we had, but it was like trying to make a square peg go into a round hole, it was not going to happen.

be both decided to cut our losses and completely start again. we went back to the drawing board and attempted to make 'a life raft at sea' and to put the fire out. we followed the Marcel Duchamp philosophy in starting from scratch completely instead of trying to make something fit.

we both decided to make an animation, as cartoon illustrations have a stigma with storytelling and books. It also meant we only had to rely on ourselves to complete it. However we still collaborated with a voice over artist for narration with the animations and images we produced.


Page 1

Page 2
Page 3

Page 4

I redrew a new story board, the original consisted of 4 pages and 22 frames. I them animated it to help create the timings to understand what movements we wanted to take place. it was invaluable as it helped us realise we wanted to fit in too much within 1 minute. so had to cut scenes.

Bringing it to life:

WE wanted to create the animation in the 2d flat design aesthetic. it provided a softer cartoon approach to animation that was fun and colourful and more engaging for the audience. And also helped to portray the narrative within the book we were trying to sell.

The initial mood board highlighted the key attributes we wanted to include in our animation: colour vibrancy, soft edges, clear vector shapes constructing the images and solid block colour. to create the illusion of shadows i found that you could still use a solid colour but just a shade darker than the colour in front.

I researched pre exhausting 2d flat design videos on youtube and vimeo. these were the three most influential videos:

These were the initial reference images to help create our own images. I found it was easier to construct the images with the relating images as we both understood what we needed create. By having the images it allowed us to put our own interpretations onto the designs:

With the reference images we constructed a list of what needed to be made. me and rosie split the tasks into two. By splitting the images between the two of us it meant that we would make them twice as fast. I suggested the idea of thinking outside the box and to play with the gender of the rapper. I reread the story and found there was no reference to rinses sex, so i flipped the idea on its head.

All the images i made in illustrator:

By making all the necessary images before we started animating made it so much easier to animate the final video as i had all the images like puzzle pieces and by having the story board i was able to 'slot' the neccessary image into its place. with more complex sequence the images needed to be able to be broken down. to animate each separate limb or moving part. in total i ended up using 106 layers within after effects not including pre composed segments.

when i was constructing the characters i knew i needed to be able to change their poses and positions.

With rinses character each componet needed to move thus making her in simple shape segments. by using the same colour i was able to group them together to create a seamless outcome. I then experimented with a variety of clothing ideas to develop her further.

By adding shadow sections it would add dimension to a 'flat' solid colour image making it appear 3D.

the Nerd was a much simpler construction as he didn't really need to move and had only one pose, however, i found in the final outcome, I should of made his arm move with the science beaker in his hand. to make his glasses i used two black circles and changed the opacity to create the illusion of glass. by making him in separate parts i could change the colours to correspond with clothing items, and i just needed to ad lines and circles to make seems and buttons.

Narration script:

After effects animating:

Take 1:

After reviewing the final full run of the video

here is a comparison of the first final video, i finished it a week early deliberately as to allow for final refinement to make it the best it could be.

I animated all the images to the collaboration of a narration voice over of a short summary both me and rosie wrote from the extract of the book . If i was to do the recording again i would make sure The actor would know not to speed up towards the end, and if we had more time we would have re recorded the narration and collaborated with someone on a sound design course to help with the editing of the final sound. to get a nice clean recording we had to improvise using my puffer coat to act as a sound booth. and again if we had time we would have recored the narration in a proper sound booth.


I faced multiple issues when animating. the first was, linking the imagery to the narration, as we originally planned 3 seconds for each frame (24 frames to begin in with) however, we found that the whole animation ran far to quickly; to resolve this issue we cut down both the script and frames to allow for the audience to actually digest the images they were watching (To be honest we could have cut the text down even more for it to sound paced and not rushed)

i also found that some frames lasted for 2 seconds and another would be for 6 due to the number of components/ amount of text being spoken. I also had an issue of trying to make freeze frames as when i would change the position key frame the image would not stop and would just transition into the shot. to overcome this i needed to place in multiple layers of the same image. another way i over came the issue was using pre compositions; i would compose a small animation (the book sliding into each other) and then place the composition into the video and then animated the composition further.

there was a different issue at one point, which was due to the re animation of placement due to wrong placement of frames, which highlighted how important it was to continuously refer back to both the brief and the storyboard. making sure we were portraying our story clearly and in the correct order.

However, after multiple tweeks and time refinement the outcome looked really good, as some frames were clearly stronger than others however the whole video worked as the style was strong throughout.

I found i also needed to edit the sound of the narration at certain points to put emphasis on specific words such as 'MC' and 'East' to emphasise the link between the narration and graphic. the tree key frames are where the sound stays the same, increases, then decreases to original volume.

Final Take:

Website Design:

For our website design we decided to place the video centre with illustrations behind the video relating to the video being played. this helped to 'set the scene' for the videos. we included a variety of layouts to display the variety of videos:

As our video was motion graphic base we included the illustrations that feature in the video as the background which alluded to the narrative of the advert. what went well was the composition and structure. we used the same type across the website as well as the video which helped to link the video. i found that the website was clear and to the point it sold the book and displayed the 80+ stories that featured in the book.



Elementrix was created as MY Advertising blog for my Degree course At ravensbourn university.


I hope you will enjoy reading and viewing my work as i take you on my journey of development and design within my digital advertising and design course.


I have always believed that to thrive in todays industry you need to bring your personality, sense of creativity but most importantly to be versatile in an ever changing industry !   

  • White Tumblr Icon
  • White Instagram Icon
  • Vimeo - White Circle
  • White YouTube Icon

Join our mailing list

Never miss an update

bottom of page