Labels

Interactive Design - Final Project

21 / 11 / 2024 — 12 / 12 / 2024
JING KEYAO/ 0370732
GCD 60904 / Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Project 3 -_Websites Redesign Development

Table of Contents

1. Instructions
2. Final Project
        ·Process
        ·Final Submission
INSTRUCTIONS
Final Project

This is the Figma I made in Project 2. It has three main pages, the home page, and two detailed pages. Now I will implement the design of this website in dw and make the three pages interactive and able to jump to other pages.

Fig.01_Prototype in Figma

I put the font style formatting of all pages in styles.css. This is very useful and clear for writing very long codes.

Fig.02_Code of Styles.css

Below is some breakdown of the finished product of my website design：

Fig.03_navigation

The main interaction I made was to enable them to jump to each other. Clicking on navigation would jump to the page I made, and clicking on any text would have a corresponding response, but it was not possible to jump to the page. In the future, I will work hard to learn how to complete it faster.

Fig.04_bottom

Fig.05_hero section

I didn’t change much about this page. I simply re-modified the layout of the products and text without doing too much interaction.

Fig.06_Product Detailed

I set up an interactive interface for this contact page, which allows for input and filling-in. This is relatively simple because I have already mastered the relevant content and completed the exercises in class.

Fig.07_Contact

I think every step in the process of making the webpage was a difficult challenge for me, because to be honest, this was my first time learning code. Although I majored in design, once there were a lot of codes, my brain would work very slowly and I would be overwhelmed. So this assignment took me a long time to complete. I think this is an assignment that will make me grow quickly and acquire knowledge quickly as I complete it.

- Final Website Link:


Labels:

Comments

Post a Comment

Popular Posts