9/6/2025 - 27/7/2025 / (Week 8 - Week 14)
Aricia Man Yi Xuan / 0375026
Interactive Design / GCD60904
Bachelor of Design (Hons) in Creative Media
Final Project
TABLE OF CONTENT
1. Lectures
2. Instructions
3. Final Project
3.1 Homepage
3.2 Menu
3.3 Promotions, App Promo, Service
3.4 Contact
3.5 Footer
3.6 5 PAGES
4. Final Outcome
5. Reflection
LECTURES
Week 10 (24/6/2025):
Today we learned how to do the basic layout of a homepage in HTML and CSS
as well. We need to apply them in our final project.
|
| Fig.1.1.1 HTML / (Week 10, 24/6/2025) |
INSTRUCTION
Fig.2.1 Module Information
FINAL PROJECT
Description:
Develop a fully functional website (MIN OF FIVE (5) PAGES) based on
Project 2. It should reflect all the design and user experience decisions
made throughout the project, resulting in a polished and professional
website.
Requirements:
- Implementation: Convert your prototype into a fully functioning website using HTML, CSS, JavaScript, etc.
- Design Consistency: Ensure the final design remains consistent with the approved prototype, including typography, color schemes, imagery, and layout.
- Responsive Design: Fully responsive, adapting seamlessly to various screen sizes, including desktops, tablets, and mobile devices.
- Cross-Browser Compatibility: The website must functions correctly across multiple browsers.
Core Features:
1. Navigation
Implement a user-friendly
navigation system
that allows visitors to easily access all key areas of the website.
2. Interactive Elements
Include any necessary
interactive features, such as forms,
buttons, or dynamic content, that enhance user engagement.
Technical Considerations:
1. Performance Optimization
Optimize the website for
fast load times by minimizing file
sizes, using efficient coding practices, and employing tools like caching
and compression.
2. SEO Best Practices
Implement basic SEO techniques, such
as proper use of meta tags, alt text for images, and clean URLs, to
improve the website's visibility in search engines.
Final Texting and Deployment:
1. Testing
Usability testing, cross-browser testing, and responsiveness checks.
Document any issues found and how they were resolved.
2. Deployment
Host the website on a live server or a web hosting platform of your
choice (e.g., Netlify). Ensure the
website is accessible via a public URL.
Submission:
- A live URL to the fully functional website.
- A brief report (800-1000 words) documenting the development
process.
- OPTIONAL: A recorded walkthrough video (5-7min) showcasing the final
website and explanation.
PROCESS IN DREAMWEAVER
- 3.1 Homepage -
|
| Fig.3.1.1 Progression #1 - HTML / (Week 10, 28/6/2025) |
To begin, I create a structured folder:
- index.html
- style.css
- images
|
| Fig.3.1.2 Progression #2 - HTML / (Week 10, 28/6/2025) |
Later on, I enter the basic HTML code (<html>,
<head>, <body>) into it and place the images in Homepage
that I exported from Figma.
-
For the Navigation Bar:
. <div class>: like a box to group the parts or style a section.
- <nav>: for the links to other sections.
- <a>: to create a link to another page/section.
- href = "#": means it doesn't go anywhere yet
|
| Fig.3.1.3 Fonts - CSS / (Week 10, 28/6/2025) |
Issue:
In class, we usually used Google Fonts by linking directly via CDN.
However, I cannot find the fonts I used in Figma (Cooper Black & Arial Rounded MT Bold) in Google Fonts, I need to search and download the
.ttf files.
Solution:
I'm kinda struggled with this part as the font doesn't appear in some
coding issues. Finally, I used "@font-face" in my CSS (Fig.3.1.3).
|
|
Fig.3.1.4 Preview (HTML) / (Week 10, 28/6/2025) |
|
|
Fig.3.1.5 Progression #3 - JavaScript / (Week 10,
28/6/2025) |
Issue:
Next, I need to create an dissolve effect that I applied in Figma, it's
like a slideshow on the homepage. I have no idea how to do it in CSS, I
search online and it said that I need to create a
JavaScript to make the
effect.
Solution:
I wrote a basic script in "script.js" to loop through ".slide" elements.
(Fig.3.1.5)
Issue:
|
| Fig.3.1.6 Progression #4 - CSS / (Week 10, 28/6/2025) |
Issue:
After that, I found that the central white "Mb" logo had a visible
outline
due to the image file's export settings, it didn't blend with the
background.
Solution:
I removed all unnecessary "box-shadow, outline, and filter" in CSS. It looks much better and doesn't have the outline anymore.
I removed all unnecessary "box-shadow, outline, and filter" in CSS. It looks much better and doesn't have the outline anymore.
|
| Fig.3.1.7 Progression #5 - HTML / (Week 10, 28/6/2025) |
The original website has a dark translucent
shadow rectangle from Figma to improve the readability of the
white logo and hero buttons against the background slideshow. So, I
exported the rectangle and put it inside my html. (Fig.3.1.7)
|
|
Fig.3.1.8 Progression #6 (adding shadow) / (Week 10,
28/6/2025) |
|
| Fig.3.1.9 Progression #7 - CSS / (Week 10, 28/6/2025) |
I used "absolute" positioning
and "z-index" to layer the shadow
between the slides and the content. (Fig.3.1.9)
- hero-logo (z-index: 2)
- hero-button (z-index: 2)
- hero-shadow (z-index: 1)
- slides (z-index: 0)
|
|
Fig.3.1.8 CSS / (Week 10, 28/6/2025) |
|
| Fig.3.1.11 Progression #9 - Homepage / (Week 10, 28/6/2025) |
|
|
Fig.3.1.12 Progression #10 - CSS / (Week 10, 28/6/2025) |
I found out that the red logo on top left is too small, so I increase
the size by adjusting the "height". (Fig.3.1.12)
|
| Fig.3.1.13 Progression #11 - CSS / (Week 10, 28/6/2025) |
Issue:
It seems like the navigation links were at the center. However, the
design was aligned next to the red logo on the left.
Solution:
- At the "header", I added "justify-content: flex-start".
- Used "display: flex" and adjusted the spacing.
|
| Fig.3.1.14 Progression #12 - HTML & CSS / (Week 10, 28/6/2025) |
Issue:
It was almost there... there's a missing dropdown icon next to the
menu.
Solution:
I added the icon .png exported from Figma and added into HTML, then styled
it in CSS. (Fig.3.1.14)
Issue:
Moved on to the dropdown icon, I wanted the "Menu" item in my
navbar to show a list of categories when the user hovers over the little
arrow icon. Therefore, I wrapped "Menu" and the arrow icon in a
<div class="dropdown"> and
inside placed the categories. (Fig.3.1.16) After that, I styled the
CSS.
After completing the homepage, I moved on to the menu section. I followed the layout from my Figma design, where each menu icon has a short label below. I exported each item's image from Figma as well and put them in the Images file. Then, I started to write the HTML and CSS. The font I used for the label was Arial Rounded MT Bold.
Above were the HTML and CSS for the menu section. The featured products display 4 featured burgers with their names and images. I adjusted the height and width of the items to ensure that all images look the same size. Additionally, I decided to add a simple hover effect to the menu items and products that the previous Figma doesn't have to improve user interaction, and it would be more visually appealing.
For the promotions section, I created three promotion cards that include an image and a red "Order Now" button.
|
| Fig.3.1.14 Progression #13 - HTML & CSS / (Week 10, 28/6/2025) |
Issue:
I noticed that the dropdown icon is an image, it can't directly add
hover effect.
Solution:
I exported the image of the hover effect
(icon-menu-hover.png) in Figma, and added into HTML. I try to
swapping the image on hover. Then adjust the height, margin, transition
as well.
|
| Fig.3.1.15 Progression #14 - Dropdown menu lists / (Week 13, 17/7/2025) |
|
|
Fig.3.1.16 Dropdown menu lists - HTML & CSS / (Week 13,
17/7/2025) |
- Ensured the word "Menu" will goes to the full menu page when clicking.
-
Kept the dropdown behavior tied only to hovering over the small arrow
icon.
|
|
Fig.3.1.17 Preview - Homepage / (Week 10, 28/6/2025) |
- 3.2 Menu Section -
|
| Fig.3.2.1 Progression #11 - Menu Section / (Week 11, 1/7/2025) |
After completing the homepage, I moved on to the menu section. I followed the layout from my Figma design, where each menu icon has a short label below. I exported each item's image from Figma as well and put them in the Images file. Then, I started to write the HTML and CSS. The font I used for the label was Arial Rounded MT Bold.
|
| Fig.3.2.2 Progression #12 - HTML & CSS / (Week 11, 1/7/2025) |
Above were the HTML and CSS for the menu section. The featured products display 4 featured burgers with their names and images. I adjusted the height and width of the items to ensure that all images look the same size. Additionally, I decided to add a simple hover effect to the menu items and products that the previous Figma doesn't have to improve user interaction, and it would be more visually appealing.
- 3.3 Promotions -
|
| Fig.3.3.1 Progression #13 - HTML & CSS / (Week 11, 1/7/2025) |
For the promotions section, I created three promotion cards that include an image and a red "Order Now" button.
Issue:
At first, the button was stuck inside the image and didn't have enough
space below. I wanted the button appear at the bottom center of each image,
slightly overlapping the edge (half inside, half outside).
Solution:
To fix this, I added some adjusted the CSS by using
- ".promo-card {position: relative;} to set the card container as a reference point so anything inside can be positioned based on this card box.
-
".promo-btn
{position: absolute;
bottom:0; left:50%;
transform: translateX(-50%);}
to places the button at the bottom center of the card.
|
|
Fig.3.3.2 Preview - Promotions Section / (Week 11, 1/7/2025) |
- 3.3 App Promo Section -
|
|
Fig.3.3.3 Progression #15 - App Promo Section / (Week 11,
2/7/2025) |
For the App Promo Section, it includes an orange background with
promotional text, download buttons, and two mobile images. I used the image as the background "background: url("image/app-promo.png")".
Issues:
1. The mobile images moved too much when resizing the screen.
2. The Google Play and App Store buttons were not aligned properly in one
row.
|
| Fig.3.3.4 Progression #16 - HTML & CSS / (Week 11, 2/7/2025) |
Solutions:
1. I used negative
margin and z-index to position them
better.
2. I used display: flex to keep them
on the same line.
|
|
Fig.3.3.5 Preview - App Promo Section / (Week 11, 3/7/2025) |
- 3.3 Service Links Section -
|
| Fig.3.3.6 Progression #13 - CSS/ (Week 11, 3/7/2025) |
Issue:
During the service links section, I encounter an issue that each cards has an inner rectangle that sits inside the red card. I did some research on how to create an inside outline.
Solution:
I used a
CSS pseudo-element (::before) to
simulate the inner outline.
- Used ::before to create an extra layer inside each card.
- Added content: "" to ensure the pseudo-element gets rendered.
- Set position: absolute so the outline sits inside the main red box.
- Used top, bottom, left, right to inset the outline.
|
|
Fig.3.3.7 Preview - Service Links / (Week 11, 3/7/2025) |
- 3.4 Contact Section -
|
| Fig.3.4.1 Preview - Contact / (Week 11, 3/7/2025) |
This contact section has two sides: contact details on the left, and a contact form on the right. The design includes icons (email, phone, operation hours), and the form has inputs like name, email, message, etc.
Issues:
1. The store images wasn't stick on the left and the radius is
incorrect.
2. Input field were not aligned in rows.
3. The heading "Contact Us" wasn't centered and was missing the
line.
|
|
Fig.3.4.2 Progression #14 - CSS / (Week 11, 3/7/2025) |
1. Adjusted the margin and the
border-radius: 0px 150px 150px 0px.
2. Grouped inputs into rows using "form-row" and adjusted spacing.
2. Grouped inputs into rows using "form-row" and adjusted spacing.
3. Added a decorative line (Fig.3.4.2) using
::before, ::after.
|
|
Fig.3.4.3 HTML / (Week 11, 3/7/2025) |
|
| Fig.3.4.4 CSS / (Week 11, 3/7/2025) |
|
|
Fig.3.4.5 Preview - Contact / (Week 11, 3/7/2025) |
- 3.5 Footer -
|
|
|
Finally come to footer section, including info, social media icons, and copyright. For the Marrybrown logo and the social media logos, I adjusted them individually by adjusting the margin and padding.
-
Put Content into Columns
- Used .footer-container wraps all content inside the footer.
|
|
|
- 3.6 5 PAGES -
After creating all of the sections
(Homepage, menu, promotions, app promo, service link, contact,
footer), I moved on to create four additional HTML pages to link the navbar
links.
- menu.html
- promotions.html
- contact.html
- login.html
Each pages was designed following my Figma prototype in Project 2 as
the initial reference. Throughout the process, I made a little bit of
design adjustments and added more interactivity to enhance the user
experience.
1. Homepage
|
| Fig.3.6.1 Homepage / (Week 12, 6/7/2025) |
This is the homepage with a sticky navigation bar that stays visible while scrolling. The homepage includes a hero section with promotional images and call-to-action buttons.
Design Details:
1. Typography: Cooper Black for headers
&
Arial Rounded MT Bold for
body.
2. Color Scheme: The main colours are Marrybrown red, soft beige
backgrounds, and grey for secondary text.
2. Menu Page
|
| Fig.3.6.2 Menu Page / (Week 12, 6/7/2025) |
Process & Features:
- The menu page displays
product cards showing
food items with
image, name, price (single/combo), and an "Order Now" button.
- All pages includes the same
sticky navbar for user to easily find
what they need. It also includes the footer at the bottom of the
pages.
- Hover effects were created to show
more details when hovering over a card. However, the design was differs
slightly from my Figma prototype. The food items will display their info
at the same time while hovering instead of hovering one-by-one.
|
| Fig.3.6.3 Menu Page - HTML & CSS / (Week 12, 6/7/2025) |
Issue:
As the original design required the cent portion ("RMX.50" to appear
smaller.
Solution:
To address this, I used the
<sup>
tag in my HTML to display the cent value of the food item price as
superscript, making the ".50" display slighty above the baseline in a
smaller size.
3. Promotions Page
|
| Fig.3.6.4 Promotions Page / (Week 12, 6/7/2025) |
Process & Features:
The original design in Figma only showed a section of promotions on the homepage when scrolling down. I expanded this by creating a dedicated promotions page featuring grid cards for each promo, titles, and tags (dates & how/where to apply).
The original design in Figma only showed a section of promotions on the homepage when scrolling down. I expanded this by creating a dedicated promotions page featuring grid cards for each promo, titles, and tags (dates & how/where to apply).
|
| Fig.3.6.5 Promotions Page - HTML & CSS / (Week 12, 6/7/2025) |
I used "transform: translate Y(-5px)"
to moves the element upward along the Y-axis when hovered, creating a
floating effect.
Process & Features:
The contact is the same that I created at the Homepage, I duplicated the footer and the navigation bar as well.
Process & Features:
4. Contact Page
|
| Fig.3.6.6 Contact Page / (Week 12, 6/7/2025) |
Process & Features:
The contact is the same that I created at the Homepage, I duplicated the footer and the navigation bar as well.
5. Account Page
|
| Fig.3.6.7 Account Page / (Week 12, 8/7/2025) |
Process & Features:
This page was not designed in my Figma prototype, but I designed it to
meet the 5-page requirement for this project. It has a
background image, welcome text, basic input fields, and a "Log In"
button. I kept the navbar and footer consistent across all pages.
*Additional (Navbar Hover Effect Across Pages):
I wanted each navbar link to visually stay in the "hovered" state when
the user navigates to that corresponding page (e.g., when on the Menu
page, the menu link should stay highlighted)
|
|
|
Steps:
1. In each HTML page, I used
<a> tags inside the
navbar.
2. Add class="active" to the link
that corresponds to the current page. (Fig.3.6.8)
3. CSS styling for active state.
FINAL OUTCOME
URL Link: Click here
|
| Fig.4.1.1 Homepage / (Week 13, 22/7/2025) |
|
| Fig.4.1.2 Menu page / (Week 13, 22/7/2025) |
|
| Fig.4.1.3 Promotions page / (Week 13, 22/7/2025) |
|
| Fig.4.1.4 Contact page / (Week 13, 22/7/2025) |
|
| Fig.4.1.5 Account page / (Week 13, 22/7/2025) |
|
| Fig.4.1.5 Footer / (Week 13, 22/7/2025) |
Walkthrough Video
Fig.4.1.6 Walkthrough Video / (Week 14, 25/7/2025)
YouTube Link: Click here
REFLECTION
Experiences:
This final project was really a challenging journey for me. It was my
first time using Adobe Dreamweaver (HTML & CSS) to build a real
complete website, and honestly, I found it hard at the beginning.
There was many parts that confused me, especially when trying to
understand how the layout works or how to make the effect I wanted. I
also had a lot of ideas for hover effects, transitions that I applied
in Project 2, but I didn't know how to make them happen. I spent hours
just trying to fix one small section. Hence, the final outcome didn't
turn out exactly like how I designed in Project 2, especially in terms
of interactions and effects. But overall, I still feel proud of myself
and satisfied with what I was able to create at the end.
Observation:
While working on this project, I noticed the different of designing
visually in Figma versus building it with code. In Figma, I could
place anything freely and make it look nice. But in HTML and CSS,
everything were much complicated that I had to consider the
structure, alignment, padding, responsiveness, and more. I
also realized that websites need to be usable on all screen sizes,
which I had met this problem while creating.
Findings:
Overall, I just wanted to say that coding was not easy, respect for
UI/UX design students. I had to prepare well for my next semester as
I chose UI/UX for my specialization. I also learned more about HTML
and CSS, I found out using flexbox for layout making the site
responsive. I now understand more about how websites function. This
project pushed me to learn new skills, and even though it was tough,
I'm happy with what I've learned.
Comments
Post a Comment