Interactive Design - Final Project
FENG SHIWEN / 0374595
Bachelor of Design in Creative Media
Taylor's University
INSTRUCTION
Final Project
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:
Working Process :
LINK : https://finalprojectfff.netlify.app
Brief Report
- Development Process
This semester marked my first foray into the world of interactive design. Through the entire semester’s learning process, I have mastered the basic operations of Figma and Adobe Dreamweaver (Dw). My final project involved translating the website prototype from a previous assignment into a functional website using the knowledge of HTML and responsive design acquired in class.
At the start of the project, building the homepage framework was relatively smooth. The classroom exercises had equipped me with the skills to implement top navigation, adjust text sizes, and create hover effects with code. Using Dreamweaver for this process was straightforward because I had already practiced similar tasks during the semester. Dreamweaver's interface, which allows switching between the code view and the design view, was particularly helpful for verifying my progress visually as I wrote the code. After successfully completing the homepage, I moved on to creating additional pages.
However, I encountered a challenge when it came to enabling navigation between multiple pages, as this was something I had not practiced before. To resolve this, I searched online for tutorials on creating cross-page navigation. By creating a new HTML page and modifying the main page's <a> tags, I adjusted the href attributes to point to the respective paths of other pages. This initial implementation allowed me to achieve basic inter-page navigation by clicking buttons or links.
- Challenges and Solutions
Despite this progress, I faced significant difficulties due to the complexity of managing multiple page connections. Frequent switching between Figma and Dreamweaver to verify link destinations often caused confusion. Errors, such as incorrect paths, missing code segments, or unclosed HTML tags, disrupted page displays or made navigation fail entirely.
An additional issue I faced was related to Dreamweaver's code formatting. As a beginner, I occasionally forgot to properly indent my HTML and CSS code. This made it harder to identify errors in the structure, especially when dealing with nested elements like <div> tags. After struggling with debugging for some time, I learned to use Dreamweaver's built-in formatting tool to automatically organize my code. This step alone saved me significant time and frustration.
Through repeated debugging and careful checks, I managed to resolve these issues. For example, I meticulously reviewed each path and ensured all tags were properly enclosed. Additionally, I began keeping a simple list of page links and their corresponding paths in a notebook, which helped me stay organized and avoid mistakes. This experience emphasized the importance of patience, organization, and attention to detail when working with code.
Later, I tested the website on three browsers available on my computer: Google Chrome, Microsoft Edge, and Internet Explorer. I discovered a slow-loading issue with the homepage image, with Edge being the most affected. This problem had been mentioned in my proposal as a potential challenge. Facing it firsthand, I compressed the image files and updated the code in Dreamweaver to reinsert them. Re-testing the website under the same network conditions showed significantly improved loading speeds, resolving the issue effectively.
Another unexpected challenge occurred during testing on Internet Explorer, which did not display certain modern CSS properties correctly. For example, some flexbox-based layout elements appeared misaligned. To address this, I researched fallbacks and added additional CSS rules to ensure compatibility. This process deepened my understanding of how different browsers interpret code and taught me to anticipate such issues during development.
- Final Completion and Reflection
Finally, I organized the HTML files and image assets into folders and uploaded them to Netlify for final testing. After confirming the website ran smoothly online, I considered the project complete. This final step also gave me the opportunity to learn more about hosting and deployment, an area I had not previously explored.
This project has been immensely meaningful to me. It consolidated my prior knowledge and made me realize the importance of patience, meticulousness, and creativity in UI/UX design. Crafting a product with a better user experience not only requires an eye for aesthetics but also demands careful consideration of readability and interactivity from the user's perspective. Moreover, writing precise and error-free code is critical, as even small mistakes can disrupt the entire project.
One of the most valuable lessons I learned was the importance of adaptability. Encountering issues like browser incompatibility or slow loading times was frustrating, but tackling them taught me to approach problems methodically. I also learned that maintaining an organized workflow, such as keeping a checklist of tasks and potential issues, greatly improves efficiency.
I am grateful for the opportunity to learn such practical skills in this course and am determined to work even harder next semester to deepen my understanding of UI/UX design. My goal is to continue developing my technical skills and creativity, ultimately creating designs that are not only visually appealing but also highly functional and user-friendly.
Comments
Post a Comment