Interactive Design | Exercise 2: Web Replication
Interactive Design | Exercise 2: Web Replication
April 23, 2025
30/4/25 - 7/5/25 (Week 2 - Week 3)
Hu Yao Ping | 0376768
Bachelor of Design (Honours) in Creative Media | Taylor's University
Exercises 2：
Web Replication
[Table of Contents]
1. Instructions
2. Exercise
3. Feedback
4. Reflection
[Instruction]
[Exercises]
In this test:
Operation requirements:
1. Select a website:
Copy the homepages of any two of the five websites you analyzed
previously.
2. Keep the structure consistent:
Copy the layout structure, size (width and height), color
style and font style of the webpage; Images can be replaced with
similar free materials; Fonts can be downloaded from Google Fonts.
3. Use software:
Photoshop (.psd) or Illustrator (.ai) is recommended for
production.
Submission requirements:
1. Process records:
Record the entire copying process in your
e-portfolio;Include screenshots, typography analysis, design
choices, font replacement instructions and other process evidence.
2. Upload source files:
Upload the source file (.psd or .ai) to Google Drive; Set it
to "public sharing" and paste the link to your e-portfolio.
Process work:
First, I enter the web page and capture the entire web page screen:
Fig 1
Then create a canvas and pour the web page into it:
Fig 1.2
Next, select the photo, import it and adjust it to the same position and size on canvas 2:
Fig 1.3
The last step is to add details to the web page. For example, if there is a colored box, you need to create a rectangle and absorb the color for adjustment. Then add text according to the content and find a similar font:
Fig 1.4
Final Result:
Then create a canvas and pour the web page into it:
Next, select the photo, import it and adjust it to the same position and size on canvas 2:
Fig 2.3
The last step is to add details to the web page. For example, if there is a colored box, you need to create a rectangle and absorb the color for adjustment. Then add text according to the content and find a similar font:
Fig 2.4
Fig 2.5
Final Result:
Fig 2.6
[Reflection]
Experience
For this exercise, I used Adobe Illustrator to replicate two distinct websites: Wemake and Adidas UK. Wemake is a creative and experimental site with asymmetric layouts and bold visual styles. I focused on accurately reproducing its unique typography, color schemes, and layout details. Adidas UK is a more standard commercial e-commerce website with clear structure and emphasis on product display and navigation. Adobe Illustrator’s powerful vector graphic and design tools allowed me to precisely create icons, buttons, and interface elements, speeding up the design process and improving accuracy in visual details.
Observation
I observed that Wemake emphasizes visual personality and expressive design, using bold layouts and vibrant colors to create a strong visual impact. In contrast, Adidas UK focuses on functionality and user experience, with a clean, easy-to-navigate design. Through replicating these sites with Adobe Illustrator, I gained insight into the different design philosophies and approaches behind creative versus commercial websites. While Illustrator excels at detailed graphic creation and color work, webpage layout and interactive design often require additional tools or manual adjustments.
Findings
This exercise helped me realize that different types of websites serve different goals—creative sites prioritize visual impact and uniqueness, while commercial sites focus on clarity and usability. Using Adobe Illustrator enabled me to efficiently craft high-quality visual elements, but I also learned that web design extends beyond graphics to include interaction and responsiveness. Moving forward, I plan to combine multiple tools to enhance both the visual and functional aspects of web design.
Comments
Post a Comment