Interactive Design - Final Project
22/9/2025 - 2/11/2025 (Week 1 - Week 14)
Lim Yeng San (0366316)
Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylors University
Final Project
TABLE OF CONTENTS
- Instructions
- Process Work
- Reflection
INSTRUCTIONS
Objective: The objective of this assignment is to bring your website redesign to life by developing a fully functional website (MINIMUM OF FIVE (5) PAGES 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, 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).
PROCESS WORK
Original website: http://thelanguageofflowers.com/
Header
I followed the Figma prototype closely with the logo on the left side and the tagline and navigation bar on the right. The hardest part was formatting the header for phone screens as the elements were large and had to be resized. Making both the header and footer were the hardest parts of this project especially with consistency on phone and tablet.
Footer
The footer initially had the same design as the prototype but was later changed. After feedback, the logo was made smaller and the navigation bar's design was changed.
Fig 2.1: Footer in prototype
Fig 2.2: Footer in final website
Like the header, formatting the footer to be responsive was also difficult. I set the tagline to display:none as I felt that the footer needed some more negative space. The navigation bar and social media navigation were set to be centered because of the small width of the phone screens.
Fig 2.3: Footer in final website on phone
In the tablet view, I mixed both the desktop and mobile formatting. I kept the tagline but used the navigation formatting of the mobile view. Keeping consistency for the footer among several pages was hard for both the phone and tablet view.
Fig 2.4: Footer in final website on iPad Air formatting
Home Page
Starting with the home page, I followed the Figma prototype with some slight changes. I was able to format the layout according to the prototype. I did make the buttons larger and centered.
Fig 2.5, 2.6 and 2.7: Button changes on home page
Fig 2.8: Home page on iPhone 14 Pro Max view
Flower Meanings Page
I set the layout just like the prototype without any major changes. The only change I made was to change some of the gallery images to copyright-free images from Pexels, Freepik and Pixabay as some of them were just downloaded from Google images. I also added hovering animations on each image where the flower meanings would be displayed when the mouse is hovered over the image. To inform users of this, I wrote a line of instruction above the gallery.
Fig 2.9: Hovering animations on flower meanings images
Fig 2.10: Added instruction on flower meanings images
The biggest challenge for this page was the phone and tablet formatting as it was difficult to space the row elements for small screen widths. In the end, I ended up centering the images so that 1 image would be seen at a time when scrolling.
Fig 2.11: Flower meanings page on iPhone 14 Pro Max view
On the contact page, the social media links layout was changed from a box to just the social media icons. This was easier to control for website responsiveness on phone and tablet.
Fig 2.12: Previous layout on the prototype
Fig 2.13: Final layout
For mobile view, I centered the layout.
Fig 2.18: Contact page on mobile
Romantic Meanings Page
Original webpage: http://thelanguageofflowers.com/romance.html
The original page only had a long list with no pictures.
The original page only had a long list with no pictures.
Fig 2.19: Original romantic meanings webpage
For my website, I made it into a gallery like the flower meanings page but with images in a 3:2 ratio. I also had the same hover animations as the flower meanings page.
Fig 2.20: Romantic meanings page gallery
Like the flower meanings page, I centered the layout for the mobile view.
Fig 2.21: Romantic meanings on iPhone 14 Pro Max view
Plant Care Page
Original webpage: http://thelanguageofflowers.com/plantcare.html
The original webpage only had large blocks of paragraphs without any images.
Fig 2.22: Original plant care page
For my website, I reordered the paragraphs so that the general information would be on top to be the first things viewers see rather than be at the bottom. I also added images on top of some of the subheadings to break up the large walls of text and provide breaks for viewer's eyes.
Fig 2.23: Plant care page
On mobile view, I centered the layout like the other pages.
Fig 2.24: Plant care page on iPhone 14 Pro Max view
Once all of the pages were tested, I uploaded the main project folder onto Netlify to publish the website.
Other Changes
I created a back to top button that sits at the bottom right corner of all pages. The button brings viewers back to the top of the current page they are using.
Fig 2.25: Back to top button
I also added a favicon.
Fig 2.26: Favicon
Main Challenges
Out of everything in the website development, formatting the website to be responsive for phones was the most difficult part of the whole process. I often got frustrated with adjusting the elements for a much smaller screen width as a lot of them did not align with my commands. As mentioned before, there were a lot of consistency issues with the header and footer on mobile and tablet view. I got through this with a lot of trial and error.
Other than that, on mobile view, I found a bug where scrolling down on the pages revealed a large white block on the top of the page that covered the elements and the background. It took a while to fix until my friend suggested a code to fix it.
Fig 2.27: White box mistake
Fig 2.28: Corrective code
FINAL OUTCOME
Link to published website: https://finalproject-limyengsan-0366316.netlify.app/
Link to Final Project main folder: https://drive.google.com/drive/folders/1hnBw1imjvvvZdoEr2WGlhJkOYGb6asBl
REFLECTION
While this project was very frustrating, I do admit I like the puzzling aspect of website development. As someone who isn't very tech-savy, it took a while for me to get everything correctly in place. The tutorials provided by my lecturer, Mr. Shamsul were simple and easy to follow as I used them as references for this project.
Comments
Post a Comment