INTERACTIVE DESIGN-EXERCISE 2: WEBSITE REPLICATION

 29.04.2025 - 06.05.2025 / Week 2 - Week 3

Christopher Jayson Tan/ 0378500

Interactive Design / Bachelors of Design (Hons) in Creative Media / Taylor's University

Exercise 2: Website Replication

---

TABLE OF CONTENTS

1. INSTRUCTION

2. TASK

3. REFLECTION

---

INSTRUCTIONS

Your task is to replicate TWO (2) existing main pages of the websites that you have analyzed in Exercise 1 to gain a better understanding of their structure. Follow the dimensions of the existing website, including 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 a stock image or a 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. 

---

TASK

We were tasked on replicating the main pages of the website that we analyze a week ago. I chose the

Grab and Bank Ganesha website as my website of choice for the replication because the website i analyze in the first exercise is really complex and not ideal for this exercise.

Grab :

URL : https://www.grab.com/id/

Google Drive : https://drive.google.com/file/d/1F7RWeL52E97lhB4-VjLBKXWnx0Jr9oxu/view?usp=drive_link

I started with the Grab website by screenshotting the full size of it.

Figure 2.1 Screenshot website (06/05/2025)

Next i place the image in Adobe Illustrator, made the opacity lower and scaled the artboard to the image. I placed basic shapes as the next step and colored it using the eye dropper tool.

Figure 2.2 Placing the website screenshot and making basic shapes (06/05/2025)

After that, i placed the photo that is placed at the top of the website. I used a different image because i couldn't find the exact photo and i also placed the icons that are present. I got the icons from using Adobe Photoshop, using the ellipse lasso tool. I also placed the Grab logo, Socials and such.

Figure 2.3 Placing image and icons (06/05/2025)

I started the typography process after placing the icons. I used a Familiar Pro Bold and Univers Condensed as my main font and after that I'm finished.

Figure 2.4 Typography (06/05/2025)

Final Outcome

Figure 2.5 Final outcome (06/05/2025)

Figure 2.6 Comparison (06/05/2025)

Bank Ganesha :

URL : https://www.bankganesha.co.id

Google Drive : https://drive.google.com/file/d/1OyvYisdaARM7bkecuy7tbWYm84I8ZyqC/view?usp=drive_link

Similar like Grab, I screenshotted the website as the first step.

Figure 2.7 Screenshot website (06/05/2025)

Next, i placed the website screenshot in Adobe Illustrator and start working on the images, using Adobe Photoshops lasso tool, i exported individual images 1 by 1. I also crop out the socials logo 






Figure 2.8 Placing images (06/05/2025)





I worked on the shapes as the next steps by using the rectangle, line tool, pen tool, and ellipse tool.

Figure 2.9 Creating shapes (06/05/2025)

After that i worked on the typography. I used the Vera Humana Bold and OPTIONoption Medium Regular as my main font, did some refining on the kerning and size, after that i am done.

Figure 2.10 Typography (06/05/2025)

Final Outcome

Figure 2.11 Final Outcome (06/05/2025)

Figure 2.12 Comparison (06/05/2025)

---

REFLECTION

This was an interesting assignment because as a creative media student, i never thought to get an exercise where we have to replicate something instead of making something new. There is some challenges that i faced during this exercise, mostly when i screenshotted the website screen on the wrong size and I didn't notice that mistake until the very end and i had to change everything from sizing to placement, including an element that didn't appear in the first screenshot i took (probably a bug made it dissapear) which is very frustrating but overall it was an intriguing exercise.