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

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

Design Principles / Task 3

03.02.2025 - 21.03.2025 / Week 5- Week 7 GAN YI KIAN / 0374572 Design Principles / Bachelor of Design (Hons) in Creative Media Task 3 / Development & Design INSTRUCTIONS Task 3: Development & Design After the visual analysis,will now create a work of design , based by the idea have proposed in Task 2. expected to apply knowledge of design principles in idea development and final design. Can use any medium and/or materials , except for full photography, that are suitable to convey your final visual message. I will choose the first sketch to create the work Sketch 1 This design retains the tranquility and dreamlike feeling of Monet's original painting. I want to enlarge the main water lily in the center and make it the focus of the whole painting. Fig 1.1 Sketch 1 (3/3/2025) I am confused about whether to use watercolor or illustration design, because both are areas I am not good at. Using watercolor can better express the relationship between the water surface. In terms of c...
Post a Comment
Read more

Intercultural Design

07.02.2025 - 24.03.2025 / Week 1- Week 7 GAN YI KIAN / 0374572 Bachelor of Design (Hons) in Creative Media Intercultural Design  Proposal, Data Collection & Final Project  INSTRUCTIONS Note Week 1 Culture & Design At the beginning of the first day, Mr. Asrizal briefed  us with the precautions and course outline of intercultural design, and then Ms. Noranis's lecture began, and we began to divide into groups. Then my group members included Indonesia and Chinese. Week 2 CMYKL brief Our team was confused about what ‘Everyday Design’ was all about. Then, during this week, we came up with the idea of ​​a clip-on cup holder, focusing on portability and functionality, and even incorporating Malaysian culture such as tiger stripes or “batik” patterns. In fact, there were many more ideas at the beginning, including the design of bowls and board game cards. It was also during this week that we learned that our mentor was Mr. Charles. Week 3 Proposal Q&A sessio...
Post a Comment
Read more