Interactive Design - Exercise 2 : Website Replication
Interactive Design - Exercise 2 : Website Replication
30/4/2025 - 07/05/2025 / Week 2 – Week 3
Valenz Jycee Primadi / 0373407
Interactive Design / Creative Media / School of design
Exercises 2
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Website: 1 Munchies Cookies
5.Feedback
6. Reflection
It started with me doing a screen capture of the website I chose, Munchies Cookies. The screen capture used Inspect and typed the command "screen capture full-size screen."
I did research on photos that I would use to replicate the website. The photo I found is on Pexels.
I had some difficulties finding a font that was similar to the original website. That's why I used various fonts that I found and that I thought were similar.
- Chivo (Black)
- Bitter (Medium)
- Bodoni Std (Book)
- Goudy Old Style (Regular)
- Myriad Pro (Regular)
I did research on modern house images on Pexels, there are several photos of houses that I took because of their similarity to the original website.
After analyzing the website, there are several colors that I extracted from the original website.
After getting the photos that I wanted for the replication website, I started cropping and cutting the photos.
There are various fonts that I use for this website. This website uses simple and minimalist fonts, the website uses many sans serif fonts.
- Myriad Variable Concept (Bold)
- Acumin Variable Concept (Thin, Regular)
- Myriad Pro (Regular)
- Montserrat (Medium)
After doing all the replicate website processes, I arrange the photos, typography, and other elements to the appropriate positions on the original website.
Experience
For Exercise 2, we were assigned to replicate a website of our choice using Adobe Illustrator. I was somewhat familiar with this kind of task, but doing it in Illustrator presented new challenges for me. One of the biggest struggles I faced was choosing the right images and matching the fonts used on the original website. Many websites use custom or premium fonts that aren’t readily available, so I had to find similar alternatives that still captured the same feel.
Despite those challenges, I found this exercise very helpful in boosting my creative thinking. It trained my eye to notice small design details and understand what makes a website visually appealing. One website that really inspired me was Horizons, a minimalistic and aesthetic site that focuses on home and interior visuals. I realized that a simple layout can still be powerful when executed well.
Throughout the process, I took things step by step. I explored more tools in Illustrator, experimented with layout structure, and organized my layers to keep the design clean and easy to manage. This project taught me to be patient, detail-oriented, and thoughtful in how I approach visual design — especially when working with UI-style compositions.
Observation
During the process, I observed several other websites with similar design styles to the one I chose. I paid close attention to how they positioned important elements like the navigation bar, hero images, headings, and call-to-action buttons. I also noticed how the use of white space, image alignment, and visual hierarchy contributed to the overall professionalism and clarity of the layout.
I did extra research on visual elements especially imagery. I looked for photos or illustrations that matched the vibe of the original site and helped communicate the same message. I observed how color schemes were used to create emotional impact and brand identity, and how consistent spacing and alignment made the layout look polished. These observations helped me understand that design is not just about visuals; it's also about user flow, clarity, and how each part of the design supports the whole experience.
Findings
What I learned from this exercise is that replicating a website visually using Adobe Illustrator is not just about creativity it’s about precision and execution. Small details like alignment, font size, spacing, and image proportions can make a huge difference in how professional and accurate the final design looks. I also realized that using Illustrator for UI mockups requires a solid grasp of design principles. It’s not just about copying what you see, but also understanding why certain choices were made in the original design and how to recreate those choices thoughtfully. Planning ahead, using grids, and understanding visual balance were essential throughout this process. Overall, this task deepened my appreciation for digital design and gave me more confidence in handling layout-based work. It trained me to see beyond the surface of a website and to focus on how to communicate ideas visually with clarity and purpose.
Comments
Post a Comment