Website Comparison

Website Comparsion of Elements and Principles of Design.

Nvida:

https://www.nvidia.com/en-us/geforce/

Elements of design used: 


Colour:  The colour green could represent uniqueness, originality and growth. The colour black represents elegance, sophistication, and authority. And white is being used to simply contrast the  text with the black background. The colour representation would represent what Nvdia is trying to portray it self as and both colours go relatively well with each other.

Space: Space is the area around an object, space can define an object for the viewer to pay more attention to or can give the viewer rest. In terms of giving the viewer time to rest, we can see lack of objects in the sides of the website, and a big empty space is present between the "LEARN MORE" box and the image with "DOWLOAD GEFORCE EXPERIENCE", this gives the viewer rest but as well as to define the objects around the empty space more so the viewer is more likely to pay attention to those objects around this space. The empty space to the sides does the same effect as the previous mention empty space, it makes the viewer pay more attention to what actually matters which are the objects such as the text and images of the website.

Size: Size can be used give more importance on an object, and it typically makes the viewer pay more attention to things that are bigger than things that are smaller. We can clearly see this occur with the size difference between the titles:"GAME READY" , "GEFORCE GTX 10 SERIES", and "LEARN MORE" (plus the Skyrim VR image) and the text and images near the bottom of the page. Because of the size difference between the text closer to the ("GAME READY", and etc) and the text and images near the bottom of the screen, the viewer would typically pay more attention on the bigger objects, which are the text near the top. Therefore the objects which are greater in size 

Principles of design used: 

Alignment: There is a clear boundary that defines where the visuals of the websites are stored. The boundaries left side is defined by the top left text “GEFORCE” and goes down from there down, the right side is defined when the diagonal green line ends or starts (depending on your perception) at the top right and goes down from there. We also see alignment with the bottom text and images. The text and images are aligned with each other suggesting they are related and are alleged with the boundary making things look nice by avoiding anything that goes against disorder. There is also alignment with the text above, which is to the right of “GEFORCE” suggesting they are related and serve a similar purpose, which is to direct the user to different sections of the website.

Proximity: When things on a design are close together or share a relationship that has something to do with their proximity, then it could suggest either they belong and relate with each other or that they don't belong or relate with each other. We can see this with the pictures and text near the bottom of the screen, thanks to their proximity we can easily assume that they are related and serve a similar purpose. We can also assume that since all of the text near the top of the screen is quite a distance away from the text and images near the bottom of the screen, that they don't belong with each other.

Scale: Scale is the relationship between the size of objects in a design. If the scale factor between two sets of objects or just two objects aren't equal then it typically means the designer had intended for viewers attention to be applied to the larger objects or object. The main size difference occurs with the row of text and images near the bottom of the screen, and the main display of the website with the title "GAME READY" and the Skyrim VR image. This shows where the viewers attention is intended to be applied.


AMD:

https://www.amd.com/en

Elements of design: 

Line: Line is basically the details of line and how line or lines are used in a design and when I say details I mean : length, width, direction, whether or not it is three dimensional or two dimensional,  etc. We can see line being used on the sides of the video with the text “A SMARTER DESIGN”. This line is in diagonal direction which typically is used to signal movement which is what exactly happens when the video plays on. Line is also used to seperate different parts of the website, for example between the frame and 2nd top slice of the website we can see a white line separating the two areas, and the very top section of the website with “Community, Developers...” is also seperate by a white line by the previous mention ‘slice’ of the website. Also the base of the video frame separates it self with the rest of the website which contains further information of the company and its products. There are also lines that are used to define a space for a particularly use, such as the search bar near the top right corner of the website, and also define the space for a button for the user to use such as "GET YOURS" near the bottom of the screen.



Form: Form is a three-dimensional  and encloses volume, height, width and depth. In the video frame we see a extreme close up on a cpu Ryzen (one of AMD's products) at a angle. Since the frame is at a angle on this object it signals movement. Since we can see the object in detail and up close it could mean the designer intended for the viewer to pay more attention to the CPU especially since it takes up majority of the frame and website. We also see form objects below the frame of the video near the text "Game Beyond Imagination", however I'm not really sure what is the use of this object, potentially to make things nicer and to replace some of the black background.

Alignment and the Rule of Thirds.

 The rule of thirds is a way of making sure objects, such as text and images, are aligned. This done by dividing the screen in 9 equal squares with intersecting points.
Grid alignment is used to allign and reposition objects in a design in order to be pleasing from a design perspective for the viewer.