Hope Animation Assignment – Development and Evaluation

Initially, when I started this assignment, I created a series of goals in Asana. I organised these by task and date, assigning them certain days and general time-frames to achieve in order to accomplish the assignment in an efficient and timely manner. Once this was in place, I began researching and ideating.

This slideshow requires JavaScript.

 When it came to research, I investigated several topics;Hope (meaning, in historical and philosophical context, references that are both visual and non-visual, and how hope is used in an example of art, design,literature and or film), 2D animation (methods, techniques, story and content etc.),storyboards, animatics and software.
Once all that research had been compiled and written about,with references and images gathered, I moved onto ideation and sketchbook work.I started with an idea of a triangle, rising and projecting light in a dark world. This light would fall upon a figure, whom is in despair upon the ground,while several more triangles appear in the distance as the sky lightens. A series of notes regarding the storyline, key points and visual elements were created,supplemented with several sketches and thumbnails. My sketchbook, as it progresses, includes more notes and drawings, as well as storyboards and character exploration.

This slideshow requires JavaScript.

The direction I took, stylised and semi-abstract, was heavily influenced by research into colour and shape language, especially in relation to the concept of hope and the emotional connotations of those elements. This is evident in the shapes I chose, with an upside-down triangle for the representation of future hope and a better future, flipping the usual connotation of the violent and aggressive shape language that is normally interpreted through triangles. For hope, I used a circle as a representational tool; combined with white and its fleeting appearances in the story, it puts forth a narrative on the elusive nature of the concept.
With several different shapes and value combination present,I needed to find a way to separate them, as well as introduce texture. To do so, I created several sketches, assigning value groups to certain shapes and foreground, middle ground and background sections. To add further character to the story, the character was developed further, seeking out a consistent style to use in the animation. After much exploration, both into simplified/stylised,realistic/semi-realistic, angular and soft, line and broad/charcoal strokes, I settled on a combination of line and charcoal strokes, with the character moving between both the ‘medium’ and visual style as well. Fluctuations between construction-esque manikins, simplified skeletons, fleshed-out bodies and charcoal strokes were made, each representing a certain emotional state, as well as the position of the character in the story.
The bare, simplified and skeletal styles, as well as the constructionist ones, symbolise the emptiness of the character, with some order being restored to their being when the orb/sphere appears and returns throughout the animation. The charcoal strokes, with the character being ‘filled in’, represents the character before the turmoil and distress, as well as afterwards. This shows the character as ‘whole’, his being undisturbed by chaos and discord. Colour experimentation, as well as storyboard development,was explored as well. The colour-work in my sketchbook was done using colour pencils, with a fine-liner being another medium/tool that I used.
The final storyboard, of which I created digitally in Photoshop, does not deviate too heavily from the one in my sketchbook. It was also used to construct my animatic, making the process much more efficient.
For the storyboard, made in Photoshop, I attempted to create a good indication of the story, visuals, content and camera  angles/shots/movements. I used a template found online, creating groups for each storyboard and its respective panels to ensure better structuring and layering. The first panel, depicting the character while still in a happy state, has bright blue and cyan colours in evidence. The character stands tall and proud, confident and happy. This panel makes use of arrows and a rectangular inner frame to illustrate zooming in, where a transition occurs towards panel two. There, a vignette effect is displayed, showing chaos or struggle that is occurring in the character’s life. The third panel shows the character in a dark, textural void with tendrils of black and red swirling towards him, contrasting the ones found in panel 1. This reflection and juxtaposition of the first panel reinforces the idea that the character is going through a difficult time, with elements of his life that were previously positive now affecting him negatively. Afterwards, a transitional sequence is depicted through several panels, with textural effects, custom brushes,masking, layering and grouping being used to create these visuals. Those abstract and textural images, which will flash upon the screen briefly, are representations of the inner turmoil faced by the character. After a series of those images, a panel depicting the character falling is shown. Here, a dark background with a static texture is evident, showing the confusion and negativity imbued in the perceived chaotic void of life.
However, in the panel after this, a white sphere appears before the character, whom raises their head to view it. The camera angle here is slightly above over-the-shoulder, showing the top of the back of the character’s head with the sphere above and before him. The camera will then cut to a view of the character’s face from the front, lifting his head up to face the orb/sphere in the foreground. The camera, in the next panel, is then further back. Here, the character turns to track the sphere as it moves across the screen. It will then fly up and away from the character as he stretches out towards it. Clearly distraught in the next panel, as he has effectively lost his fleeting glance at hope, he walks in a slumped manner before lifting his head once again to view the orb return. In this next panel, the sphere/orb travels towards and around him as he tracks it, turning side to side as it orbits him before flying off into the distance.
Once again, the character has ‘lost hope’ and struggles togo on, stumbling in the dark void he inhabits. Shortly after stumbling to the ground, another transitional sequence of abstract shapes and textures appears.Following that, a scene where an abstract representation of the character’s ‘soul’ is depicted, showing how he experiences great emotional and spiritual pain from the complete absence of hope. He falls into despair, as shown in the next few panels. Here, several camera angles show him on all-fours, within the dark void he still inhabits. After a while, a light begins to shine upon him.This heralds the return of the orb, of which orbits him once again. He then lifts his head, the next panel showing a much more colourful scene; the sun is rising, with both warm and cool colours bleeding into/washing over the background. Here, the character is still on all-fours, however, strong directional light begins to wash over him. The next panel displays the presence of a large upside-down triangle, the sphere residing next to it as it casts its light upon the now kneeling character. The next panel depicts the character standing up, with the camera showing only his shoulders and up as he stands up.Afterwards, a scene with the character standing is shown, several more characters appearing in the background as the light from the main one is cast onto the character.
During the development of this storyboard, I had to ensure a coherent story that related to the concept of hope, making sure that the theme was communicated not only through shape language and story, but also colour and posing.

This slideshow requires JavaScript.

Moving forwards, I started to work on my animatic. To do this, I used Photoshop’s Timeline with the workspace set to Motion. I then created several groups, referencing the ones created for the storyboard, as well as copying over the folder structures from the document for the storyboard. Having the storyboard done beforehand made the process of creating the animatic much more efficient, cutting down on the time required to make it.In this phase of the assignment, I worked mainly upon getting the timing of the scenes right, acting out several actions and timing them to ensure accuracy.Some changes were made during the animatic phase, however the visuals remained mostly the same to the ones for the storyboards.

