Interactive Design - Task 2:Project 2
2/6/2025 - 23/6/2025 / Week 7 - Week 9
ChenYuhan / 0378131
Interactive Design/ Bachelor of Design (Honours) in Creative Media / Taylors University
Task 2: Project 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 7:
Display is CSS's most important property controlling layout.
Every element has a default display value depending on what type of element it is.
The default for most elements is usually block inline.
<div> is the standard block-level element. A block-level element starts on a new line and stretches out to the left and right as far as it can.
inline Element
<span> is the standard inline element. An inline element can wrap some text inside a paragraph <span> like this </span> without disrupting theflow of that paragraph.
Other Display Properties
- Inline-block
- Flex
- Grid
Most HTML elements are containers. Consider some of the HTML elements we've used so far: body, p, h1, h2, div, ul, ol, li.
Each of these is a container, or box.
Each box has three layers that surround its content. The layers are, in order from inside to outside:
- Padding
- Border
- Margin
 |
| Fig. 1.1.1, practice, week 7 (2025/06/03) |
TASK 2: PROJECT 2
Requires:
The objective of this assignment is to translate your website redesign proposal into a functional prototype. This prototype should visually and interactively represent the proposed changes, demonstrating your ability to apply design principles and UX strategies effectively.
Building upon your previous assignment (Website Redesign Proposal), you are now required to develop a prototype of the redesigned website. This prototype should reflect the proposed visual design and user experience improvements, providing a tangible representation of the final product.
Develop a clickable prototype that includes key pages and features of the redesigned website. The prototype should allow users to navigate through the site and interact with essential elements.
Tools: Use prototyping tools such as Adobe XD, Figma, Sketch, or any other relevant software to create the prototype.
I choose Figma to design.
Process:
 |
| Fig. 2.1.1, Design Draft, Week 8 (2025/06/10) |
 |
| Fig. 2.1.2, Home page design, week 8 (2025/06/12) |
For the homepage design, I slightly increased or decreased the draft based on the actual situation that could be achieved. At this step, the basic colors of the entire website were also established.
 |
| Fig. 2.1.3, CONDUCT US page design, week 8 (2025/06/13) |
According to the template provided by the original website, unreasonable logical items are deleted to achieve concise and neat information collection.
 |
| Fig. 2.1.4, SIGN UP page design, week 8 (2025/06/13) |
Since I thought one page was a bit too little, I made another one.
 |
| Fig. 2.1.5, Button Feedback 1, week 8 (2025/06/16) |
 | |
|
I wanted to give more feedback on the buttons, so I added color variations to each button. At first it was just on key buttons that could jump to different pages, but then it became a design for every button that might be interactive in the future.
 |
| Fig. 2.1.7, final design, week 8 (2025/06/16) |
After the final test, I found some details that I had not noticed before (such as the "Submit" button was missing and the meaning of some words did not match), so I made the final changes.
 |
| Fig. 2.1.8, cart page, week 8 (2025/06/16) |
Final Outcome
After the professor's feedback, I decided to redo them because they had bad colors and layout, too simple, and too old-fashioned.
 |
| Fig. 2.2.1, process 1, week 9 (2025/06/19) |
 |
| Fig. 2.2.2, process 2, week 9 (2025/06/19) |
Short Brief
In my proposal, there are three key improvements: modifying page navigation and logic items, adjusting page layout and color, and modifying image size to achieve a smooth experience. I mainly designed and reconstructed the page around these three points.
The original website had long category buttons and a simple navigation, which made it difficult for users to find the products they wanted. I redesigned the logical chain and designed a top horizontal category and a HOME button. At the same time, I placed the search navigation bar in the upper right corner of the page to facilitate users searching for any desired products.
The color distribution of the original website was relatively chaotic. The colors of gray, beige, blue, and red were very conflicting, making it difficult to highlight the key points. Coupled with the chaotic layout, it was easy to cause a sense of loss. I set the main colors to dark green, dark blue, and white. The more impactful colors are convenient for highlighting the key points and designing different modules while creating a modern feel. Buttons with the same function or the same attributes use the same color to ensure uniformity and easy understanding.
The images on the original website were not uniform in size and had low clarity. In addition, the large images also caused the problem of unsmooth page loading. I searched for similar images on Pinterest again to ensure that the images were high-definition and did not exceed 1MB in size. After testing, I found that the website loaded very quickly without any lag.
Some other small designs: Each button has a feedback system. When you hover your mouse over a button, it changes color or moves, saying “This is an interactive button.”
FEEDBACK
week 7:
In this class, I learned more advanced operations on CSS, such as setting the size and color of a table, adjusting the layout to make it centered or top-grid, and setting interactive buttons.
week 8:
Independent week
week 9:
In this class, I learned another way to create a top navigation. At the same time, I got feedback from the previous website design, and I needed to completely correct my design direction, so I started to redo it.
REFLECTION
Experiences:
During this time, we learned more about CSS, how to beautify your website and add more interactive button designs. We also learned the basic operation of Figma and used Figma to make a relatively basic and complete website.
Observations:
In Figma, since I was using it for the first time, I had to slowly explore many places, which was a bit difficult for me. I watched the tutorial videos many times and watched some explanations on YouTube. So I understood how to set basic button feedback (change color), and I found that I had endless new knowledge waiting to learn because I didn't want to be left behind.
Findings:
I really like the feeling of creating something completely from scratch. It's great to be in control of the whole process. You can do whatever you want within the rules. I like the process of creation. It's the beauty of student days. You will encounter new things, then learn them; you will encounter difficulties, then solve them; you will cry, but you will still move forward. I really like the process of making web pages, and I like the process of creation.
Comments
Post a Comment