Infographics Inspiration

Infographics Research

For inspiration, I have been looking at websites designed in a particular fashion - this being as an infographic. More specifically, ones of which utilise scrolling to power animations.
As these are designed by numerous different people, I have been unable to pin down a, or a group of, particular artist(s) of which do their work in this style. As a result of this, I have had to focus my research towards case studies as opposed to individual artists.

Case Study 1

Every Last Drop
Every Last Drop is a website designed as an infographic to portray the usage of water in everyday life. Not only has the website been designed in this way, but it uses flat-design graphic and basic animation to help deliver this subject to the viewer. The animation is triggered by the user's scrolling; however, the animation takes place in a downward-progressional fashion, meaning that it works with the scrolling direction of the user - something of which is not present in all of the case studies. The design of the assets used within this page are all consistent in their, as previously mentioned, flat-styled design. This consistency is also present within the colours used and hence it looks as though

Every Last Drop

Case Study 2

Atlantis World's Fair
Atlantis World's Fair's website is yet another of which uses web-based animated infographics for their website. This, however, is done in a much simpler fashion to Case Study 1 as it consists of a single static image (the elevator) which is then layered behind a long image which takes up the rest of the web page. When scrolling, it gives the effect that the elevator is going down through the shaft towards the bottom of the page. This is combined with strategically placed information about Atlantis in order to retain the viewer's attention whilst simultaneously informing them about Atlantis. Similarly to Every Last Drop, they have used flat design for the design of the assets used. They have also used a similar colour scheme mainly consisting of shades of blue to compliment the theme of water surrounding Atlantis. The shades have been used well to achieve an aesthetic of which appears to belong as opposed to seeming out of place.

Atlantis World's Fair

Infographics Production

Mark Scheme

As the AS Marking Scheme for Graphical Communication is dull, boring and hard to retain one's focus - I created a more interactive and interesting version as a website. Although I was aiming for it to be less boring than the original, I decided to retain the amount of information from within the mark scheme itself but present it in a more interesting fashion, hence the mark scheme website was produced.

Mark Scheme

Preview

GTX 10-Series Cards

As NVidia recently presented their 10-series graphics cards - these being the GTX 1060, 1070 and 1080 - I was struggling on choosing one of them to upgrade my computer. When researching their performance, I was looking at the FPS benchmarks on the latest games, comparing the results against the other cards. Whilst looking at the raw data, value for performance was hard to decipher; however, representing this information as an infographic allowed me to visualise the difference between the performance of the cards and hence choose appropriately. Using this infographic, I was able to see that the GTX 1070 card, the supposed middle ground, had a closer performance to the higher card and hence my choice was made.

Sky High Mind Map

Going along the theme of Sky High, I decided to create a mind map regarding my initial ideas for the theme. This helped me to decide on which subtheme to focus my work on, as well as allowing for starting points for experimental work.

Sky High Visual Inspiration

Progressing on from the mind map I created, I gathered inspiration regarding the specified topics.

Sky High Case Studies

Waaark

The first of my case studies for this theme focused on the flat-design side of web-design. Waaark's website is a webpage regarding the company's webdesign services, therefore I used it to forcus on their design. I discovered this website after searching Awwwards for sites tagged with 'flat' and 'design'. What I found interesting was their take on the flat design graphics used. The graphics have been created in a flat style; however, they differ from the norm of this style in the sense that they have included a form of perception. They have kept within the boundaries of flat design by excluding definitive depth. Instead, they have opted for an isometric perspective, which can be used in conjunction with the flat design of the rest of the webpage.
Along with the styling of their page, they have also heavily built upon the site's fluidity via animation, which also incorporates a flat design. These animations have been strategically used to show transitions between major pages. During these animations, the designers have used flat-styled graphics to show the motion, covering up the page as it changes, then revealing the contents towards the end of the animation.

Waaark's Website

Carl Burton

