Interactive Design:Exercise 02

  

Exercise 2: Homepage Recreation in Figma

For this exercise, we were asked to choose two websites from the list provided by our lecturer and completely recreate their homepages. The goal was not to redesign the pages but to faithfully replicate the original layout, using Figma to mirror every detail.

I chose Figma as the tool for this task because it’s intuitive and highly effective for duplicating web designs. The first step in the process was learning how to take full-page screenshots of the websites and then extract the images used. I downloaded all the images where possible, but for some logos and graphics that weren’t easily accessible, I took screenshots and removed their backgrounds using an online background removal tool.

Once I had all the images, I made sure to download the exact fonts used on the websites from Google Fonts. This was an important step because the typography needed to match perfectly to replicate the original design accurately. After gathering all the necessary elements, I began recreating the layout in Figma.

Although the task didn’t require any coding, attention to detail was crucial. I had to meticulously focus on aspects like rounded corners, font variations, spacing, and overall structure to ensure that the recreated homepage was identical to the original. The process, while not difficult, was time-consuming and required a lot of precision.

This exercise taught me the importance of focusing on small design elements that often go unnoticed but make a big impact on the overall user experience. It has also reinforced my skills in Figma and made me appreciate the level of detail involved in web design, which will certainly be beneficial for future projects.