Interactive Design | Final Project
26/11/2024 - 04/01/2025 | Week 10 - Week 15
Huang jiaqi/ 0371553
Interactive Design | Bachelor of Design in Creative Media
Final Project
Table of Contents
Module Information
Lectures
the prototype created in the previous assignment. This final product should reflect all the design and user experience decisions made throughout the project, resulting in a polished and professional website.
Assignment Description: Building on your redesign proposal and prototype, you are now required to develop the final working website. This website should be fully functional, demonstrating your ability to implement web design principles, front-end development techniques, and best practices in user experience (UX) and accessibility.
Website Development:
Implementation: Convert your prototype into a fully functioning website using HTML, CSS, JavaScript, and any other relevant technologies or framework (e.g., Bootstrap).
Design Consistency: Ensure that the final design remains consistent with the approved prototype, including typography, color schemes, imagery, and layout.
Responsive Design: The website must be fully responsive, adapting seamlessly to various screen sizes, including desktops, tablets, and mobile devices.
Cross-Browser Compatibility: Ensure that the website functions correctly across multiple browsers (e.g., Chrome, Firefox, Safari, Edge).
Core Features:
Navigation: Implement a user-friendly navigation system that allows visitors to easily access all key areas of the website.
Interactive Elements: Include any necessary interactive features, such as forms, buttons, or dynamic content, that enhance user engagement.
Technical Considerations:
Performance Optimization: Optimize the website for fast load times by minimizing file sizes, using efficient coding practices, and employing tools like caching and compression.
Final Testing and Deployment:
Testing: Conduct thorough testing of the website, including usability testing, cross-browser testing, and responsiveness checks. Document any issues found and how they were resolved.
Deployment: Host the website on a live server or a web hosting platform of your choice (e.g., GitHub Pages, Netlify, or a custom domain). Ensure that the website is accessible via a public URL.
Submission:
A live URL to the fully functional website. A brief report (800–1,000 words) documenting the development process, any challenges faced, and how they were overcome in your E-Portfolio.
Development Process
We chose a theme and made a draft on Figma. I chose the fashion website that I am most interested in to design.
Challenge 3: JavaScript Compatibility Issues
Question: There may be differences in the support of certain JavaScript functions in different browsers.
Solution:
- Use the cross-browser support function provided by jQuery to solve compatibility problems
- Test the running effect of scripts on mainstream browsers (Chrome, Firefox, Safari, Edge) and fix potential problems
Submission:
HTML Code:
Reflection
The development of this project has been a transformative learning experience, providing both challenges and growth opportunities. From initial planning to final deployment, I gained insights into the complexities of web development and the importance of attention to detail.
1. Initial Planning and Conceptualization
The journey began with brainstorming ideas and drafting a design using Figma. Choosing a fashion website as the theme was driven by my personal interest in fashion and aesthetics. The design phase taught me the value of visual hierarchy, user flow, and alignment. Translating these concepts into an interactive web layout became the foundation of the project.
2. Building the Website
Implementing the design into code required integrating multiple technologies such as HTML, CSS, JavaScript, and Bootstrap. One key takeaway during this phase was the significance of responsive design. I created a separate responsive.css file to ensure the website adapted seamlessly to various screen sizes, from smartphones to desktops. Utilizing media queries, flexible grids, and relative units was crucial in achieving this adaptability.
I also explored tools like Font Awesome for icons and customized Bootstrap components for a polished look. This process deepened my understanding of modern web frameworks and their ability to streamline development.
3. Challenges Faced
Despite thorough planning, challenges arose. One notable issue was ensuring cross-browser compatibility. Some elements rendered differently on browsers like Chrome and Safari, which required careful debugging and testing. Additionally, balancing aesthetic appeal with functionality posed another challenge. For example, while visually complex layouts looked appealing, they sometimes hindered usability on smaller screens.
Another technical challenge was optimizing images and ensuring fast page loading times. By compressing images and minimizing CSS and JavaScript files, I overcame this hurdle and improved performance.
4. Problem-Solving Strategies
Overcoming these challenges required patience and creative problem-solving. Online resources, such as forums, tutorials, and documentation, were instrumental in resolving issues. Testing iteratively on different devices and resolutions also helped identify potential problems early in the development process.
Collaboration with peers and seeking feedback was equally valuable. Constructive critiques helped refine the website’s design, functionality, and overall user experience.
5. Key Takeaways and Reflection
This project emphasized the importance of adaptability and continuous learning in web development. Beyond technical skills, I learned to approach problems methodically, break them down into manageable components, and iterate solutions effectively. It also reinforced the value of designing for users—prioritizing accessibility, usability, and aesthetics to create a seamless browsing experience.
Moving forward, I aim to further enhance my skills in advanced JavaScript frameworks like React and explore backend technologies to build full-stack applications. This project has not only solidified my interest in web development but has also inspired me to push boundaries and strive for excellence in future endeavors.
Comments
Post a Comment