Interactive Design - Exercise 2

on
06/04/25 - 5/5/25 (Week 3 - Week 6)
Samuel Keane / 0376236
Interactive Design /  Bachelor of Design (Hons) in Creative Media
Exercise 2

JUMPLINKS

LECTURES

Lectures

INSTRUCTIONS

PROJECTS

Exercise 2 — Web Replication

Exercise 2 requires us to replicate two websites. These are the two websites I picked to replicate.

1. The Banshies

To begin, I first screengrabbed the entire website homepage.

Fig. 3.1, Homepage screengrab, (04/05/2025)

Then, I open up Illustrator and started scanning through the fonts used and found out that all of it was from Helvetica. Knowing this, I instantly do the text replication from top to bottom. A little bit of kerning was done to the text, so I need to do a little bit of adjustments on the spacing between text.

Fig. 3.1, Live events comparison, (04/05/2025)

After writing all the text down, I started to replicate small details such as the logo and small icons. For the black icons, I copied the ones from the website and putting them on red circles exactly like the ones there.

Fig. 3.3, Replicating small icons, (04/05/2025)

The logo was a little bit complicated. I am pretty sure the fonts used was specially made for the logo. After doing a little bit of research, I found out the closest font I can use to substitute the capital "B" on the logo is the font Great Vibes regular. For the font used in, well, "the", Didot italic was the closest font I can find to match. Here is a side-by-side comparison of it.

Fig. 3.4, Replicating the band logo, (04/05/2025)

After finishing the graphics and text, now it is time to work with the images. I picked all of the images from pexels, a website to access stock images. Here are the links to the images I used for the website replica.

Click here to open the links for images used.

This is the final result of the replica.


2. OH Architecture

Just like before, I screengrabbed the website homepage from top to bottom.

Fig. 3.5, Homepage screengrab, (04/05/2025)

Coincidentaly, this website also uses Helvetica for all of the text. I guess Helvetica really is the standard for a clean look on design. As usual, I still have to do kerning on all of the text and adjust its line spacing as well.

Fig. 3.6, Replicating text, (04/05/2025)

The buttons and icons on this website is pretty simple. It is just a text with a circle next to it, in the middle of a rounded rectangle.

Fig. 3.6, Replicating buttons, (04/05/2025)

Last but not least, I searched for stock images online for replacing the original photos.

Click here to open the links for images used.

This is the final result of the replica.

REFLECTIONS

So, turns out replicating a website took me quite some time. I thought it would be pretty easy since we were only told to replicate. All of these exercise made me pay attention to details in websites more. Graphics and icons are used but was put on a specific area to enhance the looks of the site. White space is used very evidently to minimize distractions and highlights important information and details on the site.

Comments

Post a Comment