INTERACTIVE DESIGN - EXERCISES 2

31/04/25 - 06/05/25 ( Week 2 - Week 3 )
Carren Yeliandi / 0376990
Interactive Design / Bachelors of Design in Creative Media / Taylor's University
Exercise 2

TABLE OF CONTENTS

1. Lectures

2. Instructions

3. Reflection

Lectures

USABILITY : DESIGNING PRODUCTS FOR USER SATISFACTION

What is Usability? -> How easy it is to navigate through a website

Key Principle of Usability

Consistency (Easily recognizable pattern)
Simplicity (Minimal and obvious steps during navigation)
Visibility (Easily seen)
Feedback (Results of user interaction)
Error Prevention (Alerts during error)

BACK TO TABLE OF CONTENTS

Instructions

Exercise 2 - Web Replication

"Your task is to replicate 2 existing websites."

I couldn't possibly choose the website that I had analyzed due to the amount of animation in all the website that I had chosen. So, I chose 2 other website that I thought were more possible to replicate for me.

GOOGLE DRIVE LINK

A. OH ARCHITECTURE

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

I first screenshotted the website. I tried it once in class and did it again when I went to replicate it because I realized that the picture had changed.

Fig 2.1. THE WEBSITE (Week 3 ; 5/5/25)

I then went ahead to Adobe Illustrator and "Open document" then selected the second screenshotted image. However, the second version of the website that didn't had the text link at the bottom so I cropped it from the first screenshot and pasted it on the second screenshot.

Fig 2.2. The first screenshot (Week 3 ; 5/5/25)

Fig 2.3. Before the addition of the bottom text link (Week 3 ; 5/5/25)

Fig 2.4. After the addition of the bottom text link (Week 3 ; 5/5/25)

I then made the layer with the screenshots into template and dimmed it into 20-50% depending on how much I want to be able to see the difference.

Fig 2.5. Dimmed template of the original website (Week 3 ; 5/5/25)

I then downloaded all the image directly from the website and simply cropped and resized it to be as similar as the original website as possible.

Fig 2.6. Inserted Image (Week 3 ; 5/5/25)

Fig 2.7. Images after adjusting (Week 3 ; 5/5/25)

IMAGE USED G-DRIVE LINK

I asked "ChatGPT" about the font and typeface that was used in the website and it suggested "Helvetica Neue" or "Arial" which is pretty similar to the font used however there was still some difference. Perhaps the maker distorted the font to make it like that or simply used a different font.

Fig 2.8. Trying out different settings for the text (Week 3 ; 5/5/25)

In any case, I didn't distort the font at all and tried to make the size of the text in a round number. The fonts that were used were mostly Helvetica Neue Bold, Medium and Regular.

During arranging and typing the text, I made sure to kern (adjusting the spacing between each letter) text that I thought had a different spacing compared to the original to make it as similar as possible to the original website.

Fig 2.9. Examples of fonts used (Week 3 ; 5/5/25)

I realized midway that the apostrophe and quotation mark used is straight, so I copied it from google then change the font and typeface into either Helvetica Neue or Arial depending if it's slightly curved on the bottom (Arial) or if it's straight (Helvetica Neue).

I also realized that the punctuation marks used were smaller than the texts itself, some stays the same while some can went down about 9 points, depending on the size of the texts.

After the text were finished, I then used the line tool , the pen tool, the cursive tool and the ellipse tool to make the graphic element such as the lines, the circle outline and the call to action button.

Fig 2.10. The original website template (Week 3 ; 5/5/25)

Fig 2.11. The replication (Week 3 ; 5/5/25)

When I was comparing both pages (the original website and the replication), I realized that the first picture on the front of the landing page uses a slightly darker image. So I added a black rectangle that I then lowered the opacity to replicate it.

Fig 2.12. The original website template (Week 3 ; 5/5/25)

Fig 2.13. The replication (Week 3 ; 5/5/25)

