Labels

Interactive Design - Final Project Website

 26/5/25 - 9/6/25 (Week 6 - Week 8)
Anggia Tsani Rachmadiyanti, (0368487)
Interactive Design / Bachelor in Design (Hons) in Creative Media / Taylor's University
Final Project: Final Working Website 


 Final Working Finished Website Link : 


 Link of Chosen Ugly Website to Redesign : 


 Module Brief 




 Instructions: 

Objective: 

Bring your website prototype redesign to life by developing a fully functional html/css website (MINIMUM OF FIVE (5) PAGES) based on the prototype 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. 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.

Requirements:

- Convert prototype into a fully functioning website using HTML, CSS, JavaScript, or any other 

- 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

- 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. Optimize the website for fast load times by minimizing file sizes, using efficient coding practices, and employing tools like caching and compression. 

Final Testing: Conduct thorough testing of the website, including usability testing, cross-browser testing, and responsiveness checks. 

Deployment: Host the website on a live server or a web hosting platform: "Netlify". 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).


 Work Process On Dreamweaver: 

Before starting, I watched alot of tutorials online such as Youtube, W3Schools, the online lectures by sir on alot of html and css codes for all the elements I intend to put. This is the website I am going to redesign on: https://www.rainbow-kennels.com/ 

Here are the 5 web pages I will be doing:
  1. Homepage
  2. About Us 
  3. Pet Adoption
  4. Pet Boarding
  5. Contact Us
Recap of prototype (Project 2 previously):

Previously in Project 2, I have done a full 5 page prototype design for the website in Figma:

(Fig. 1) - Recap of Figma prototype screenshot 

(Fig. 2) - Recap of Figma prototype screenshot 


HTML & CSS Process on Dreamweaver:

For our final website we have to come up with both the normal desktop view as well as mobile view, in which sir told us to use max-width of 992 px for the mobile view.

Here is a brief process of how I built the website by using fully Dreamweaver HTML, CSS codes and abit of Javascript especially for elements like carousell sliders. 

Before starting off, I compiled all the images, html and css files into one folder on my desktop and later on managed sites on dreamweaver. I preferred having one css for each html page as I found it easier for me to work and design on that.

(Fig. 3) - Putting the files and images into the same folder


 (Fig. 4) - Putting the files and images into the same folder

1) Creating the header navigation bar & hero section:

I first went to Google font to search for the fonts I wanted to use and pasted the embedded code into the html code file. I then created the top white header menu section for the navigation menu and logo/CTA. I have also put hover animation when the cursor is hovered over the CTA buttons and pages links on top. I used the same code for the header for all 5 pages.

(Fig. 5) - Code screenshot of the fonts

(Fig. 6) - HTML & CSS Code screenshot of process

(Fig. 7) - Hero section screenshot of homepage


2) Creating carousells:

Creating the carousel picture slider was the most challenging part of this project as there were alot of trial and error that I had to do. I took the code from w3schools and replaced the content with the images I saved earlier in my folder. Specifically for the carousel element, a javascript code was needed to be put in the html code file for it to work. I added carousel sliders on 3 pages: About Us, Pet boarding and Puppy Adoption.

(Fig. 8) - Screenshot of code and javascript

(Fig. 9) - Screenshot of image carousell slider

3) Creating footers:

For 5 of the pages, I used the same codes for the footer. I added the links to all pages as well using <li> tags as well as a "back to top" anchor.

(Fig. 10) - Screenshot of HTML code

(Fig. 11) - Page footer design


4) Creating hover buttons, CTA and section dividers with patterns:

To improve user interactions and better navigation I added CTA buttons in the body sections as well as header, so that it is easier and faster for viewers to navigate and change to a different page.

(Fig. 12) - Screenshot of CSS code for hover button

(Fig. 13) - Making the hover buttons on cards

For the bottom CTA section divider, I added a spike pattern for the edges to make the website more fun and striking for the viewers...

(Fig. 14) - Spikes section divider design

(Fig. 15) - CSS Code for the spike section divider

5) Creating form for contact us page:

Creating the contact form page was quite challenging as there were alot of codes to put to make the form work properly with user feedback elements such as the submit success message as well as error messages. I searched online for the javascript codes and pasted it into my html code and then I edited the css codes. 

