Labels

Interactive Design - Exercise: Web Replication

10/10/2024 - 17/10/2024  | Week 03 - Week 04

Koh Sher Wei | 0353816

Interactive Design | Bachelor of Design in Creative Media

 
Instructions : 


Websites given:

Steps to screenshot a website:
1. Right click on a blank space on the website.
2. Click on "Inspect".
3. Once the html dock pops up, click the 3 dots on the top right corner.
4. Click on "Run Command"
5. Search "Screenshot".
6. Click on "Capture full screenshot" then let the screen load.

 

 ^ Back to Top ^
Website Replication 01 : 

Bandit Running:
Font used: 
- Sans Serif ( Bold )
- Helvetica ( Regular )

Colour Palette: 
- Black
- White
fig 1.1 Colour palette

Layers and Comparison
Images taken from: 
- Unsplash
- Pexel

fig 1.2 Layer breakdown and comparison (real web vs replication) 

fig 1.3  Text design breakdown

fig 1.4 Background design breakdown

After opening the website screenshot in Illustrator, I made a copy of it into a second artboard. So I had one artboard for reference and made the other one into a template. I copied the texts first, then added another layer below to import images. I wasn't able to find a free download for the original font from the website "tomato grotesk", so I used Helvetica and Sans Serif instead.

For this website, the layout was pretty simple and straightforward. The only parts that I had to manually replicate were the "MEMBERSHIP" text and background. As show in the fig1.3, I added a textbox and created outlines for the texts to add gradient. Then, I layered it with a white copy text below to give a 3D effect. For the background, I couldn't find a similar photo so I just tried to add a few light streaks to a black box. I did this by adding spot gradients, and also applied grain effect to make the gradient look smooth.

Final Web replication

fig 1.5.1 Bandit web replication (top)

fig 1.5.2  Bandit Web Replication (bottom)
fig 1.6  Bandit Web Replication [PDF]

^ Back to Top ^

Website Replication 02 : 

Ocean Health Index
Font used: 
- Arial ( Regular and Bold )

Colour Palette: 
- Blue 
- White
fig 2.1  Colour Palette

Layers and Comparison
Images taken from: 
- Unsplash
- Pexel 

fig 2.2  Layer breakdown and web comparison (original and replicated)

fig 2.3 gradient and website background

fig 2.4 photo element breakdown

I proceeded with the same process as the previous web replication. Two layers, one for text and the other for images. For this website I only used "Arial" font, in regular and bold. The text replication is relatively simple so it didn't take very long. 

As for the images, I tried looking for similar photos or those of relevance, and adjusted them according to the reference. However, I was unable to find photos with exact colours, so i opted for images with a lighter shade of blue. I adjusted the gradient above the image so it blends in the background, as per the reference photo. 

Final Web replication

fig 2.5.1 Ocean Health Index web replication (jpeg)

fig 2.5.2 Ocean Health Index web replication (PDF)

 ^ Back to Top ^


Labels:

Popular Posts