Although Burton's work is not related to the web-related infographics I have been exploring prior to this, his work caught my eye and hence I decided to include him within my research as his work looks like something I'd like to experiment along the lines of. Throughout all of his GIFs, Burton has set a specific colour to use throughout. Throughout his work Burton uses a range of set colours and tends to use oranges, reds, greens, blues and purples, and shades of white. The GIFs and illustrations he produces are part of the following projects: Serial - Season Two, Medium - Margaret Atwood, SSENSE - Digital Detox, NYTimes - In Flight and NYTimes - Data Safety. On top of this, he then proceeded to develop a game (Islands) in the Unity Game Engine in a similar style to that of his illustrations and GIFs. My admiration for Burton comes from his ability to instinctively choose the colours for his animations. Throughout the entirety of his work, the colours he uses match the scene and the overall mood of the work. The use of mist throughout his animations also helps to contribute towards the overall mysterious nature of his work, leaving the viewer wondering what would happen next. He also never shows signs of life in his work, adding a hint of loneliness into the overall impact of his work on the viewer. Another one of Burton's abilities that I admire is his ability to abstract only the relevant detail into his work. For example, in the second to last example of his work that I included, the majority of the scene is built up of fairly simplistic shapes; however, he has still captured the detail such as the wired mesh on the lanterns, the subtle movement of the leaves on the trees outside, as well as the curved nature of the seats around the tables. Instead of focusing on and exmphasising the colour of the items in this scene, he has basically blocked out all of the colours that the objects would be, and instead had their shade of the set colour in this piece contrast against the background and surrounding objects so that they can still be differentiated. All of his work gives the impression that it was thoroughly planned down to the small details, composition and colour choice, which is why I admire his work.

Giphy Page Website Islands Game

Statement of Intent

The theme of which I intend to pursue is that of 'Sky High', complementing this theme by revolving my ideas around space. To me the term 'Sky High' infers ascending height, which, when it surpasses the sky, would lead to the involvement of space, hence the direction I will take. Alongside the idea of space, I would like to include the experimental style of interactive web-based infographics. This will allow for my work to be interactive with a user, whilst still delivering them information of which they would from a standard infographic. The overall design style that I will be using will be one of material/flat design. The simplicity of this style appeals to me as it is difficult to achieve an effective aesthetic; however, once prevailed it clearly shows.
Creating the interactive websites will require for graphical assets to be created, therefore I may branch out experimentation to other styles of design, making use of the pre-existing assets of which I will have made for the websites, including material-design stills, GIFs, posters etc. Doing this will grant the ability for both experimentation and confirmation as to the direction of which I wish to proceed with, as I may find one of the experimental design styles to be more suited to myself and hence alter my direction with the theme.
Whilst developing the digital pieces, some more traditional methods may be used to plan the ideas, such as sketches. If I were to use sketches, they would solely be for development purposes, as I have developed my appeal for digital design from the previous graphical design projects. The experience with said projects has proven to myself that I am more suited to digital design, making use of graphics tablets in place of sketches when used for non-development purposes.
The material used to inspire this project will be gathered from a range of sources, mainly because of the merging of two separate styles of designs – material and websites. Due to this, there will possibly be four main sources of design inspiration, this being the subsequent: previously designed pieces related to space done in a material/flat design; interactive websites for structural and functional reference; flat designed infographics regarding any topic; and websites designed in a material/flat fashion. Using this range of sources, I should be able to gather the inspiration and understanding that's required to produce my intended work.
From experience and knowledge from other subjects, I will be using a text-editing program such as Sublime Text to create the HTML required for the website in conjunction with Adobe Illustrator to create the graphical assets. When creating the assets, I will be saving them in SVG (scalable vector graphic) format. This will be because of their lower file size in comparison to PNGs when compared against their scalable ability. This will allow for me to have the web page be scalable on different resolutions with no reduction in quality. Lower file size will also allow for quicker loading times due to the lower use of bandwidth; however, this will make it more difficult for me to implement as it must be done via CSS as opposed to the standard inclusion of images.
By creating this work, I aim for it to effectively convey its intended information to the viewer, allowing for them to learn something new about the topic. This should be met through the use of minimalism, as absorbing smaller amounts of information would be easier than alternative text-heavy representations.

Initial Ideas

The first of my ideas towards this project was that of an interactive website. Although it had no specific direction, I decided to create a functional demonstration of a website where the user could control a rocket upwards and downward via scrolling. All graphics used within this piece were made as vectors, therefore they could be scaled on higher resolution displays without loss of quality. Creating this allowed for me to test areas of which I haven't really focused upon before, such as heavy dependence on CSS3 animation; triggering animations at specific points; and randomly generated elements on-screen.

