Task 2: Design Prototypes for Websites

This is an initial design I have created for my website using photoshop, this my idea of what I want it to look like however, I may change it as I continue to design the website.

the coloured panels are actually not part of the design however they indicate where images will be placed of my own work.

Screen Shot 2018-01-22 at 14.14.59Screen Shot 2018-01-22 at 14.15.29Screen Shot 2018-01-22 at 14.15.59Screen Shot 2018-01-22 at 14.16.11

Colour Palates

Screen Shot 2018-01-25 at 17.20.05Screen Shot 2018-01-25 at 17.21.43Screen Shot 2018-01-25 at 17.19.50



3D Animation Development

Character Traits 

Types of Character traits;

  • Religious
  • Honest
  • Loyal
  • Devoted
  • Loving
  • Kind
  • Sincere
  • Ambitious
  • Satisfied
  • Happy
  • Faithful
  • Patient
  • Determined
  • Persistent
  • Adventurous
  • Homebody
  • Considerate
  • Cooperative
  • Cheerful
  • Optimistic
  • Pessimistic
  • Funny

Bad character traits

  • Dishonest
  • Disloyal
  • Unkind
  • Mean
  • Rude
  • Disrespectful
  • Inpatient
  • Greedy
  • Angry
  • Pessimistic
  • Repugnant
  • Cruel
  • Unmerciful
  • Wicked
  • Obnoxious
  • Malicious
  • Grumpy
  • Quarrelsome
  • Caustic
  • Selfish
  • Unforgiving

Heroic Traits

  • Dauntless
  • Strong
  • Courageous
  • Reliable
  • Fearless
  • Daring
  • Tough
  • Brave

villainous Traits

  • Ugly
  • Evil
  • Cunning
  • Deceptive
  • Murderous
  • Psychotic


Title: Obstacle Course

Medium: 3D Animation

Running time: 1 minute to 2 minute

Synopsis: The detective makes his way through an obstacle course that tests the physical and mental power and skill of detective. Testing is stamina, jumping, balance, agility, sneakiness and determination.

Target Audience: 12 and above fans of video games and 3D animation

Potential Distribution: Youtube

Concept art:

Screen Shot 2018-01-15 at 10.53.00.png






Task 1 Media Trailer Ideas

DragonBall FighterZ


Two friends/ rivals both start-up Dragonball fighters z as they start engaging intensely into the game they end up fighting each other in real life and begin to act as the characters they are playing in the game and start charging their attacks of the characters and firing their attacks create a bright flash which ends the trailer with the title of the game.


Two friends both start playing Dragonball fighters z. As they play some matches keeping drawing and getting engaged into the game very intensely win after loss, loss after win they both jump out of their seats beginning to fight one another after a few blocked punches and failed kick they both begin to take their selected characters personas and charge up their final attacks which creates an epic moment of them both intensely charging up and finally releasing their energy as super attack which will end the trailer.


  • Visual effects on the tv from the gameplay of the game
  • Both characters will look like your average young adults
  • Visual effects of the characters will be added through digital software

Target Audience

  • Dragonball having a huge worldwide audience its guaranteed to get a massive overload of popularity
  • Dragonball will have a mature teenage/adult as it is a fighting game and quite violent
  • Many people who like fighting games and others who have watched the animation

Doki Doki Literature Club


Boy goes to school and one of his friends recommends he join the literature club they attend and then the boy meets 3 new girls which he begins to attend regularly. the boy the starts to hit on one of the girls and from there, a series of events begin.


Boy goes to school and one of his friends recommends he join the literature club they attend and then the boy meets 3 new girls which he begins to attend regularly. the boy the starts to hit on one of the girls due to them being paired into duos he starts regularly hitting on one of the girls and even ends up on going on a date with this individual. One day the club decides its time to plan for an upcoming school event the boy hits on the girl and confesses his love to her as he walks her home. On the day of the event, she isn’t at school and the boy and other club members get worried so the boy goes to her house to check on her and finds her hanged and dead in her room.


  • Mostly props are needed and locations such as a classroom
  • Characters will need school uniforms
  • The visual effects of a filter which can be added after like monochromatic

Target Audience

  • Due to the dark twist, the trailer would be aimed at very mature audiences such as young adults and older
  • The trailer will also appeal to the audience who have watched or played the game
  • Also, this could appeal to an audience who like romance and dating simulation games


3D Animation Teqniques

Jack-Jack Attack



Keylight is the starting point of lighting when creating the light in the scene focusing on the main area making it the brightest part of the composition such as the character or setting.

Next, they would use a blue light fill as the blue sky to give the whole scene a general lighting however still keeps the composition quite dark in most areas. then they would add some light bouncing off the light areas onto the darker areas create the final scene.

