Interactive Design | Project 2: Prototype
28 May 2025
- 18 June 2025
(Week 6-9)
Justin
Cleon
(0375523)
Interactive Design | Project 2: Prototype
Table
of
Contects
1. Instructions
2.
Lectures
3.
Project
2:
Prototype
Check the prototype on Figma here: https://bit.ly/ChitatoFigma
I created the layout for my website based on my proposal. However, my design layout on proposal is not good and user-friendly. I started from Project 2: Prototype. I did not follow it and changed to a better design for my website and it ended up with the perfect design as I wanted it.
Here is the layout I made on Figma:
Figure 3.1 Figma
Homepage
The homepage I designed looks better than previous ones. The "Roboto" font I used the most in my prototype because it is versatile and readable. It offers a modern aesthetic and works well across different platforms.
For interactive elements, I made hovering on the navigation bar and the button "View More". The yellow hover text is seen when the mouse is moved over navbar items.
.png)
Figure 3.2 Homepage (Figma)
Products Page
I developed the product slider to help with visual balance and user understanding. The white card background with the bold black text to ensure good readability. The button "View More" draws attention to a call-to-action (CTA) users know they will get more details about the product.
.png)
Figure 3.3 Products (Figma)
Reviews Page
I made the design on the reviews page clean, functional, and visually aligned with Chitato's brand. The 4 customer reviews with a 5-star rating displayed on top. Each card uses quotation marks and features short, informal, and positive reviews. The feedback submission section box and stars are visually engaging and easily readable with yellow stars to maintain brand consistency.
.png)
Figure 3.4 Reviews (Figma)
Contacts Page
This section is dedicated to encouraging social media engagement and brand connection with 4 large social platforms displayed side-by-side.
.png)
Figure 3.5 Contacts (Figma)
4. Feedback
No feedbacks are given for this task.
5. Reflection
I initially thought Figma would be as overwhelming as other Adobe Creative Cloud apps, but I learned it in a very short time. The process went much better than I expected, resulting in a smooth prototyping process and almost exactly what I wanted!
Comments
Post a Comment