Development Process

To develop this idea, I had to decompose the project into two sections, the design and the web-implementation.

Focusing on the design section of the idea, I first started out with designing a rocket. Taking inspiration from previous sources, I planned out the shape of the rocket first to be a simplistic curved shape. From then I decided to add in additional details such as the coloured tip of the rocket, as well as the stands around the sides and fronts. I kept these the same colour to complement the intended flat/material design. Afterwards, smaller details were added such as the golden stripes on the bottom of the rocket body, as well as the inclusion of a window. To complete this, it was then copied, mirrored and joined to make it perfectly symmetrical.

Another aspect of the design that I had to plan was the layout and functionality of the page. I created a basic layout that I wanted to replicate in the webpage by using illustrator. I abstracted the design to create a simplified version of it:

This gave me a structure to aim towards, as well as a brief overview as to how I wanted the user to be able to interact with the page. The labelled section of the plan, "View Window", indicates the user's screen in relation to the page, showing what they would initially be able to see on the page. Scrolling would be the driving force of the animations within the page; however webpages usually start from the top and scroll downwards which would have been impractical for what I intended to do. To counter this, I had to have the page start from the bottom, which proved to be more of a challenge than I thought. I implemented a workaround for this using jQuery; however it didn't work all of the time and hence I added a second repeated line which seemed to guarantee the functionality:

$('html, body').animate({scrollTop: $(document).height()-$(window).height()}, 2);
$('html, body').animate({scrollTop: $(document).height()-$(window).height()}, 1);

I then decided to use Skrollr to be able to set and animate the CSS properties of the HTML elements at certain positions within the document. This allowed me to implement the parallax scrolling by altering the values for the elements' positions at different stages of the page. The Skrollr library uses the transitional animations introduced in CSS3 to tween styling properties.

In order to get a usable workspace set up, I decided to divide the webpage into segments, each being "150vh" in height (1.5x the height of the screen). This allowed me to work and colour the different sections of the sky easily, keeping consistency in sizing throughout.

Initial Idea

Preview

Solar System

The idea behind this piece of work is to create an interactive material-design infographic-related website in which the user can scroll to control a rocket as it flies through the solar system. At each planet, there will be various information regarding the planet, such as its name, force of gravity, diameter, etc.

Development

The first element of the infographic of which I decided to design was the planets themselves. This was done as it would be a major component of the core of the infographic - the solar system. These were done in the material-design style, as desired, being (from left to right, left to right etc) Mercury, Venus, Earth, Mars, Jupiter, Uranus, Saturn, Neptune and Pluto.

To develop these planets, I tackled them in three stages, these being the outline, detail and shading of each of the planets in a parallel fashion. I decided to document this development as a GIF:

Another key factor would be the sun, moon and stars, which were designed seperately. As these are not classified as planets, they would be used for decoration, hence why they were designed seperately. Two types of stars have been created, one as a minimal shooting star and the other to twinkle in the background.

After designing the key elements that would form together to make the space environment, another prospect of the infographic would be the control. As mentioned previously, the user would be controlling a rocket that flies through the solar system, meaning that the next design would be of said rocket. Once the initial design of the rocket was complete, I decided to experiment with some colours in order to find the one that would be the most suited for the design of the infographic. After experimenting with the colour, I decided on the original red, as it seemed the most suited to the intended material-design.

Another factor I could include in the infographic would be the involvement of an astronaut. This could, for example, be revealed to the viewer once the rocket gets into space. I started with the design of the basic design of the astronaut including the positioning of their arms and legs, as well as the details of the helmet, light reflections and shadows. After completing this, I was then able to experiment with different colouring of the trims of the suit, these being blue, red and grey.

Finally, in my initial idea, I included a flat design banner at the top of the page and used the first design that came to mind; however, I decided that I could experiment with the different styles of the banner, adjusting the styling of the ribbon, as well as its general structure. Although I still stuck with the original design, experimenting with these allowed for me to explore different possibilities in case one appeared more suited to the style than the originally planned one.

Further Development

Taking the elements of which I had created for the development phase, I created further experimental pieces by developing upon these as entire pieces.

Material application
One of the developments I made was to apply a texture to the flat designed elements, giving them more to look at than just their flat, solid blocks of colour.