Lighting also reflects the mood of the character, for example, giving the scene a monochromatic look to present that the character is sad and unhappy. unlike when the scene would have more brighter and vibrant colours to create a much more happier mood.

All of these features help communicate a heighten the emotional impact of a scene.

Related imageRelated image


  • Maya
  • Menv
  • prman (Renderman)
  • 2D package Shake

These are just some of the software they use to create an animation at Pixar

Layout and Key Animation

Layout helps plan the animation and set the scene to create an initial plan for the animation and where everything should be placed. For example the poses of characters, the timing of shots and position of objects. This allows the animator to manipulate every aspect of the character providing the physical acting for the scene according to the storyboard’s poses and guideline.


Surfacing, Set Dressing and Final Layout

Surfacing requires applying finished models that form particular objects and environments. The models are positioned to form the set and the surroundings which helps promote the purpose of a shot, leading the eye or allowing the character to interact with their surroundings

When the characters’ bodies have been animated the motion of their hair and clothes are then added the motion is then based on the movement of the characters creating a simulation of their physics of fabric and hair. the simulation will also take into account gravity, weight, stretchiness and friction as well as collisions of each garment against itself and its surroundings, which then ensures that the hair and clothes will move according to goals of the shot that the director wants.
  • Software engineer
  • UI Designer
  • Research Scientist
  • Editors
  • Artists
  • Lighting artists
  • Shade artists
  • Directors
  • Story artists
  • Technical Artists
  • Layout  artists
  • Storyboard artists

Task 1 – Web Design Research


Screen Shot 2018-01-03 at 12.09.49Screen Shot 2018-01-03 at 12.13.33

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-03 at 12.09.56Screen Shot 2018-01-03 at 12.13.02

This website has very beautifully designed home page and gallery as when an image is selected it opens up the picture and makes it big and also give it an appropriate background colour which makes it better to see and visually brings out the piece as a whole.

The homepage also brings up a very cluttered look with no negative space being used and all the images which create this illusion that the user has so much work to view. however, it doesn’t make it worse as the clash of colours creates this aesthetically pleasing homepage which is a piece of art in itself.

The interface is also very smooth and easy to assessable which creates a brilliant UX.


Screen Shot 2018-01-03 at 12.12.27Screen Shot 2018-01-03 at 12.12.37

This website has a bit of a mixture of the first two websites as it uses both a cluttered look and negative space to create this organized look which helps the viewer look at there work but not overwhelm the viewer.

The black background also brings out the pieces of art as they are quite vibrant and help the page be blinding as for the with the background creating this radiating light that could make the viewer uncomfortable.

The layout is also very organized. once opening an image into it gallery mode it is also categorised for example we see the image of kylo ren, however, we can see Chewbacca underneath of it which shows that its set to the view can look at similar topic images/work.


Screen Shot 2018-01-03 at 12.10.01

This isn’t really a website more of a design of a home page for a user of art station which is a social media site. However, I really liked the layout of this homepage as it has five pieces of work that show off the creators style and a bit of his range of what type of work he creates this also helps the viewer understand that there is some kind of illustrator of some kind. If each image could be clicked on and view in a gallery mode like the others it would create a great UX.

If each image could be clicked on and view in a gallery mode like the others it would create a great UX.


Screen Shot 2018-01-03 at 12.10.16Screen Shot 2018-01-03 at 12.10.34

This game designers website is quite basic and keeps its simplistic look to make is thumbnails stand out more and create a kind of similar style to the first two websites I talked about.

However, this website homepage has a slideshow feature that basically creates this automatic show of some of this artists images and works which is very smooth to navigate and enjoyable to use to gain quick access to his work.

the colour white is still quite bland and very basic however on the homepage it works quite well as there is the big panel of the slideshow feature and the white helps bring that out.


Screen Shot 2018-01-03 at 12.10.13Screen Shot 2018-01-03 at 12.10.58

I like how this website uses giant pictures to show what their skills can achieve and create and also publicizing it. there uses of navigation and sliders also create a very modern website and make it better for a lot of more serious to navigate but most importantly everyone can use and still feel happy about the UX.

The colours used very smartly placed to nicely collide with the image and not ruin the site’s look and appeal.


Web-Brower – Functions

Web browsing function consists of rendering HTML which is the code used to design web pages and every time a web page loads up it has to process the HTML which includes text, links and references to images and other items such as cascading style sheets and javascript functions.



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

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.

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

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

JQuery– JQuery is a fast javascript library that is used to simplify event handling such as HTML client-side scripting and any animations and interaction on a web page.

Bootstrap- Bootstrap refers to the development of faster environments, for example, a very basic text editor and an assembler program.

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.

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

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.

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.

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.

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.

