Interactive Design - Exercise 2

on

29.04.2025 - 06.05.2025 / Week 2 - Week 3

Brenda Wynn / 0372128

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

Exercise 2


JUMP LINKS


INSTRUCTIONS


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

EXERCISE 2 : WEBSITE REPLICATION

The exercise we were given is to replicate two existing main pages of our chosen website using either Adobe Illustrator or Photoshop. The purpose of this exercise is for us to gain a better understanding of a website structure and also to improve our skills on operating the two Adobe software. I chose to use the Adobe Illustrator software to do this exercise.

Website 1: OH ARCHITECTURE

Before starting to replicate the website structure, I firstly captured the full screenshot of the website. This is the screenshot of the original website page I am going to replicate: OH ARCHITECT SCREENSHOT

Figure 1.1 website 1 replication progress 1(30/04/2025, week 2)

To start, I looked for a similar font and I chose to use the Inter font for this replication. After finding a font, I made the template first using the screenshot by reducing the opacity and making the artboard as big as the screenshot. Though for me to replicate and see the template much better, I set aside the artboard first because most of the colors from the original website was white. Only then, I can start typing the texts and brand name (Figure 1.1). I also used tracking on the texts to make it more similar to the original website page. From the first background of the original website we see is a bit dark, so I added another layer of a blank black page on top of the background and reduced the opacity.

Figure 1.2 website 1 replication progress 2(30/04/2025, week 2)

For the elements like in the top right corner of the first page (Figure 1.2), I used a combination of the rounded rectangle tool and the ellipse tool. The alterations I made used a variety of tools, such as: the add anchor point tool, pathfinder, etc.

Figure 1.3 website 1 replication progress 3(30/04/2025, week 2)

As for the images, I used the clipping mask tool by layering the desired shape on top of the image and clipped masked it (Figure 1.3). This is the collection of images that I used for this replication: SOURCE.

Figure 1.4 website 1 replication progress 4(30/04/2025, week 2)

For the big bodies of text (Figure 1.4), I used the line spacing tool to make it more similar and readable. In this case, I also used the tracking tool to space the sentences better.

Figure 1.5 website 1 replication progress 5(30/04/2025, week 2)

Lastly, I used the knife tool, line tool, pathfinder, etc to create the logo in the last page (Figure 1.5). Though I noticed a slight difference in font on the sentence "Member Australian Institute of Architects", so I used the Candara typeface for it.

This the replication result of the first website in comparison to the original and the final result:


Website 2: AUGMENT THERAPY

To start the second website replication, I did the same thing as the first replication where I made the layout and re-sized the artboard according to the original website screenshot first. But, the difference is that I used another smaller copy of the original website screenshot on the side because of the various colors it has. This is the full screenshot of the second website page: AUGMENT THERAPY SCREENSHOT

Figure 1.6 website 2 replication progress 1(01/05/2025, week 2)

After settling the layout and other guides, I chose a font that is similar to the original which is the Roboto font and for the logo I used the Myriad Variable Concept font. Then, I started making the elements using the rectangle tool and the rounded rectangle tool (Figure 1.6). As for the logo of the brand, the spacing between the letters was a bit far so I used the kerning tool to help with the space and the eyedropper tool to replicate the same colors used for the logo. For the rest of the texts and bodies of information, I used the tracking and line spacing tool to adjust it.

Figure 1.7 website 2 replication progress 2(01/05/2025, week 2)

When all the elements on the first page was finished, I started on the background. This website first page background had a similar like gradient look on the top part. So, what I did was firstly use a clip mask to get the desired image size using the help of the rectangle tool. Then, I used the rectangle tool again to create the gradient look on the top of the image by adjusting the opacity (Figure 1.7). For this website, there is quite a variety of images that I used and here are the sources: SOURCE 1, SOURCE 2, SOURCE 3, SOURCE 4, SOURCE 5.

Figure 1.8 website 2 replication progress 3(01/05/2025, week 2)

Because this website provided a small video (Figure 1.8), I decided to replicate a pause screen using the ellipse tool, line tool, pathfinder, etc. For the other elements, I used a lot of the vector shapes to make the frames and other elements.

Figure 1.9 website 2 replication progress 4(01/05/2025, week 2)

Lastly, there are social media logos that is placed on the lower left corner of the last page that directs us to their social media platforms. To replicate the details and logo correctly, I used the vector shapes and pathfinder for all the logos. Though the bird (Figure 1.9) was a different case, because I used the blob brush tool and pathfinder to copy the same details it had.

This the replication result of the second website in comparison to the original and the final result:

Drive link: https://drive.google.com/file/d/1w_Op3w_YwzWEx4ce_eVDBL0kuVa_OzBi/view?usp=sharing

REFLECTION

On this second exercise, I was able to get a better understanding about a website's structure and what makes a website user friendly. Not only that, I was also able to develop my skills on Adobe Illustrator and navigate my way better around the software. Though at first this exercise might seem easy, it all comes down to the little details that I had trouble with. I actually took longer trying to figure out on how to get the little intricate details as similar as possible compared to the big elements.

However, I did notice that I can learn about the tools I haven't got a better understanding of very quickly. The reason could be because of my nature of wanting to understand things first before moving on. Even though I was quite quick on learning the new tools on the software, I did notice that I took longer to finish replicating the websites compared to my peers. Because of that I realized that I might need to work on my technical skills much more.

Even with all the ups and down I encountered while working on this exercise, I did learn and developed my skills on the software. Not only that, but I also learned about website structures too. While working on the website, I couldn't help but notice that I might have been a bit more distracted that I would have. After some self-reflection and recalling, I think that is because of the amount of different images and elements that is needed to be included in the website replication that made me a bit distracted. However, I did find a way for me to be much more focus and not all of the place when studying. For now, I will continue to work on my technical skills on the software and also to gain more knowledge regarding websites.

Comments

Post a Comment