In the above example, I have applied a fabric-style texture to the array of planets. Although being subtle, I believe that this appears effective. As I applied it using a linear burn blending mode, this takes the layer and darkens the layer(s) below it where there are darker areas on the target layer, resulting in a darker image overall. This made it ideal for use with the patterns that I was using, as they were white in the lightest areas, making the shaded parts darker, resulting in a replication of the shaping of the material.

In a similar fashion to the previous development, I used a waved pattern on the subsequent instance of the planets. I chose this pattern as I thought it would appeal to the nature of earth's water. This worked for earth due to its positioning on the document relative to the positioning of the waved pattern; however, for the other planets, the waved pattern contrasted one of two factors: the shading done on them, or their curvature.

Final Production

The final production of the solar system infographic matched what I intended to do with it at the start, which can be seen via the subsequent button.

Solar System

Preview

Solar System GIFs

Making use of the planets I created for the infographic, I decided to make a GIF replicating the solar system. Calculating the mathematics behind this to create an accurate representation of the rotation of the planets around the sun would've caused the GIF to be excessively long or incoherently fast. Due to this, I decided to replicate the motion of the planets by having a hierachy of layers, each child would rotate once within their parent with the uppermost layer only rotating once. Because of the pattern of rotation, some interesting movements became apparent, including the periodical alignment of the planets.

With this GIF, I decided to make use of the rockets and one of the stars of which I had designed for the main infographic. I used them different colour variations to portray the rockets flying by, showing the array of colours used in an ordered fashion to blend the colours together. To give the effect of movement and speed, I decided to add a motion blur effect to the star field in the background, making them move at a slower speed to the rockets to achieve the impression of depth. In order to make the animation seemless, I had to design the starfield in three portsions, the first and last being the same so that they could be at the start and end of the animation. The rockets were done in a similar fashion, having the original red rocket at the start and end of the trail of them so that when the animation reached the end, it was in a visually identical state so that the end could not be differentiated from the start. This allowed for the end to seem like the start, hence giving a successive loop.

I created the animations themselves in Adobe After Effects. This allowed me to get accurate values for the rotations in conjunction with a much more organised and usable workspace for the tweening of elements.

These were the most complex of the GIFs to create, which involved 4 pieces of software to create the final products. The first of which being Unity. I used the Unity engine to create a 3D scene consisting of cuboids to resemble a room with somewhat randomly sized and positioned cuboids inside that would cast and receive shadows well. I then imported the graphic of the sun that I produced previously and included it as a sprite. I created a game object from this, applying an animation to it, including its rotation and position properties to create the pulsing and continuous rotation that can be seen. From there, I applied a light to the sun and played with the materials used on the cubes to make the light appear as if it were beign bounced off of it. After compiling this as a program, I then used Windows 10's built in Game DVR to record the clips of the "game" running. I then passed the videos produced into After Effects, finding the frames at which the loops finished, allowing me to trim the video so that it would continuously loop seemlessly. I then exported these projects using the Adobe Media Encoder as GIFs; however, the resultant files of these were around and over 50MB - unsuitable for web integration. I then furtherly compressed these GIFs in Photoshop by reducing the resolution to 1000x563, then setting the lossy compression to 25%. Exporting this then resulted in GIFs of around 3.41MB, which is much more suited to web-integration.

Revised Statement of Intent

After experimenting with the animation work, I decided that I wanted to pursue this medium for my final piece. This decision was come about via the influence of numerous factors, the first of which being my graphical skillset. Prior to taking the graphics course, I had already experimented with web-design, having done work in professional environments; however, creating and working with animations was a recently developed skill and hence it was something of which I could develop further and at a faster rate than that of web-related projects. Another factor that majorly influenced my decision was the fact that a lot of the time spent on web-related projects, such as my initial idea and the Sky High infographic, is implementing and maintaining the functionality of the website. Because of this, it strays further away from the cores of graphics design; however, the animation work drastically reduced the amount of experimentation and corrective maintenance in terms of functionality, meaning that I was able to focus more on the aspect of graphical design as opposed to the programming background required for the websites. Finally, pursuing the creation of animations allows for me to escape the technological and performance boundaries of web-related technology. Since the animations are pre-rendered, I can experiment with 3D scenery without being overly concerned about the performance of the client's browser so long as it can watch the animations. This will allow me for example to include post-processing techniques such as SSAO making the animations more visually pleasing. This will be dependent upon the processing power of my computer and what it can render in real-time; however, this would be above the norm of standard computers, allowing for said effects to be implemented.
Through the creation of this work, I am hoping to deliver a message to the viewer, done so in a graphically engaging and intriguing manner. To help to achieve this, I will have the animations loop successively without jumps. This is because of the continuous repetition of the animations, ultimately resulting in them being more memorable.

