SHIMANLIN,（0375858)
BACHELOR OF DESIGN(HONOURS)IN CREATIVE MEDIA || TAYLOR'S UNIVERSITY
INTERACTIVE DESIGN- Project 2
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Task
4. Feedback
5. Reflections
LECTURES
Week 7
This week, we learned about the display property in CSS, which plays a crucial role in determining how elements are arranged on a webpage. Mr. Shamsul emphasized how different display values—such as block, inline, and flex—affect layout structure and visual presentation. This knowledge helps us better control how elements behave within the box model and how they relate to one another on the page.
Figure 1.1 Box Model / Week 7 (3/6/2025)
INSTRUCTIONS
TASK
Prototype Development:
Interactive Prototype: 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.
Design Fidelity: Choose an appropriate level of fidelity (low, medium, or high) based on the project’s scope. The prototype should effectively communicate the look and feel of the final design.
Tools: Use prototyping tools such as Adobe XD, Figma, Sketch, or any other relevant software to create the prototype.
Key Pages to Include:
- Homepage: Present the main design elements, including navigation, hero section, and key content areas.
- Core Content Pages: Develop prototypes for at least one core page (e.g., About Us, Services, Products) to showcase how the content is organised and presented.
- Contact Page: Include a prototype of the contact page, demonstrating how users can interact with forms or other contact methods.
User Experience (UX) Considerations:
- Usability: Ensure the prototype reflects a user-friendly design, with clear navigation, intuitive interfaces, and accessible features.
- Responsiveness: Demonstrate how the design adapts to different screen sizes (desktop, tablet, mobile) either through separate prototypes or responsive design techniques.
- Interactivity: Implement interactive elements (e.g., buttons, hover states, form fields) to provide a realistic user experience.
Figure 2.1 Production process/week 7 (July 6, 2025)
Writeup About My Prototype
This time I designed an official website for the OJ Orange Juice brand, with
the goal of making the brand more visually attractive and improving the
overall user experience. The entire design is based on the brand image of
"fresh, natural, and healthy". I want to use a simple layout and refreshing
color scheme so that users can feel the sunshine and vitality conveyed by OJ
Orange Juice as soon as they open the page.
In terms of color matching, I mainly used orange, white, and a little green
and blue. Orange represents the main element of orange juice and has a
strong sense of vitality; white makes the page look cleaner and fresher;
green and blue are symbols of health. These four colors are matched
together, which has both visual impact and is not too fancy. The font I
chose is a simple sans serif font, which will make the reading experience
more comfortable.
For the entire layout, I referred to the popular web page layout. The top is
the navigation bar and brand logo, the middle is a large picture poster, and
then the product introduction, brand story and contact form are arranged in
sequence. The structure is very clear and convenient for users to browse.
The homepage is the core of the entire site. I put a large picture of
oranges. I used hover effects on some of the images below to increase
interactivity and make the information presentation more layered.
In the "About Us" page, I wrote about the founding background and philosophy
of the OJ brand. I want users to know that there is a story and persistence
behind this brand, and it is not just about selling drinks.
The product page is a part that I like very much. I used a relatively clean
card-style design method. Each product has pictures and text, which makes it
easy for users to quickly understand different flavors and characteristics.
Finally, there is the "Contact Us" page. I put a simple form and the
services we can provide. Although this part is simple, it is very practical
and is also very important for the interaction between the brand and
customers.
I also considered some small details, such as the hover effect of buttons
and picture cards. When the mouse slides over, the color will change or
slightly enlarge. This design can increase the dynamics of the page and give
users more feedback when operating.
Another point is that I paid special attention to the contrast between text
and background to ensure readability, which is very important for different
groups of people. Although it is only a design prototype at present,
responsive design and more functions can be added after it is actually
developed and launched, such as online purchase, social sharing, etc.
Project 2 - Final Working Prototype Link
Prototype link ：
Developer Mode ：
Week 9
This week, after Sir looked at the website prototype I made, he felt that the page layout and structure were good, but there were some small places that needed to be adjusted, such as placing the pictures not too close to the edge.
Experience
Using Figma to create a prototype was a completely new challenge for me. Unlike just sketching, turning static wireframes into something interactive required a different mindset and skillset.This trial-and-error process taught me more about problem-solving than I expected. In the end, I felt proud that I could bring my design ideas to life, even if imperfectly.
Observations
I realized that prototypes in tools like Figma have inherent limitations compared to real websites. For example, user inputs or dynamic content can’t be fully recreated, so the prototype can only approximate the user experience. This means prototypes are mainly useful for demonstrating flow and visual concepts, rather than functioning as real software. Understanding these boundaries helped me set realistic goals for what a prototype can achieve.
Findings
This project emphasized how crucial it is to plan before jumping into building. Having a rough sketch or wireframe saved me from a lot of confusion later. While Figma offers many ways to simulate interaction, each feature requires patience to master, especially when combining multiple effects. Importantly, I learned that feeling stuck or encountering problems is a natural part of the learning process. Persistence, resourcefulness, and being willing to ask for help are key to overcoming challenges with new tools.
Comments
Post a Comment