Interactive Design- Final Project

26/09/2024 - 02/01/2025/ Week 1 - Week 14

GUAN YAXIN / 0370687

Interactive Design / Bachelor of Design (Hons) in Creative Media 

INTRODUCTION

 

Develop a website

link：https://liptontea.netlify.app/

In this semester's study, I got in touch with interactive design and learned some knowledge, such as mastering and using the basic operations of Adobe Dreamweaver and figma. The whole learning process is very meaningful, and I have gained rich and practical knowledge. My final project is developed according to the web page prototype made by project2 and transformed into a fully functional and operational website.

Website development

Implement:

Based on the prototype, the overall framework of the website is initially constructed by using HTML to enhance the interactivity and user participation of the website, including making navigation bars, creating hovering and clickable functions, etc., to ensure that the content level is clear, which is convenient for users to browse, give them immediate visual feedback and attract them to explore further.

Design consistency:

In order to control the style and make it consistent with the prototype of the web page, I use CSS to achieve design consistency in strict accordance with the prototype's color matching, typesetting and font specifications. As for the color scheme, I extracted the main colors of green and yellow from the prototype to ensure that the visual effects are coordinated and unified, creating a fresh and attractive atmosphere, which is in line with the theme of the brand. According to the design concept of prototype, the spacing, alignment and arrangement order of elements are adjusted, and the image is optimized as much as possible to ensure the reasonable division and beautiful layout of each page. In terms of fonts, I chose the font type that is consistent with the brand image, and set different styles according to the prototype to ensure that the text reads comfortably and smoothly, and will not cause visual fatigue to users. In this way, the website can accurately convey information, and complement the overall design style, further strengthening the impression of brand image in the hearts of users.

Responsive design:

It is a challenge for me to set diversified style rules according to different screen widths, keep the page layout as spacious and regular as possible, and display rich content information. I spent a lot of time.

Cross-browser compatibility:

After testing on browsers such as Chrome and Edge, I collected some problems, such as the compatibility of layout changes, the length of loading time and so on, and made some improvements to ensure that the website can run more efficiently.

Core functions:

Navigation: In order to make navigation clear, I built a simple and intuitive top navigation bar to ensure that each navigation link can accurately point to the corresponding page, which plays a role of prompting, so that users can clearly know their current location.

Interactive elements: through some improvements, the navigation operation is more smooth and natural, and attractive styles are set by CSS, such as appropriate border styles and rounded corners. In addition, I also designed some buttons, such as the arrows in the sliding part, to realize the smooth scrolling to the relevant content area of the page, so as to get a deeper understanding of some related information of the product.

Technical considerations:

Performance optimization: In order to solve the problem of slow loading of the website, I adopted the image optimization tool to compress some images in the website and convert more efficient image formats to improve the efficiency of image loading. On the premise of not affecting the visual quality, reduce the size of picture files and improve the efficiency of website operation. Every performance optimization is to make the website run better.

Final Test and Deployment:

Test:

Test on different browsers, such as Chrome and Edge, and collect some questions to improve the website, such as simplifying the content layout of some pages, optimizing navigation classification, etc., so that users can locate the information they need to find more quickly.

Deployment:

According to my previous experience, I chose Netlify as the hosting platform of the website, and according to its simple operation, I successfully deployed the website online.

After the deployment, I tested the website, and visited the website in different network environments to ensure that the website could load stably and quickly.

Through this assignment, I successfully developed a website that can run. Although I encountered many difficulties and obstacles in the development process, I always maintained a positive learning attitude, constantly explored solutions, gradually overcame one problem after another, achieved the set goals of the project, and accumulated valuable experience for developing websites.

Screenshot of code and live view

Screenshots of websites and files

FEEDBACK

Experience 

In this semester's study, I learned a lot of knowledge, and initially contacted with interactive design and mastered the basic operation of tools such as Adobe Dreamweaver and Figma. However, it is not an easy task to turn a web prototype into a fully functional website, which is a challenge for me. Especially in responsive design, cross-browser compatibility and performance optimization. But in this process, I learned new contents and exercised my design ability, which benefited a lot.

Observation

We should build a more reasonable html framework, optimize the layout, and think about how to predict and solve some problems that may occur in the development process earlier, so as to adopt a way that can achieve better results or be more efficient.

Findings

For a website, a clear navigation system is very important. It plays an indication role and is the basic element of a successful website. At the same time, the website needs to run at a higher speed and have a good responsive design to ensure a smoother experience for a wider range of users.