Final Piece(s)

From the experimentation with the 3D-based GIFs above, I decided to pursue this, combining flat-design 2D sprites with 3D environments; however, in order to retain quality, I decided to keep the final result of the animations in video format, thus avoiding the compression faced when creating GIFs at a reasonable file size.

Grid

One of the forms of presentation of which I decided to produce this final piece in was a grid. This was due to the fact that all of the animations would be viewable at the same time, allowing for the periodical synchronisation of the time frames to be visible.

Sequential

Another form of presentation for these animations was a basic sequence of numerous iterations of the animations. This differed from the grid approach as only one animation would be visible at a time, allowing for further detail to be viewed in each of the scenes.

Meanings

I created the animations with subtle meanings behind them, some being more serious than others.

Bare Energy (Sun)
The animation of the sun pulsating in a bare room was done to symbolise that the sun has the limitless potential to provide us with energy; however only a fraction of this energy is being used. I used the objects in the room to resemble the usage of the harvestable energy from the sun, showing how much more we could do to prevent damaging alternatives to providing energy.

Isolation (Pluto)
The idea behind the animation of pluto was to visualise the isolation of Pluto after being disregarded as a planet in 2006. The room it is contained within resembles an abstract prison cell - being filled with bar-like structures. There is, however, a gap in the cell 'bars' which has been purposefully done to symbolise the groups of people of whom still consider pluto to be a planet, to this date, despite the official declaration back in 2006.

The 3% (Astronaut)
I created the animation of the astronaut in space as a memorial to the 3.249097472924% of the astronauts of whom tragically lost their lives in space (18 in 554). I created it with the intent of showing the severity of space, but moreso because of the under-reported deaths of astronauts in space. Gathering the figures of space-related incidents resulting in loss(es) of life proved difficult enough, therefore I was more driven to produce this.

Looking Back (Earth)
This animation has the most meaning behind it, when compared against the other similar ones. My idea behind this was to show how we, as the human race, are gradually squeezing the earth of its resources, ultimately tiring it. Not only that, but I used the patterns on the side walls to visualise what we used to have. The inward movement of the walls is used to show the process of squeezing the earth of its resources, ultimately resulting in the hiding of the patterns of the side walls - losing what we had. Finally, I replicated a similar pattern of the side walls on the furthest back wall to show that after we have drained the earth of what it has to offer, we will have to look back for a reminder of what we used to have before our actions resulting in this.

Evaluation

New Techniques/Technologies

During this project, I have experimented more with digital content, especially with new technologies than that of previous projects. I spent a good amount of time experimenting with interactive websites, producing content of which dynamically responds to the input of the user. This was not necessarily new to me, but the scenario in which I implemented it was. My previous involvement with web-design has been for representing companies; however, creating websites based on delivering information in an engaging and highly interactive format was a new approach. On top of this, altering the natural behaviour of websites was a new experiment for me as well. By this I mean manually implementing the flow of the website, as opposed to the default start from the top and scroll down behaviour. This was visible within the my mark scheme infographic as I created a multi-directional paginated website which did not follow the usual scrolling standards but instead used the standard scrolling mechanism to control the website in another way. Steering away from web-based technologies, I have also experimented a lot with the Unity Game Engine. I have used this to produce animations both in the editor, but recording them to produce animated GIFs. Using Unity in such a way has almost been the inverse of my experience with that of websites - I have had to transition from making content of which repsonds to the user to static content of which the user watches. From my perspective, these two types of technologies are fairly complex when it comes to graphical design, hence why I am pleased that I decided to try out these new techniques.

Favourite Artist

