Interactive Design - Final Project
SHIMANLIN,（0375858)
BACHELOR OF DESIGN(HONOURS)IN CREATIVE MEDIA || TAYLOR'S UNIVERSITY
INTERACTIVE DESIGN- Final Project
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Task
4. Feedback
5. Reflections
LECTURES
WEEK 1 - 2 LECTURES: PLEASE CLICK HERE
WEEK 7 LECTURES: PLEASE CLICK HERE
INSTRUCTIONS
TASK
Final OJ web link: https://orangec.netlify.app/
Figure 1.1 Final website - products /week 14 (July 22, 2025)
Figure 1.2 Final website - About us /week 14 (July 22, 2025)
Figure 1.3 Final website - Service /week 14 (July 22, 2025)
Figure 1.4 Final website - customer testimonials /week 14 (July 22, 2025)
Figure 1.4 Final website - Home page /week 14 (July 22, 2025)
Production process
The production process of this website is mainly divided into five stages:
demand analysis, design planning, front-end development, debugging and
optimization, and deployment and launch. Throughout the process, I combined
design and technology to continuously adjust and improve to ensure that the
website achieves the expected goals in terms of function and vision.
1. Demand Analysis and Planning
At the beginning of production, I first clarified the goals and functions of
the website. Considering that the main purpose of the website is to provide
concise and clear information display and user navigation, the focus of the
function is on the clarity of the page structure, the convenience of
navigation, and responsive adaptation. By analyzing the browsing habits of
target users, it is determined that the website needs to be compatible with
multiple devices, especially mobile phones and tablets, to ensure a good
experience regardless of the screen size.
2. Interface Design and Prototyping
In the design stage, I focused on the unity of color and visual comfort, and
chose orange as the main color, which reflects vitality and maintains
affinity. The overall style of the page is simple and modern, with large
blank spaces and clear layout for easy reading.
Responsive design was also planned at this stage, and multiple layout
solutions were designed for different screen widths to ensure that mobile,
tablet and desktop terminals can be adapted.
3. Front-end development implementation
During the development phase, I mainly used Adobe Dreamweaver for code
writing and page design. The software provides real-time preview and code
prompt functions, which allows me to write and watch while developing, and
adjust the page structure and style in time, which greatly improves work
efficiency.
I built the structure of the entire website through HTML, but the main
visual presentation and interactive effects are achieved through CSS and
JavaScript. I manually wrote CSS styles in DW to complete the overall
layout and visual design of the page. In order to make the website
responsive, I used Flexbox layout to achieve adaptive adjustment of page
content under different device sizes. In addition, I also used media
queries to adjust font size, layout and element spacing according to
screen width to ensure consistent browsing experience on mobile phones,
tablets and desktops.
In order to enhance the visual dynamics of the page, I added animation
effects in CSS to make buttons and navigation have detailed changes when
the mouse hovers, making the page more interactive.
In terms of JavaScript, I wrote basic interactive scripts in DW, mainly
used to achieve the expansion and collapse of the navigation bar menu and
the dynamic effects of the page when scrolling. For example, when you
click the menu button on a mobile device, you can use JS to control the
display and hiding of the menu. In addition, I also set up a scroll
listener event so that the navigation bar can remain fixed when the user
scrolls down the page, improving the overall browsing fluency.
The entire code structure is kept simple and clear, and the CSS and JS
files are independent, which is convenient for later modification and
maintenance. In DW, I constantly test the style and interaction effects
through the real-time preview function to ensure that the code effect
meets expectations.
Figure 2.1 Production process/week 12 (July 12, 2025)
4. Debugging and Optimization
After the development is completed, I tested the website on multiple
browsers and devices. In response to the layout disorder when browsing on
mobile devices, I adjusted the CSS breakpoints and element widths to ensure
that the content does not exceed the screen range.
In response to the compatibility issues of CSS animations in different
browsers, I added corresponding browser prefixes and downgraded some
animations to ensure the overall experience is consistent.
In order to improve the loading speed, I compressed the image resources,
compressed and merged the CSS and JavaScript files, and reduced HTTP
requests. At the same time, the page was performance tested to ensure that
the first loading speed meets user expectations.
Figure 2.2 Computer effects/week 13 (July 15, 2025)
Figure 2.3 Mobile phone effect/week 13 (July 15, 2025)
Figure 2.4 iPad effect/week 13 (July 15, 2025)
5. Deployment and Online
After the development is completed, I released it through Netlify. After
deployment, the last online test was conducted to confirm that the website
can be stably accessed and the functions are running normally.
Challenges and solutions
- Image responsiveness adaptation problem
Under different screen sizes, some images are displayed incompletely or deformed, affecting the overall visual effect.
Solution: Use CSS's object-fit: cover attribute to ensure that the image is cropped proportionally and fills the container, and adjust the image size in combination with media queries to ensure that it can be displayed reasonably on various devices.
- Performance optimization
The initial website loading time was long, affecting the user experience.
Solution: Compress image resources to reduce file size; compress and merge CSS and JavaScript codes; use Netlify's CDN acceleration and caching mechanism to significantly improve loading speed.
Summary
During the development process, most of the problems encountered came from cross-device adaptation and synchronous control of complex interactions. By consulting documents, debugging codes and repeated testing, I gradually solved these problems. This process not only improved my front-end technical capabilities, but also enhanced my ability to analyze and solve problems.
FEEDBACK
Week 12
Sir thought the overall layout and responsiveness were well done, and there were basically no mistakes.
Week 13
Sir also said the overall visual consistency was good and the functions were normal. He felt that the overall structure was mature and only needed to be polished.
Week 14
Sir said the overall operation was smooth and no problems were found.
REFLECTIONS
Experience
During the development process, I completely converted the design prototype into a fully functional responsive website for the first time. Although I encountered many technical details, I gradually became familiar with the comprehensive use of HTML, CSS and JavaScript through continuous debugging and learning. Especially when implementing dynamic carousels and mobile navigation menus, practice gave me a deeper understanding of front-end interaction. The whole process was full of challenges, and it also made me feel the sense of accomplishment of turning the design into reality with code.
Observations
I noticed that responsive design is not just a simple scaling of page elements, but requires detailed adjustments for different devices, such as font size, button touch area and layout hierarchy. At the same time, there are differences in CSS support between browsers, and compatibility processing must be done. In addition, dynamic interactions are prone to conflicts or freezes without reasonable event management, affecting user experience. Performance optimization is also critical, and reasonable resource compression can significantly improve loading speed.
Findings
Through this development, I found that good project planning and code structure can greatly reduce the workload of later modifications. Using semantic tags helps maintain code and improve SEO effects. The coordination of timers and event listeners in JavaScript is very important and must be precisely controlled to avoid interaction conflicts. Finally, user experience depends not only on visual design, but also on detailed interactions and performance. When faced with a problem, actively consulting materials and conducting repeated experiments are effective ways to solve the problem.
Comments
Post a Comment