Skip to main content

Interactive Design / Final Project

23.09.2024 - 04.01.2025
GAN YI KIAN / 0374572
Bachelor of Design (Hons) in Creative Media
Interactive Design / Final Project





INSTRUCTIONS


Based on the prototype of the previous Project 2, I need to create 3 main pages in this Final Project, namely the Homepage, the login page, and the service page.

At first, I really didn't know how to start, until I asked my relatives to help me. Together we figured out how to use Dreamweaver to code.

Homepage
Sample

First, create the navigation bar, footer and chat button, because the same design will be used in other pages later.

Also add CSS to make them more beautiful and interactive.




Add a "learn more" button where I want it, before the image.
This is also a bit challenging because I need to adjust the position of the button step by step.


After that, add the content in the middle
This option bar is the most difficult part because need to adjust the displayed logo, the sliding distance, etc.


There were no other obstacles and everything was completed smoothly.
There is a Quick link section at the end of this page. The distance between the arrow and the text below also needs to be adjusted visually to make the distance between the two even.


Navigation Menu
This page is the menu option that appears when you click "about us" in the navigation bar.

Sample

This page is relatively simple because it is not very long. It is worth noting that there is a cancel button in the upper right corner, which will close this menu when clicked.


Contact Us
This page is the page you entered by clicking "keep me updated" in the Navigation Menu.
The same thing here is the navigation bar,footer and chat button so just copy the code and it's done.

Sample


It was a bit difficult here. My relatives and I didn't know how to restore the original prototype, so we searched for tutorials online.


The final result is not bad. Although it is a little different from the prototype, I think it is also good.

Login page
The difference between this page and the previous one is that the previous page is for leaving contact information, while this page is the login page.

Sample

The first thing to note is that the navigation bar is different from the previous one. There are no options in the middle of the navigation bar on this page, only the logo, search button and back button.

Although the prototype here does not have a chat button, I still added it, so I copied the previous code and added it to this page.



Service page
This is the last page, and also the most challenging page. I also made some minor adjustments that are different from the prototype.

Sample

Similarly, the navigation bar, footer, and chat button also use the code that has been created before.



Next is the content part. The first challenge is to make text inside the picture. I searched online for tutorials on this, which was a big challenge for me. Finally, I solved this problem.



Next is the design of these two blocks. I think this looks better than the prototype, so I put it like this.


Next is the design of these five blocks, which is also the difficult part to achieve. I only did research online to figure out how to make them.



This part is the same as the previous one, but the positions of the text and pictures are swapped.


Next are these three blocks, the same operation as above



The two blocks are on the left and right, and some blocks have pictures on the top and text on the bottom. There is also a "learn more" button.



This "Quick link" is also added above the footer on the homepage, so just copy it from there
The problem here is the lines above the text. I didn't know how to deal with it at first, and then I looked for tutorials online to figure out how to add lines above and below the text.

Lastly, put the file on netlify.com to generate a connection

Contact Us Entrance



Login page Entrance


Service page Entrance



Final Outcome
Final Project Link here
Google Drive File here











Labels:

Comments

Post a Comment

Popular posts from this blog

Application Design I / Project 2

26.05.2025 - 14.07.2025   / Week 5- Week 13 GAN YI KIAN / 0374572 Bachelor of Design (Hons) in Creative Media Application Design I Project 2 / UI/UX Design Document INSTRUCTIONS Project 2 / UI/UX Design Document Week 5 In this assignment, we need to complete the creation of a research plan according to the template and list of questions, and interview 5 people with the goal of obtaining first-hand experience with users. We need to take notes of their pain points (problems) and highlights (things they love) when using the service or their competitors. My target audience is Gen Z - finish the 5 interviews transcript - take down the data, one idea per post-it -sort them in affinity maps - find categories/themes - create 3 personas from those themes I basically divided the interview questions into 5 sections.I interviewed my friends and they answered me in Chinese, and I translated them into English. Interview Log Section 1: Background Section 2: User experience Section 3: Fu...
Post a Comment
Read more

Advanced Typography / Task 1

24.09.2024 - 19.10.2024 / Week 1 - Week 4 GAN YI KIAN / 0374572 Advanced Typography / Bachelor of Design (Hons) in Creative Media Task 1 / Exercises  LECTURES Week 1 Fig 1.1 Typographic System Examples  Typographic Systems "All design is based on a structural system" There are eight major variations with an infinite number of permutations. Axial Radial Dilational Random Grid Modular Transitional Bilateral Axial All elements are organized to the left or right of a single axis. Radial All elements are extended from a point of focus. Dilational All systems expand from a central point in a circular manner. Random Elements appear to have no specific pattern or relationship. Grid A system if vertical and horizontal divisions. Modular A series of non-objective elements are constructed as standardized elements. Transitional An informational system of layered banding. Bilateral All text is arranged symmetrically on a single axis. Week 2 Typographic Composition Emphasis  Fig. ...
Post a Comment
Read more

Application Design I / Project 3

13.07.2025 - 19.07.2025   / Week 12- Week 14 GAN YI KIAN / 0374572 Bachelor of Design (Hons) in Creative Media Application Design I Project 3 / Lo-Fi App Design Prototype INSTRUCTIONS Project 3 / Lo-Fi App Design Prototype Week 11 After I completed the whole process of booking a hotel, I showed it to Mr. Sylvain.After I finished the whole process of booking the hotel, I showed it to Mr. Sylvain. Then we need to build the sketches on figma for each scene before the next week. Week 12 A good idea I came up with is to add a chat function. If today's target is a group of friends who want to book a hotel, they can all use this app and enter a group to chat, and at the same time they can share hotel information to this group. They can vote, compare hotels, and even plan the itinerary of the trip. More plans can be made in this group, and other members can also participate in the selection process. Then based on this idea, I designed the first sketch on figma. Mr. Sylvain sugges...
Post a Comment
Read more