This slideshow requires JavaScript.

Once I had created the animatic, we went into a feedback phase. Here, we created Google Forms where we created a series of questions that we then had out peers respond to, essentially gathering feedback and critique.

This slideshow requires JavaScript.

The feedback was rather helpful, highlighting the areas thatI needed to work on and re-visit. Afterwards, I moved onto the actual animation for the assignment. Before I begun animating, I took reference videos me performing certain actions. This is to ensure accuracy regarding the motion and timing, creating believability. Not only did I take videos, but pictures as well. Those images helped with specific poses, added to the ability to useAdobe Premiere to dissect the video reference, I had a decent amount of reference to use when animating.
Animation Tests and In-Class Exercises/Tutorials:

This slideshow requires JavaScript.

When it came to animating in Photoshop, I had to do quite a bit of research, as well as trial and error. To help with organisation, I organised the animation into several scenes, each with their own folder structures inside. To animate, I had to create video layers using Layer ->Video Layers -> New Blank Video Layer. Within this, I could animate frame by frame, navigating with the arrow keys and seeing the next and/or previous frames using Onion Skinning, of which is accompanied by several options in an expandable menu/drop down menu attached to the animation panel/timeline.
When I needed still images that were to persist over certain periods of time, as well as have certain transformations applied to them, I created a normal layer and converted the contents within to smart objects,allowing me to manipulate, edit and transform them more freely when it came to the Timeline Panel.  Some of the scenes required careful planning and layer structuring due to the overlapping nature of some elements, this was aided by the ability to group layers, as well as structure them in the Timeline Panel, moving them around, layering and lining them up with each other.

This slideshow requires JavaScript.

When it comes to animating, I am still quite inexperienced.I faced many challenges, of which having reference helped solve. I used AdobePremiere to navigate my reference videos, pausing it at strategic points to view the ‘key frames’. One area of particular difficulty was the scene where the character is seen from the side view and moves from left to right, stopping and then breathing rapidly. While I was animating, the depiction of breath was initially quite unrealistic, however, as I was drawing I got into a rhythm,realising how to animate the movement better by acting it out myself,exaggerating the movements. In order to depict rapid breathing through the chest, I raised the rib cage and flattened the stomach for the inhalation, and vice versa for when the character exhaled.
To animate the ‘growth’ of the triangles, I created them as smart objects, used the transform option and created keyframes, starting them out small and ending them at a larger size a short period of time. To ensure accuracy, I created a separate layer for guides, placing dots at the original points of the ‘original’ triangles before transformations. To show a gentler fade, I used the gradient tool to fill in a selection when creating the triangles, of which was enhanced by the use of a soft eraser.
In comparison, animating with lines was faster than using the broad charcoal strokes. When using the broad strokes, achieving proper proportions and body shape was difficult, especially when using only a few limited values. The lines allowed me to create more gestural shapes and forms,allowing me to create flowing frame by frame animation. The broader strokes were more suited to the still images and shorter scenes, especially ones affected by lighting and the heavy use of colour.
The use of lines also helped with accuracy, allowing me to break down the movement and scenes more-so than if I had predominately used the charcoal strokes. Ease-in and out, as well as timing and the position of the body and its individual parts during movement are important factors to pay attention to, as these help add realism and appeal to the animation.

This slideshow requires JavaScript.

The audio, created by my friend Tristan, is used to emphasise the chaotic and discordant nature of the character’s journey, as well as the fickle nature of hope. The electronic and unsettling notes sound out during key moments, signalling shifts in tone and visuals, persisting even through the times of supposed hope and happiness. The gong that sounds out during the transitions of despair hints at the finality of death, something linked to the feelings of hope and despair, a driving factor for humanity.
Compared to most professionally produced animations, mine appears un-finished, with line work and animation errors throughout. Colour-wise, the use of flats combined with clean line-work would of been beneficial, providing a cleaner look to the overall animation. An example of this would be Snow White, where the use of clean lines, flats and painted backgrounds create visually interesting scenes, as well as fluid animation. Instead of using charcoal strokes, I could of filled in the lines of the characters, applying lighting using the lasso selection and gradient tools. The  backgrounds in my animation are rather simple and abstract, with only a few values used to separate the ground from the sky, and in some scenes only two values are used to divide the ground and the sky, with textures applied to add visual interest. Further along, the background become slightly more complex, with coloured gradients, a sun and several triangles being introduced. However, compared the Snow White, these backgrounds are simple and abstract, lacking the traditional painterly quality evident in the animations of old.

Stop Motion Animation Assignment – Development and Evaluation

For the Letter/Alphabet Stop Motion part of the AnimationAssignment, I started in my sketchbook with the ideation of stop motion avenues and possibilities. I wrote down, supplemented by previous and current research,several types of stop motion techniques, processes and mediums. My initial direction was related to the use of a chalkboard/blackboard and some chalk,leaning it against a surface such as a chair or wall, using chalk to create the required letter.
The way I was going to achieve the stop motion effect with the letter and chalkboard combo was thus; I would measure out segments, each insets of 12 ‘frames’. I would then advance the lines to another segment, talking a picture, and then progressing on. Once I had advanced the lines a decent amount, I would erase by rubbing and/or using a wet cloth to wipe off the undesired marks/chalk.
The letter I was given, ‘Z’, was created using this method.I measured out several sections, broke them up into segments and then advanced the lines across the board, erasing and taking pictures as needed. To ensure stability, I mounted the camera on a tripod and placed the chalkboard on an easel/drawing board. I used some paper and a pencil to record the frame rate and images taken, using tallies and totals to ensure consistency.
After review from teachers, I gathered information on how to improve my stop motion animation. Several of the suggestions were related to font, character/s, lighting, colour and sound, as well as frame rate. Regarding lighting, the images were taken in daylight, light fluctuating through blinds.This created visual disturbances and stuttering, lowering the quality of the animation.
I then went back to ideation, informed by these suggestions and various new directions. The inclusion of a character, such as a zebra,and/or other elements relating to the letter ‘Z’ were suggested. In order to include elements that related more to the letter in question, I created several sketches and did some exploration in terms of font and shapes. I came up with amore organic font, more efficient when it comes to managing the frame rate/number of pictures required in relation to the timing. To relate the letter to an example of a word starting with Z, such as zebra, I included sketches of black and white stripes. I experimented with this in several ways,of which can be seen in the images below.
After creating more sketches in my sketchbook, I went back to taking images to create the stop motion animation. Feedback also included the mentioning of the background in the images I had taken, and that it was too distracting; the suggestion, therefore, was to zoom in on the chalkboard. Due to the orientation of the chalkboard and distances between the table it was on,and the counter the camera was on, required me to pursue other options. I tried out using a sketchbook, however the bright paper made it difficult for the camera to adjust and focus.
To solve these problems, I pursued another medium. I extracted zig-zags from the letter Z, relating to that were twisting pieces of pasta. To make this new medium work, I used a cutting board placed upon a counter. Atop that board, I placed pieces of pasta, arranging them into a Z with extra lines coming off it to form a zig-zag. To add visual interest and some more motion, I created a zig-zag, on the left hand-side of the shot, that would move from top to bottom and vice versa. To boost the frame rate and smoothness of those frames, double pictures for each ‘frame was taken’, thus doubling the frame rate.