(Fig. 16) - Contact form codes & Javascript

(Fig. 17) - Making error prevention messages

(Fig. 18) - Making error prevention messages

(Fig. 19) - Making the success message when the submit button is pressed


6) Adding codes for mobile responsive view (max-width: 992 px): 

For the last part, I made all the 5 pages of the website responsive and can be properly viewed on smaller mobile devices screens. For this I only edited and added the css codes for the mobile view only at the bottom of the css file. However, for the homepage, I added a hamburger menu for the mobile view, therefore, I had to add the hamburger Javascript code in the html code file to make it work. The caroussel for the mobile view was the hardest part as I had to figure out and fix the placement of the arrows and sliders since it was distorted before. However, I managed to do it in the end.

(Fig. 20) - Inspect view to check on the responsive mobile screen view

(Fig. 21) - Inspect view to check on the responsive mobile screen view

To check on how the web looks like in responsive mobile screen view, I used the Inspect tool on google to check whether the layout is correct or not.

(Fig. 22) - Inspect view to check on the responsive mobile screen view

(Fig. 23) - Hamburger menu button on the responsive mobile screen view

(Fig. 24) - Javascript code for the hamburger menu

(Fig. 25) - CSS code for the hamburger menu

(Fig. 26) - CSS code for mobile view


7) Deploying & Publishing website to Netlify: 

(Fig. 27) - Deploying & hosting the web using Netlify



 Final Live URL to Final Website: 


 Drive Project File Link: 


 Report Write-Up: 

Development Process: 

The final assignment was quite fun for me personally, but it required a lot of patience and attention to small details as looking at the many codes can be quite stressful. Sometimes an element won't work because we missed out one symbol on the code, so I had to be careful. The task challenged me to take my previous redesigned Figma prototype and bring it to life as a fully functional website using Adobe Dreamweaver. I chose to redesign the poorly designed Pet Boarding website I encountered earlier in the semester. This site had multiple usability and aesthetic issues, poor layout structure, inconsistent typography, weak color contrast, and an unresponsive design. These problems became my starting point for an improved version. Since I had already created a redesigned consistent layout and design for the 5 web pages in Figma, this was a helpful visual blueprint during development of the HTML CSS website. I created 5 main pages: Home, About Us, Puppy Adoption, Pet Boarding, and Contact Us.

To begin development, I created a main folder which has the images, html and css files. In dreamweaver I started first by creating the home page and managing sites. To create different sections, I used <section> tags. For all the 5 pages I used the same codes and css for the header and footer so that it looks consistent. In the footer I added the email address, phone number, address and links to other pages too as well as the logo. I also added a back to top anchor button so it is faster for viewers to scroll back up to the top of page. I added CTA and hover buttons as well to navigate easier to other pages. For the carousel photo sliders, I researched for the Javascript codes to make it work and copied and pasted them into my html file. Another part which required Javascript was the contact form in the 'contact us' page. This was quite a challenge for me as there were a lot of testing and errors in the code which I needed to fix. I tried adding error messages and success messages as well in the form. I used Flexbox and Grid for responsive layouts, media queries for breakpoints across screen sizes, and a combination of web-safe and Google Fonts to match my Figma typography. 

After doing the desktop codes for the website, I added the css codes for the mobile view layout. Responsiveness was a key priority. I tested each page layout on a variety of screen sizes: desktops, tablets, and smartphones to ensure fluid adaptability. I checked the mobile screen view using the Inspect tool. Using media queries in CSS, I adjusted font sizes, paddings, and layout stacking. I made sure to use relative units like em, rem, and % instead of fixed pixel values for greater flexibility. I implemented a consistent navigation bar across all pages with a responsive hamburger menu for smaller screens. The menu items smoothly anchor or redirect to different sections or pages, and active states are highlighted for improved user feedback. The hamburger menu and carousel required the use of Javascript codes which I copy and pasted from online too.

 

Challenges Faced and How I Overcame Them

