INTERACTIVE DESIGN - EXERCISE 2

We need to copy the 2 existing main pages of the listed websites. Follow the dimensions of the existing website in width and height. This exercise will help you develop your design skills using software such as Photoshop, Adobe Illustrator or Figma, and gain an understanding of the best web design practices.

Free image:
https://www.pexels.com/

Google Fonts link:
https://fonts.google.com/

3.1 Captured

Google Drive

At the beginning of the process, I had trouble capturing a full screenshot of the website. Some elements weren’t visible all at once due to the scrolling layout. As a result, I took multiple partial screenshots and manually combined them to recreate the entire site view.

I selected two websites that stood out to me during my analysis. I chose the Captured photography portfolio site and the Elements wellness resort website. Both had distinct layouts and typographic styles that I wanted to explore and replicate.

Figure 3.1.1 Screen Capture from Original Website / Week 2 (04/05/2025)

After that, I imported the screenshot into Adobe Illustrator, created an artboard, and adjusted it to the size of the original website layout.

As part of the Interactive Design exercise, I was tasked with replicating two main pages of the websites I previously analyzed. The purpose of this task was to better understand website structure, layout, and design principles by recreating the pages as closely as possible.

Figure 3.1.2 Screen Capture from Original Website / Week 2 (04/05/2025)

During the replication process, Mr. Shamsul advised that it is acceptable to use alternative images as long as they are visually similar to the original ones. While I was able to download some images directly from the websites, others could not be saved due to site restrictions.

For those, I searched for visually similar stock images to maintain the overall look and feel of the original design. This allowed me to stay true to the layout and atmosphere of the websites while also improving my skills in image sourcing and replacement.

Figure 3.1.3 Colour Palette / Week 2 (04/05/2025)

I also carefully selected fonts and colors that closely match those used on the original websites. I used Google Fonts to find suitable typefaces and used the Eyedropper tool to extract accurate color values from the original designs.

Figure 3.1.4 Process 1 / Week 2 (04/05/2025)

Here I recreated the homepage of the original website as part of an interactive design exercise. The goal was to replicate the layout, typography, and overall structure as closely as possible. I paid attention to details such as alignment, spacing, and font styling to match the original design.

Figure 3.1.5 Process 2 / Week 2 (04/05/2025)

Figure 3.1.6 Process 3 / Week 2 (04/05/2025)

After completing the main structure, I made small refinements in font spacing, image scaling, and alignment. I compared the original and the replica side-by-side to check for any inconsistencies.

Final Outcome

Figure 3.1.7 Final Outcome / Week 2 (04/05/2025)

3.2 ELEMENTIS

Google Drive

For the second part of the exercise, I replicated the main page of another website that I previously analyzed. As with the first one, the goal was to understand the layout structure, type style, spacing, and color palette.

Figure 3.2.1 Screen Elementis from Original Website / Week 2 (04/05/2025)

Figure 3.2.2 Screen Elementis from Original Website / Week 2 (04/05/2025)

Figure 3.2.2 Colour Palette / Week 2 (04/05/2025)

Figure 3.2.3 Process 1 / Week 2 (04/05/2025)

This time I encountered some difficulties with image assets. Some images could not be downloaded directly from the website. As advised by Mr. Shamsul, I looked for alternative images that had a similar mood and composition. I used free stock image websites to find appropriate replacements.

Figure 3.2.4 Process 2 / Week 2 (04/05/2025)

One thing I paid special attention to was spacing and alignment, as these are crucial elements in good web design. I followed the original proportions and layout grids as closely as possible.

Figure 3.2.5 Process 3 / Week 2 (04/05/2025)

Final Outcome

Figure 3.2.6 Final Outcome / Week 2 (04/05/2025)

REFLECTIONS

Experience

Working on the replication of two existing website pages was a very insightful experience. It helped me understand how visual elements such as layout, typography, and spacing work together to create a strong user interface. At first, it was a bit challenging to recreate the exact structure, especially when dealing with images or fonts that were not easily available. However, by using design tools like Adobe Illustrator and Photoshop, I learned how to overcome these limitations and still stay visually close to the original design.

Observations

While replicating the websites, I noticed that good web design is not just about pretty visuals — it’s about consistency, alignment, and balance. Even the smallest spacing and font weight made a big difference in the overall look. I also observed how much impact typography and color choices have on the mood of the website. Many websites rely on simple but well-structured layouts to guide the user smoothly through the content.

Findings

I discovered that:

Using grids and guides is essential for maintaining alignment.
Free font libraries like Google Fonts are helpful to find similar typefaces.
If certain images can't be downloaded, substituting them with similar free stock photos works well and doesn't break the design.
Taking full-page screenshots and assembling them manually can be useful when certain parts of a site are hidden or load differently.

This project strengthened my technical skills and deepened my understanding of interactive and visual design principles.

Search This Blog

Aidina Begimbaeva (0380489)