Animation Pipeline


Before a movie is made it first needs a story. Ideas to make a story are either original or often adaptations of a children story or other various stories. Bringing in the director of the film. The director of the film has a vision for the movie and controls how the story is portrayed and governs the direction of the film. So when a script is made. A script is a document that outlines every aspect of the film. Wheather that is the character behaviour, the environment the characters will be in and dialogue between characters. The reason to why the script is very important is because you have a lot of people working on this movie so many people can interpret the movie in different ways if the script is not clear and coherent.

Then the first initial step to the moviemaking is the storyboard. So a collective group of story artist come together and draw up a comic book version of the movie. To then help the director and other team members visualise the movie. The story artist draw up thousands of drawings to come out with the sequence of the film and then pitch it back to the story team and the director to see if they are heading in the right direction.


After the pitch of the storyboard and when given the green light, the story panels are given to the editorial department. Editors keep all the sketches together and put it all into a story reel, so that Directors, Producers and Executives can see the template of the film. During the editorial phase, the editors have to do a rough cut of the finished film. Due to the fact, the voice actors haven’t recorded they go around gathering people within the team to temporarily fill in that character voice. Editors will also add music and sound effects to the video. They edit the sequences to the best of there abilities and thus has made the core foundation of the movie.


The visual development artist their job is to make the movie aesthetics look lived in. Bringing the world to life with colours and textures. They would create everything within the film world that’s from characters,  props and environments. Then after all the art has been made if approved by the Art Director and Production designer it is then shown to the director to see if this is the vision that he/she had.


Modelling brings the 2D artwork to life. So they take the work from the art department and then make it 3D. They are in charge of creating everything 3D within the movie world. what they also do is sculpt the characters. They get the drawings from the character designer and then build a wireframe of it. Then they have to sculpt


Then the riggers would get all the moulding sculptures models. Rigger design how the character moves. Riggers add in the joints muscle and fat to the model then afterwards they add in extra detail such as skin wrinkles and facial expressions.

Surfacing development

Surfacing artist makes the environment look more realistic. By adding colour and light to the scene. Also making the surfaces looking smooth’ shiny, flat or bumpy gritty and dirty.

Rough Layout

Within this department, they are given the storyboards from the story department and put all together and then recreate them within a 3d on a computer with a virtual camera. This helps them get a better understanding of the cinematography layout.

Final Layout

Within the final layout stage, they take out the simplified dits of the characters and then replace them with the updated high-resolution characters that the other artists have made for the movie. Then the animators would animate it which then the final layout artist would oversee this by adding in extra detail if need be.


Within the animation stage, the animators use 3d models to animate the characters. The 3D models are like puppets so to an animator are fairly easy to move.

Crowds department

The crow department to focus on the extras in the world. They a crate a bunch of different types of extras and then give them the same moment in different variations. From walking, talking to doing a mundane task. The crowd department would then take all the actions and then put them together with a brain. That will decide when the crowd should do a certain action once something occurs.

Character Effects

They are in charge of making sure that everything that character interacts with is smooth. From the character hair moving, to their clothes moving because of the wind it is their job to make sure it fits the scene Then make an effect for everything around the movement of the main character. They also make effects for what the character interacts with.

Special Effects

Within this department, they are in charge of the little and big detail. On one side they tackle effects such as explosions and how the fire flares up and on the other side they can show them.

Matte Painting

They take care of the visual elements that are beyond the main area the character is in. Such as mountains in the distances, cityscapes and many others. They take the other model elements made from the scene and make the background look better than it is


The lighting department is in charge of how the light is showed through this world

Image Finalising artists

They are in charge of making sure that the final render is clean and that there are no mistakes or unwanted images.

Sound Design

A Composer will come in and write music for the movie trying to enhance the movie progression and give an immersive experience. Then a final mix happens when everything too with audio is checked and make sure is level for the animation.



Website Evaluation

My ideas develop through the research of different websites. Looking and a range of websites to see what works and what doesn’t. Taking the best bits of everything into account I then decide to add it to my website.

I am happy with the overall design. The changes I would make are to change the background to something else. I would also try a different type of layout design. Other than that I am happy with the overall design. It was a good first attempt at creating my own website.

Using Adobe Muse was easier once I understood the basic parts to it. Then from that, I rinse and repeat what I learned while watching tutorials on how to apply widgets to give my portfolio more of a professional look. The adjustments I would make next time is to use better pictures and another colour scheme. The colour scheme works but it was not the initial scheme I was going for. But I cannot complain as the work scheme works.

The project did take longer than expected but it was because I was focused on other areas rather than this project. So my time was not shared evenly between projects. If I had used my time I would have produced a website of much higher quality.

The Website fits the brief that’s been set. There are a lot of things I would change but I wanted to play it safe and not go to adventurous. While using Adobe Muse the techniques I used to make the website made the website look like a website.

The Website does work. What I would change though is the who visual style that I gave the website. I feel as if I used the same pictures with another layout and possibly a different font my work would look more professional.