Whilst I was still working with the idea of interactive websites for my final piece, my favourite case study in this case was the "Every Last Drop" website. This is because of the fluidity of which they achieved throughout their animations, as well as the ability for the website to be responsive to the resolution of the device, whereas I designed mine around the 1920x1080 resolution of my laptop. On top of this, the consistency of colouring and design style throughout the assets used in this is thorough, allowing for the overall scheme of the website to appear as though it belongs to a single asset. Finally, the way in which they portray the information to the viewer via animating a person's everyday routine, explaining the usage of water as it goes along. Because of this, the idea and meaning behind the website is clearly portrayed to the user in an effective manner.
With regards to the 3D animation, my favourite and most relevant artist was the only one I researched after this change in mind - Carl Burton. In addition to being the most relevant, he was also my favourite overall due to numerous factors, the first of which being consistency. Throughout all of his animations, he uses sets a specific colour and works with shades of it via the lighting of objects. In some of his pieces, he almost lulls the viewer into forgetting that they are watching an animation via the subtle movements and alterations of the objects within the scene, such as the dimming and brightening of lights. Overall, I like his style of portraying the scene he develops to the viewer, as well as the fact that he has produced these animations as an spin-off from the game he developed with the scenes - Islands - as this relates to the same method of production that I have been using to produce the animations, via the Unity Game Engine.

Skills to Develop

After my experimentation with 3D animation in Unity, I have decided that I would like to develop my "3D skills" further. By this I mean the development of 3D objects and scenes made up of more complex shapes than just the simple shapes offered by Unity. An example of this could be low poly art. I have never attempted this personally, but I admire the effect that it achieves, hence this would be a skill of which I would like to develop in future projects. A drawback with doing this would be the time invested into it - for example, developing a visually impressive low poly scene would take drastically longer than that of the development process for a flat design 2D scene. Continuing from the idea of animation, I would also like to have developed my skills further in creating animated work with a slight storyline behind it, allowing for the viewer to engage with the animation and understand what is going on. With the 3D modelling, I would also like to explore different rendering techniques instead of relying on the real-time rendering of Game Engines. This would potentially allow for me to create much more visually pleasing still images, since the amount of graphical processing taking place on the scene would not be restricted by the small timeframe required for real-time processing.

Chosen Medium

As with my other projects, I have decided to work digitally as it allows for me to change my work where and when necessary, as well as having fluid integration with numerous programs and tools. An example of this would have been the use of Illustrator to create the vector images for all the assets, then embedding these within the websites - combining multiple technologies to produce a final outcome. Since the work shared the common factor of it being digital, I was also able to implement it into the Unity Game Engine to produce the animations which could then be recorded and passed through other programs to produce the GIFs and videos. This was also beneficial for myself as it allowed for me to explore and develop areas that I hadn't previously thought were possible for a graphics course - 3D animation.

Final Piece

I have produced my final piece in the form of 4 animated scenes, loosely inspired by the general idea behind Carl Burton's work. The four animations have been produced to subtly tell four different stories. The meanings behind each of the animations has been included below their inclusion above. I aimed to deliver messages of which are often overlooked or of importance, whilst still remaining true to the theme of Sky High. For this, I decided to explore the theme of space. The first of the meanings I decided to work around was that of the wasted energy that the sun is capable of providing us with alternatives to fossil fuels, giving us access to clean, renewable sources of power. For this, I was able to use the sun that I had previously designed for my initial idea. As mentioned in its explanation, I was able to represent the idea of there being so much more room for the usage of renewable solar energy by only covering a fraction of the room in artefacts. The next animation I worked on was the one of Pluto. Since it had been stripped of its title of being a planet, I decided to look beyond this event to explore the abstracted nature of loneliness and isolation behind it. For this, I was able to use the flat design version of the planet of which I developed previously for the interactive infographic, combining it with the scene development within the Unity Engine using their cuboids. I used these in a thin fashion to resemble the bars of a prison cell, to contribute towards the idea of isolation, with a break in the bars to represent the fact that there is still belief floating around the world that Pluto is still a planet. The most in-depth animation in terms of meaning was definitely the one including the astronaut. Whilst there are numerous films exploring disasters in space, I felt as though the actual public documentation of space casualties was next to none. After conducting some research about the astronauts that had gone into space, and those that had lost their lives in space, I managed to achieve a rough figure of the lives lost against those that have gone into space to be 3%. To develop this, I was able to use the astronaut of which I designed for my space artboard to include within the animation, then designing the room to somewhat resemble a walkway in a space station, for example. When the doors open to reveal the depths of space, I was also able to use the stationary star I designed for use in the initial idea in a repeated fashion to emulate the general vision of space. The animation about the earth was also another one that was developed from a meaning. I was also able to use the assets I'd designed previously for the planets infographic for the earth. This time, I decided to focus more on telling a very subtle story using the room as a way to tell it. To accomplish this, I used the positioning of the walls in the room to display the earth's resources relative to time, then as the walls close in the patterns of the wall begin to disappear, leaving them visible ‘behind' the earth relative to position, which also resembles time. I think that this animation was the one with the most tightly embedded meaning; however, I felt like the animation of the astronaut had the most important meaning behind it, as well as the most amount of effort gone into to designing the scene and ultimately the most enjoyable to produce. Overall, I am pleased with how my final piece has been brought together by the way it delivers the meanings behind each of the animations to the viewers, as well as its aesthetical properties - this including the seamless looping of all of the animations, as well as the generalized look of contrasting the 2D flat design assets with the 3D environments. I am especially pleased with the outcome considering that this final piece was the first of which I had attempted using these techniques. Because of this being in conjunction with my acceptance of its ability to deliver its intended messages, I believe that my final piece for this project has been a success.

