Exercises: Website Replication

23/04/2025 – 07/05/2025 (Week 1 – Week 3)

Valerius Ethan Wirawan / 0372774

Interactive Design / Creative Media / School of Design 

Exercise: Website Replication

---

TABLE OF CONTENT

1. Lectures

2. Instructions

3. Exercise

4. Feedback

5. Reflection

6. Further Reading

---

1. LECTURES

Week 3

Website structure is important to enhances user experience, SEO, and performance
Helps users find information easily.

Main Website Components

• Header: Top of page; includes logo, navigation, contact info. Provides quick access to key areas
• Body: Main content area; contains text, images, videos. Requires clear, organized layout
• Footer: Bottom of page; includes copyright, links, contact info. Offers closure and extra navigation.

Content Organization

• Use heading tags (H1, H2, H3) for structure
• Group related content logically
• Use clear, descriptive labels

Navigation Menus

• Guide users through the site
• Keep labels simple and concise
• Use dropdowns for complex menus

---

2. INSTRUCTION

---

3. EXERCISE

Exercises: Website Replication (Adidas Malaysia)

Firstly, inspect the Adidas Malaysia website and run the command 'full screen capture'. Then the capture image was place in Adobe Illustrator with artboard bounded into image. Multiple layers were used to make the replication; template (opacity dimmed 50%), shapes, text. These multiple layers help me on my work process.

To identify the fonts on the websites, ChatGPT was used.

The most challenging part is to do 'kerning' adjusting letterforms spacing to match the original website. The next level was to adjust the leading (space between baseline) when there are paragraphs.

Fig. Final Outcome Adidas Malaysia Website Replication

Exercises: Website Replication (Trezor)

The process for the Trezor website replication is using the same process.

Fig. Final Outcome Trezor Website Replication