Function of a Web-Browser

Web browsing function contains HTML which is the code used to design web pages. Whenever someone searches for a web page and it loads up it has to process the HTML which includes links, texts and references to images and other items such as cascading style sheets and javascript functions. As seen below a diagram showing the process



HTML – Hypertext Markup Language a basic system for tagging text files to achieve colour, fonts, graphics, and hyperlink effects on World Wide Web pages.

Javascript – A object-based programming language used to create interactive effects within web browsers

JQuery– jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.

Bootstrap-  Bootstrap is a free and open-source front-end framework for designing websites and web applications. Bootstrap refers to the development of faster environments, for example, a very basic text editor and an assembler program.

AJAX – is a set web development techniques that which use web technologies

Client- a desktop computer or workstation that is capable of obtaining information and applications from a server.

CSS – Cascading style sheet is a Web page derived from multiple sources with a defined order of precedence where the definitions of any style element conflict.

FTP- The File Transfer Protocol is the standard network protocol used for the transfer of computer files between a client and server on a computer network.

PHP- is a server-side scripting language designed for web development but also used as a general-purpose programming language.

Iframe – An IFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website

SQL- Structured Query Language is a domain specific language used in programming and designed for managing data held in a relational database management system, or for stream processing in a relational data stream management system (RDSMS).

MySQL- MySQL is a powerful open source database server built based on a relational database management system (RDBMS) and is capable of handling a large concurrent database connection. ASP.NET is an open-source server-side web application framework designed for web development to produce dynamic web pages.

Database – a database is a set of data held in a computer, for example, SQL Server and MySQL which allow multiple users to work with data at the same time creating advanced security for access to the data.

Web-server- web server is a computer system that processes requests via HTTP which is the basic network protocol used to distribute info on the world wide web.

Agular- is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.

Cookies- An HTTP cookie is a small piece of data sent from a website and stored on the user’s computer by the user’s web browser while the user is browsing.

For the definitions, I used google to define the words

Things to include within a Web-page

  • Header/ Banner: A header is an image that is placed on top of the website that appears at the top of every web page except landing page or sales page. It is normally horizontal in size which consists mainly of the logo, tagline or some other elements such as social media icons, advertisement banner or search bar.
  • Footer: A footer is a small section at the bottom of each page. It is often used to display company data or copyright information.
  • Logo: a symbol or other small design adopted by an organization to identify its products, uniform, vehicles,
  • Images: a visible impression obtained by a camera, telescope, microscope, or other devices, or displayed on a computer or video screen.
  • Thumbnails: a small picture of an image or page layout.
  • Videos: a recording of moving visual images made digitally or on videotape.
  • Slider: In web design terminology, the term Slider is used for a slideshow added to a web page.
  • Lightbox: Lightbox is a JavaScript library that displays images and videos by filling the screen, and dimming out the rest of the web page.
  • Links: In computing, a hyperlink, or simply a link, is a reference to data that the reader can directly follow either by clicking, tapping, or hovering. A hyperlink points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks.
  • Navigation(Menu): Web navigation refers to the process of navigating a network of information resources in the World Wide Web, which is organized as hypertext or hypermedia. The user interface that is used to do so is called a web browser.
  • Text: Is the writing on the webpage
  • Soundtrack/Effects: Sounds that appears when clicking on certain hyperlinks
  • Loader(loading bar): Preloaders are often simple or complex animations that are used to keep visitors entertained while server operations finish processing.
  • Social media: websites and applications that enable users to create and share content or to participate in social networking.

JPEG(Joint Photographic Experts): a good compression ratio for a website is scale 1-100.

PNG(Portable Network Graphics): When you put a PNG file into photoshop all the layers within the image will appear. But if you put a JPEG into photoshop the layers have all been compressed and the layers will not be shown inside photoshop.

SVG: SVG has a better resolution than a PNG. SVG have better quality and are smaller files, with a smaller file will render faster than a PNG. Unlike PNG they are larger files, therefore, taking longer to render.

GIF: a Gif is a collection of images put together to make a small looped clip. What makes a GIF unique is not the debate it has about its name. Out of the 3 is named it is the only one to show a moving image.

Images: Within the web server, the images will be within the centre of the page or the background. The images I would show on my portfolio would be my work throughout the years I would only put my best work on there so it can showcase my talent

Videos: I would put videos onto my portfolio to show my media work. Again showcasing that I am no stranger to different types of media. The videos will be embedded using an iframe from youtube. The reason to why I would use a web service such as youtube instead of storing an mp4 id because if the video is a big file it may take awhile to load so this way with just a link it’s quick and easy.

What is an iframe, An iframe (short for the inline frame) is an HTML element that allows an external webpage to be embedded in an HTML document, iframes can be inserted anywhere within a webpage layout.

Responsive Web Design: Responsive web design is an approach to web design which makes web pages render well on a variety of devices and window or screen sizes.

App Evaluation