Stop Motion Animation:

Digital Development and Evaluation – HUD Assignment


This slideshow requires JavaScript.

At the beginning of the digital creation of my HUD, I sought to pin down the visual language and style early. I experimented with the modified trapezium shape that I designed in my sketchbook, expanding upon it further. I then incorporated the LED strip around the edge, making use of strokes and shapes and a soft airbrush to create the glowing LED effect. To create the element, I used a pen tool to create the overall shape, added a stroke for the LEDs, copied the shape and enlarged that to create the rim. The segments were created using the line tool repeatedly.


This slideshow requires JavaScript.

Once I had the main design direction down, I used the sketches in my sketchbook as reference as I began to create the HUD. I decided to have two main elements on the bottom part of the HUD, angled off as though they were jutting out of the HUD itself and wrapping around the viewer. The bottom middle section is more flat, located directly in the centre and below the drivers eyes. A similar process to that mentioned before was used to create these elements, with the side panels being skewed to create the extruding look.

Backing panels were created to keep the other panels from floating off, paired with the bright blue LEDs, allow the HUD to be readable on most backgrounds. The use of guides and the pen tool was integral in this process, allowing me to line up the various elements and ensure symmetry. The shapes, having been created with the pen tool, were able to be manipulated and changed as I designed. The bar at the top was created, once again, in a similar fashion to the other elements. This time I added in a battery charge bar, using more lines to create segments that would react and change colour depending on their charge. In order to create the look of glass covering the chargeing bar, which represents the current electrical charge of the car, I used the bevel effect, as well as manually designed highlights.

Once the main parts of the HUD were positioned, I began to incorporate the overlay. The analogous colours of blue and green harmonised nicely, standing out from one another yet unifying the design as a whole. This is further reinforced later on when I included green in other parts of the HUD, such as in the speedometer and the way finder/compass.

To create a more 3-dimensional look, I used the 3D Extrusion tool/option to manipulate the bottom panels. The extruded area, even when manipulated, did not fit in with the rest of the HUD. I then decided to manually incorporate 3D elements instead, using the line tool to create a vanishing point off the side of the canvas. I then used the pen tool to create sides to the panels.

Moving on from that, I further worked on the overlays. I included your current position and lap, using the TimeBurner font to do so. In order to create the glowing effect, which helped communicate the ‘overlay’ aspect, I used both the Outer Glow effect with the Lighten blending mode. I set the colour to a bright, saturated green and manipulated various sliders to create the desired effect.

This slideshow requires JavaScript.

To create the track map, I traced over screenshots taken using Google Maps of London and other surrounding areas. To do so, I used the pen tool to create a series of nodes that I then manipulated using the Convert Anchor Point tool. This allowed me to create curves, more accurately tracing the roads. Once that was completed, I turned the path into a selection and added a stroke to it to create the track. I then took the traced track, on its own layer, and isolated it into another document. There, I placed it in a copy of one of the panels from the HUD. I then created a 3D extrusion, manipulating it in space. Once I was happy with the angle and level of extrusion, I used the gradient tool, opacity and eraser to hide and reveal different parts of the track, fading it into the display.

To add more information to the track map, I created a circle that I extruded in 3D to represent the player (green) and the other racers (red). To create the checkpoint/start/end point, I created a triangle using the shape tool. To ensure readability I added a grey stroke around the border. Afterwards, I created the chequered flag within a mask, using a series of black and white squares. Once completed, I placed that on a part of the track and copied over the layer group back into my HUD document.

This slideshow requires JavaScript.

Initially I had created a bar-based speedometer for the HUD, however, that design did not fit the overall direction and was distracting. Therefore, I decided to re-do the speedometer in a more modern, stylish way. I used the TimeBurner font to create a series of numbers representing speed in KM/H. I then created multiple divides, made using the line tool, between these numbers. Below the numbers themselves I created dots so that the positioning of the needle is more accurate and is able to be read more clearly. The needle itself was created using the pen tool and went through multiple iterations. I decided to go for a long, sleek look to the needle, the modernity being further reinforced by the contrasting glow and dark background. To create familiarity, I referenced real-life speedometers and included a base for the needle. With the needle being a digital representation, the base is more to create a grounded area that the eye can use to track the needle along, rather than actually house and operate the needle. It also provides a glow, spreading out from beneath it, helping to illuminate the surrounding area and tying in with the glow from other areas of the HUD.

To create the glow for the text, lines and dots, I used a similar process to the one I used for the overlay. The needle, instead of just having an Outer Glow, had an Inner Glow effect applied upon it as well. This furthered the glowing digital look that I was creating.

As I progressed with the HUD, especially after I added highlights to the panels and displays using bevels and gradients, I realised that the blue of the needle and numbers were being lost and confused due to the close proximity of the same blue colour.

Therefore, I changed the needle, numbers, lines and dots in the speedometer display to green. This created a much better visual impact and increased the readability without creating too much contrast. To change the colour, I added in the Colour Overlay effect and set it to green.

This slideshow requires JavaScript.

The creation of the targeting overlay digitally was done with referencing the early sketches made in my sketchbook. The design itself is heavily inspired by the symbol of a battery when represented in an electric circuit. I used the varying lengths and contrasts of verticals and horizontals to inform my designs, creating a tiered overlay. At the centre of the targeting overlay, I have contrasted those verticals and horizontals by creating a diamond shape with a circle at the centre, mimicking a stylised eye. The lines themselves were created using the line tool with the help of the guides and rulers. The glow, once the overlay was put into the HUD, was created using the Outer Glow effect.


