Interactive Design | Final Project

I made a new folder for the final project and managed a new site on Adobe Dreamweaver. The folder is an important thing when we want to make a website. If it does not have the same folder, the website will not work as well as usual or have something missing. So we need to save all HTML, CSS, and images in one (1) folder.

Figure 3.1 Chitato (Folder)

Navigation

For the navigation bar, I want to make it on the top of the page. The Chitato logo is on the left side, the main navigation links (Home, Features, Products, Reviews, News) are on the center-right side. and the interactive icon (such as search, shopping cart, and login) is on the far right side. The yellow hover text is seen when the mouse is moved over navbar items. Additionally, when users click the Chitato logo, it will take them back to the homepage (index.html) so no need to press a separate "Home" link. The navigation applied on every page (Home, Features, Products, Reviews, News).

Figure 3.2 Navigation

Here is the HTML & CSS on navigation:

Figure 3.3 HTML & CSS (Navigation)

Homepage

Homepage first section, I designed the slides layout to change automatically when hovered. This interaction makes the page feel more dynamic and gives users instant product variety without needing to click or wait.

Figure 3.4 Homepage

Here is the HTML & CSS on Homepage first section:

Figure 3.5 HTML & CSS (Homepage)

For the second section, I created feature cards (Chitato Lead The Wave, 17.??, Semasa Picnic). When the mouse hovers over a card, the card moves up slightly and a yellow border or shadow appears to highlight the card.

Figure 3.6 Homepage (2nd section)

Here is the HTML & CSS on Homepage second section:

Figure 3.7 HTML & CSS (Homepage 2)

For the third section, I created a product section with cards arranged horizontally, so that the user can scroll sideways to view more items. When the mouse hovers over a product card, the card moves up slightly and a yellow border or shadow, just like the feature card above. This interaction feels dynamic, modern, and encourages users to explore more products.

Figure 3.8 Homepage (3rd section)

Here is the HTML & CSS on Homepage third section:

Figure 3.9 HTML & CSS (Homepage 3)

For the fourth section, I made a review card design with a customer photo, their testimonial, their name, and a star rating. The card gets a yellow border and lifts slightly when selected or focused. The slide also changes automatically so it's like an auto-rotating carousel (but only one visible card is in focus at a time).

Figure 3.10 Homepage (4th section)

Here is the HTML & CSS on Homepage fourth section:

Figure 3.11 HTML & CSS (Homepage 4)

Footer

The interaction on footer when the mouse hovers over icons (Instagram, Facebook, Twitter) and text change color to yellow. On the right side, I fill the email to those who want to subscribe to the newsletter. The footer applied on every page (Home, Features, Products, Reviews, News).

Figure 3.12 Footer

Here is the HTML & CSS on Footer:

Figure 3.13 HTML & CSS (Footer)

Features Page

I created feature cards similiar to Homepage. When the mouse hovers over a card, the card moves up slightly and a yellow border or shadow appears to highlight the card.

Figure 3.14 Features

Here is the HTML & CSS on Features Page:

Figure 3.15 HTML & CSS (Features)

Products Page

I designed the product boxes to match the feature box layout that I used earlier to make clean, structured, and consistent with overall branding.

Figure 3.16 Products

Figure 3.17 Products #2

Here is the HTML & CSS on Products Page:

Figure 3.18 HTML & CSS (Products)

Reviews Page

I developed a customer reviews carousel that displays one active review at a time and auto-rotates between testimonials. The card includes: user profile picture, text review, username, and star rating. The interaction design work automatically changes every few seconds.

Figure 3.19 Reviews

Here is the HTML & CSS on Reviews Page:

Figure 3.20 HTML & CSS (Reviews)

News Page

I crafted a dynamic promotional carousel for Chitato. Each slide has a unique style (K-pop, animated, news, lifestyle) so it makes the website fun and visually engaging. The slide still centers around the product and tagline, reinforcing brand awareness. On top of that, I maintain the same slide layout across all (background images, text with button, and visual box with image).

Figure 3.21 News

Here is the HTML & CSS on News Page:

Figure 3.22 HTML & CSS (News)

JavaScript

Overall, this part was quite challenging and difficult for me because I needed to create sliders. For making sliders (like Swiper), I am using Swiper.js (a modern, powerful Javascript slider library) to create an autoplaying product carousel like on homepage, products, reviews, and news.

Here is the Javascript:

• loop

Makes the slides loop infinitely. When the last slide ends, it automatically goes back to the first.

• grabCursor

Changes the cursor to a "grab" hand icon when hovering (Good UX feedback for draggable sliders on products).

• centeredSlides

Ensures the active slide is centered in the swiper container.

• effect: "coverflow"

This enables the coverflow effect, which gives the 3D look like a rotating wheel.

• autoplay

The slide will auto-rotate every (...) seconds and continue rotating even if the user interacts.

• breakpoints (Responsive Settings)

Make the slider responsive, adjusting the number of visible slides based on screen width.

Figure 3.23 JavaScript

I include JavaScript in HTML to make websites interactive and dynamic. HTML can only structure content (like text, images, buttons), but it can't respond to user actions or update content without reloading the page. That's why JavaScript adds the power.

Figure 3.24 JavaScript on HTML

Media Queries

I made the website responsive on different screen sizes (likes phones, tablets, and desktops).

Figure 3.25 Media Queries

This part was quite challenging for me because we need to make sure it works well and fits with different styles depending on:

• Screen width or height (e.g mobile vs desktop)

• Device type (screen, print)

• Orientation (portrait or landscape)

Here is the CSS for media queries:

Figure 3.26 CSS (Media Queries)

4. Feedback

The overall website design is consitent!

5. Reflection

The first thing I will say about this final project is that it's difficult in some parts, such as media queries, because we need to make sure it works well and fits with different styles depending on screen width or height. Besides that, HTML/CSS is the easiest part of coding.

Ultimately, I was able to improve my coding skills and gain new insights into websites. Trial and error are essential for achieving the best results. I believe that to excel at what we do, we must be able to overcome obstacles, not avoid them.

◀ Project 2

▶ Home

Search This Blog

Cleonify Lab

Interactive Design | Final Project

Comments

Post a Comment

Popular

Typography ~ Task 1 : Exercises

Digital Photography and Imaging