Parts of a Web-Page

  • Header/ Banner
  • Logo
  • Slider
  • Navigation
  • Gallery
  • Thumbnails
  • Lightbox
  • Footer
  • Images
  • Videos
  • Links
  • Text 
  • Soundtrack/Effects
  • Loader(loading bar)
  • Social media

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

Images were taken from;



3D Related Jobs

List of some Jobs

  • 3D Animator
  • Interior Designer
  • Architect
  • Game Designer
  • Skulptor
  • 3D Digital artist
  • 3D Visual artist
  • 3D Engineering
  • Biological and scientific modeling-3D printing: prosthetics, human tissues


scene 4

Interior Designer

The 3D software is used such as sketch up, auto desk 3d max, Autodesk homestyler, Autodesk auto cad, Autodesk Revit. This allows for faster revision of work and changes within that work and client-designer communication which vital when trying to create the perfect home space for the client. Visual planning which allows the designer and the client see what should be the final outcome which helps save time and resources creating the customer’s satisfaction to be extremely high. recycling assets such old customers designs can also be very useful when encountering customers that don’t have their mind set on something and also for advertisement online or in leaflets and shops.






Expressionism refers to art in which the image of reality is distorted in order to make it expressive of the artist’s inner feelings or ideas

In expressionist art, colour in particular can be highly intense and non-naturalistic, brushwork is typically free and paint application tends to be generous and highly textured. Expressionist art tends to be emotional and sometimes mystical. It can be seen as an extension of Romanticism.

Van Gogh

His canvases with densely laden, visible brushstrokes rendered in a bright, opulent palette emphasise Van Gogh’s personal expression brought to life in paint. Each painting provides a direct sense of how the artist viewed each scene, interpreted through his eyes, mind, and heart. This radically idiosyncratic, emotionally evocative style has continued to affect artists and movements throughout the twentieth century and up to the present day, guaranteeing Van Gogh’s importance far into the future.

Van Gogh’s dedication to articulating the inner spirituality of man and nature led to a fusion of style and content that resulted in dramatic, imaginative, rhythmic, and emotional canvases that convey far more than the mere appearance of the subject.

Although the source of much upset during his life, Van Gogh’s mental instability provided the frenzied source for the emotional renderings of his surroundings and imbued each image with a deeper psychological reflection and resonance.

Van Gogh’s unstable personal temperament became synonymous with the romantic image of the tortured artist. His self-destructive talent was echoed in the lives of many artists in the twentieth century.

Van Gogh used an impulsive, gestural application of paint and symbolic colours to express subjective emotions. These methods and practice came to define many subsequent modern movements from Fauvism to Abstract Expressionism.

Image result for expressionism


A twentieth-century literary, philosophical and artistic movement that explored the workings of the mind, championing the irrational, the poetic and the revolutionary.

Surrealism aimed to revolutionise human experience, rejecting a rational vision of life in favour of one that asserted the value of the unconscious and dreams. The movement’s poets and artists found magic and strange beauty in the unexpected and the uncanny, the disregarded and the unconventional.


Salvador Dali

Dalí was renowned for his flamboyant personality and role of mischievous provocateur as much as for his undeniable technical virtuosity. In his early use of organic morphology, his work bears the stamp of fellow Spaniards Pablo Picasso and Joan Miró. His paintings also evince a fascination for Classical and Renaissance art, clearly visible through his hyper-realistic style and religious symbolism of his later work.

Freudian theory underpins Dalí’s attempts at forging a visual language capable of rendering his dreams and hallucinations. These account for some of the iconic and now ubiquitous images through which Dalí achieved tremendous fame during his lifetime and beyond.

Obsessive themes of eroticism, death, and decay permeate Dalí’s work, reflecting his familiarity with and synthesis of the psychoanalytical theories of his time. Drawing on blatantly autobiographical material and childhood memories, Dalí’s work is rife with often ready-interpreted symbolism, ranging from fetishes and animal imagery to religious symbols.

Dalí subscribed to Surrealist André Breton’s theory of automatism, but ultimately opted for his own self-created system of tapping the unconscious termed “paranoiac critical”, a state in which one could simulate delusion while maintaining one’s sanity. Paradoxically defined by Dalí himself as a form of “irrational knowledge,” this method was applied by his contemporaries, mostly Surrealists, to varied media, ranging from cinema to poetry to fashion.

Related image


Art Deco

Art deco is a design style from the 1920s and 1930s in furniture, decorative arts and architecture characterised by its geometric character

Art deco was highly varied in its influences, taking inspiration from ancient Egyptian art, Aztec and other ancient Central American art, as well as from the design of modern ships, trains and motor cars. It also drew on the modern architecture and design of the Bauhaus, and of architects such as Le Corbusier and Mies van de Rohe.


