INTERACTIVE DESIGN - FINAL PROJECT WEBSITE
2/7/2025 - 27/7/2025 ( Week 10 - Week 14 )
SUN YUTONG (0377440)
Interactive Design / Bachelor of Design (Honours) in Creative Media
Final Project: Final Working Website
INSTRUCTIONS
Final Website Link: https://propertyinve.netlify.app/
Choose a Website to Redesign: https://propertyinvestorsnetwork.co.uk/
Drive Project File Link:
First I added two pages in Figma, Learning and About. Then I created a new
folder and started trying it out in Dreamweaver.
Fig 1.1 Figma Prototype
I created five pages: index.html, event.html, about.html, learning.html, and
contact.html, as well as an images folder.
Next, I completed the code for the navigation menu bar and the button on the
right.
Fig 1.2 Navigation menu bar code.
In the CSS, I followed the example demonstrated by Mr. Shamsul in class. The
entire menu bar uses display: flex to achieve horizontal arrangement, and the
right button (.nav-buttons) uses margin-left: auto to push the button area to
the right.
I also added a hover effect to the button part. When the mouse hovers over
.nav-link:hover, the text color will turn orange.
Fig 1.2 Navigation menu css
Card section:
I finished the card part, and I used CSS Grid to achieve a two-column layout
based on the reference of W3schools.
Next, I completed the card code.
Fig 1.3 Effect display
In the education card section, I used flex-wrap and gap to achieve
responsive card layout.
In order to restore the dynamic effect in my figma, I added the card
enlargement + floating up with shadows in the CSS when hovering.
I also used .card-overlay. When it is still at the beginning, the
.card-overlay mask image is light blue, and when hovering, it becomes
transparent, and the image is more prominent. .card-content is initially
hidden, and then appears through opacity + transform animation.
Fig 1.4 Effect display
Footer section:
In the footer section I have used the <li> tag and I have also added a
“Back to Top” icon.
Fig 1.5 Footer section
I used a JavaScript script, which is used when the user scrolls down the webpage more than a certain distance (300 pixels), a "Back to Top" button will appear in the lower right corner of the page. After clicking the button, the webpage will scroll smoothly back to the top.
Fig 1.6 JavaScript
This CSS implements the expansion/collapse animation effect of the FAQ question and answer area, and uses color and arrow rotation to reflect the interaction of the answer bar. It cooperates with JavaScript to implement the expansion/collapse function of a single FAQ item.
User rating slider area:
Fig 1.7 JavaScript
Fig 1.8 FAQ Actual Effect
This code implements drag-and-scroll functionality for the .testimonials-slider testimonials slider area, including mouse events (mousedown, mousemove, mouseup) and touch events (touchstart, touchmove, touchend), allowing users to slide the testimonials content left and right on desktop or mobile devices using drag gestures.
Fig 1.8 JavaScript
Fig 1.9 Scrolling section
Adding mobile responsive view code:
I made all 5 pages of the website responsive and viewable properly on mobile device screens. Then I added a hamburger menu for mobile view in the mobile app, then I added the hamburger html code and Javascript code in the html to make it work properly.
Fig 1.10 Mobile hamburger menu
Fig 1.11 Mobile hamburger menu (html)
Fig 1.12 JavaScript
Short report
Development process and challenges:
In this website design project, I used Adobe Dreamweaver as the main
development software, and used the integration of HTML, CSS and some
JavaScript. During the development process, I constantly adjusted the page
layout, interactive effects and color matching style, especially in card
suspension, navigation bar switching and responsive design.
There were also many challenges in the whole process. For example, at the
beginning, I did not have a deep understanding of CSS properties such as
grid-template-columns, transform, opacity, etc., which resulted in unnatural
animation effects and chaotic layout. Some browser compatibility issues also
made me spend a lot of time in debugging, including using mobile devices to
observe after completion, and found many compatibility issues. In addition,
Dreamweaver often displays errors on some CSS expressions. During the
completion process, I browsed many websites such as W3schools, Bootstrap,
etc., as well as some tutorial videos on Youtube, which allowed me to learn
a lot about html and css, such as the hover effect of the card part, the
accordion effect of FAQ, etc.
Overcoming challenges:
Facing the problems encountered during the development process, I
gradually sorted out the actual effects and writing methods of CSS
animation and layout by studying and referring to W3Schools, MDN and Stack
Overflow, including asking GPT, so that I knew the specific meaning of
each CSS tag and how to use them to produce what kind of effect.
In DW, I frequently used "live preview" and Chrome browser for comparative
testing to confirm the actual situation of each code modification and
ensure the final website effect.
In the process of completing the development, in order to better
distinguish each part, I chose to develop the page structure in modules,
such as navigation bar, card block, and footer separately, so that I can
know each part. I also repeatedly tested the interaction effect,
especially the animation emergence of .card-content. I set the combination
of opacity + transform to achieve a natural sliding entry feeling, which
is a very interesting attempt.
Overall conclusion:
This role not only deepened my understanding of HTML and CSS, but also
improved my ability to use Dreamweaver for front-end development. Through
continuous trial and error and debugging during the development process, I
learned how to analyze problems, find information and flexibly apply what I
learned. I also gradually accumulated knowledge and understanding about HTML
and CSS, which can be better used in specific website design.
In general, this is a very interesting and challenging learning process. It
allows me to experience the complete process of website design. Although I
don’t know how to operate and how to complete it at the beginning, the
continuous attempts and learning have also made me more clear about the
direction of further in-depth study in UI/UX and front-end development in
the future.
FEEDBACK
WEEK 12 and 13: Mr.Shamsul asked us to do website designin
REFLECTION
Experience:
In this task, I didn't know how to start at first because it was my first time to come into contact with HTML and CSS. In the process of using Adobe Dreamweaver, I learned to manually write and build HTML, CSS, and JavaScript while previewing the layout in real time. However, I encountered some challenges in the design process, such as layout alignment, responsive design for mobile devices, and implementing interactive features such as hamburger menus and draggable sliders. For example, when testing mobile devices for the first time, I found that there were problems with the layout and hamburger menu, so I searched for websites and watched video guides. After completing the project, I had a deeper understanding of how the various parts of the website interact. This project not only improved my technical ability, but also strengthened my confidence in creating practical and visually attractive web experiences.
Observations:
In the actual development process, I have observed that a good layout structure and component division can significantly improve the maintainability and responsiveness of the page. For example, when implementing interactive functions such as FAQ expansion and collapse, hamburger menu switching, and user evaluation drag and slide, I found that logically clear JavaScript and semantic HTML can effectively reduce the occurrence of bugs. At the same time, the mobile adaptation process also made me realize that media queries and flexible layouts are crucial to the cross-device experience. Through these observations, I have a deeper understanding of front-end development and have more interest in UI/UX.
Comments
Post a Comment