INTERACTIVE DESIGN / EXERCISE 2

on

21/4/2025 - 18/5/2025 / (Week 1 - Week 6)

Aricia Man Yi Xuan / 0375026

Interactive Design / GCD60904

Bachelor of Design (Hons) in Creative Media

Exercises 2 / Google Drive Link

TABLE OF CONTENT

1. Lectures

2. Instructions

3. Exercise 2: Web Replication

4. Reflection

LECTURES

Week 1-2: Click here

INSTRUCTION

Fig.1.1 Module Information

3. Exercise 2 - Web Replication

3.1 Instruction

Replicate TWO (2) main pages from the websites analyzed in Exercise 1. Match original dimensions (width and height) of the web pages. Use design software: Photoshop / Adobe Illustrator. Use any image from a stock image or a free stock icon. The image does not have to be an exact from the original website. Screengrab the website and begin to replicate the page.

3.2 Website #1

Altly - Accessible AI Alt Text

Fig.3.2.1 Process #1 - Altly Screengrab / (Week 29/4/2025)

I selected this website for replicate because it's clean and well-structured. This made it easier to analyze and replicate the elements. To begin the task, I first took a screen grab of the original website to use as a visual reference.

Steps to Screengrab: right click > Inspect > Customize & Control DezTools (3 dots) > Run Command > Type Capture > Capture full size screenshot
 
Fig.3.2.2 Process #2 - Create Artboard / (Week 2, 29/4/2025)

After that, I imported the screengrab into Adobe Illustrator and created an artboard and make it matched the dimensions of the original website layout.

Steps: Objects > Artboards > Fit to Artwork Bounds

Typeface

Fig.3.2.3 Process #3 - Choosing Typeface / (Week 2, 29/4/2025)

For the typography, I used Google Fonts to search for similar alternatives. As a result, I can't find the exact font, but I find some similar font styles such as Nerko One, Poiret One, Fugaz One, and Squada One. I found that Squada One most closely matched the original website's style, except for the letter "a" as the rounded corners are not the same as the original.

Fig.3.2.4 Process #4 - Typeface for contents / (Week 2, 30/4/2025)
For the contents typeface, I used Segoe UI Variable and Arial. Both of them closely resembled the original font and look. I observed that the letter "i" and full stop in Segoe UI Variable's letter had circular shapes similar to the original. However, the letter "C" was slightly narrower than the original, which made it not a perfect match.

Kerning

Fig.3.2.5 Process #5 - Kerning / (Week 2, 30/4/2025)

I adjusted kerning manually for headers and body text to the original website.

Image Used

Fig.3.2.6 Selected Images / (Week 2, 30/4/2025)

For images, I used Pexel.com to track the image I want and similar to the original.

Colour Palette