This slideshow requires JavaScript.

In order to create the way finder/compass, I had to extend the middle panel to accommodate the circular shape. The intention of this element is due show the player what direction they should be heading, as well as their orientation in the map. The compass itself will react to the direction that the player faces, spinning to hide and reveal parts of the circular digital display.

To create the way finder/compass, I had to extend the middle panel to accommodate the circular shape. The intention of this element is to show the player the direction they should be heading, as well as their orientation in the map. The compass itself will react to the direction that the player faces, spinning to hide and reveal parts of the circular digital display.

The TimeBurner font did not create the type of capital N that I needed to ensure readability for this element, so I instead tried out a few fonts before settling on Cordia New. Again, I added the relevant glow effects and colour overlays.


This slideshow requires JavaScript.

I experimented with several colour harmonies, although I did stick with the analogous blue and green. These colours were ones used by the Battery Conservationist team, which is the team this HUD is for.

During the process of creating the HUD, I regularly referenced real life dashboards, my research and analysis of other game’s HUDs and my sketchbook.

For the final HUD design, I added in a background to provide context. In order to create this, I used an image from Google Maps that I then manipulated and photo-bashed with the aid of several other photos. I masked out the sky and inserted an image of a starry night. I then used several photos of cities and long-exposure photographs of streets to build up the rest of the image. TO create the sky line I inserted several images, layering them on top of one another and integrating them by applying blending modes and erasing unnecessary parts. The healing brush tool helped with repairing areas where needed. To create the look of headlights, I used the gradient tool to lay in some blue light spilling out from in front of the player’s ‘car’.

I created several variations, with a solid bevel on one, a glass bevel on another and one with the isolated HUD.


Compared to some of the more recent driving games that I researched and analysed, such as Forza Motorsport 6, my design is not as minimalist, however I believe that it works well in context. The brief was to create a HUD for a racing sim game that features electric concept cars. The Battery Conservationist’s logo and HUD complement each other nicely and fit into the context of the imaginary game level nicely. However, I could have made better use of the space by going for a more simplified and stylish approach, though that would not fit with the team’s identity.

I applied some of the lessons I learnt when analysing the HUDs from other racing sim games, such as the need to create an area for the player to see without being cluttered by too much useless information. The targeting overlay may appear slightly intrusive but it only appears when you are fully charged and are ready to use your vehicle’s special ability or weaponry.

Seeing as we were working in a computer room/classroom environment, we had to ensure safe working practices so that no harm befalls you, your peers or your teachers. Bags were kept out of the walkways, off the desks and no food or drink was consumed inside the room. This guaranteed that there are no tripping hazards and that no equipment is damaged.


Design development process (as mentioned in Task 1 Blog Post):

The design development process can be broken up into R.I.D.E., meaning Research, Ideation, Development and Evaluation. This is a tried and true method that helps provide a clearer roadmap, especially once planned, for projects and assignments.

The process is continuous, even though you may have ‘completed’ your research near the beginning of the project, more should still be done throughout the duration of the assignment. You should continuously be analysing and evaluating your designs, and once you have arrived at a more finished design or prototype, you must evaluate that before either moving onto finalisation or going back to the ideation and development phase.


 Images used for the photobashed background were found online and can be accessed here:








Sketchbook Development and Evaluation – HUD Assignment

This slideshow requires JavaScript.

For my logos and HUD designs, I started off creating sketches in my sketchbook. I attempted to create three distinct yet connected design directions for the three different logos and teams, evolving the designs through multiple iterations. I experimented heavily with alterations and variations, trying out symmetrical and non-symmetrical layouts.

The designs evolved as I iterated, with the three different directions becoming clearer the more I worked. I not only experimented with the shapes, but also the values, testing out value hierarchies and making sure that the logos read well. For the Red Angels logo, I focused more on the contrast between round and angular, making use of values to further this juxtaposition. The arrangement of the circles and ‘wings’ were initially inspired by the position of a pilot or driver in the cockpit or seat of a vehicle. As I drew I realised that it resembled a radiation symbol, I then made use of that to help inform the designs, pushing the arrangements and proportions of the angular ‘wings’.

In regards to The Architects’ logo, I wanted to include an angular diamond shape that is reinforced by strong, structural verticals and horizontals. The diagonals helped create an overlapping division, allowing the two other elements to exist on a similar plane without interfering with one another. The use of angles and measurements helped greatly with accuracy in the drawings, allowing me to achieve symmetry in the designs.

The Battery Conservationists’ logo is visually similar to the Red Angles when it comes to the angled ‘wing’ designs bordering the centrepiece. The curves in this design, however, are reserved for the battery symbol in the centre. This simplified shape, representing a battery, provides clues as to the nature of the team. Experimentation was done regarding the overall design of this logo, with changes to the background rectangle, the placement and size of the battery and the nature of the ‘wings’. In some designs, they leaned more towards a battle-axe look, while others were more geometrical and triangular. The curved ones were experimented with extensively, negative and positive space being pushed and pulled throughout the iterations. Positive and negative symbols, and value separation regarding them, were experimented with for the battery part of the designs. However, I decided not to include any other symbols on it, to avoid clutter.

Once I was happy with the sketched options, I moved into Photoshop in order to create the finished logos. Research into colour combinations and harmonies was also done to ensure a visually pleasing final result.

After I was happy with the design of the logos, I moved onto the HUD designs. Continuing the theme of angular shapes, creating rough layouts of the overall HUD as well as the various elements within. The main shape language stemmed from a modified trapezium shape. To help create a border between the information within the HUD and the game world, I created thin borders around the main space of the shapes. Past that, I experimented with bevels and other borders of different values, ensuring that the HUD was visible while against a variety of backgrounds.

I planned for the top bar to display health or electrical charge, whilst the bottom displays would contain speedometers and track maps/mini-maps, as well as other information. For the electrical charge bar and speedometer, I was going in the direction of digital display with a bar that fills up, changing colour as it reaches a different amount of charge or speed. Multiple iterations were created of these various elements, as well as the overall shape language.