Fig 2.14. The adjusted replication (Week 3 ; 5/5/25)

After that I tried to export it in PDF and JPG but for some reason I could only export the JPG.

Fig 2.15. THE REPLICATED WEBSITE (Week 3 ; 5/5/25)

It was after I finished and tried to download the pdf again that I noticed something was wrong. At the time I thought it was because of the long canvas or something. I only realized that I did something wrong when I went ahead and made the second website replication, where I made a new document instead but in the size of the screenshotted image. I realized that the reason why I can't download the pdf was because of the way I made the canvas for this task, which is by open document -> the screenshotted image.

So I immediately tried to move all the work from the wrong canvas and move it to the new canvas (the same size of the image from the image information which is ... x ... px) and resized it. The font size is now not a rounded number but at this point I just decided to let it be, as long as it looked similar, it's fine, but most of the font size went up around 4x the original size. The only thing that I needed to fixed was the size of the circle outline as now it looked too thin, so I had to add 6 pt into every circle outline.

After everything was fixed, I could finally export it in PDF.

B. URBAN JAVA

link : https://www.urbanjava.studio/

Just like before, I screenshotted my chosen website. Then I created a new document with the exact size of the screenshot and inserted the screenshot in then made it into a template and dimmed it until around 50%.

Fig 2.16. The Original Website (Week 3 ; 5/5/25)

I downloaded most of the image and videos in the website, but some of them were not possible so I opened each link and download any image in the linked website.

When I was inputting the image, I realized that you can not insert a Mp4 video into Illustrator. I decided to finish all of the other part first before deciding on what to replace the Mp4 video with.

I then just resized and if needed, crop, the images to be almost the exact same size as the original with the only difference is that most of them don't have rounded edges like the original website.

Fig 2.17. The original website template (Week 3 ; 5/5/25)

Fig 2.18. The replicated images (Week 3 ; 5/5/25)

I also used ChatGPT again to ask about what fonts were used. The answer given were "Helvetica Now Display" and "Suisse Int'l", After trying them out, I felt that the "Suisse Int'l" were definitely the closest looking font to the one used.

I used the typeface "Suisse Int'l" with the font being "Bold", "Medium" and "Regular" depending on how thick the text I'm replicating is.

Fig 2.19. The original website template (Week 3 ; 5/5/25)

Fig 2.20. The replicated texts (Week 3 ; 5/5/25)

I also made sure to kern (adjusting the spacing between each letter) text that I thought had a different spacing compared to the original.

I then added the circle details in the website using ellipse tool and the line was added using pen tool with 1,5 pt thickness.

Fig 2.21. The replicated texts and graphics (Week 3 ; 5/5/25)

So in the end , instead of the video, I did the exact same thing as before and open the linked website then download or copy any image that is able to be inserted into Illustrator and then place in inside the replicated website to be resized or cropped if needed.

Fig 2.22. The rest of the image inserted (Week 3 ; 5/5/25)

I the realized that some of the text is not black so I just turned off the template option and turn off the view button on the replicated layers and eye drop the color directly then copy the code. Then I just undo all of that and the select the text that has the different color (the sub-title of each image) and pasted the color code.

Fig 2.23. Adjusting the texts color (Week 3 ; 5/5/25)

After that I made sure that the picture and text were aligned well by using the "Align" menu which is available in the "Properties" menu.

Fig 2.24. The Replicated Website (Week 3 ; 5/5/25)

BACK TO TABLE OF CONTENTS

Reflection

It was fun, but looking at the details, hurt my eyes so badly. I also stared at the screen very closely to try to see the all the details. The first website took a lot more time than the second one, I think it's because I weren't too knowledgeable about what I'm doing the first time around and for the fact that the second one had a lot of repetition and didn't need a lot of kernings (spaces between each letter). My back hurts a lot though because of me hunching down to look at the screen of my laptop very closely.

BACK TO TABLE OF CONTENTS

Search This Blog

Carren Yeliandi (0376990)