Interactive Design - Exercise 2
28 April 2025 - 5 May 2025 // Week 2 - Week 3
Racheal Tan Tze Rou // 0381005
Interactive Design // Bachelor of Design (Hons) // Creative Media
Exercise 2
INSTRUCTIONS
EXERCISE 2
WEB REPLICATION
For exercise 2, our task is to replicate two websites from the five that we have analyzed from exercise 1.
Chosen websites:
WEBSITE 1 : wemake
To begin with this exercise, I first screengrab the main page of the website and reduced the opacity after importing it as a template to Adobe Illustrator so I can refer it during replicating.
.png)
IMAGERY
I used pexels.com to source images that closely resemble those on the original website.
I used pexels.com to source images that closely resemble those on the original website.
LAYOUT
After adding all the images, I began creating the buttons and boxes using the Shape Tool. To ensure consistency with the original design, I used the Eyedropper (I) Tool to match the button colors precisely. This helped maintain a cohesive and visually accurate recreation of the site’s interface.
After adding all the images, I began creating the buttons and boxes using the Shape Tool. To ensure consistency with the original design, I used the Eyedropper (I) Tool to match the button colors precisely. This helped maintain a cohesive and visually accurate recreation of the site’s interface.
TYPOGRAPHY
Typefaces used: Public Sans, Tai Heritage Pro
For the serif text, I used Tai Heritage Pro, and for the sans-serif text, I chose Public Sans. Both fonts were downloaded from Google Fonts.
Figure 2.2 ; texts after kerning on original ; Week 2 (29/4/2025)
I also adjusted the kerning and tracking throughout the page to ensure the typography closely mirrors that of the original website, enhancing overall accuracy and visual harmony.
Figure 2.3 ; logo kerning&adjusting ; Week 2 (29/4/2025)
For the logos, I used Direct Selection(A) tool to edit so it resembles the original logos.
FINAL OUTCOME :
Figure 2.4 ; FINAL wemake replication ; JPEG ; Week 2 (1/5/2025)
WEBSITE 2 : TOKARA
This site wasn’t one of the five I selected in the previous exercise. I picked it instead because, although the other sites feature fascinating interactive elements, their animations and videos can’t be captured in a single image.
Same as the first website, I also started this with setting it as a template for easy reference.
Figure 3.1 ; TOKARA screengrab ; JPEG ; Week 2 (2/5/2025)
IMAGERY
I also used pexels.com to search for images that looked similar as the original website.
LAYOUT
Like what I did for website 1, I recreated the layout by using the Shape Tools to build the buttons and boxes. I then applied the original color scheme using the Eyedropper Tool (I) to ensure visual consistency.
TYPOGRAPHY
Typefaces used: Anuphan, Public Sans, Faculty Glyphic Regular
Figure 3.2 ; texts after kerning on original ; JPEG ; Week 2 (2/5/2025)
I always typed directly over the original reference with reduced opacity, then adjusted the kerning to ensure the text closely matched the original and avoided noticeable differences.
Figure 3.2 ; numbering editing ; Week 2 (2/5/2025)
To further enhance accuracy, I refined the numbering using the Direct Selection Tool (A) so it resembled the original website more precisely.
FINAL OUTCOME :
Figure 3.3 ; FINAL TOKARA replication ; JPEG; Week 2 (1/5/2025)
Comments
Post a Comment