Interactive Design | Exercise 2

April 29, 2025

Interactive Design | Exercise 2

|| 23/04/25 – 30/04/25

|| Tee Zi Tong, 0366165

|| Interactive Design

|| Exercise 2

LECTURER NOTES

Lecture 3: Website Structure – Summary

A good website structure makes it easy for users to find what they need and improves their overall experience.

The 3 main parts of a webpage are:

Header – Top section with logo, navigation menu, and contact info.
Body – Main content area with text, images, and videos.
Footer – Bottom section with copyright, extra links, and contact details.

For e-commerce sites, search bars are often large to help users find items quickly.

Using headings like <h1>, <h2>, and <h3> helps create a clear hierarchy.

Header fonts should be the largest, followed by subheadings, then body text.
Group content logically and use clear labels.
Navigation menus should be simple and, for complex sites, can include dropdowns.

Most users skim, so structure and clarity are very important.

GOOGLE DRIVE LINK FOR FINAL WEB REPLICATION

Exercise 2 Web Replication - Google Drive

EXERCISE 2

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 color 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 # Lucky Done Gone

First, I have found some similar fonts with the website using google Fonts

Main Logo Font ("LUCKY DONE GONE")