Week one

Firstly, we got in our groups, my group being Moe and Tony. We then opened up PowerPoint. Finalised our game, we will base our trailer on. L.A noir. On our PowerPoint presentation we we created slides for; Scenes, settings, actors, job roles and shots.

Furthermore, we ended up coming up with 7 scenes we will use, finalised job roles, actors, settings and 4 shots that we will use.

The settings we came up with were a tunnel and an office. We then asked around to see if there would be an office available inside the college and concluded on a music room. For the tunnel we found abandoned tunnel that we will meet up to film in.


Moe: Hitman

Tony: Interrogator

Mobster: Me

Pedestrian: Me

The scene ideas we came up with consisted of:

Screen Shot 2018-01-25 at 11.02.10.png

Week 2

This was our presentation week where we had to in our groups and present our ideas. Our group was to present 1 hour into lesson, so we had time to add  onto our Presentation. We added images of settings and examples of shots we were potentially going to use. We also spent a some more time looking at settings.

Week 3

This week we went onto creating story boards. As we were storyboarding we came up with some more shots we could use too, as some of our feedback from our presentation was that we might need to consider having more shots as the shots we already had might not take up the minute and 30 seconds we needed. We also discussed some of the props and clothes we would need when filming. A small table lamp, A strong torch  be used as a prop. The torch will be used for lighting in the tunnel.

week 4 we came up with many more shot ideas we could use in the tunnel and the interrogation scene. The interrogation scene having more dialog  between the characters and a few more angles of them looking at each other. Followed up by a shot of the interrogator pulling up a box with pliers.  The tunnel scene shots were adjusted quite  a bit now being that there is a trade between the hitman and the victim, followed up by Hitman making the victim unconscious and taking the item off the victim.


Week 5 and 6. When going into editing I first made a rough edit, putting together of what my brief idea of the trailer is, I  then played around with the transitions and the effects on premiere pro to compose a more effective dramatic trailer, I made 2 more rough edits demonstrating different pathways I can edit the trailer with, one being simple with just the saturation lowered to make it look dark the other having colours dramatically change with the music and audio. The edit with the colours changing to the music and scenes seemed to work a lot better, after asking people around.

to get the colours and darkness to how it is on the final trailer i went to the search bar and typed in ‘fast colour corrector’Screen Shot 2018-03-08 at 09.59.16this bang up a variety of options to adjust colour brightness and  darkness Screen Shot 2018-03-08 at 10.01.43.png for the interrogation scenes i would adjust the colour the a blue, for the other scenes I would adjust the colour to red, I then went down to saturation

and changed it from 100 to 25. Screen Shot 2018-03-08 at 10.26.24.png


game trailer synopsis

idea 1

Black screen with a gun noise, leads to a funeral setting we can use a green screen to create this scene. Next scene, an agent discussing the event about the gunshot and what will happen next set in a office. Continued by gameplay from ‘la noir’

idea 2

2017829-tunnel-construction.jpg-resize-_opacity_100-frame_bg_color_FFF-h_2500-gravity_center-q_70-preserve_ratio_true-w_1400_.jpg starts with a phone call giving a hitman information on who he needs to eliminate, some bits of film noir can be used. Cuts to the hitman looking at its victim. Next scene gameplay of the action. Ending with a scene of the hitman following the victim through a tunnel, Feedback:


website research

Good Website  

the first website I will be discussing is this website consists of sculptures and drawings that you can view and buy.

As you get on the website you instantly get to see an image covering most of the screen with a sculpture, which introduces  you to the website, and gives you a good first impression as you know what you should expect. The categories of different links you have on the website are played out pretty nicely which include a lot of negative space.Screen Shot 2018-01-03 at 15.27.16

The use of colour is also quiet effective as the only part of the page that stands out other than the image is her name, which is important as the whole website is dedicated to her.

Screen Shot 2018-01-03 at 15.29.07

As you move on to view the other categories within the website you will encounter pages full of her work  and as you switch over the category it will get highlighted with blue Screen Shot 2018-01-03 at 15.32.50

which is good use of colour, by keeping it simple and making the most important part of the page at the time stand out. As you go further to see her work, the page will demonstrate good use of negative space to present her work and make it stand out. Screen Shot 2018-01-03 at 15.35.25.png

Bad website 

The next website I will be discussing is This website is all about playing video games at a more competitive level, where you can also put money on your games, the website also consists of the players overall win rates on matches that they have organised on the website.

