22.10.2024
QIULIHUA/0365036
Interactive Design/Bachelor of Design (Honours)in Creative Media
INSTRUCTION
Final project
- Figma Design Web UI
However, in the process of converting the design into code, problems followed. In particular, the color transition effect of the button and the page layout, after being implemented in CSS, the actual display effect deviated from the design. To solve these problems, I repeatedly adjusted the CSS style, tested the actual performance of the page, and optimized the button color, font size and layout details one by one to make the web page closer to the design expectations.
- Implementation of navigation and interactive functions
To improve the navigation of the web page, I designed a directory layout, and users can quickly jump to the corresponding topic page by clicking the corresponding topic word. These jump functions are implemented through the <a> tag in HTML. I paid special attention to the accuracy of the link to ensure that each link can jump to the target page normally.
In addition, I used the <meta> tag to implement the timed page jump function. For example, add the following code: <meta http-equiv="refresh" content="5;url=https://example.com">, so that the page automatically jumps after 5 seconds. This function can not only reduce the user's sense of waiting, but also enhance the fluency of the page. In order to cope with the different support of the <meta> tag in different browsers, I combined JavaScript to enhance the control ability of the jump, and achieved a more flexible jump effect through event monitoring.
- Dynamic interaction between buttons and fonts
In order to improve interactivity, I added dynamic color changes to the design of buttons and fonts. In CSS, I used the :hover pseudo-class to set the color change when the mouse hovers; in JavaScript, I dynamically implemented the switching of font color when the mouse hovers. When the mouse moves over the specified text, the font will turn yellow, gray or black, and the default color will be restored when the mouse moves away.
In preliminary tests, it was found that some mobile browsers did not respond to the hover effect in a timely manner, or the color change was too abrupt. To this end, I added a smooth transition effect in CSS to ensure that the color changes are more natural and smooth. At the same time, through multi-device testing, ensure that the page can display the interactive effects normally on various screen sizes.
 |
| Fig1.0 Button Changes |
- Design and implementation of the login page
The user login page is an important part of the project. In HTML, I designed a login form with input fields such as "First Name", "Last Name", "Email Address" and "Country", and set a submit button. The user information display part next to the form is hidden by default and will only be displayed after the user logs in.
To achieve real-time display of user information, I use JavaScript to monitor the form submission event to prevent the default submission action. The information entered by the user will be dynamically displayed on the page, such as "Welcome, User Name". This dynamic feedback improves the user experience. At the same time, the input box will be automatically cleared after the form is submitted to prevent residual information from interfering with the next input.
During the implementation process, the problem of failure to update the information in time after the form is submitted once troubled me. By using JavaScript's preventDefault() method to prevent the default behavior and dynamically insert the user information into the <div> element of the page after submission, I finally successfully solved this problem. The real-time display after the user submits the information enhances the interactivity and humanized design of the page.
 |
| Fig 1.2 Login page design |
During the implementation process, the problem of failure to update the information in time after the form is submitted once troubled me. By using JavaScript's preventDefault() method to prevent the default behavior and dynamically insert the user information into the <div> element of the page after submission, I finally successfully solved this problem. The real-time display after the user submits the information enhances the interactivity and humanized design of the page.
- Responsive design and cross-browser compatibility
Throughout the web development process, I encountered many difficulties, but through continuous exploration and improvement, I solved the problems one by one. From Figma design to actual code implementation, I have a deeper understanding of web design and development. Every detail design revolves around improving the user experience: the color change of the button, the dynamic interaction of the font, the real-time display of user information, and the jump logic of the page are all designed to provide users with a smooth and intuitive operation experience.
This project not only consolidated my front-end development skills, but also further realized the balance between user needs and technical implementation. By facing and solving problems, I accumulated more experience and finally completed a modern web page with both visual beauty and functionality, conveying the importance of animal protection to users and bringing users a good browsing experience.
Comments
Post a Comment