Experimentation was also conducted to find other ways to display the electrical charge, such as an overlay. This overlay, visually similar to that of a fighter pilots, would serve to display information that was not built into the car, but rather added as modifications for racing and are able to be updated for various situations. Instead of using it to display electrical charge, which I decided the top bar would do, I instead used it as a targeting overlay. I also used it as a way to show the player their lap number and position. To make sure that this stood out from the rest of the HUD, I flipped and altered the orientation of the shapes that housed the elements in the HUD, arranging them onto the sides of the top bar. To tie the targeting overlay in with the theme of electric concept cars, I researched the electrical symbol used for batteries and create multiple iterations of the targeting overlay based on that. I settled on a design direction that incorporated a series of lines of varying lengths, bordered by strong verticals with a diamond shape in the centre, contrasted by a circle within.

I needed to add more visual interest to the HUD, so I decided to make use of the thin borders around the various elements that I had designed to incorporate LED-like lights, neon in nature and broken up by thin lines to create a series of segments. With the direction leaning towards high contrast and futuristic digital displays, I re-worked the speedometer to include a more traditional approach, edited to create a more futuristic look. I used the visual language of the modified trapezium as a basis to create a speedometer, adding in repeating lines to represent the different speeds and placement of numbers. To further mimic real life speedometers, I included a needle. However, this needle exists separate from its elongated base, it is a digital representation that moves independently from it.

I experimented with different iterations for the needle, trying out thick and thin variations with different proportions. Alongside these iterations, I tried out different value combinations for the speedometer, seeing how the digital representations of the needle and lines would create patterns of light and dark. The digital shapes would cast off a slight glow, illuminating themselves on the dark background.

Design Sheets:



Sound Loop Assignment Ideas, Planning and Development


For this assignment, I had to pay attention to both its brief as well as the HUD Assignment brief as they work in unison. The concept of the game that runs through both assignments is that of a modern/near future London where three teams race using electric concept cars.

My idea for the tracks and levels were to have them inside a futuristic London and high above it, racing along electricity powered tracks in the sky. I aimed to create two tracks, one combining the howling of wind and the muffled buzz of electricity as one races along above London and the other is a beat that can be applied to most levels in the game, urging players along and getting them excited.

Before working on the final audio tracks, I did research into sound, the creation of sound, sound development software and sound in racing games. I did research on Project Cars, using the discoveries made there to inform the development of my audio loops.

Before beginning experimentation with the creation of the actual audio loops, I downloaded various free sound sample packs from 99sounds.org. I planned to combine and distort these sounds in order to create what I was aiming for when it came to the Electricity and Wind loop.

For the racing beat sound loop, I planned to use instruments and other samples to create a beat that put forward a fast-paced, almost sci-fi, feeling of movement inducing music that could be playing while a player navigates busy futuristic London streets while racing against the clock with several other players on their tail.

To ensure efficiency, I made use of various tutorials, guides and the built-in explanations in the Ableton software, of which I used for this assignment.


Ableton Screenshot.jpg

For the development of the audio, I first experimented with the Ableton software, learning how it works and the basics of the capabilities of the program. Some quick explanations:

-White button at the bottom of the audio track, once clicked and turned red, primes it for recording.

-Clicking the circles inside and near at the top of the tracks allows you to add sound/samples to those clip slots.

-You can change where the audio from one track is being received from or sent to via drop down menus inside the track.

-To apply effects to your audio, go to Categories -> Audio Effects and then drag the desired effect to the bottom slot on the screen.

-Dragging a sample, found on the side of the screen, into an audio/clip slot allows you to edit that sound. Clicking the play button by the audio slot allows you to play that sample and the vertical green bar at the bottom of the track lets you change the level (output of the track in decibels). This bar is called the fader, where dragging the arrow up increases the volume of all samples inside that track and dragging it down decreases the volume.

-Reverb and Delay can act as send tracks, effecting the main audio tracks. The bar at the bottom is a conditional space, it is the display of whatever you have selected in the main screen. Changing the A or B dials on the audio tracks affects how much A Reverb or B Delay is influencing that track.

-Changing the Dry/Wet on the effect alters the percentage of the sound that is the actual effect and what is the original sound. In regards to reverb, if you set the Dry/Wet to 100%, you will then be hearing 100% of what the reverb of that track sounds like, and not the original audio. To disable an effect, click on the orange and grey circle next to the effect title inside the Audio Effect tab, displayed at the bottom of the screen.

-On an audio track, the Sends function/knob allows for audio to be forwarded to the sends track independently of the original audio track, this allows you to have 100% reverb coupled with 100% of the original audio track. The Sends tracks you edit inside the audio track effects the Sends track (eg. A Reverb and B Delay), and their effects on the audio track.


-Track Pan pans the track left or right, it is the knob next to the fader.

-Double click on a clip slot to see the waveform of that audio. The sample box lets you edit the actual audio and Transpose edits how high or low the sound is. Seg. BPM changes the Beats Per Minutes (speed), with the Beats drop down allowing you to change how the track is affected, such as the Complex Pro option changing your audio to have a higher pitch while maintaining the same speed/BPM. The white vertical line with a triangle is the gain slider, this changes the clips sample playback in dB (decibels).


-Numbers at the top of the waveform are the beats, the triangle sliders at the top dictate the start and end of the track/audio and the triangle above that dictates the start/end of the loop.

-The Hertz is the frequency, the lower the frequency the more bass and the higher the frequency the more treble there is. An EQ (Equiliser) allows you to raise and lower the volume of different frequencies. To apply an EQ to an audio track, select the track and then drag the EQ into the Effects slot at the bottom of the screen. The Audio Effects are found on the left hand side of the screen, I used EQ Eight, dragging the entire folder into the bottom slot.

This slideshow requires JavaScript.

-The Q dial effects how smoothly the EQ raises or lowers the frequency. The EQ graph shows the frequency and decibels of various parts of the current audio, allowing you to manipulate the prevalence of various frequencies. This lets you distort the audio and tailor it to your needs.

I used the EQ, as well as Reverb, to create my Wind and Electricity loops. I first created them separately, experimenting with various different sample found on the site 99sounds.org. Once I found the ones I liked, I manipulated them until they sounded how I wanted them to. In the waveform editor, I ensured I had the right parts of the audio looped using the start/end loop handles to ensure a good loop. Once I had the two separate audio tracks completed, I exported one and then brought it into the other Live Set (files/working documents in Ableton). I then made the two separate audio tracks/clips record into the Master track. I then played that, extended the run time and exported it as a .wav. I then uploaded that to my blog, embedding it using Soundcloud.