What influenced me was that I was thinking about how to improve my own timekeeping and stick a work scheduled that would work for me all year round. Then I came up with the planner idea soon followed by the name day2day.

My ideas develop from nothing into a good idea. I stuck to my original idea of the planner and only made it better through research. It develops more I looked into other planner apps. I took things that I did not see in them into consideration then added the idea into Day2Day.

The overall design could do with a lot of work but the concept is solid and I am glad I stuck to it. What I would change is the layout it is not as nice I thought it would be. So next time I’ll plan on sketching out different ideas of how the interface is going to be.

When I used Adobe Muse I found it tricky at first but once you understand the basics and continue doing what you were doing be prior. Then the rest of the making of the app becomes easier to understand. But that’s not to say I found it easy it was still difficult I just had a better understanding.

I am happy with the colour scheme I went for as it is something different that I did not catch other apps doing. Although next time I’ll try to find a way to make the user change the colour to their own liking. I feel this would make users feel more like Day2Day is much more personalised if I have done that.

The project did take longer than expected to make due to a number of factors. I could have used my time more efficiently by getting to learn the Adobe Muse. If I asked for help at the right times and if I was more proactive about my work.

The app is definitely fit for the brief. I am happy with the idea and the app that I have made and I would not change it. The app doesn’t work to the best of its abilities but it is made more time for it the app would be moving smoothly

App Target Audince

The app I am going to create is a planner based app called Day2Day. Day2Day is targeted at people who are in College or University between the ages of 16-25-year-olds. This is a planner app to help students juggle their social life, work life and personal life. The app main focus is to help improve students with timekeeping allowing them to get used to a routine set by themselves. With this routine set in place, they will always be on top of their work and studies provided they stick to the routine they have set for themselves. if that is set in place the student will see time slots that are free to do as he/she wishes. I hope to decrease student stress levels by allowing them to set a plan for themselves by showing them what needs to be done within their schedule. If plans are to be made the student would check Day2Day and be able to prioritise what he/she should do that day.Planning App.jpg

My research has shown me that majority of the planners have a simplistic style.



This is a sketch of the wireframing. this gives me an idea of how each button within the app should work and it shows the process of when each button is been pressed.

Things needed within the app

  • Hyperlinks
  • Back button
  • Home button
  • Notifications
  • Colour
  • allow the user to add information
  • allow the user to delete information

The colour scheme I am going for is red and green. I looked at different types of colours using Adobe Kuler as well as a research showing it is not a common colour choice so I decided to go risky. Here are the links that helped me come up with my colour choices.

Image result for red and green

The font I am going to use for the text is Lato and Merriweather also I may use Roboto slab and Roboto. There were a lot of different types of fonts for me to use but I feel as the fonts I chose were in the right balance between professional (as its a planner) and informal (as it is for younger people). The links I used to help me select the right font are below.

Image result for Lato and MerriweatherImage result for roboto slab and roboto

Icon design

6 diffrent websites


What I like is the colour scheme and how they make it work. Spotify is known for iconic green. But on the website, they use blue, black and white to complement each other. There isn’t much to the page and when you scroll down the website gets straight to the point about prices and the services it provides.

There isn’t anything that I don’t like but if I had to say anything. I would of like to see the website use more of its iconic colours although I get the concept that they were going for I would like to see the alternative version. This is something I will add to my websiteScreen Shot 2018-01-22 at 13.42.35 1.png


What I like is there is a lot going on on the page.  I like the banner on top as well as the font. I like how the text is layout on the screen. I like how they are showcasing the games as the main image on the screen. What I do not like however os how small the font is. I think its a bit too thin so the font size cant is that small.Screen Shot 2018-01-22 at 13.40.36.png


I like the simplistic look of this page looks especially the layout and how it uses a white background to focus on the art pieces keeping the focus on the art pieces.

The homepage is quite nice as it gives the view a broad understanding of what they are going to find on this page this makes the page more relatable to the viewer and identifies the artist/creator.

However, this website good qualities make it kind of bland and very empty not using any of the negative space which isn’t a bad thing, however, this isn’t something I am looking for in a website.

Screen Shot 2018-01-31 at 15.09.53.png


This is an online portfolio. I like the idea behind it. when you click on a category it changes what it shows below. it’s also a great way to filter through artwork and pinpoint what you are looking for. I like the paragraph and the font. It’s clear short and effective I’ll use that for my own. What I don’t like is that when you click on each of the filters, it doesn’t show all oh his artwork. The simplicity of his page is a feature I would like to have on my website.

Screen Shot 2018-03-21 at 16.19.52.png


I like the layout of the website. The Youtube has used was a great choice/ I like how there is an option to change the colour of the screen called Dark Theme. The screen has a lot going on but it is not all congested it is in a nice and clear format. The videos have been put into columns and ross to make it easier for the viewer to find what they are looking for.



What I like is the layout design a and how big the thumbnails are making it easier for me to know what to click on.  Although the colour choices are dull to me. It does give it that ready to work feel to it.

2018-06-23 (1).png