Interactive Design - Final Project

For the website, I created 5 HTML files, one for each page. The original website consisted of only 3 pages. I collected all the information, rearranged and reorganized it into 5 final pages: the home page, order page, contact page, about us page, and product detail page. The first 3 pages were included and designed in my prototype.

1. Home Page

The main challenge I faced while creating the home page was the navigation bar. I needed two different styles of navigation bars for different pages. Some pages required a lighter-coloured font with a transparent background on the hero section picture (home page, about us page, product detail page), while others needed a regular navigation bar with a light-coloured background and dark-coloured font. To achieve this, I set two different CSS codes for both styles.

I imported Bootstrap, used its existing framework, and overwrote the visual design.

Fig 1.1 Navigation bar with transparent background

Initially, I wanted to create a navigation bar with a light-coloured font, and in the hamburger menu, it would change to a dark-coloured font on a light-coloured background.

Fig 1.2 Font colour error

However, when I tried to set the font colour separately, it didn’t work because the font colour for the hamburger menu overrode the code for the navigation bar, and it couldn’t be overwritten.

Thus, I changed the design for the menu to use the same font colour with a darker background.

Fig 1.4 Align dropdown menu to the right

Another problem I faced was that the original dropdown menu appeared on the left side of the screen, while the hamburger icon was on the right. I tried several ways to align it to the right.

Fig 1.3 New dropdown menu design

I used the same design for all the buttons in the website to maintain consistency.

Fig 1.5 Call-to-action button design

I also set a hover effect (enlargement) for the cherry icon in the 'Discover' section. By pressing the cherry icon, users would be directed to the product detail page.

Fig 1.6 'Discover' section

Fig 1.7 Hover effect for cherry icon

For the footer, there was a small problem. I have three columns of information in the footer, but at first, it wasn’t responsive as the content would all squeeze together when the screen got smaller. To fix this, I decided to separate the columns and apply CSS to each of them.

For the Facebook and Twitter icons, I imported PNG files, so I couldn’t design color feedback for them. I also didn’t link them to the existing pages in the final design because I found it significantly increased the home page’s load time during testing.

Fig 1.8 Footer columns

It was the first page I created, and it actually took me the longest time among all the pages. After building the homepage, the process became smoother. I applied the same code for the navigation bar (except for some pages with different designs) and footer across all pages to ensure consistency.

2. Order Page

For the order page, I mainly struggled with the order form.

Initially, I used the Bootstrap framework for the form design. However, when I tried to overwrite the design to match my prototype, the overall structure became messy and inconsistent. Therefore, I decided to create the form directly instead.

Fig 2.1 Original order form in prototype

There was a problem where the design appeared perfectly fine in the Dreamweaver preview. However, when I deployed the website on Netlify, the bottom row with three inputs overflowed the container.

Fig 2.2 Problem occurred with the bottom row of the form

I decided to move the 'ZIP' input section to the fifth line, and the finalized form is shown in Fig 2.3.

Fig 2.3 Finalised order form design

The form layout became consistent in spacing across screen sizes. However, a new issue appeared where, upon resizing the browser, some input fields would temporarily shrink or become misaligned, then return to normal after further resizing.

Fig 2.4 Inconsistent layout occurred when resizing the browser

To solve this issue, I first adjusted the flex property (flex: 1 changed to flex: 1 1 auto to give the fields more natural sizing behaviour) to better distribute space, set width to 100% on input fields to ensure they always fill their parent container, and added flex-wrap: wrap to allow rows to adapt better on smaller screens.

Fig 2.5 Attempt to solve the issue

I realized that the inconsistent layout was caused by the slow feedback when resizing the browser. The fields tended to stretch longer to the right while resizing from a smaller screen size to a bigger one, and then they would return to normal after a few seconds.

I suspect this might be caused by a delay in browser rendering, as the browser often needs time to recalculate the layout for the flexbox and other CSS rules. So, I minimized nested flexbox containers and avoided overly complex rules to improve the performance of the order form.

For the item selector below the order information form, Mr. Shamsul initially suggested using the card component from Bootstrap as the content container, without needing to make it functional. However, I still wanted to try to make it function like a real order section.

Fig 2.6 Product cart setting

I created a simple card system and used grid-template-columns to automatically adjust the number of columns based on the available space. Each column is at least 200px wide but can stretch (maximum width) to evenly fit the row.

After creating the overall layout, I learned and used JavaScript to make the quantity counter's increase and decrease buttons function.

Fig 2.7 Javascript codes for item selector

addEventListener is used to listen for specific events on an element and execute a function when that event occurs. I added this to ensure the code runs only after the webpage is fully loaded, to prevent errors caused by the code trying to find buttons before they're visible.

Fig 2.8 Javascript codes for decrease buttons

For decrease button, I loop through each button in the ".btn-decrease" list using .forEach, and for each button, I added a "click" event listener, for a specific function to run when a user clicks the button.

this refers to the button that was clicked. I assumed the number is the button's next sibling element (this.nextElementSibling). For this logic to work, I made sure the HTML structure was correct - the buttons and quantity were arranged properly.

I stored the number in the element’s textContent (e.g. "2"), and converted it to a real number using parseInt so I can perform arithmetic.

if (currentValue > 0) was used to check if the quantity is greater than 0. If it is, decrease the value by 1. This prevents the quantity from going below 0. If true, I subtract 1 and update the element’s text.