To start of with, the home page. When first getting on the website you would have hardly any clue of where to even look because of all the different colours and lack of negative space and even the overall layout. Screen Shot 2018-01-03 at 15.54.29.pngas presented on the image there is nothing that really stands out, however, to actually set a game up and play for money you need to go to the top left corner and go on ‘GAME BATTLES’ as you continue to explore the sight it gets worse and worse having all the advertisements coming up all over your screen that stand out more than anything.

Screen Shot 2018-01-04 at 09.43.12.png

Bad website 

Moreover, the next website that i will be discussing is Lingscars

This particular website is a bad website because of all the information being so close together making it look confusing to a new user.Screen Shot 2018-01-04 at 09.46.18.pngas demonstrated in the image it also has nothing that really stands out as everything is in different colours including confusing images, that don’t really have much to do with the website itself. Furthermore, even when attempting to purchase a car you then continue to have your screen cluttered  with information that isn’t even necessary.Screen Shot 2018-01-04 at 09.57.28.pngas you continue scrolling there is eventually just a whole page of nothing as presented in this screenshot Screen Shot 2018-01-04 at 10.04.46.pngbut as you continue scrolling you then again see a page full of cluttered information.

Bad website

To continue the final bad website I will be analysing is


this website is completely overloaded and cluttered with information as demonstrated in the image Screen Shot 2018-01-04 at 10.17.34.pngthere are images with just right next to each other across the whole website, however to make it even worse the there is no constant layout to represent the image but instead there are some images with black borders around them of different width’s of the border and some images don’t have borders. Furthermore, the website looks really confusing because of all the different Colours highlighting everything on the page.

Good website

A pizza delivery/takeaway website.

a good factors to the website, negative space is demonstrated really well, to space out different image and text. Screen Shot 2018-01-04 at 11.05.54.png

another good factor to the website is the use of colour, keeping the colour constant of blue and red, to represent the overall image of the brand. Furthermore the negative space on the the sides of the website makes the composition look nice.

Good website

To begin with the website has a consistent theme throughout the website, it also uses good use of negative space, to make the art work stand out. The space between the images varies which makes the website look artistic as presented in the screenshot. the website is also easy to use pleasing to the eyes and there is minimal effort required for activity Screen Shot 2018-01-10 at 14.14.46.png



How web browsers function

A web browser, or simply “browser,” is an application used to access and view websites. Common web browsers include Microsoft Internet Explorer, Google Chrome, Mozilla Firefox, and Apple Safari.

The primary function of a web browser is to render HTML, the code used to design  webpage  Each time a browser loads a web page, it processes the HTML, which may include text, links, and references to images and other items, such as cascading style sheets and javascript functions. The browser processes these items, then renders them in the browser window.


History of the internetinternet timeline .pngSource:


responsive web design:

Is when a website works on multiple devices, as for example, from a mobile phone version to a pc version it will present the same website but on a a slightly different layout. As presented in this image, the website layout get adjusted to the screen size, while maintaining the same information.

Portfolios I like,

refresh studio 

The colour scheme is really elegant with a good balance of imagery and text throughout the portfolio. The repetition of colour throughout the portfolio gives the website a good example of how the artist wants to present himself, he also uses negative space very well to make his work stand out and make the overall layout look pleasing. His margins are also nice and simple containing the repetition of the colour black but with a lower opacity to make the margin less noticeable than the actual work.


Potential colour scheme Screen Shot 2018-02-28 at 10.41.58



Pixar short film research

An example of a Disney short film- Paper man

Storyline: A man and a women meet at a train station and have a cute encounter however, before the man got to speak, the women got on her train, The audience then see the man at his office job, as he suddenly sees the same women across the road in the opposite building, he then gets excited thinking he will be able to see her again, and attempts to get her attention by trying to throw paper airplanes across the road into her window.

The plan does not work, and triggered his boss, he then stand up throws all his paper work on the floor and runs out trying to meet the women as she leaves her building. He does not find her. Furthermore, he then walks past all the airplanes that he threw, which get summoned into a force that push him towards the women, while the same happens for the women but with only one airplane. Which concludes in them meeting again at a train station.

In order to make paper man the short film happen, a new tool was developed called Meander. This allows the underlying CG of an animation to be modified with 2D drawings by individual artists to include more detail. The technique also allowed the artists in not having to focus all of their time on making specific areas, however, they could form into a team and pitch in on different areas of production.

