INTERACTIVE DESIGN - FINAL PROJECT
ZHANG QIYU（0384019）
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, or 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, and upload the final project main folder into Google Drive and include the link in your e-portfolio (set the access to public).
In this project, my main task was to transform my website redesign prototype into a fully functional website. Unlike the earlier stages, which focused more on concept development and visual design, this assignment required me to turn my ideas into a real working product. Before starting the development process, I reviewed my previous design decisions, including layout structure, color scheme, typography, and user flow, to ensure consistency between the prototype and the final website.
During the development stage, I used HTML, CSS, and JavaScript to build the structure, visual style, and basic interactivity of the website. I developed the website page by page based on the approved prototype, and the final site consists of at least five main pages, such as the home page, information pages, content sections, and a contact page. I paid particular attention to the navigation design so that users can easily move between different sections of the website.
Responsive design was an important part of this project. I adjusted layouts, font sizes, and spacing to ensure that the website works well across different screen sizes, including desktop, tablet, and mobile devices. Initially, I encountered several layout issues on smaller screens, such as overlapping elements and cramped spacing. These problems were gradually resolved through CSS adjustments and the use of media queries.
After completing the development, I tested the website across different browsers and screen sizes to check both functionality and usability. Minor issues, such as button feedback and page transitions, were identified and improved in the final version. The website was then deployed on an online hosting platform, making it accessible through a public URL. The complete project folder was also uploaded to Google Drive as part of the final submission.
Overall, this assignment helped me better understand the process of turning a design concept into a real website, and it allowed me to gain practical experience in solving both technical and user experience challenges.
Submission
评论
发表评论