Interactive Design: Exercise 2

 21.04.2025 - 12.05.2025 / Week 1- Week 4

Angelique Svetlana Pekasa / 0377365

Interactive Design / Bachelors Of Creative Media / Taylor's University

Task 1: Exercise 1 

---

Table of contents

1. Lectures
2. Instructions
3. Exercises
4. Reflections

---

Lectures

Week 2

In this week we were told that consistency creates pattern and the key to most websites are the hit areas of a screen that resembles an "F" pattern which shows on where our eyes look at the screen the most. In this week's class we were also told to form a group and make paper simulation of Taylor's navigation website. Shown below is my group's work.

Fig 1.1, Paper simulation, Week 2, (07/05/2025)

---

 Instructions

---

Exercise 2

TASK INSTRUSTIONS

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. 

Free image:
https://www.pexels.com/

1. OHArchitecture

First I went to Google and search for free stock images from Freepik and other websites. Shown Below are all the images that I used. 

Fig 2.1, Images used, (Week 2, 02/04/2025)

After that I began to work in AI in order to replicate the web. Shown below is how I do so.

Fig 2.2, Process work, (Week 2, 02/04/2025)

I also searched for the fonts used, and for this website they only use Helvetica regular and Helvetica Bold. Then I began to track and kern all the information in it. Shown below are some of the before and after pictures of tracking and kerning.

Fig 2.3, Process work, (Week 2, 03/04/2025)

I then repeated this process for the rest of the information. The website also have some graphic features in it, so I used the some tools to make it in adobe Illustrator, shown below is how I do it.

Fig 2.4, Process work, (Week 2, 03/04/2025)

Shown below is the final outcome.

Fig 2.5, Final Outcome, (Week 2, 03/04/2025)

Fig 2.6, Final Outcome, (Week 2, 03/04/2025)

2. Seriti

For this exercise I chose to replicate Seriti's website. First, I went to Google in order to search for images that resembles the website. Attached below are all the images used. 

Fig 2.6, Images used, (Week 2, 04/04/2025)

Fig 2.8, Images used, (Week 2, 04/04/2025)

I also searched for the fonts that's used in the website, shown below is the most similar fonts I found and an example of where I used them.

Fig 2.9, Process work, (Week 2, 04/04/2025)

Then I began to add pictures and font. I also track and kern the information and phrases to exactly duplicate the website as similar as possible.

Fig 2.10, Process work, (Week 2, 04/04/2025)

I also went to photoshop in order to mask the image into the font and then I brought it back into Illustrator. Shown below is how I do so.

Fig 2.11, Process work, (Week 2, 04/04/2025)

Shown below is the final outcome.

Fig 2.12, Final Outcome, (Week 2, 04/04/2025)

Fig 2.13, Final Outcome, (Week 2, 04/04/2025)

---

Reflections

After doing the web replication I have realized that there were a lot of effort that is put into tracking and kerning. It took me a long while to get it just right, each words and even each letters could have different spaces from each other although they are within the same sentence. In addition to that I have also learned that fancy fonts are rarely used in websites, as simple ones are enough and get the information straight to the users.