Having used meander Paper man was able to demonstrate a lot of emotion and natural movement within the short film.

Black and white – the visual effect of the short film being presented in black and white makes t appeal as an old movie. Black and white movies are often associated with romantic genre. the classic visual effect also makes the story seem timeless as the costumes are simplistic and can be associated in any time frame.

the animators animated the characters by using 3D models and inverse kinematics were used to help create the short film. This is when you get a skeleton of the characters to move the characters.

the animation then gets rendered with just a fill for the characters. the artists then go over the frames of the animation and in the 2d image for the frame they add detail.

they use motion vector render technique so the that the texture that the artists add to the frames moves smoothly with the animation.


job roles



































Logo Design

Logo definition

-a symbol or other small designs adopted by an organisation to identify its products

To make a good logo you will firstly need an audience, knowing the target audience could help you figure out the colours  and the sort of image you might want to represent. For example a brand that sells wine would possibly use purple colouring and a simple logo that represents what the brand is such as, a wine bottle or a glass. Or if you would have a brand aimed at children for example ‘Toys R us’ you would want to use bright colours that would pull in the attention of a child.The colour within the logo will also bring life to the illustration and give it further context.

Furthermore,  the logo also needs to be recognisable so people could identify your brand more easily, an example of a recognisable logo is  ‘Evernote’ they use an elephant but when you look at the ear it looks like a folded page that also represents what Evernote identifies as, another factor that makes the Evernote recognisable is the trunk that is curled to look like an ‘e’ which is the first letter of their brand name.

Moreover, the logo has to be simple, a good example of this is the apple logo, its just an apple but there is something that makes it unique the bite on the apple, which represents computer bytes. Having the bite in the apple also makes the brand seem unique as you would normally imagine an apple when its at normal form.


A technique that is often is used- the golden section ratio, this is  mathematically determined by nature, and used by fine artists, sculptors, and architects as a guideline  The numbers within the golden section can be applied to the proportions of a rectangle, called the Golden rectangle. This is known as one of the most visually satisfying of all geometric forms which is why the golden section is often used in art,

The rule of thirds. The basic principle behind the rule of thirds is to imagine breaking an image down into thirds both horizontally and vertically so that you have 9 parts.

Furthermore, the point of having to split your page into 9 parts helps you place points of interest in the intersection or along the lines, having this done will make the photo more balanced and will help the viewer interact with the image.

some examples of  successful brands that have used to golden section in their logos


Moreover, another technique to think about when making a logo is negative space, as it can  add extra meaning and personality or even symbolise something to create something that relates to your brand, a good example of this is in the ‘FedEx’ logo this logo uses negative space to create an arrow within the text between the letters ‘E’ and ‘x’ this arrow is a good example because it can  suggest something moving from one place to another with precision as the FedEx is a delivery service. 



To create the spaceship I started off with a square and went on to extruding the sides to create different sorts of shapes coming out from the square which give it a futuristic look. Screen Shot 2017-10-04 at 09.21.16.pngScreen Shot 2017-10-04 at 09.24.55

Research, write and discuss  2 3D related jobs and what skills are required. What are the common and practical job skills required? What form of 3D is being used and how is it being outputted etc

An example of some jobs related to 3D work,

-Pixar – modelling characters and backgrounds.

Blizzard- 3D animating for overwatch, making assets

3D printing – medical centre, architecture. 3D printing jobs- 3D product designer, digital designer, CAD technician, 3D printing technician.

The word topology refers to the geometric surface characteristics of a 3D object. Modellers strive for topology, mostly illustrated by a 3D mesh with efficient polygon distribution, proper placement of polygonal edge-loops, no triangular faces and clean precise creases that minimize stretching and distortion.

How to set up a project in Maya-

  1. Select File > Project Window.
  2. In the Project Window, click New. …
  3. Type the name of your new project in the Current Project text box.
  4. Click the browse icon to the right of Location, and then specify a location for your project directory

creating an animation, to do this I firstly, went to the workspace and selected ‘animation’ Screen Shot 2017-11-15 at 09.44.30I then inserted a shape by going onto polygons Screen Shot 2017-11-15 at 09.45.19

Screen Shot 2017-11-15 at 09.46.22

Furthermore, I then selected ‘1’ frame on the animation bar and selected keyframe by right-clicking the way I want my shape to move Screen Shot 2017-11-15 at 09.47.37

Screen Shot 2017-11-15 at 09.48.16Screen Shot 2017-11-15 at 09.48.58Screen Shot 2017-11-15 at 09.51.04

