Interactive Design - Exercise 2

 || 10/10/2024 - 10/17/2024 (Week 3 - Week 4)

|| Bertrand Alden Gani / 0370471

|| Interactive Design

|| Bachelor Of Design In Creative Media

|| Exercise 2

INSTRUCTIONS

EXERCISE 2

We were instructed to replicate TWO (2) existing main pages of the websites given to gain a better understanding of their structure. We need to follow the dimensions of the existing website from the width and height.  We can use any image from stock image or free stock icon. The image does not have to be an exact image from the original website. Focus on the layout, type style, and color style. 

Website 1: Morgan Stanley

The process:

Fig 1.0 Full screenshoot the website and open it in Illustrator

Fig 1.1 Make it into template

Fig 1.2 Create new layer

Fig 1.3 Create rectangles as the background

Fig 1.4 Insert images and adjust them according to the template

Fig 1.5 Insert texts using similar font (I used "REM")

Fig 1.6 Adjust the text layout using the template

Fig 1.7 Move the adjusted text layout to the replica

Fig 1.8 I used Google Lens to find similar icon

Fig 1.9 Replicating the footer layout

Fig 2.0 Final Result

Final Result:

Website 2: Ocean Health Index

The process:

Fig 2.1 Final Result

I replicated the website in class and I forgot to document the process, but I did similar process as the Morgan Stanley replica.

Final Result: