INTERACTIVE DESIGN / FINAL PROJECT
INTERACTIVE DESIGN / Final PROJECT
Low Xin Er / 0374596 / Bachelor of creative media
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).
Brief Report: Reflection on Website Coding Project
This report documents the development process and personal reflections on a website coding assignment that required translating a completed visual design into functional HTML and CSS. The project involved creating multiple independent web pages with consistent navigation, layout structure, and visual hierarchy. Through this process, I experienced significant challenges related to technical skill gaps, cognitive overload, and time pressure. However, these difficulties ultimately contributed to a deeper understanding of workflow management, problem-solving strategies, and the importance of building a strong foundation before refining design details.
At the beginning of the project, my unfamiliarity with coding posed a major obstacle. Although I had prior exposure to basic HTML and CSS concepts, I lacked fluency and confidence in applying them independently to a complex, multi-page website. As a result, the initial development stage was slow and physically exhausting. I approached the task by typing the code line by line with constant reference to notes and examples, which significantly reduced my efficiency. Simple structural decisions required substantial time and effort, and I often felt uncertain whether my approach was correct. This led to frequent interruptions in my workflow, breaking my concentration and increasing frustration.
As development progressed, the situation became more difficult rather than easier. The design files were visually detailed and structurally complex, including multiple sections, image layouts, navigation elements, and footer components. My coding ability at that stage was not sufficient to match the complexity of the design. In attempting to directly replicate the visual details without a clear structural plan, the code gradually became disorganized. Repeated changes, additions, and deletions resulted in inconsistent indentation, unclear class naming, and overlapping styles. Eventually, the codebase reached a point where debugging became extremely difficult, as errors in one section would affect multiple areas of the page.
At this stage, I made the decision to delete the existing code entirely and restart the project from the beginning. Although this choice initially felt discouraging, it was ultimately necessary. Restarting allowed me to reassess the task more objectively and recognize that the main issue was not effort, but strategy. I had focused too much on reproducing visual details too early, without first establishing a solid structural foundation for the website. This experience highlighted a critical gap in my understanding of proper development workflow.
After restarting, I adjusted my approach based on online tutorials and learning resources. Instead of attempting to complete the design all at once, I prioritized building the basic structure of the website. This included setting up clear HTML page hierarchies, consistent navigation across all pages, and a shared layout system. I focused on ensuring that each page functioned correctly as an independent unit before considering visual refinement. By simplifying my goals at this stage, I was able to regain a sense of control over the project.
This change in strategy had a noticeable impact on my emotional state. Previously, I felt constant anxiety due to the endless cycle of errors and revisions. The pressure of time combined with unclear progress created a sense of being overwhelmed. However, once I shifted my focus to foundational elements rather than perfection, the workload became more manageable. Establishing a working structure first reduced uncertainty and allowed me to view the project as a series of smaller, achievable tasks rather than one overwhelming challenge.
After completing the core structure, I gradually returned to refining design details. This included adjusting spacing, font sizes, color blocks, and image placement. Because the underlying structure was already stable, these refinements no longer disrupted the entire layout. I also gained a clearer understanding of how CSS could be used efficiently to control visual consistency while allowing individual page customization. This stage of development felt significantly more productive and less stressful compared to the initial attempt.
Through this project, I learned several important lessons. First, technical projects require alignment between design ambition and technical ability. When the gap between the two is too large, it can lead to inefficiency and frustration. Second, restarting is not a failure but a strategic decision when a project becomes unmanageable. Finally, building a strong foundation before focusing on details is essential, especially when working with unfamiliar tools or languages.
In conclusion, this coding assignment was both challenging and educational. While the process involved setbacks and moments of high stress, it ultimately improved my understanding of web development workflow and strengthened my problem-solving skills. The experience emphasized the importance of planning, adaptability, and continuous learning. These lessons will be valuable for future projects that require the integration of design and technical execution.
Comments
Post a Comment