Followed up by this I then selected 100 frames and repeated the process with another 2 shapes, which concluded in me having moving shapes when I pressed play.

Moving on. the bouncing ball animation, this animation required a few more steps to make the ball look like it gets squished when it touches the surface, in my opinion, this animation was good because of how I made it look like it inflates at the start.

Rigging characters to create an animation, firstly I went to windows Screen Shot 2017-11-22 at 09.58.40I then selected animation  and went on the quick rigScreen Shot 2017-11-22 at 09.58.53.png

I then get a skeleton form for my character, with this skeleton I select the joints, and move them, then pressing ‘S’ i create a keyframe when I move the joints I conclude in a moving character animation. Screen Shot 2017-11-22 at 09.58.34

3D character model


To create this model I used adobe fuse. Firstly, I assembled the face clickingScreen Shot 2017-11-29 at 10.08.13 on this lead me to a variety of options of different faces and bodies. After assembling the basic model I went on to customise the face, to do this I select a part of the face, which then highlights the part I will be customising in blue Screen Shot 2017-11-29 at 09.36.43which then gives me two options of customising the part I just selected Screen Shot 2017-11-29 at 09.36.46by moving the sliders given, the part will change.

After customising the face to try and make it look like mine, I then went on to adding hair and clothes. Screen Shot 2017-11-29 at 09.41.15 After selecting hair it came up with multiple options for the hair you can use Screen Shot 2017-11-29 at 09.41.20I chose the one most similar to mine. Screen Shot 2017-11-29 at 09.41.34Furthermore, I then rotated my character to have a side view and edit the jaw to move the character to the side I held ‘space’ and moved the mouse

Screen Shot 2017-11-29 at 09.43.49

After finishing up on customising my face, I started to put clothes on the character, Screen Shot 2017-11-29 at 10.32.21 when selecting clothing I then get a variety of clothes I can add on theScreen Shot 2017-11-29 at 10.32.26.png first customisation of clothes I made was the body Screen Shot 2017-11-29 at 10.32.30Screen Shot 2017-11-29 at 10.32.36 I went with the firefighter jacket.

After adding clothes I then went on to adding colour to do so I went on textures followedScreen Shot 2017-11-29 at 10.36.56 up by a window of options to customise things such as colour and intensity.Screen Shot 2017-11-29 at 10.37.39.pngI then went to click on havingScreen Shot 2017-11-29 at 10.39.22 this selected I got to change the colour of the clothing I selected, Screen Shot 2017-11-29 at 10.40.01I went with the purple.

After completing these steps I concluded in a successful character that I’m happy with.Screen Shot 2017-11-29 at 10.41.16.png

Furthermore, I then wanted to see how the character would look like with a rigged already made animation, to do so I went on ‘Mixamo’ I then uploaded my character. After my character was uploaded, I then dragged joints onto my character  to create the auto rig, the joints had to match up the area of the character with the name of the joint Screen Shot 2017-11-29 at 10.53.43After this was done it comes up with a lot of different animationsScreen Shot 2017-11-29 at 10.58.21

I then imported my character with the skin and download some of the necessary actions that I will use when

Topology source-

A wireframe contains vertices where lines meet, edges that are lines made up of two vertices, arcs, curves, and circles, all of which form “faces” in the wireframe design.

In computer-generated 3D topology, the goal is to have sufficient detail in the wireframe while keeping the number of faces to the minimum necessary to accomplish the job.

3D modellers strive for “clean” topology, typically illustrated by a 3D mesh with efficient polygon distribution, proper placement of edge-loops, few or no triangular faces (as opposed to four-sided “quads”), and clean precise creases that minimize stretching and distortion.






The character’s personality, as presented in the obstacle course the creature is flexible and has abilities out of this world to make him look insane. They call him the ‘The Beast’.

To begin with the ‘The Beast’ slowly lifts his body weight with his legs to get onto the first box, he then builds up his power getting ready for the next jump. No challenge for The Beast. He completes it with no struggle, jumping over head first. Suddenly, he feels something nearby is challenging him. He presents his fury. lowering his neck his feet and his arm. He carefully makes his way down the ramp, presenting one leg after the other. Easy! His confidence is lifted he’s feeling out of this world. He gets an energy rush. He can’t stop. Causing him to lower his body on one leg, lifting his other in front. He feels Relentless. He wants more! with no thought does a split. He can’t control his power. Moments after he goes for another. It’s unbelievable, you might think. No. He goes in for another and another, all the way up to his next challenge. The beast roars in excitement.

