Interactive Design | Exercise 2

21.04.2025 - 30.04.2025 ( Week 1 )

Taylor's University

Shubashini a/p Subramaniam / 0367697 / Bachelor of Design (Hons) in Creative Media

Interactive Design (GCD60904)

---

Table of Content :

1 - Lecture

2 - Exercise 2

2.1 - Adidas

2.2 - Pandora

4 - Feedback

5 - Reflection 

---

Lecture :

Week 3 :

---

Exercise 2 : Web Replication

We are required to replicate two main pages from the websites, analyzed in Exercise 1. The goal is to understand their structure, layout, typography, and color scheme. Use the exact dimensions of the original pages. We may use stock images or icons as substitutes and Google Fonts to match the typeface. This task should be completed using Photoshop or Adobe Illustrator to help improve your web design skills and understanding of best practices.

Deliverables :

Include all processes of your replication in your e-portfolio. Provide sufficient evidence of your work and upload the source file (.psd or .ai) to Google Drive. Make sure to turn the sharing setting to public and add the link in your e-portfolio post

How I carried out this task : 

Step 1: Capturing the Screenshot of the Website.

I began by inspecting the website and running a command to capture the full size of the website.

Step 2: Creating a Artboard

Next, I placed the screenshot in Illustrator and make my artboard the same size as the screen shot

Step 3: Finding The Fonts

I went to several website to help me identify the closes match to it. I first screenshotted the font and then put into  website for them to identify it for me. Some fonts were not in the Google Font website and I had to download them from different websites.

Step 4: Designing the Main Banner

I used the shape tool to start separating the website by each section following the colours from the original website.

Step 5: Creating Content 

For the Adidas replication I found all of the image on a free image website and tried finding the closets match. However for Pandora I copied the images in the original websites as it was harder to find photographs of jewellery that had consistent effects.

Step 6: Logo's or Emojis

I used the pen tool in Illustrator to create any logo or emoticon's used in the website.

Step 7: Writing the Content

I copied the content from the original website and started to match it to get the right size and kerning in the typography.

Step 8: Final Check

Finally, I compared my replication with the original to see if anything is missed.

Results :

Website 1 : Adidas

One of the hardest parts of replicating the Adidas website was finding the right fonts. They looked simple at first, but it took me a full day to identify and match them exactly. This made me realise how much of a difference small details like typography can make in a design.

Building the site layout was also challenging because of how many elements were involved. I often got confused about which layer each element was on while working in Illustrator, which slowed down my progress. Despite the setbacks, the process helped me improve my attention to detail and taught me the importance of organizing my work more efficiently.

Behind The Scene Photos :

Final Results (JPEG) :

Final Results (PDF) : 

 

Website 2 : Pandora

For my Pandora website, I made a mistake in Step 1 by screen capturing the entire site in its mobile format instead of the desktop version. During my consultation with Sir, he pointed this out, and I had to redo the entire layout from scratch. Although it was frustrating at first, recreating the correct version was smoother this time since I had already completed the fonts and emoticons. It mainly involved rearranging the elements and adjusting their sizes to fit the proper layout. The most difficult part of this task was having to correct my initial error and once again search for the exact font, which took time and patience.

I think with both, side by side we can tell the huge difference between the mobile version and desktop version.

Emoticons created using the pen tool :

 

Final Results (JPEG) :

Final Results (PDF) : 

---

Feedback :

Week 3 : Sir, mentioned my adidas website was good, but my Pandora website replication was wrong and had to be done again.

---

Reflection :

This second task helped me better understand website structure, like how text and elements are typically positioned. Replicating the Adidas website was challenging, especially finding the exact fonts and managing multiple layers in Illustrator. For the Pandora website, I initially made the mistake of using the mobile layout in Step 1, which I had to redo after consulting with Sir. Recreating it was easier since I already had the fonts and emoticons, but the hardest part was correcting the mistake and finding the right font again. Overall, this task improved my attention to detail and design skills in Illustrator.