Interactive Design - Task 1: Exercises 2
6/5/2025 - 12/5/2025 / Week 3 - Week 4
ChenYuhan / 0378131
Interactive Design/ Bachelor of Design (Honours) in Creative Media / Taylors University
Task 1: Exercises 2
ChenYuhan / 0378131
Interactive Design/ Bachelor of Design (Honours) in Creative Media / Taylors University
Task 1: Exercises 2
TABLE OF CONTENTS
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/1ZboslTwWd0VcBq-AuI1L_iQSMfel1WbL/preview" width="640" height="480" allow="autoplay"></iframe>
LECTURES
week 3:
The Three Key Elements
Header
The header is the top section of a webpage.
It usually contains the website's logo, navigation menu, and contact information.
The header provides users with quick access to essential information and navigation.
Body
The body is the main content area of a webpage.
It contains text, images, videos, and other multimedia elements.
Proper organization of content within the body is crucial for readability.
Footer
The footer is located at the bottom of a webpage.
It typically includes copyright information, links to important pages, and contact details.
The footer provides closure to the webpage and additional navigation options.
TASK 1:EXERCISE 2
Exercise Requirements:
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:
By capturing the full screen of the website, I extracted the upper half of the 11157 website (the lower half needs to be unlocked by sliding and cannot be displayed at the same time). As a website introducing this luxury house, its core is to use large pictures + beige background + large fonts to build a harmonious layout.
 |
| Fig1.1,Reference Website 1,week 3(2025/05/06) |
 |
| Fig1.2,Final outcome 1,week 3(2025/0506) |
I added content (logo, contact information, etc.) that was not in the sample photos to the end of the website. I hope this will make the design more complete. I did not strictly follow the size and font of each photo. What I hope is to imitate the "spiritual resemblance" rather than the "physical resemblance". Promoting luxury villas is also a kind of theme conformity.
Website 2:
After taking full-screen screenshots, I found that the floating background and text of the webpage were squeezed together, forming a messy layout on the first page. I corrected this in the subsequent imitation. In addition, the background transition of the website was handled very well. I applied this transition form of solid color background + picture in the subsequent website design.
 |
| Fig1.3,Reference Website 2,week 3(2025/05/06) |
 |
| Fig1.4,Final outcome 2,week 3(2025/05/06) |
In this imitation, I chose a dark gradient background + strong contrast fonts to highlight the key points and catch the eye. In the original website, there is a clever idea of modifying the transparency of the picture to lay the background. I also used this method in the background of "Osaka" and "Kyoto". On the first and last pages, the tabular buttons of the original website are used to enhance the sense of order and clarity.
FEEDBACK
week 3:
By practicing imitating the format of web pages and studying the three-part structure of web pages discussed in class, I have deepened my understanding of website creation.
REFLECTION
Experiences:
First, the professor asked us to imitate the five websites analyzed in Exercise 1 by integrating the growth chart through the console and drawing it using AI software (pictures and fonts were selected from free websites). After that, we improved the concept through the three-part structure taught in class, and finally improved and modified it.
Observations:
When exporting files, because the file memory is too large, it needs to be compressed. Therefore, it is necessary to adjust the interface clarity to export different types of pictures.
Findings:
Designing a website requires consideration of all aspects, and every detail must be reviewed. After ensuring the main structure, fill in the framework, improve and enrich the directory categories (such as homepage, team, practice, etc.).
Comments
Post a Comment