Interactive Design：Exercise 2

 

TANG LILIN (0376668)

Interactive Design

Exercise 1

21/4/2025 - 30/4/2025 （ Week 1 - Week 2 ）

Bachelor OF DESIGN (HONERS) IN CREATIVE MEDIA

---

LIST

• INSTRUCTION

• PROGRESS

• FEEDBACK

• REFLECTION

---

INSTRUCTION

---

PROGRESS

#Website 1: LUMOS

For the Full size screenshot: First, I downloaded the full screen size screenshot from the website, but found that I couldn't capture the entire layout of the website, so I took screenshots one by one and stitched them together to form a full website screenshot

For the materials needed for the website: I found the background materials from the website, and the texture materials for some text boxes on the page.

Website materials I found here:

fig1.1.1 Where I Download the Materials

Below are all the materials I found on the website:

fig1.1.2 All the Materials

Below are the fonts needed for the website:

fig1.1.3 the Needed Fonts

For the production process: There are a lot of fonts in the LUMOS website. I first compared the fonts and found that the website mainly used "IMPACT" and Helvetica Neue World 55 Roman & Helvetica Neue World 75 Bold. However, the text used in the website needs to be readjusted by kerning.

Then I started to make the page background.

I found that these materials cannot be used directly and need to be processed.

First, make a solid color background similar to the background color, use the texture to multiply the texture, and cover the texture on the solid color background.

This is the detail steps of making the background of each part.

fig1.1.4 the detail steps for each background part

All text needs to be re-kerned. This is the kerning progress.

fig1.1.5 the progress for kerning

This is what it looks like after I added all the elements (on the website screenshot)

fig1.1.6 after I finish all the text and graphic

Source File Screenshot

fig1.1.7 screenshot for the LUMOS source file

#Website 2: RUSSIAN MOCKUPS

For the Full size screenshot: First, I downloaded the full screen size screenshot from the website.

For the materials needed for the website: I downloaded the photos and font files needed for the homepage from the website. The two fonts used were RF Dewi Ultrabold & Semibold.

fig1.2.1 the font I download

Regarding the production process: The RUSSIAN Mockups website mainly consists of text, graphics and pictures, but no texture. So, I made a solid color background at the beginning. And started to work on it bit by bit. First, I used the banner and title in the website to quickly divide the structure and area of ​​the website. Then I started to make the text part. Even though I downloaded the original text, I still needed to kerning the text. After processing these, I started to add pictures.

Below are the detailed steps. The left side shows the effect after I finished making it, and the back is the effect without adding graphics.

fig1.2.2 the RUSSIAN MOCKUPS part

For the RUSSIAN MOCKUPS part:

Step 1: Create the RM logo and the cart icon.

Step 2: Create the graphic in this part

Step 3: Add text and kerning

fig1.2.3 the special offer part

For the special offer part:

Step 1: Create the graphic in this part

Step 2: Add text and kerning

Step 3: Add the required photos

Step 4: Add a layer of black low-transparency rectangle to make it more compatible with the original website

fig1.2.4 the best sellers & new ones part

For the best sellers & new ones part:

Step 1: Create the graphic in this part

Step 2: Add text and kerning

Step 3: Add the required photos

fig1.2.5 the introduction part

For the Introductions part:

Step 1: Create VISA, MASTER, MIR logos

Step 2: Create the graphic in this part

Step 3: Add text and kerning

Step 4: Add the required photos

fig1.2.6 the last part

For the last part:

Step 1: Create the graphic in this part

Step 2: Add text and kerning

Step 3: Add the required photos

Source File Screenshot

fig1.2.7 screenshot for RUSSIAN MOCKUPS file

SUBMISSION

Since the website is too long to be uploaded directly to Blogger, I put the final work and source files of the website in Google Drive.

If the artboard in the AI ​​file is too long, it will not be previewed on Google Drive (which means the upload will fail), so I only put a small part of it.

this is four files I put in the Google Drive for Exercise 2

HERE IS my google drive LINK for Exercise 2

https://drive.google.com/drive/folders/1ghiEGUN3Y28PmvzeuolPsqjdhleQKQVU?usp=drive_link

LUMOS FINAL WORK

RUSSIAN MOCKUPS FINAL WORK

---

FEEDBACK

Mr. Shamul told me the work is ok.

---

REFLECTION

Exercise 2 is not too difficult for me, but it is quite complicated. When replicating each website, every part needs to be made the same as the original website. There are many details to consider, such as the need to set up reference lines at the beginning, the placement of each text, and how to adjust the kerning between each letter to be closest to the original. The most troublesome thing for me is the adjustment of kerning, because each text needs to be readjusted, which is very time-consuming.

Even if it looks like a website with a simple page design (RUSSIAN MOCKUPS), it still takes time to make it. Even if it is simple, there will be many details to deal with, such as the distance between all elements is the same.

During the production process, I found that if we set up production rules from the beginning, it will make the process simpler. For example, first make all the graphics in the website, then start making the text part, and finally add photos and production effects.