Interactive Design / Exercise 2 - Web Replication

EXERCISE 02 - WEB REPLICATION

For this exercise, we need to replicate two main pages from the specified websites to enhance our understanding of web design structure, typography, layout, and also organization. I have selected two pages from the provided link and chosen to replicate the websites Ocean Health Index and Bandit Running.

*** THIS IS JUST THE WEBSITE COVER DO NOT MIND IT***

Selected website

• Web 01 -  Bandit Running
• Web 02 -  Ocean Health Index

View replicated website here - FIGMA LINK

Replicating Website 01 - Bandit Running

Figure 1.1 Original (From Website)

Figure 1.2 Replicated website (created using Figma)

Replication Website 02 - Ocean Health Index

Figure 2.1 Original (From Website)

Figure 2.2 Replicated website (created using Figma)

Figma Screen (Edit Mode-While Doing)

Process

Figure 3.1 Bandit Running in Figma

Figure 3.2 Bandit Running in Figma ( With Ruler)

Figure 3.3 Comparison between replicated and original (Bandit Running)

Figure 3.4 Ocean Health Index in Figma

Figure 3.5 Ocean Health Index in Figma ( With Ruler)

Figure 3.6 Comparison between replicated and original (Ocean Health Index)

SHORT REFLECTION FOR EXERCISE 02

In Exercise 02, I was able to create and replicate a website while observing its layout and structure. At the same time, I became more familiar with how to use Figma.

Direct to Jump Link