Here we are, just The beast and his next challenge. He lifts his back leg further up towards his spine while still in a split position causing him to stand up. Now being in an ordinary stance he lifts a leg and diminishes it towards to block in front of him, following up his speed and might with his other leg. He glances towards his next challenge, a ramp. He titters. Demonstrating his control, intimidating his surroundings. He goes for it, his leg gets lifted above his head and onto the top of the ramp. Proving his flexibility. He goes on to lower the leg in disrespect to the ramp, changing his game plan, he makes small movements with legs shuffling his way up the ramp. Establishing his gift. As he accomplishes the first part of the ramp he feels like it’s time to enter his final form, this form… is out of this world, when entered it can cause him serious injury just trying to enter. However, he has to. A wall he see’s. It’s the only way. He must enter the form.

Moreover, He screeches, the powers have heard him. The rush is more uncontrollable than ever before, there is no turning back. He creates a split down the ramp, he does not even feel his legs ripping, further than ever before. The ramp is complete, Now for his rival (the wall) his leg is lowered once again into a split position his other follow up, he slides towards the wall maintaining the position.

He gets a flashback. It’s the journey, it’s how he got here, his mind shows him what he has just gone through, all he see’s is the obstacle course but in reverse. Back to the start, he is. The course gets sped up back to his current point. He’s back.

The beast still maintaining a split position sliding towers the wall screeches louder than ever before. He’s through, he did it. Time for the easy part, he looks down at his next challenge and grins. Before thinking he goes for it, screeching the whole way through the jumps, he’s on top of the world, jumping so far and high like he’s flying.

His dream, its nearly here he’s about to finish the course no man has before.

“Ooooff” he expresses. It’s over. A black screen. There is no hope for him.

Tools and the creation of the animation.

Rigging characters to create an animation, firstly I went to windows Screen Shot 2017-11-22 at 09.58.40I then selected animation  and went on the quick rigScreen Shot 2017-11-22 at 09.58.53.png

I then get a skeleton form for my character, with this skeleton I select the joints, and move them, then pressing ‘S’ i create a keyframe when I move the joints I conclude in  a moving character animation. Screen Shot 2017-11-22 at 09.58.34.


App Design RareBox

According to recent statista figures, around 139million smartphones were sold worldwide in 2008. However, in 2016, statista figures demonstrated that there are now over 2 billion smartphone users. Furthermore, these users have downloaded billions of apps all together every year,  concluding with the result of the mobile app development industry to develop from a relatively new business into a billion dollar industry.

One of the bigger changes that has happened to app development over the years, relates to downloading the software itself, as before the process of downloading an app was  different and was so much more difficult to do. It consisted of the user having to visit a shop in person, find the product they are looking for, then pay for a technician to install the software within their computer. However with the Apple store and google play store,  consumers can now research and download apps them selves onto their devices in minutes.

This process of digitally downloading software has enabled a new type of mobile app developer to enter the global marketplace. As mobile analyst Chetan Sharma explains: “It could take many months and even years before the complex negotiations were over to launch the apps. Independent developers rarely had a shot … Now, a student in a dorm can become an overnight sensation. It takes only minutes and hours to get something in the market”.

Now with the ability to design, develop and launch mobile apps quicker and more accessible than ever before, big platforms such Apple’s app store have now expanded at an insane rate. When apple’s store was just opened in 2008, the store offered 500 apps available for download. However today Apple’s app store consists of 1.5million apps and an additional 1.6million android apps.

With the app industry becoming so large, competition is increasing to secure paying users. According to figures shown on Entrepreneur  magazine around 46% of mobile app users are paying customers. Which lead to over 45billion in revenue for mobile app developers in 2015.

with the industry being so big, App designers  have now shifted to towards designing unique gaming experiences, which reward users with loyalty, for example, mobile gaming apps have started to incorporate loyalty statuses within their games to reward and encourage  frequent players. Whereas mobile gaming apps used to be very simplistic their format,

An example of one the first devices was released in 1980 the ‘Psion Organiser’ was not capable of doing much however, it had a small amount of built in software such as a calculator, diary, text editor.

Furthermore, as i will also be having to design an app, i have come up with the idea of having an app that will notify people when new high demanding or rare shoes are released.

