05.06.2025 - 22.06.2025 (Week 7 - Week 9)
Nur Asma’ Binti Anuar / 0378095 / BDCM
Interactive Design
Task2: Prototype
_________________
INSTRUCTIONS
The objective of this assignment is to translate the website redesign
proposal into a functional prototype. This prototype should visually and
interactively represent the proposed changes, demonstrating the ability to
apply design principles and UX strategies effectively.
Building upon the previous assignment, requirements are to develop a
prototype of the redesigned website. This prototype should reflect the
proposal visual design and user experience improvements, providing a
tangible representation of the final product.
For this project, I am using Figma to create the prototype.
Firstly, I designed a layout in Procreate to better understand what I’m
trying to do in Figma. For the logo of the website, I retraced it in
Procreate as well so that it could be fully displayed in good quality. The
main redesigned elements is to make it more simple as well as spacious for
the user to read comfortably. The navigation buttons are then to be
displayed using the dropdown menu tool in the 3 lines element in the top
right corner. For this homepage is supposedly in English, thus the name of
the website is Malaysian Examination Council (MEC) instead of the original
language Majlis Peperiksaan Malaysia (MPM), therefore the key reason to
include two languages in the header.
For the ‘About Examination’ area is to include a spacious room for the user
to read and understand easily with using the ‘hover’ tool when the mouse is
on each respected information box. This function is consistent throughout
the layout with the ‘Our partners’, ‘Registration’, and ‘Contact’
sections.
Then comes the ‘News & Announcement’ section, where I will use the
‘carousel’ or scroll horizontally button to navigate each
news/announcements.
The colors were originally supposed to be blue in the proposal,
complimenting the logo’s color scheme, then I figured I should design it
more professionally alongside the font of the website.
|
| Fig. 1.1 Logo Retraced |
 |
| Fig. 1.2 Procreate Layout |
Then I inserted the tools and layout in Figma, after watching a couple of tutorials on how to use it, I used the hover tool for buttons to navigate to a certain place, or to imply that this element is clickable. However, I did not have any much time to create of each new respective pages.
And for the background, I decided to input a big picture of students taking examinations as using this layout is following the trend most UI/UX designers are doing now.
 |
| Fig. 1.3 Element 1 |
For the dropdown menu, you can see that when the menu is clicked, it shows the dropdown menu, as well as the hover for each elements (home, about, service, contact) works when the mouse is above it.
 |
| Fig. 1.4 |
Then came the horizontal scrolling button, it took a while to figure it out, but it worked easily for the 'news and announcement' section. This function is also applied to the 'registration' section, as the original website had many elements in the section.
 |
| Fig. 1.5 Element 2 |
You can see the scrolling horizontal works when pressing the buttons in the preview, and it gives the indication on which panel you are at.
 |
| Fig. 1.6 |
For the icons, I downloaded it from Google Symbols/Fonts as SVGs as it was the easiest one to download with and having a simple design for icons.
 |
| Fig. 1.7 Element 3 |
Finally for the footer, I took ideas from other websites or Pinterest for inspiration, and finally used a simple but also fully informed tools for the user. Although, this section does not navigate to any other pages, it only has the hover element applied due to short timing.
 |
| Fig. 1.8 Element 4 |
The hovering tool is applied for each element in the footer.
 |
| Fig. 1.9 |
_________________
REFLECTION
For this project, I had a difficult time trying to understand how to use Figma, and although I was relieved when I got the hang of it, this application was still tough for a beginner like me to use it. However, this project had showed me how it was not easy to create a website, and is preparing me for using Dreamweaver for the upcoming weeks. Thus it makes me feel at ease that I can at least understand the concept and lessons when it comes to designing and inputing it into coding. I can easily say that this project was only a beginning for what is to come, and hopefully I can input my knowledge and what I've learned so far into creating something that is (hopefully) something good enough for everyone to see.
Comments
Post a Comment