Presentation

Having my work presented on a website was a logical decision for me, as it allowed for the flexibility of re-arranging content, as well as the general compatibility with the digitally produced work, allowing for me to embed them without any major setbacks. Having the work non-paginated also helps with the flow of the presentation of the work, which helps to build up a timeline of the work that I have made, helping to show the development of the work simply by scrolling down. Although it did make it harder to have absolutely positioned images and text on the screen, I feel as though this wasn't needed due to the aforementioned flow of the development of the work. Also, by having my work on a website, I have been able to showcase my work to people from multiple devices; however, if I had chosen to present my work as a book, I would not have had that opportunity and flexibility. Because of this, I am happy with the way that I have chosen to present my work for this project.

Changes

The changes I would make to this project would be create and include more experimental work with the designed assets. For example, I could have made a semi-accurate mock-up of the milky way galaxy in a flat design style, or even have produced a long video showing semi-accurate orbital patterns of all of the planets around the sun so long as it was left in a video format as opposed to a GIF due to file size. I also believe that I could have produced more 2D animations using the assets designed throughout the project, perhaps a simplistic flat design scene with subtle animation such as shooting stars in the sky, or a day/night cycle. As mentioned previously, I also believe that experimenting with still 3D renders would have been a good idea to improve the aesthetics of the 3D scenes; however, due to the time taken to render these in such detail, animation may not have been feasible and personally I prefer the animated work over the stills because of the fact that the viewer can watch it change in front of them. On top of this, each time they watch it repeat, they may notice something new about the piece. Essentially the animation is adding another dimension to still imagery through its movement; however, I believe that some experiments using still renders would have been a good idea.

Conclusion

Throughout this project, there have been areas of which I've enjoyed more than others, for example, designing the planets, sun, moon, stars, rockets and astronauts, as well as all of the animation work. That isn't to say that I didn't enjoy creating the web-related work for this project; however, I believe that I was able to focus more on the principles of the visuals as opposed to managing the technical functionality of the websites. Although the animation work had a similar underlying technicality behind it, it still had more of an emphasis on the aesthetics as opposed to the functionality. This was partially due to the fact that it didn't have to react to input, therefore all it had to do was produce an output, whereas the websites had to react to the input of the user, meaning that more time was taken up managing that, theoretically leaving less time to focus on the visuals. I don't regret the production of this work; however, I am glad that I decided to transition to the animations in the end as I believe that producing a web-related final piece (based on the direction of which I was heading for) would have been unfeasible regarding time.
In conclusion, I believe that I have been able to develop skills in areas of which I wouldn't have previously explored, as well as recognising my own limits in terms of time. Exploring these different avenues of graphic design has opened me up to the realisation of what I find enjoyable to produce. On the other hand, with my web-related work, it was the first time that I had developed a project with the intent of it being an interactive experience for the user in this manner. Doing this allowed me to comprehend how the general implementation of websites can be averted and moulded into something much more interesting and engaging than a screen of text and images.