The target audience for this app would be mostly be young adults that have some source of income as most exclusive shoes are quiet expensive, this app would also highly appeal to clothes/shoes resellers as exclusive shoes will often be resold for a bigger profit because of how rare and limited they are.

Moreover, as there are already apps that are similar to mine, i will have to develop mine further, some of the things i will include, is a description on shoes, the history if there is any and the price of the shoes when it drops at retail stores and online. Furthermore, i will also locate the stores that will have the product, as sometimes when the shoes are really rare they would get dropped for retail in a different store to the usual.

Furthermore, there are a few examples of apps that are related to my app idea. One of which is called ‘KicksOnFire’ this app however is quiet basic but efficient and useful to its audience. In my opinion i would say this is a well designed app. Some of the contrivance that  forms together to make the app good is the basic theme, causing the app to be easy to use. The app includes four categories along the top that will involve the user instantly and have him understand the  purpose of the app, the categories consist of an ‘upcoming’ option ‘news’ on this category shoes will be uploaded and will be described in further detail, for example the history, who has worn the shoes and the materials they are made of. Moving on, there is a ‘popular’ category’ that will promote and suggest shoes that are upcoming and that have been sold in the past, the shoes on this category will appear, if the shoes have previously sold well, or have been liked more than usual in the past. Finally, the last category you get is ‘past’ here you will see the shoes you have missed out on throughout the year. In conclusion, this app is well made and appeals really well to its audience, the theme is clear, the description is useful, however, the use of negative space has also been used well. Moreover, there is although something that might not appeal so well, the logo, in my opinion is bad as uses too much negative space which causes the main piece of the logo inside of the square appeal too small which causes the text to look quiet crammed together,  41UJgimt1wL._SR600,315_SCLZZZZZZZ_

Moving on, the next app ‘Kixify’ links in to the app ‘KicksOnFire’ this is app where you can buy and sell your owns shoes, it also has a lot more settings and categories you can test out. However, although it has many more options to play around with they still maintained to make the app look appropriate for its audience, unfortunately it does look a bit unorganised because of the lack of negative space used, the images seem to be really close together, which only a slim line separating them. However, this could also be a positive thing to some of its users, as some people might want to explore the home page faster. Furthermore, the app is efficient because of how easy they make it to purchase items and sell items, to buy an item all you have to do is select the image of shoes that appeal to you, a description and a price will then appear, with a ‘buy’ or ‘add to cart’ button which then leads you to your payments, this will keep its customers and users satisfied because of how easy and fast it is to use. Moving on, the selling part of the app, also really well made because of how self explanatory the bottom of your page looks like, it involves five options, a home button, a dashboard, where you can see the orders you have made, which also include the date of when your item will be delivered. The third option is a camera, that allows you to start selling your item, here you insert an image and add all the details for it to then go on and sell it. Furthermore, there is also a inbox where you can view your messages of people who are interested in your items and want to discuss the shoes in further detail. Finally, your personal profile, where it demonstrates your profile with all your shoes that you have sold and and currently in the process of selling. In conclusion, i think this is a well made app because of how self explanatory it is  but also how fast and efficient it is. In comparison to the previous app i would say its quiet similar but ‘KicksOnFire’ is better because of the use of negative space.

Furthermore, the final good app i will be analysing is ‘Confirmed’ this is an app based on only Adidas shoes. The app allows you to get a reservation on upcoming rare shoes, however to get a reservation there is a few to steps you need to make, signing up, a week before the shoes are released you have to select a shoe size, then throughout the week you will get a notification, letting you know when they will begin taking reservations. More over, as the shoes are rare and a lot of people are going to try and get reservations, the app will have thousands of people waiting to try get a reservation, which concludes in thousands of people missing out on the reservation too, however, this is good, as only a certain amount of shoes get released.’Confirmed’ creates a fair way for people to get reservations by having a countdown, when the countdown reaches zero you have to click a circle in the middle of the app instantly, with in a point of a second, all reservations will be taken up, which will conclude in you having a guaranteed pair of shoes.

The overall design of the app is really well made, it uses negative space effectively and presents many accurate images of different angles of the upcoming shoes. In conclusion this is a good app because of how simple and useful it is. 


Logo development of my app , to start of with I sketched up a few modern looking sneakers, i then tried to further develop the sneaker and put the sneaker as an image on a sneaker box, however, it looked too complicated and the text over it was barely readable. RARE BOX LOGO I then went on to creating a more simple looking sneaker which turned out to look a lot better because of its simple design, I also changed up the colours and removed the box as it did not go well with the background of the app. Furthermore, I also got a new font which is bold and easy to read,


