Interactive Design: Final Project
20.11.2024 - 04.12.2024 (Week 11 - Week 14)
Kiew Ting Yi (Nicole) / 0361143 / Bachelor of Design (Honours) in Creative MediaInteractive Design
Final Project
INSTRUCTIONS
Objective: The objective of this assignment is to bring your website redesign to life by developing a fully functional website based on
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.
FINAL PROJECT
DRAFTS & PROCESS
In the final project, I worked on the prototype while simultaneously diving into the code and understanding how Framer styles work. Framer offers a lot of styling options via knobs, which allowed me to make adjustments easily. I also familiarized myself with Framer’s CMS (Content Management System) feature, which came in handy for managing content on the site.
For visual assets, I made use of plugins such as Lumni, Unsplash, Phosphor, and Freepik to source AI-generated images and icons. One challenge I faced was that the template’s icons colors were not customizable because they were images. I had to outsource new icons and also referred back to the original website (Procan) frequently for additional pictures.
A lot of people who reads this blog may think I took the easy way route, but I actually really focused on the User Experience (UX) for this project. I asked my uncle and father a lot of questions regarding the original website, like:
- When was it made?
- How much sales were generated from the webpage,
- Why they think it didn't work?
- How do they usually get clients?
- How to transform traffic/users who visit the website to utilise their contact us form?
- What are the current complaints about the original page?
Answering all these questions were what I looked for in a template, so that it would stand out on its own.
One section I particularly enjoyed working on was the "Agents" page. It added a personal touch to the website, especially since I asked my father (one of the agents) for the names of other agents, making the section more authentic. Agents in Procan is currently the sole way of engaging with clients, and most of them tend prefer talking to an Agent, so I truly wanted to emphasize on the Agents, so I found a template that fits exactly that.
FINAL PROJECT OUTCOME
Link HERE
REFLECTIONS
The process of balancing design and code was a learning curve, but working with a visual tool like Framer helped simplify the workflow. I appreciated the flexibility it offered, and the inclusion of real-world elements, like the agents section, gave the site a much-needed sense of authenticity and human connection. As I aim to be a UI/UX Designer or any roles in the Product industry for my future, my focus tends to be more on executing the solutions in the fastest way possible, and learning in a reversed engineering way. I actually found myself still going through the HTML and CSS, (and solving other problems that would be hard to be mentioned here, Mr Sam please let me know if you're around Campus anytime, we can have a coffee chat and I'll tell you all about it) and I think my own set of approach to this project has proven to me that understanding the concept is so much more important as technology can help us. While of course I would love to code by myself in the future for my other projects, but since this assignment has a problem that is near and dear to my heart, executing it properly mattered more. I showed the link to my dad and my uncle, and safe to say they might actually revamp their website using my design; which in all honesty, I think my role as a designer is fulfilled. So grateful for this module and thank you so much Mr Sam for believing in me despite not showing up as much as I would like to! This is my course module is definitely my favourite for this semester.
The process of balancing design and code was a learning curve, but working with a visual tool like Framer helped simplify the workflow. I appreciated the flexibility it offered, and the inclusion of real-world elements, like the agents section, gave the site a much-needed sense of authenticity and human connection. As I aim to be a UI/UX Designer or any roles in the Product industry for my future, my focus tends to be more on executing the solutions in the fastest way possible, and learning in a reversed engineering way. I actually found myself still going through the HTML and CSS, (and solving other problems that would be hard to be mentioned here, Mr Sam please let me know if you're around Campus anytime, we can have a coffee chat and I'll tell you all about it) and I think my own set of approach to this project has proven to me that understanding the concept is so much more important as technology can help us. While of course I would love to code by myself in the future for my other projects, but since this assignment has a problem that is near and dear to my heart, executing it properly mattered more. I showed the link to my dad and my uncle, and safe to say they might actually revamp their website using my design; which in all honesty, I think my role as a designer is fulfilled. So grateful for this module and thank you so much Mr Sam for believing in me despite not showing up as much as I would like to! This is my course module is definitely my favourite for this semester.