Bridging the divide between the uniqueness of Art Nouveau pieces and the Art Deco impulse to incorporate unusual materials, his pieces demonstrates a blending of Art Deco and the more lavish and ornamental Art Nouveau style that preceded it.

This cabinet, which diverges from Art Nouveau in its symmetry and limited palette resulting from the use of the wood contrasting with the ivory, still features a somewhat elaborate floral design that borrows from Art Nouveau. It is less a departure from the older style than an updating and simplification of it.


Image result for Erté



Minimalism is an extreme form of abstract art developed in the USA in the 1960s and typified by artworks composed of simple geometric shapes based on the square and the rectangle

A lot of minimalist art plays with repetition and symmetry and employs arrangements of pre-manufactured elements.

Minimalism or minimalist art can be seen as extending the abstract idea that art should have its own reality and not be an imitation of some other thing. We usually think of art as representing an aspect of the real world (a landscape, a person, or even a tin of soup!); or reflecting an experience such as an emotion or feeling. With minimalism, no attempt is made to represent an outside reality, the artist wants the viewer to respond only to what is in front of them. The medium, (or material) from which it is made, and the form of the work is the reality.


Frank Steller

1959 Frank Steller started focusing on the formal elements of art-making, Stella went on to create increasingly complicated work that seemed to follow a natural progression of dynamism, tactility, and scale: first, by expanding his initial monochrome palette to bright Colors, and, later, moving painting into the third dimension through the incorporation of other, non-painterly elements onto the canvas. He ultimately went on to create large-scale freestanding sculptures, architectural structures, and the most complex work ever realised in the medium of printmaking. Stella’s virtually relentless experimentation has made him a key figure in American modernism, helping give rise to such developments as MinimalismPost-Painterly Abstraction, and Color Field painting.

Created according to a predetermined, circumscribed system imposed by the artist, the Black Paintings served as an important catalyst for Minimalist art of the 1960s. Similar to Stella’s parallel stripes and smooth handling of paint, Minimalist artists created abstract works characterised by the use of repeated geometric, industrial-appearing shapes stripped of all thematic or emotional content.

 Image result for frank stella



Maya- Topology

Polygonal Modelling

polygonal modelling is modelling object by representing their surfaces using polygonal it suited for scanline rending and is the method mostly used for real-time computer graphics other methods like NURBS and Subdivision surfaces are equation based which is used for ray tracers.


NURBS- Non-Uniform Rational B-Splines

Nurbs is a mathematical modelling technique commonly used in computer graphics programmes like Maya that generate and represent curves and surfaces. it is precise and flexible handling with surfaces and modelled shapes.


Short Keys:

  • F – will frame the currently selected object
  • A – will frame all the objects
  • Q – will access the general select tool
  • W – will access the move tool
  • E – will access the rotation tool
  • R – will scale the object.
Green selection is object mode
Holding D with the snap options make the shape snap to where you want on the grid
mesh tools, insert edge loop and then creating an extrusion can make a stairs effect with the 3d shape
Screen Shot 2016-09-18 at 19.54.20
Maya uses snap tools to snap objects easier and faster, placing objects where they need to be or where we need them to be. for example if I want to move the object by it bottom left vertex I can move it anywhere on the grid as long as I have the snap to points option complete.
Screen Shot 2016-09-18 at 19.57.08
This screenshot shows us the shape we are able to select and use to create figures, object and more. selecting one shape will make it appear in the centre of the grid which is where the user works from when using Maya.

Quick select is located on the status line, it lets you enter the name of an object to select it. the tool is mostly used to find objects when its hard to find, selecting using *(asterisk) will select all the objects with the characters making it easier to select all similar items with few keystrokes.

Move Tool can move the objects around the x,y and z-axis you can also change where the move manipulator is set for example you are able to change if its set on a vertices or face. the mover manipulator can also be set to move around the grid by vertices or face and above and under the grind.

Rotate Tool can rotate the shape about the world space XYZ axes without changing the rings and rotating a component along a local reference frame rotates the selected vertices or CVS.

Scale Tool when scaling an object you must remember you can only scale objects without components for example joints. the object when scaled is aligned to the world space axis if multiple objects are scaled at the same time each object scales to it own object space.

Spaceship Task

pasted image 0.png
Today we created a spaceship using the basic tools of Maya such move tool, scale tool, rotate tool and quick selection. this task helps me get a better understanding of Maya’s interface and also when struggling to not panic and press multiple buttons as this will create more problems.

Column Task

pasted image 0.png
 In this task, I used the snap feature to snap to the grid but changed its pivot point to its vertices so it would snap into the vertices of the world space axis. I also used the extrude feature to extrude the column and make it higher.
(Images from google images and screenshots)

Blog at WordPress.com.

Up ↑