Furthermore, the loading page of the app, for this page i went through a few steps on illustrator to create the background pattern, to begin with I created a pattern using the rectangle tool, i then extended the rectangle to make it look like lines, followed up by this I adjusted the pattern Screen Shot 2017-11-23 at 13.00.06In the pattern options here i got to figure out how the pattern will look like, instead of it just being straight lines across, i adjusted it to have the pattern be in different directions, throughout the page. I then got the pattern on swatches, so i can now apply it to further pages in the app.  Screen Shot 2017-11-23 at 12.59.52

Screen Shot 2017-11-23 at 12.59.37.pngAs demonstrated the pattern in the background is consistent throughout the page, however it is also unique because of the different directions the lines face.

Evidence of linking buttons for app.

To begin i created a page, firstly i set my ‘max page width’ to ‘320’Screen Shot 2017-12-05 at 11.26.55I then went onto ‘advanced settings’ Screen Shot 2017-12-05 at 11.28.29which lead me to to a few more settings to set up the page Screen Shot 2017-12-05 at 11.29.04.pngwhere I could change the ‘min height’ Screen Shot 2017-12-05 at 11.29.13Having set this up I then get a screen with all the pages of my website to begin with you get one page, Screen Shot 2017-12-05 at 11.30.58furthermore, I then created a new a few more pages by clicking on the ‘+’ next the the page when you hover over it Screen Shot 2017-12-05 at 11.33.20, I went on to creating 3 pages. Screen Shot 2017-12-05 at 11.34.02

Followed up by naming them,Screen Shot 2017-12-05 at 11.34.55 After this was done, I went on to adding text and colour to my home page. To add colour for the background of my ‘home’ page I went on the rectangle toolScreen Shot 2017-12-05 at 11.36.18and filled my page with it, followed up by adding colour Screen Shot 2017-12-05 at 11.36.46after following these steps I had a page filled with a green Screen Shot 2017-12-05 at 11.37.46Furthermore, I then added text Screen Shot 2017-12-05 at 11.39.25Screen Shot 2017-12-05 at 11.40.06and went on to adding another rectangle at the bottom of my page Screen Shot 2017-12-05 at 11.40.53To follow up by this I then selected all the layers on the page and copied them, to continue I went on to page 1 and pastes all in place Screen Shot 2017-12-05 at 11.42.58 where I then changed the colours up and the text, i continued this process into page 2. After having all 3 pages with different text and colour I then went on ‘preview’ made sure it looked right and recorded it.

Final app design pages PAGE 1 APP DESIGNPAGE 2 APP DESIGNPAGE 3 APP DESIGN -6page 4 app designAPP DESIGN PAGE 5-8PAGE 7 APP DESIGNPAGE 8 APP DESIGNUntitled-11Untitled-12.jpgUntitled-13Untitled-14Untitled-15slight improvementsUntitled-17 with text placements and colour from previous second pageUntitled-16.jpgScreen Shot 2017-12-13 at 15.54.20Here are all my app pages on a screenshot, the arrows show how the pages link together.

‘Essence’ game concept /development

Settingmoodboardmoodboard 2

moodboard 3Character-guardian developmentCHARACTER MOODBOARD1moodboard character 3moodboard characer 2Game platform ideasmoodboard platform 3platform moodboardMOODBOARD PLATFORMmoodboard platformsCharacter movement moodboardmovement moodboardenemiesmoodboard1Essence, a 2d scroller game that involves maths to defeat your enemies in  combat. The game will consist of a story line and a one versus one multiplayer mode. The story is about a boy stuck in a nightmare, with a guardian, where he has to pass through a huge forrest and overcome his fears, the fears will mostly be the mobs you find in the forrest, after defeating enough of the mobs the fear gets cured. The aim is to pass through to the end of the forrest without dying, before getting to a checkpoint.

The game will  begin with a wide character selection where you can choose the guardian of your main character, this guardian will specialise in something for example, addition or algebra. As the game begins a HUD will appear  on your screen demonstrating where everything such as, the health of your character, your guardians health and the points you have collected.

