Interactive Design - Exercise 2 (Web Replication)

08/05/2024 - 15/05/2024 ( Week 3 - Week 4 )

Chong Wee Han / 0368863

Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University

Exercise 2 - Web Replication

---

LECTURE

Week 3 - Lecture 03

---

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1_LR3FnphEcPH66w9nxaUtexUfHB5F2h-/preview" width="640" height="480" allow="autoplay"></iframe>

Exercise 2 (Web Replication)

Requirement for exercise 2

Your task is to replicate TWO (2) existing main pages of the websites given in the link below to gain a better understanding of their structure. Choose any two from the link given. Follow the dimensions of the existing website from the width and height. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. You can use any image from stock image or free stock icon. The image that you will be using does not have to be an exact image from the original website. You may replace it with a similar image. Focus on the layout, type style, and color style. To find similar typefaces/fonts, you can download fonts from Google Fonts. You may need to screengrab the website and can begin to replicate the page. 

Website 01 - Morgan Stanley

Link to original website: https://www.morganstanley.com/

Website 02 - Ocean Health Index

Link to original website: https://www.oceanhealthindex.org/?authuser=0

Process

I trace out the shapes by using pen tools in Illustrator and find similar fonts and images on the Internet for web replication. The social media icons I also downloaded from FreePik and used it in the website's footer. 

Figure 1.1

Figure 1.2

Figure 1.3

Figure 1.4

The second website I used the same way to do the web replication. I also use the pen tool to trace shapes and gradient the background. Besides, I also changed the colour of the social media icon to make it look similar to the original website.

Figure 2.1

Figure 2.2

Figure 2.3

Final Submission

Final Outcome - Website 01

Web Replication #1 - JPG

Web Replication #1 - PDF

Final Outcome - Website 02

Web Replication #2 - JPG

Web Replication #2 - PDF

---

REFLECTION

In this exercise, I'm gaining more understanding of website layout and design. From the first exercise to this exercise 2, I slowly gained knowledge and also enhanced my interest of me learning in website design. This is an interesting experience to do web replication and I observed that doing website design contains a lot of small details and a consistent layout that needs to be taken care of to ensure the visual appeal. These can make sure to increase attractiveness and satisfaction to users when browsing the website.