The track itself includes the muffled sounds of rushing wind and the hum of electricity akin to that of a nearby power plant/generator, almost similar as well to a Tesla coil. The electrical sounds are meant to represent exposed electric currents forking between raised bars alongside the edge of a flying track high above London. These bars, with their electrical fencing, are alternate versions of the protective barriers that are used on roads alongside the edge of mountains.

Electricity and Wind Loop:

Some experimentation using samples:

Wind Loop Process:

This slideshow requires JavaScript.

Wind Loop:

Electricity Loop Process:

This slideshow requires JavaScript.

Electricity Loop:

Racing Beat Loop Process:

For the Racing Beat I used several instruments. Clicking on the audio clip of the instrument I am able to use it to create notes. I changed the tempo to 140, the tempo being how many BPM there is. The marker snap at the bottom right divides up the space and edits the beat sections. I regularly changed this to create different length beats and spaces in between those beats. The MIDI editor preview is above the keys when editing and using an instrument, this allows you to hear the notes when you play them in the editor. Double clicking  in the instrument track allows you to edit it. After much experimentation with different instruments and the creation of notes within a few beats I selected the notes up to a certain beat. I then used Ctrl+D to duplicate and paste them, ensuring a long enough cycle to ensure a smooth loop that still maintains interest and variety.

With multiple notes spread across several beats, I experimented with changing the marker snap to split notes and create divides between some. Some notes were split up into small divided ones, some were medium length ones directly beside each other and some were long, lengthy notes to create smooth areas of rest.

Once happy with the overall beat, I began to edit and add effects as well as add some more instruments and variation later on.

I used the Compressor Audio Effect to push certain frequencies down. The side chain compressor made so that when the kick (bass drum) comes in, the bass lowers in volume. To do so, I added the Compressor to the bottom Audio Effects slot, clicked on the arrow next to the title, clicked side chain and then chose one my audio tracks to edit. I set the Ratio Knob to 100%, meaning that fore every decibel above the threshold, it lowers the volume of the chained track by the set ratio. Editing the Attack affects how quickly the volume is pulled down, in this case I set it to 0%. Release changes how quickly the volume gets let back up, here I set it to about 50%-60%. I put the threshold to about -20 decibels. Once the volume passes this threshold, the compression and all the effects within that compression, will start to take effect. I set the Out to 2.97 dB, this pushes the whole track volume up.