Fig.3.2.7 Colour Palette / (Week 2, 30/4/2025)
  •  Blue (#0098FF)
  • White
  • Black
Process on Clipping Mask

Fig.3.2.8 Process #6 - Altly / (Week 2, 30/4/2025)

For the homepage of the title "altly", I used the clipping mask tool to fit the image within the letterforms. I adjusted image cropping and positioning to match the layout.

Fig.3.2.9 Process #7 - Profile / (Week 2, 30/4/2025)

For the profile image, I also applied a clipping mask for it.

Process on Aligning

Fig.3.2.10 Process #8 - Aligning / (Week 2, 30/4/2025)

I double-checked every element, such as the text, images, icons, and buttons, to see if they're the same composition as the original. I used lines and squares to check the horizontal alignment and the spacing between sections and elements.

Process on Replicating Icons

Fig.3.2.11 Process #9 - Icons / (Week 2, 30/4/2025)
Since I can't find the specific icon used on the site, I decided to create the icon. 
Steps: Pen Tool > tracing the outline > adjusted the anchor points > fill in colour (Eyedropper Tool).

Process on Replicating Background

Fig.3.2.12 Process #10 - Background / (Week 2, 30/4/2025)

Steps: Ellipse Tool > Create an oval shape > Create a bigger oval shape (opacity: 0%) > Select Both > Blend Tool > Adjusted the opacity

FINAL OUTCOME

Fig.3.2.13 Final Outcome - Comparison #1 / (Week 2, 1/5/2025)

Fig.3.2.14 Final Outcome - Comparison #2 / (Week 2, 1/5/2025)

Fig.3.2.15 Final Outcome: Altly - PDF / (Week 2, 1/5/2025)

3.3 Website 2

Siena Film Foundation

Fig.3.3.1 Process #1 - Siena Film Foundation Screengrab / (Week 2, 2/5/2025)

I chose to replicate the Siena Film Foundation website. The site has a cinematic aesthetic, bold typography, and a soft contrast colour palette.

Typeface

Fig.3.3.2 Process #2 - Choosing Typeface / (Week 2, 2/5/2025)

For the typography, it was difficult to find the original typeface used on the site, and I almost viewed all the Google Fonts provided. The original font had rounded anchor points, which made it harder to find. However, I couldn't find an exact match, so I compared (#1) these similar options I found:
  • Chelsea Market: Lacked the rounded anchors but had a similar textured and sized feel.
  • Syne Mono Regular: Had rounded details but was too thin and felt like polygons.
  • Special Elite Regular: Not suitable as it's a Serif type but had a quite similar feel.
I chose another word, "SIENA" to compare (#1) , and finally decided to go with Chelsea Market as it had a more matched tone. However, the letter "I" in Syne Mono is obviously not similar to the original font.

Kerning

Fig.3.3.3 Process #3 - Kerning / (Week 2, 3/5/2025)

I adjusted kerning manually to match the original.

Image Used

Fig.3.3.4 Imaged Selected / (Week 2, 3/5/2025)

I sourced images using the image tracker website, ensuring they closely matched those seen on the original website. I focused on a similar composition and atmosphere to maintain the original style.

Colour Palette

Fig.3.3.5 Colour Palette / (Week 2, 3/5/2025)
  • Black
  • Red (#E50000)
  • White (#F7F5ED)
Process on Replicating Background

Fig.3.3.6 Process #4 - Background / (Week 2, 3/5/2025)

I first use the rectangle tool to draw all the base and frame of the background. 

Process on Adding Gradient

Fig.3.3.7 Process #5 - Gradient / (Week 2, 3/5/2025)

To replicate the visual depth, I added a black gradient "multiply" on top of the images. I used a gradient with 0% transparency, fading from black to transparent.

Process on Replicating Icons

Fig.3.3.8 Process #6 - Icons / (Week 2, 3/5/2025)

I created the icons referencing the site. For the "menu" icon, I use the rectangle tool to draw the shape with inverted inner corners. I also added an outer glow to the icon.

Fig.3.3.9 Process #7 - Logo / (Week 2, 3/5/2025)

For the logo, I used a dashed line stroke for it, ensuring the line weight and spacing matched the original.

FINAL OUTCOME
Fig.3.3.10 Final Outcome - Comparison / (Week 2, 3/5/2025)

Fig.3.3.11 Final Outcome: Siena Film Production - PDF / (Week 2, 3/5/2025)

REFLECTION

Experiences:

These exercises let me replicate a website using Adobe Illustrator. It was a challenging yet playful experience. At the beginning, I felt overwhelmed because I have to place the information and icons very precise to maintain the proportions, spacing, and layout. I take screenshots of the original website and traced each section.

Observation:

I noticed this tasks have a lot of small details, like we need to have precise spacing, alignment, kerning, and layout composition. I also figured out more useful tools and skills when using Illustrator.

Findings:

I feel more confident that I want to choose UI/UX as my major in year 2. I know these are just basics, and there will be more difficult things to learn in the future, but I'm willing to take on the challenge.












 

Comments

Post a Comment