Interactive Design - Exercise 2

 28/4/25 - 5/5/25 (Week 2-3)
Anggia Tsani Rachmadiyanti, (0368487)
Interactive Design / Bachelor in Design (Hons) in Creative Media / Taylor's University
Task: Exercise 2

---

 CONTENT LIST 

• Lecture notes
• Drive Link
• Exercise 2 - Web Replication
• Feedback
• Reflection

---

 LECTURE NOTES: 

Lecture 3: Understanding Website Structure

• Website structure is the foundation of a user-friendly and accessible website. 
• A well-structured website helps users find information easily and keeps them engaged.

3 key elements: Header, Body, Footer

• Header - top section of a webpage. Usually contains the logo, navigation menu, and contact information. The header provides users with quick access to essential information and navigation.
• Body - main content of a webpage. It contains text, images, videos, and other multimedia elements. Proper organization of content within the body is crucial for readability.
• Footer - located at the bottom of a webpage. It typically includes copyright information, links to important pages, and contact details. It provides closure to the webpage and extra navigation options.

• Usually for e-commerce websites, the search bar is big because people want to browse what they want to buy/find faster, rather than browsing and scrolling.
• Content organization is key to a well-structured website.
• Most html has different headers: (H1, H2, H3, etc.) to create a hierarchical structure.
• Most people skim through websites
• Header font must be bigger than subheadings. Subheadings size must be bigger than body text.
• Logical grouping of content and clear labeling of sections improve user experience.
• Navigation menus help users move around the website. Use clear and concise labels for menu items. 
• Consider using dropdown menus for complex sites.

---

 Google Drive Link of Web Replication Final Submission:

Click Here

---

 Exercise 2: Web Replication 

Your task is to replicate TWO (2) existing main pages of the websites that you have analyzed in Exercise 1 to gain a better understanding of their structure. Follow the dimensions of the existing website, including the width and height. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator and gain insights into web design best practices.

You can use any image from a stock image or a free stock icon. The image that you will be using does not have to be an exact image from the original website. You may replace it with a similar image. Focus on the layout, type style, and colour style. To find similar typefaces/fonts, you can download fonts from Google Fonts. You may need to screengrab the website and can begin to replicate the page.

 Website #1  : ShibumiShade

I first looked for similar fonts the original website used through browsing Google Fonts.

I extracted the images from the website so I could put it on Illustrator to replicate the design.

I used a lot of Pen tool, curvature tool and shape tools to make the shapes of all the boxes and elements in the sections.

The left artboard was the original screenshot of the website and the right side is the one I replicated using Adobe Illustrator:

FINAL WEB 1 REPLICATION:

 Website #2  : Munchies

I searched for similar fonts first through a different website, to match the font like the original website's font

Here I used the 'View Outlines' tool to show the structure of the website^

The left artboard was the original screenshot of the website and the right side is the one I replicated.

FINAL WEB 2 REPLICATION:

 Exercise 2 - Feedbacks 

Week 3 - Sir said my work was ok and I had to start on the next project which is to find ugly and bad looking website.

 Exercise 2 - Reflection 

This 2nd task of replicating the website pages, it made me understand the structure of a website more, such as how they position their texts, where they normally place different elements/buttons. Moreover, this exercise helped develop more of my design skills too using Adobe Illustrator.