I then added an instrument with a higher, sharper pitch/frequency. I copy pasted the notes I previously had (by Ctrl dragging the bass clip from the Bass Azimuth Track to my new instrument track, holding shift and using the arrow keys to move the notes up (transposing them) to an even higher pitch. I then used the marker snap again to vary the sizes of the notes, affecting their length and spacing. I made some notes longer and some into multiple shorter ones. I dragged collections of shorter ones to half their length by selecting groups of them and dragging them together, shortening them to allow time between their notes. Once those notes were in place, I added a Ping Pong Delay to B Delay, maxed out the Dry/Wet and increased the B Send on my recently added instrument track. This causes the notes created by this instrument to output 100% of the Ping Pong Effect created using those sounds, as well as 100% of the original sound.

To add some more auditory interest, I used the notes from the Kit-Core track that created distorted radio chatter at certain parts of the loop to emulate race track announcements or perhaps advertisements in the city. This alludes to the outside world without distracting from the overall beat and loop.

This slideshow requires JavaScript.

Racing Beat Loop:

Diary of work:

29th November:
Researched how audio is recorded for racing sims, the software used, terminology and other information.
6 December:
-More research in regards to audio and sound, more about psychology this time. Listed questions and talking points to use for research mini-essay.
2 January:
-Watched videos showing the sound of various cars in the game Project Cars and worked on the research
10 January:
-Researched how to create sound loops and ambient sound loops
21 January:
-Learning music software and experimenting with the creation of sounds and loops
23 January – 5 February:
-Organising assignment
-Learning and experimenting with software
-Development of sound loops
-Creation of final sound loops
Research, explanations, evaluations, development work and notes were created and completed during the entire process of the assignment.

Digital Development and Poster Evaluation

I decided to go for a more graphic approach for my poster designs, making use of silhouettes of iconic London architecture and strong value relationships. The introduction of colour later on using various colour schemes and harmonies adds an extra layer of depth and intrigue to the images.

After multiple development and ideation sketches in my sketchbook I moved into the digital medium to start creating the silhouettes for my posters. I gathered reference images that were front on for the most part to make the silhouette creation process easier.

I initially tried to create the silhouettes with a combination of basic shapes such as squares, triangles and rectangles but that proved to be difficult to manage in regards to layers and overlapping. I then tried to use the pen tool aided by rulers to trace the outlines of the buildings. Once the major silhouette had been created, I then worked on the inner complexity of some of the buildings. I manipulated various basic shapes to create the inner details and used circles to cut into the silhouettes themselves. The way I achieved this was via a technique we were taught earlier in the year where a shape on a layer above another shape is grouped with the lower one. You then navigate to the pathfinder tool and choose the Minus-Front option to cut into the lower shape on the layer stack.

This preparation allowed me to quickly ideate, thumbnail and create layouts and designs quickly and efficiently through the use of modular elements. My direction being graphic and bold for these poster designs, I decided to juxtapose the strong verticals and horizontals of the buildings with circular elements to create higher contrast, not only in value and colour but in shape as well.

Some of the silhouettes were scrapped early for being confusing or not working with my desired composition, two of these were the London Bridge and Cathedral/Abbey silhouettes.

Using the layer stack and overlapping, I situated the main circle behind the front silhouettes of the buildings to create depth and take advantage of relative colour, value and contrast. Having the front silhouette dark, the circle bright and the background a mid tone forces the viewer to look at the area where the silhouette and circle overlap, captivating the viewer. Once their attention has been held, they are free to look around the rest of the poster and are guided by the verticals and diagonals towards the heading ‘London Festival of Architecture’ and logo.

The logo itself is quite bright and saturated, this means that it easily distracts from the rest of the poster if proper value and colour harmony, as well as compositional layout, is not achieved. To help combat the effect this logo has, I used value, colour and composition to help minimise its distracting qualities. For the silhouette based graphical designs I experimented with placement and size, eventually settling on a small logo in one of the far corners and payed close attention to visual balance and weight so as not to tip the image to favour one side.

To help move the eyes of the viewer around and show them what I intend to show, I made use of various compositional rules such as the rule of thirds, leading/directional lines, implied lines, the golden spiral, and value, colour and shape contrast.

As I progressed, I tried out different combinations of silhouettes and shapes to see if multiple silhouettes could work in the same composition together. Ultimately it proved to be confusing, too busy and would require a large amount of value separation to bring clarity to the image. I also experimented with the placement of the logo, attempting to place it into the negative space of the silhouettes and onto the silhouettes themselves. This proved to be visually uncomfortable and moved quickly away from this approach.

I used several architectural landmarks from London to form the basis of my designs and used abstracted silhouettes to communicate my message. The triangle, being the most abstract and least direct, represents the Shard while the others are more obvious in regards to their intended real life counterparts. For the Shard posters I directed the viewer’s gaze throughout the poster with the use of directional lines and pointing in regards to the way the triangles aim and guide the eye towards the intended focal point.

I experimented with the placement and value of the text quite a bit, trying to find a good hierarchy and balance without making the text disappear or overpower the image. For the most part the visual hierarchy was established through value and composition, as well as sizing and proportion. The silhouettes were used to capture the viewer’s attention with their high contrast and juxtaposition and they are then directed towards the text that makes use of bright white and dark black to show what is important and what is not immediately of importance to view. This is supplemented by the text size, with the large white text of ‘London Festival of Architecture’ overpowering the small ‘1st – 30th June 2017’ text below it. The viewer will also note the smaller logo in the corner but not linger long on it, it being away from the rest of the more interesting visual stimuli and being harsh on the eyes with its bright saturated colours. A way that I minimised the intensity of the logo was by making the background around it both light and similar in colour, as to distract from it by lowering the contrast.

Keeping the main visual elements and the value transitions on the rule of thirds help push forward the focal point and detract from the less important logo that lies in the corner of the image.

After I had developed the first two posters, the graphical ones, I moved on the digital development of the perspective poster.

Information regarding the specific development of that layout can be found here: https://kcimgdryannothard.wordpress.com/2017/01/08/digital-development-of-architecture-poster-design-perspective/

This one proved to be more challenging and time consuming, required the meticulous manipulation of angle, grids and line weight to ensure a pleasing and balanced composition using black, white and pink as the only colour information. The process was sped up however once I had discovered the Perspective Tool in Illustrator, only after I had manually set up the grids for the tower. However, I still kept some of these initial grids and perspective lines in, editing them throughout to help aid the layout. Once I had everything blocked in, it was only a matter of refinement and polish before the poster was ready to be printed along with the other two.

While the first two graphical posters aimed for a more stylised, graphical and atmospheric approach to help evoke a mood and sense of time, the perspective layout was more of a nod to architects with the exposed perspective grid lines and technical line work, supplemented by the bold line weight to help push that depth created by the perspective. All three posters are designed to communicate the ‘London Festival of Architecture’, but each one adds a bit more nuance in their own unique ways. The Shard inspired one evokes a sense of time and nostalgia with its cool background and retro burning sun, aided by the graphic triangles the viewer is guided throughout the layout as if on a journey towards the main text; London Festival of Architecture.

For the Strata (The Razor) Tower poster I was more concerned with creating the feeling of power and solidity that is oh-so-important in architectural design. The strong verticals anchor the design in place, with the spreading diagonals sending the eyes towards the high contrast circle behind the main silhouette. The arc and sharp points at the top of the silhouette send the eyes up and into the text above, once read the viewer most likely returns to the high contrast silhouette, or perhaps is sent down towards the logo and date in the bottom left and right corners. The gradient from dark to light, as well as bluish-purple to warmer and softer pinks and yellows gives a sense of mood, the curvature of the earth and the feeling of a cool misty morning warmed by the suns first rays of light before the rest of the day begins.

As mentioned earlier, the more perspective heavy poster was in the direction of creating a dynamic feeling of structure and purpose, aiming to communicate the regal nature, solidity and power of the Elizabeth Tower through the use of line and perspective. It stretches and towers above and past the viewer, appearing to go on further, if not forever. The only colour in the image is from the logo, which has been repeated in two ways; the repetition of the logo itself and the main colour of the logo being used in the title, ‘London Festival of Architecture’. This creates powerful focal points, with the only areas of colour being bold, saturated and mainly on the middle and right of the page, it balances out the visual weight of the tower on the left hand side of the layout.

In comparison to the researched poster designs I analysed earlier in this assignment, I believe that I achieved good quality work. I was definitely inspired by both the contemporary and modernist way of creating bold a graphical designs using a few colours and values, aided by the placement of text and the use of font. The modernist poster I analysed helped to inspire the perspective orientated layout I did, using the grid lines in a similar way to help direct the viewer towards the focal point. That same poster also served to help with the creation of the more graphical posters, especially because of the simple to complex nature in regards to the construction of the shapes used in the head of the main subject matter. I found the interplay between dark and light text and background quite interesting in both the modernist and contemporary posters, with the inspiration of the graphical shapes stemming from the contemporary posters I researched as well.

I found that while the modernist layouts aimed for a more graphical approach to communicate the message in the least complicated yet most elegant way, the contemporary ones attempted to emulate this while adding a busier, abstract and more visually complex series of design choices. The modernist’s seemed to value graphical simplicity and clear messages above the wow factor of complexity that the contemporary’s displayed.

My work, especially the graphical designs of The Shard and The Strata (The Razor) Tower posters, aimed to create a sense of simplified elegance similar to that of the bold, silhouetted designs that the modernist posters communicated.


Digital Development of Architecture Poster Design (Perspective)

For this poster I decided to go with a two point perspective grid that was influenced by the rule of thirds. The main subject matter for this is going to be the Elizabeth Tower (Big Ben) and the London Festival of Architecture Logo being projected from it. I began with a rule of thirds grid I found online, established the two vanishing points and began constructing a cube. Once I was happy with the placement of this cube I began to experiment with the particular placement of the vanishing points and the angles of said cube:


Further vanishing point experimentation, trying out different placement:


Here I used rulers and guides to math the placement of the vertices of the cube. I made use of triangles to math the angles of the cube to help mirror it so as to lessen the distorting effects of the perspective. I also tried out a different placement of the vanishing points:


More experimentation with the placement of the vanishing points as well as exploring the rest of the tower and how the angles and placement of the details later on will work:


Further exploration, trying to find the most visually pleasing placement of the vanishing points and angles with the aid of guides/rulers:



I settled on the green version of the vanishing points and began to construct the rest of the tower. I used an X on the two faces of the cube that we can see to find the centre points, this will help with the placement of the ellipses/circles later on:



Placing the circles/ellipses in perspective proved to  be difficult. I experimented with various tools, such as the shear tool, distort tool and free transform etc. I did some searching through the tools and options in illustrator and found the perspective tool. After some research I began to set it up and put the ellipses/circles in perspective onto the cube (Explanation of this process and the tool further along).:


After I set up the ellipses I moved onto the logo projection and the mapping of the details for the rest of the tower. For the logo I created lines emanating from the centre of one of the ellipses and cube faces. I then put the logo into perspective using the perspective tool, of which is rather tricky to use and manipulate shapes with. I had to convert the logo (which was an image) to a vector using Control Panel -> Image Trace -> High Fidelity Photo, this allowed me to manipulate the logo as if it were a complicated vector shape:


Here I removed/hid a lot of the clutter and began to create the clean lines for the tower, paying attention to line weight to help create more depth. I made the lines closer to the viewer thicker, as well as important borders. I made the lines further away, as well as the finer details, smaller to push them further back into space:


Here is where I began to organise where the details will go on the rest of the tower with the help of the perspective grid:


Fitting the text onto the tower was quite difficult to do when it was in a text format, even if I typed the text onto the line itself. Doing it that way did not help fit it into the same perspective as the rest of the image. I instead had to use Type -> Create Outlines to convert the text into vector shapes. This allowed me to use the perspective tool to conform it into the right perspective. This required a large amount of re-corrections and accuracy and was quite time consuming. I also typed London Festival of Architecture onto the projection lines for the logo, however this seemed quite unprofessional and lacklustre so I later on I decided to go with the text on the top right with the smaller logo on the bottom right to help balance out the left hand side heavy composition. I have also increased the line weight of the ellipses, giving them more visual weight and importance:




Here I cleaned up the lines a bit more and added detail to the tower with the help of rulers/guides:


The placement of the text on the top right and smaller logo on the bottom as I mentioned earlier is shown here, as well as experimentation with the font. I also added more detail to the tower, which I may or may not keep as it creates an area of concentrated detail, detracting from the rest of the image:



Here I edited the text using Window -> Type -> Character. I also changed the colour to match the logo. I decided to make the text stand out more using, as I mentioned, the colour of the logo as well as making parts of the text bold. I also increased the size of the text and faded out the projection lines, allowing it to stand out more:



Perspective Grid Tool:

Shift + P brings up the perspective grid tool, this allows you to conform vectors into perspective. There are multiple handles on the grid that you can use to manipulate and move the grid itself with. In the menus there are options for 1, 2 and 3 point perspective, allowing a wide range of complicated scenes to be created:


To be able to put the vector in perspective, we need to attach it to the active plane. The active plane is indicated by the highlighted face on the cube at the top left of the document:


Once attached to the active plane you can then use the Perspective Selection Tool (Shift + V) to put the vector into perspective, manipulating it using the handles on the bounding box:












Digital Development of Poster Designs and Layouts (Graphical)

Here are some images of the development and thumbnails for my graphical poster designs and layouts. More information about the process of creating these posters can be found in my evaluations.

Here I created modular silhouettes and shapes to help the experimentation and development process.

(reference images found online)


I began creating various layouts using the shapes created previously, experimenting with the placement of the text and logo.

Graphical Layouts 1 image.jpg

Further experimentation.


I decided to use the juxtaposition of circle and triangle to help create interesting and dynamic compositions. The triangle represents the Shard, while the circle represents either the sun or moon. I used the golden spiral to help establish a composition that worked, flowing from the bottom of the image, through or around the triangle and then landing on either the text or circle of which creates a focal point. This was further aided by the use of the rule of thirds, where I attempted to position the top of the triangle and/or the circle itself onto one of the main rule of thirds intersections.


Here I experimented with a different building. I made use of the circles I cut into the silhouette to show the larger circle behind. The interplay of overlapping shapes allowed me to experiment with a more complicated value hierarchy than what I was working with previously. I attempted to establish visual weight using value, trying to find the hierarchy between the silhouette, text, logo and circle.

With the circle being surrounded by different values and areas at different points in the image, it allowed for an interesting effect with the use of relative values, something that we have been learning about in our Visual Studies class recently. Having a light value surrounded by a dark value causes it to appear lighter. Having the same value surrounded by a slightly less dark value causes the effect to be lessened, although it does still remain to a certain degree. The manipulation of this effect, which works either way with dark and light, allowed me to experiment with the value hierarchy in the image.

A major challenge was the logo, as well as the text, and their place within the image and layout. The logo itself is quite bright and saturated, this draws the viewer’s attention away from the main subject matter and to the corner of the page. This is not desirable in regards to composition so I took several steps to lessen the negative affect it had on the image. I scaled down the logo and moved it to a corner further away from the main body of text. The logo with its bright saturated colour has a large amount of visual weight, to counterbalance this I placed the date on the bottom right.

With the logo being bright and surrounded by a light value, this downplayed the contrast causing it to be less of a focal point. I made the text on the bottom right dark, in combination with the light background this caused the contrast in this area to rise sharply, proving more visual weight on the right side of the image helping visual balance to be achieved.


Here I moved onto colour comps, where I take some of the layouts and designs I am happy with and begin experimenting with colour schemes.


More colour comps, this time with the Shard graphical designs and layouts.

I experimented with various colour schemes; complimentary and analogous etc. I attempted to downplay the logo by making the colour of the background near it the same colour, therefore turning into essentially just white text.

Further along during these colour development thumbnails I tried to push more of a mood with the colours of the background and sun/moon. The gradients in the sun pushed forward a setting sun/evening mood and atmosphere that is quite eye catching yet gentle on the eyes with the way its gradient fades into the background.

Green, being the complimentary colour to pink, allowed me to create an interesting interplay between the logo and the background.


Screenshots of development:

The use of rulers and layers allowed me to create accurate silhouettes that could be used in a modular way to efficiently create multiple thumbnails.