Interactive Design | Exercise 2: Website Replica

30.04.2025 - 07.05.2025 (Week 2-3)

FEILYCIA JOY KURNIAWAN / 0373400 

Interactive Design / Bachelor of Design (Honors) in Creative Media 

Task : Exercise 2

---

TABLE OF CONTENTS

1. Lectures

2. Instruction

3. Exercise 2

4. Feedbacks

5. Reflection

---

LECTURES

Key principle of Usability :

• Consistency: to ensure that the website looks coherent (same family of fonts, same graphical elements, headers, harmonious color palette).
• Simplicity : UI should be simple and easy to understand and navigate (straight forward buttons, layouts that flows).
• Visibility : for users to know and acknowledge certain buttons/aspects of the website that needs more attention (call-to-action buttons, highlight/bold fonts for important information).
• Feedback : to show results of any interaction (scrolling, when hovering around the buttons the opacity changes, verifications).
• Error prevention : preventing human errors ("forget passwords", double confirmations, verifications with codes).

---

INSTRUCTION

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

---

EXERCISE 2 - WEBSITE REPLICA

Exercise 2 brief:

• Chose 2 websites to replicate
• Use similar fonts, and graphics
• Use free stock images
• Focus on the layout, type style and color style

How to screen grab the website:

• Right click on the website
• Choose "inspect"
• Click the three dots on the top right
• Choose "Run Command"
• Search for "Capture" and choose capture full screen

Google Drive link : 

https://drive.google.com/drive/folders/1xtaD7fe-gs_x0LvC8SBmGhXIoOqO2cmt?usp=sharing

1. https://www.oharchitecture.com.au/

Fig. 3.1. Progress

Started with setting up the artboard and making the screenshot as a template. 

First I copy the words > graphics (buttons,lines) > images.

Fig, 3.2. Identifying fonts

To identify the font itself I asked chatGPT to identify it for me. Turns out the font used in the site is Helevatica Neue which is not free to use. So I decided to use Montserrat as my main font. I just played around with the type for each part of the website (title, subtitle, body).

For the images, I used https://www.pexels.com/, but midway, I realized that I can downloaded the original images from the website hence why some of the images I used is exactly the same as the original website. 

Here's the differences between the replica (left) and the original website (right) :

Fig. 3.3. Comparison 1

Fig. 3.4. Comparison 2

Fig. 3.5. Comparison 3

Fig. 3.6. Comparison 4

Final OH Architecture Website Replica :

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

2. https://sunmetalon.com/

Fig. 3.7. Work Progress 

Same process as the last website, I started with the artboard and the template.

Then I go on with the words > graphics > images > and lastly backgrounds.

This website needs a dark brown background with some panels that has some orange gradients in it. 

Fig. 3.8. Identifying fonts

Fig. 3.9. Alternative fonts

I asked for helped again for the fonts. As the original font is non commercial, I need a similar but free font. I was suggested to use Inter as my font. There are 3 fonts used in this website, Inter, ITC New Baskerville, and Space Grotesk. 

Fig. 3.10. Fonts Used in the replica

For all of the images I used in the replica, I took it all from the original website. 

Here's the differences between the replica (left) and the original website (right) :

Fig. 3.11. Comparison 1

Fig. 3.12. Comparison 2

Fig. 3.13. Comparison 3

Fig. 3.14. Comparison 4

Fig. 3.15. Comparison 5

Fig. 3.16. Comparison 6

Final Sun Metalon Website Replica :

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

---

FEEDBACKS

No feedback was given.

---

REFLECTION

It was a fun exercise where I can see how the layout flows. I learn that simple is better, to many graphics/decors can be overwhelming and feels a bit cluttered when we make an UI design. 

User experience is the priority, so we need to present a design that is straight forward and informative so that the website can deliver it's purpose. Consistency is also a big part that I realized when I replicate these websites. They use limited colors, fonts, graphic elements to show unity in the website. Buttons or sentences that are made to grab the user's attention are also directed by the help of how the eye flows.