Fig 2.9 Javascript codes for increase buttons

For increase button, the logic was similar to the decrease function but slightly adjusted. Instead of nextElementSibling, I use previousElementSibling because the number comes before the increase button in the HTML structure. For this, I didn't need to check for a minimum value since there’s no limit to increasing the quantity.

Fig 2.10 Shopping cart finalised design (top part)

I tend to have designs with angular corners on this website, like the CTA button and the input fields in the form. However, for the shopping cart, I found that slightly rounded corners were more suitable, and it didn’t feel inconsistent with the overall design.

3. Contact Page

Fig 3.1 Contact information

Fig 3.2 Icons setting

For contact page, I aligned the four icons with the information accordingly and added a hover effect for the icons.

Fig 3.3 Contact form design

Fig 3.4 Contact form layout in Dreamweaver preview

One problem I encountered with the contact form was that the layout design appeared fine in the Dreamweaver preview, but when I deployed the website, the design of the 'inquiry type' field with the dropdown menu was different, as shown in Fig 3.5.

I tried to overwrite the design, but it didn’t work after several attempts. So, I decided to leave it as it was.

Fig 3.5 'Inquiry Type' field design in deployed website

4. About Page

I didn’t plan the design for the about page and product page in the prototype, like I did for the three pages above. So, I started by organizing all the information I wanted to include on these pages.

For the about page, I wanted to have more interesting and 'irregular' designs, so I tried to make the image in the introduction section look more engaging.

Fig 4.1 Image design

I decided to shape it as a polygon to match the image I chose. I spent some time exploring ways to do this and added a shadow behind the image.

Fig 4.2 Finalised design

For the section introducing the main features of the organization, I arranged three key pieces of information and designed them as three cards with titles. The detailed information appears when hovering over the cards.

Fig 4.3 Features card design

By setting the opacity differently for both the title and description (for normal and hover conditions), the effect was achieved on the first attempt. The only difficulty in this part was finding images with similar styles without them being too alike to the point of being boring. The images here were all color-adjusted in Photoshop. I wasn’t very satisfied with the image for 'Premium Quality' (the left card), but it was the best I could find at that moment.

Fig 4.4 Finalised design (hovering on the centre card)

5. Product Page

For the product page, I created two main sections with one CTA button at the bottom of the page, directing users to the order page.

The first section was to introduce the top three recommended flavors.

Fig 5.1 'Fruit' cards

I set three fruit icons (corresponding to the three flavors) as cards and added a hover effect for them.

Fig 5.2 Cards interactive design

I used the same technique—opacity—to create the effect where, while hovering over the fruit icon, it would enlarge, become lighter, and the text description would appear.

Fig 5.3 Finalised design (hovering on the left icon)

second section was to introduce the five main features of the services provided.

Fig 5.4 Layout design

I set different flex-direction values for the items on the left and right to create an alternating layout.

Fig 5.5 overall Javascript for scrolling effect

I used JavaScript to create a scrolling effect where the items would enlarge when they come into view as the user scrolls down.

I started by adding an event listener for the scroll event on the window. This way, every time the user scrolls, the code inside the event listener runs, triggering the function that checks which elements are currently in view.

Fig 5.6 Javascript

I used document.querySelectorAll to select all the elements in the feature section. To check if an element is visible on the screen, I used the getBoundingClientRect() method, which checks the position of the element in relation to the viewport.

Fig 5.7 Javascript

To determine whether the element is visible on the screen, I defined a simple condition:

I used rect.top to get the top position of the element relative to the viewport, and window.innerHeight is the height of the visible area of the browser window.

To check if the element is within a certain range of the viewport, I checked if the top of the element is less than window.innerHeight / 1.5 (meaning the element is within the upper half of the screen), and also if the bottom of the element is greater than window.innerHeight / 3 (meaning the element has passed the lower third of the viewport).

If both conditions are true, it means the element is within the area of the screen that I wanted it to be emphasized, so the system considers it "in view."

Fig 5.8 Javascript

If the element is in view (inView is true), I added the active class to that element, to trigger the enlargement and slight opacity changes when the element comes into view. If the element is not in view (inView is false), the active class was removed, effectively stopping any effect or animation.

Final Outcome

https://funny-lamington-30b2f3.netlify.app/

4. REFLECTION

Overall, it was a very fun project to work on. I had the chance to fully apply the knowledge I gained about HTML and CSS this semester. Although there were some challenges along the way, and I struggled to complete the project due to the hectic schedule, I still enjoyed it and learned a lot. I remember that in the first few classes, Mr. Shamsul mentioned that for this module and UI/UX studies, students need to spend time learning and exploring outside of class to improve and grow. So for me, one key takeaway from this project was learning how to apply JavaScript. I researched and applied it throughout the process, and when it worked, I felt extremely excited and rewarded. This semester, I learned many new things in this module, which has sparked my interest in further exploring this area. It has been a fun and valuable journey, and although I believe there is still room for improvement in my work, I am satisfied with the outcome at this moment.

Search This Blog

Tay Yue Chern (0373215)

Interactive Design - Final Project

Comments

Post a Comment

Popular posts from this blog

Advanced Typography: Task 4 Final Compilation & Presentation

Advanced Typography: Task 3 Type Exploration & Application

Advanced Typography: Task 1 Exercises