Interactive Design: Exercise 2 - Replicate websites
30/04/2025 - 07/05/2025 / Week 2 - Week 3
Ye YingYing / 0364398
Interactive Design / Bachelor of Design
(Hons) in Creative Media / Taylor's University
TABLE OF CONTENTS
INSTRUCTION
Exercise 2
- Web Replication -
Google Drive link (all works):
https://drive.google.com/drive/folders/1HmmugbIqJEyJpx0OJ2Yyd-6Ffajr1Hbq?usp=share_link
1. Adidas Online Store - www.adidas.com.my
Working Progress
- I began by selecting several fonts that look similar to the original website’s typefaces, and I compared them side by side to find the best match. For my replication, I decided to use Roboto, IBM Plex, and Oswald.
- Once the typefaces were chosen, I started the replication process by lowering the opacity of the full-screen screenshot and placing it as a reference layer. Then I just align my text over them.
- After inputting all the text, I carefully adjusted the font size, kerning, leading, letter spacing, and color for each text box to closely match the original website.
- After finalizing all the text, I moved on to creating the basic graphic elements of the website. For example, the color blocks behind the text, text borders, and other UI components.
- Rectangle Tool: To create the text color blocks and borders
- Ellipse Tool: To create the button
- Line Segment Tool: To create components such as the slider, loading bar, and section dividers.
- After completing the basic graphic elements, I moved on to the more challenging parts, which are the Adidas logo, menu bar icons, and the social media icons.
- Adidas logo: I used the Pen Tool to trace the outline first, then applied the Shape Builder Tool and Pathfinder to combine shapes and remove the extra parts.
- Menu bar icons: I used the Pen Tool to trace the outline.
- Social media icons: I downloaded the icons from Freepik.com, placed an Ellipse over each one, and used masking to extract only the part I needed.
- After completing the text and graphic parts, I began replacing the original images with new ones.
- I searched for sports-related images on Pexels.com, saved the image.
- Then, back to Adobe Illustrator, I dragged out guidelines to align with the reference image, then placed all the new images accordingly and cropped the extra parts.
- For the product (white background) image, I basically followed the same steps as above. But I use the Masking Tool from Adobe Photoshop to remove the background first.
2. Wemake Projects Portfolio - www.wemake.nl
Working Progress
- I started by exploring a few fonts that look similar to the original website’s typefaces and compared them with the original to choose the closest match. For my replication, I selected the typefaces: STIX Two Text and Arial.
- Once the typefaces were selected, I started the replication process by lowering the opacity of the full-screen screenshot and placing it as a reference layer. Then, I aligned my text directly over it for accuracy.
- After inputting all the text, I adjusted the font size, kerning, leading, letter spacing, and color for each text box to match the original design. However, I later realized that the fonts I chose had slightly thicker strokes, which made the letters appear more crowded. To fix this, I increased the tracking to ensure each letter had enough space and didn’t touch the others.
- After finishing all the text, I dragged out guidelines to align with the reference image, then started to do the basic graphic elements of the website.
- Round Rectangle Tool: To create the text color blocks
- Rectangle Tool: To create large sized colour block
- Line Segment Tool: To create arrow and section dividers
- After completing the text and graphic parts, I began replacing the original images with new ones.
- I searched for interior design images on Pexels.com, saved the image.
- Then, back to Adobe Illustrator, I dragged out guidelines to align with the reference image, then placed all the new images accordingly and cropped the extra parts.
- For the logo at the bottom of the original website, I first saved each image from the original website.
- Then dragged out guidelines to align with the reference logo, then placed them one by one.
- Lastly, I had a final check on the text box and made sure I didn't miss any information.
FEEDBACK
- WEEK 3 -
General Feedback :
General Feedback :
While Mr. Shamsul went through the lecture materials for this week, he also gave us some tips for the following project. The prototype/moodboard must be detailed. Make sure to utilize enough white spaces, don't use fancy fonts (use sans serif), and keep the character line length correct.
Specific Feedback :
This week, I finished the web replication exercise and documented all the progress and others on the blog.Specific Feedback :
REFLECTION
This exercise let me have a hands-on practice in understanding web layout and design, and helped me improve my Illustrator skills. The process of finding and matching fonts, aligning text, and more helped me gain new knowledge and practice. I also found this process quite calming and enjoyable, it allowed me to focus deeply.
Observation
Throughout this exercise, I observed how small changes in typography, such as kerning, font weight, letter spacing, or leading, can make a big difference in the overall look of a website. I also noticed that even if a font looks similar, but the small differences in stroke thickness can still affect the whole visual. By doing the wemake website, I also learn that white space isn’t just empty space, it helps create balance.
Finding
Comments
Post a Comment