Interactive Design - Project 2: Website Redesign Prototype
27/05/25 - 10/06/25 / Week 6 - Week 8
Brendan Fedya / 0376283
Interactive Design / Bachelor of Design
(Hons) in Creative Media / Taylor's University
Project 1:
Proposal
TABLE OF CONTENTS
I. INSTRUCTIONS
II. TASKS
To start, I watched the tutorial by Mr. Shamsul on how to use Figma, then I started to follow the steps he did to create the layout. Additionally, Layout guides were used to make it appear neatly in the layout.
 |
| Figure 2.1: Figma page setup. |
Now, it's time to test out to make the interactive elements. It was pretty simple: First make the element before the interaction and then the one after. For the elements that uses the same element I just duplicated the finished one and changed the texts.
 |
| Figure 2.2: Creating interactive elements. |
 |
| Figure 2.3: Designing homepage. |
Designing the footer is quite challenging, because it only have limited information to display because it's not a renowned website. Hence, there might be a lot of white space in the design.
 |
| Figure 2.4: Designing footer. |
After finishing the homepage, I started to work on the 2 other pages: Contact page and the about page. I would keep the contact page as simple as I can to ensure clarity for the users, and the about page is to make the audience connect more personally with the website's purpose.
Figure 2.5: Designing other pages.
 |
| Figure 2.6: Footer redesign. |
Hamburger menu is also not suggested for bigger screens, so I removed it and put all the page sections in the navigation bar.
 |
| Figure 2.6: Navigation bar redesign. |
Here are my notes I received during the sessions with Mr. Shamsul which are useful for this prototype and the final project later on:
Notes:
- min-width, so that the text wont overflow, the box will expand follow the text.
- z-index, so that the text could be in front or in the back.
Feedback:
- Carousel effect can be indicated with dots below, or arrows.
- Font size is too big.
- Footer is also too big.
- Hamburger menu is not suggested to be used on bigger screens.
- Any images on screen must be 72dpi RGB, above than that is only for printing purposes.
For the layout, I will keep it simple to maintain compatibility across
devices. Simplicity will be maintained by limiting to only 2-3 fonts and
colors. Additionally, I stated I will put a textured background to hint on the cultural
aspects of the website. I put them on some secluded parts only to avoid overwhelming the whole design, as simplicity is very important in creating websites.
For the fonts, I prefer a serif font for the headings or subheadings, and the text could be sans-serif as how today websites look like. About the serif font, I find ‘Cormorant Garamond’ suitable as Garamond is considered a web-safe font for HTML and CSS. Also, this serif font could give off the sophisticated vibe of resorts. Additionally. I picked ‘Inter’ as the sans-serif font because of its good readability on digital screens—on normal texts it would be very beneficial because it should appear significantly smaller compared to their headings or subheadings. But after testing, I figured that it is better to use 'Montserrat' as it suits the theme better.
The current color palette is good enough for me so I didn’t make a lot of changes. Adding different shades of the original color will be beneficial to create a unified look without making it look too simple (if only one shade) or too out of place (if uses different colors). For the background color, I tried beige but it does not work as well as white. White gives off a more sophisticated look, and it could also be combined with subtle gold textures to evoke the luxurious feel. At last, navy blue to contrast the overall color scheme is suitable to match the vibe of the resort, suggesting the elements of a resort like skies or seas. Shades of black are preferably not to used as it will feel very formal and may appear too contrasting on the website.
For the fonts, I prefer a serif font for the headings or subheadings, and the text could be sans-serif as how today websites look like. About the serif font, I find ‘Cormorant Garamond’ suitable as Garamond is considered a web-safe font for HTML and CSS. Also, this serif font could give off the sophisticated vibe of resorts. Additionally. I picked ‘Inter’ as the sans-serif font because of its good readability on digital screens—on normal texts it would be very beneficial because it should appear significantly smaller compared to their headings or subheadings. But after testing, I figured that it is better to use 'Montserrat' as it suits the theme better.
The current color palette is good enough for me so I didn’t make a lot of changes. Adding different shades of the original color will be beneficial to create a unified look without making it look too simple (if only one shade) or too out of place (if uses different colors). For the background color, I tried beige but it does not work as well as white. White gives off a more sophisticated look, and it could also be combined with subtle gold textures to evoke the luxurious feel. At last, navy blue to contrast the overall color scheme is suitable to match the vibe of the resort, suggesting the elements of a resort like skies or seas. Shades of black are preferably not to used as it will feel very formal and may appear too contrasting on the website.
Additionally, I used carousel navigation to break the boring reading rhythm for the home page, so that it would enhance engagement with the viewers while also saving information for things with a lot of information.
Figma sharable link:
III. REFLECTIONS
At first I thought Figma is a hassle to use similar to other Adobe Creative Cloud applications, but it turns out I could learn the ropes in a really short time. It goes better than planned, hence my prototyping process has not much issues and the result is almost exactly as how I wanted it to be! I hope I could keep this up until the final project where we are going to do the real deal—CODING. My seniors keep scaring me and said that the final project is on a different level with the previous projects, making me even nervous. But what else could I do? I'm going to specialize in UI UX and this is already the bare minimum skill that I should have, so bring it on.
Comments
Post a Comment