Despite the excitement, there were many hurdles throughout the development journey. Alot of the times I did trial and error when something is not showing on the website, so I kept on testing out different codes to see if it works and kept trying until it works. Sometimes I did not realise some css codes were duplicated, so I had to really check properly and have really sharp eyes to see if anything is missing in any of the codes. Alot of the time, I faced problems on the margins and paddings, so I just experimented adding new or different codes until it worked. However, each obstacle became an opportunity to learn and refine my problem-solving skills. One of the first difficulties was realizing that designing in Figma is different from coding a responsive interface. Some visual elements that looked great in the figma prototype design but did not translate well into flexible, scalable components. However, I managed to fix all of the problems by watching a lot of tutorials and self-learning some new codes online. I also referred back to Mr. Shamsul's lecture notes. At first I thought I wouldn’t be able to finish 5 webpages coding by week 14, but thankfully I managed to finish it early, because I also enjoyed the process of coding and designing using CSS as well, so it kind of motivated me to keep working on it. 


Final Testing, Deployment, and Reflection 

Once all pages were completed, I moved into the testing phase. I used the Inspect tool to check how the website looks on mobile screens. I also tested on my phone and ipad to check on the layout and see if the font sizes are readable and clear. I clicked through every link, button, and form field to verify they worked as intended. After final testing, I hosted the site on Netlify. I created a custom domain URL and verified that all assets (images, fonts, carousel, buttons) were loading correctly. 


Overall Conclusion: A Fun and Valuable Learning Experience 

Overall, this module has been one of the most enjoyable and valuable parts of my design journey so far in this semester honestly. While there were moments of frustration, especially during code errors, I genuinely had fun experimenting with code, styling elements, and learning through trial and error. There’s something satisfying about solving an error and seeing your design come to life in a browser. More importantly, this project helped me realise that a strong prototype is only effective if you can translate it into a functioning, responsive, and accessible website. I used Dreamweaver back in high school and I’ve always wanted to explore and try something more with it, so I am happy I got to further explore coding in this module. I learned that creating a short website itself requires a lot of hardwork, precision and time. 

I’m happy with the final outcome of the website which I have developed. It reflects the UX principles I learned, my attention to detail, and my perseverance in learning how to write better code. I now feel more confident in building websites from scratch. Lastly, I’d like to thank Mr. Shamsul for all the patience, feedback, suggestions & advice. All the many class exercises sir gave to us was really helpful too.


 Feedbacks : 

Week 10 & 11: Sir said that my responsive mobile view and desktop both looks good and consistent already. However, he told me to remove tha "Home" nav menu on the home page since the logo when clicked already leads to the homepage.

Week 12: Sir said that everything looks good and said my final website works perfectly.

 Reflection : 

Experience:
To conclude, this whole interactive design module was actually a very fun and  transformative one. Although i'm going to specialise in graphic design, I found this coding module really interesting and it is like a fun challenge for me throughout the whole process of creating the HTML and CSS codes for the final website. It was the most enjoyable and valuable parts of my design journey so far in this semester honestly. Even though the workload was very heavy considering we have 4 more module to do, and time management was important, & there were moments of frustration, especially during code errors, I genuinely had fun experimenting with code, styling the css, and learning through trial and error. There’s something satisfying about solving an error and seeing the correct design in the browser. More importantly, this project helped me realise that a strong prototype is only effective if you can translate it into a functioning, responsive, and accessible website. I used Dreamweaver back in high school and I’ve always wanted to explore and try something more with it, so I am happy I got to further explore coding in this module. I learned that creating a short website itself requires a lot of hardwork, precision and time. To sum up, I’m happy with the final outcome of the website which I have developed. I would also like to thank Mr. Shamsul for all the feedback, suggestions & advice. All the many class exercises sir gave to us was really helpful.

Observations & Findings:
I observed that desktop view and mobile view of websites have alot of difference between them, such as fonts need to be way bigger than in desktop and that the text mostly has to be center aligned. I realise that creating just a section of a web can take hours to make it properly work. I also realise that creating a prototype such as in Figma before creating the final html website is important to really get a real idea of the web design you intend to do so it will be a guide to make it easier for us to create the final website using dreamweaver. I found that the process of making a website overall takes alot of patience, and time, from creating ideation, moodboards, proposals, wireframes, prototypes and finally the codes.


SEM:

Comments

Post a Comment