Interactive Design- Exercise 2: Website Replication

on

 29.04.2025 - 06.05.2025 / Week 2-Week 3

Chika  Clarissa Widjaja / 0378636

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

Exercise 2:Website Replication



                           


TABLE OF CONTENTS

  • INSTRUCTIONS
  • TASK
  • REFLECTION


    INSTRUCTIONS



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


Task brief:

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. 

TASK

Website 1 replication: https://sunmetalon.com



Digitalization

First Page

Fig 2.1 Gradient Effect


First, I took a screen grab by pressing the interactive element to capture images of the entire website. Then, I filled the entire page with the same color as the website’s homepage using the color drop tool. I noticed that the homepage had a gradient at the bottom of the screen, so I used the radial gradient option to match it more accurately. I also kept the original page beside my artboard for reference.



l

Fig 2.2 Lines & Typography 


Then, I added the lines that appeared at the top of the page for the buttons. To be accurate, I measured the original lines from the website to maintain their length and width, which is why I used red guiding lines. I tried to find the closest matching font using a font finder, and the most accurate one I found was Sequel Sans Bold Body. For the English and Chinese translation buttons at the top right, the font appeared slightly thinner, so I used Sequel Sans Book Display instead.





Fig 2.3

This part took the longest when replicating the website. I searched for similar images using Google Images, and these three were the closest in terms of color and texture. However, I had to convert the first circular element to grayscale and rotate it because I couldn’t find an exact match. Then, I stacked the images on top of each other, matching the size and placement from the original website, and added the font beside them (Plathorn-ConReg). I also recreated the small element next to the phrase 'into revenue.'







Fig 2.4 Shadow making


For the shadows in this website, I used the pen tool and applied a gradient that closely matched the original. For the other shadows, such as the ones at the top and bottom, I adjusted the opacity to make them look more similar to the original design.



Fig 2.5 Font Changing


For the brand’s name font, I found a close match called Bw Gradual DEMO Black. However, the 'O' in the original website is actually their logo, so I covered the 'O' with a brown square and replaced it with the brand’s logo. Before doing that, I had to crop the logo and remove its background.




Fig 2.6 Process

For this website, I use these typefaces: Sequel Sans, Spirequel Light, BW Gradual Demo Black, and Plathorn-ConReg.


Final Outcome


First replication


Fig 2.7 Final Outcome Website 1



Website 2 replication: https://oceanhealthindex.org/



Digitalization


Fig 2.8 Process Page 2

First, I found a picture of corals in the sea that closely resembled the one on the original website. Then, I began searching for fonts that matched as closely as possible. The fonts I used for this website replication are Kanit Extra Bold, Kanit Bold, and Sinkin Sans 500 Medium. I followed the alignment of each section using grids as a guide. To make the design as accurate as the original website, I paid close attention to details such as lowered opacity, text size, placement, color, and the symbols used. When searching for similar images online, I took a screenshot and used Google image search. If that didn’t work, I chose another image that conveyed a similar message.


Final Outcome
Second Replication

Fig 2.8 Comparison Page 2



Fig 2.8 Final Website 2





Gdrive Link: 
https://drive.google.com/drive/u/0/folders/1aT_J7ySwHR4bdo3R9OmdvIA22-JoYZAw

REFLECTION

This assignment really helped me get more comfortable using Adobe Illustrator. Recreating a website from scratch made me pay attention to small details like fonts, spacing, colors, and shadows, which I didn’t always notice before. It pushed me to experiment with different tools like gradients and opacity, and I learned a lot just by trying to match everything as closely as possible. It also gave me a better understanding of how websites are designed and how important layout and consistency are. Overall, it was a good challenge and definitely helped me improve my design skills.






Comments

Post a Comment