You will then be spawned into a futuristic setting of a forrest, that you and your guardian have to pass through. While doing so you will encounter obstacles that you will have to overcome, for example, the toxic water and big jumps. However, the forrest will also contain mobs to stop you from passing, and bosses that would require more time to get through. Furthermore, there will be two health bars your main characters health- Georgie’s  and your guardians, however in order for you to actually get defeated in game, both of the characters health has to be lowered to Zero. As there are two characters only one character will have their health drained at a time, so the first character to die would be the guardian. After the guardian dies, Georgie will then have to carry on through the forrest by himself trying to collect coins. However when Georgie collects 100 coins, the guardian will be revived and spawn back in with full health. Furthermore, if Georgie does not end up getting 100 coins before a mob appears, the combat will be harder as he deals less damage to the opponent.

Combat, when entering combat with an enemy, you will have a option of powers appear on screen next to your opponent, one-three ‘powers’ but to defeat the the opponent you must choose one of the powers, each power will contain a maths questions, one being the easiest and three being the most challenging. After selecting a power then answering the question that comes up correctly, your guardian will deal damage to your opponent, however if the power you chose was lower, such as ‘one’ the damage you deal will be lower, than what you could of dealt with a higher power.Furthermore, if you answer a question wrong, your opponent then gets a chance to attack you and decrease your health. You will also get hints to how to solve the question if the guardian you chose specialises in the sort of question given to you. This will then help you improve in what you’re not so great at in maths, by choosing the guardian wisely.

getting through certain parts of the forrest, you will get check points, at these check points your game will be saved and you will get a review of how you did,  a list of things you did good and could work on, for the math aspect of the game.

moodboard 2refrencesmoodboard 4

moodboard ff

game idea mood boardTexture of tiles moodboard

walk-cycle-1This is the first attempt at making a walk cycle, however it did’t turn out to look ideal because the hands did not move. To create the walk cycle i used photoshop, Firstly i set up my page to have 500 width and 500 hight in pixels with 72 resolution. Screen Shot 2017-11-21 at 12.28.22Followed up by this, I copy and pasted all 7 stages of my walk cycle that I created on illustrator to then have 7 layers of the walk cycle on photoshop,Screen Shot 2017-11-21 at 12.30.12After having all the layers in Photoshop I then created a frame animation. Screen Shot 2017-11-21 at 12.31.25 I then put all the stages in order, followed up by making the animation go on forever and setting the walk cycle stages to change every 0.1 second.

For my second attempt at creating a walk cycle i developed the arm movement, by having the arms move up and down a bit. Furthermore, I also noticed that my first animation had some of the shadows moving within the head of the robot, every frame which didn’t look well made. However in my second Gif I maintained the shadows in the same place without having it teleport randomly. WALK-CYCLE-2-

Making the background, to start of with I drew up a rough sketch in my sketchbook of how i want my background to look likescam bg, I then scanned my book and traced over what i drawn up in my book, this helped me draw up a variety of trees inillustrator that i could then duplicate throughout the mapbackground environment. However, after having drawn up an average a4 background I needed to extend it to see how it would look like with all my tiles for the level in place, to do this i used the art board tool Screen Shot 2017-11-23 at 10.31.09 which allows me to extend the page, and add more blocks to see how a full level would look like Screen Shot 2017-11-23 at 10.31.16

To get the colours, i used Adobe Color, before going into it i knew i wanted a darker set of colours, as my game is set in a forrest. Firstly I just tried out different sorts of colours for my mountain, after a while i noticed that a light blue colour worked pretty well, I then looked at the colours number and copied it into Adobe Color Screen Shot 2017-11-23 at 10.43.36

This lead me to have a set of colours that work well with each other, taking this into consideration I used the brown -like colour to colour in my trees and my blocks.Screen Shot 2017-11-23 at 10.44.34.png

Character combat GIFcombat-robot

to create this gif I Illustrated 6 stages of the arms moving to crate an attack animation, I then copied them onto Photoshop to create a GIFScreen Shot 2017-12-05 at 10.24.16

I then went onto testing how my game could possibly look while the character is moving across the level with a enemy in sight test which then lead me to developing my enemy characters attack movement, BHREK-GIFCOMBAT-ROBOT-AND-BHREKHere I created a GIF to further demonstrate how the combat could works and  how you could get ambushed at random times by enemy’s you will come across and need to defeat in order to proceed your way through the forrest.

However, to further improve my combat system I went on to create the 3 ‘power’ options you get before attacking the enemy, which lead to the maths element of the game.Untitled-1.jpg

having chosen a lower power, the question to appear would be easy, if answered correctly you will deal damage to the enemy Untitled-1.jpg.




The basics made in unreal