🪸
2025.04.30 - 2025.05.07
Qistina Nuralya Maria Binti Azly / 0354180
Interactive Design/ Bachelors of Design (Honours) in Creative Media / Taylor's University
PROJECT 3: FINAL WORKING WEBSITE
Table of contents (Quicklinks)
1. MODULE INFORMATION BOOKLET (MIB)
Week 09 - Week 10 - Week 11-14
1. MODULE INFORMATION BOOKLET (MIB)
This is the Module Information Booklet for this module:
2. PROCESS
Task: 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.
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.
~~~
As a bit of a recap from my previous projects, here are my design proposals and the prototype:
My chosen site to improve on is certifiedpolygraph.com
View the slides in Google Slides here.
Link to the Figma file: https://www.figma.com/design/b0yq527DHspGAT0NE3vJu4/Prototype?node-id=0-1&t=M7I1CgGsAUXjgm2h-1
2.1 Navigation & Footer
I started by first searching for sources I would use for my site and that included icons. But to keep some things simple, I also used default unicodes that html could read as default icons.
At first, my footer looked like in Fig 2.1.2, but there was part of the code where it formatted the entire thing to be in the center with a big margin left and right. So, I played around with the width of the footer's content and managed to make it appear like in Fig 2.1.3.
However, I still had a bit of an issue with the buttons of the right since they were different widths. Hence, I played adjusted the "E-mail" button's width and padding as well.
For the footer icons to work, I realised I needed to add an additional script in addition to Bootstrap and that was FontAwesome. At first I used the link withing the <head> section of the html code but I then the icons were just not showing up. So I had to add an additional script near the very end of the html code.
Then I started on the hardest piece of the navbar, the dropdown menu. I couldn't do a one-to-one design with my prototype but following tutorials on Y0uTube, I did what I could to implement the style of my site with it.
Despite listing out both Featured Appearances and FAQs, I decided to do only FAQs page because I had an interesting idea to use for it.
Fig 2.1.8 is the final layout for both navbar and footer. It isn't shown here but any interact-ables in the nav and footer had a 0.3s transition to their respective :hover styles.
In terms of responsiveness, I searched up how to create a sort of hamburger menu that could be accessed for mobile to access the nav bar. Noticeably, the consultation button was messed up in smaller screens.
Thus, I adjusted the @media for the consultation button which included adjusting the margin, padding and also orientation. It isn't as perfect as I wish it'd be but I'm satisfied I managed to fix it from what it was before.
2.2 Main Page
I referenced code from the bootstrap for the hero section but made sure to add my own text and picture to it of course. I also brought back the consultation button here but with a few adjustments.
Next, I started with the testimonial section of the main page. I separated it into two divs; one for the left text and the other for the "testimonial card".
For the profile pictures, I had to crop them to be a 1:1 ratio.
Once I figured out how to create the card, I encountered a problem with the "Read More" link; to which I solved by adding padding to the bottom of the text.
This section was mostly simple since I just had to but one side to the right and the other to the left. but because I needed to make sure it was responsive as well, I had to add additional code to it especially in the CSS.
2.3 Services
This page was quite simple to create, I mainly just had to put things left and right again but had to make changes to it as well like in Fig 2.3.2, I added an additional bullet list to match with my prototype design.
2.4 Consultation Page
The first part of this page was similar to the previous ones but now to I had to add a consultation form which should be functional. It took me a while to adjust the little things like the functionality of it and all, but overall it looked good enough with the same colors I used for the prototype.
Because it was a form, the submit button needed to be functional too so I added a bit of javascript according to tutorials and forums but I kept getting an error page when I clicked submit.
So, I tried finding a template for a working submit button and also a "feedback" where when users send it the required info, a "Success" section appears below the button to confirm the user's info has been received.
2.5 Testimonials Page
I had to adjust the "back" arrow in testimonials which in turn meant I had to adjust the arrow in CSS as well.
The first three sectiosn of this page were routine, just with small style changes. for the "plenty more testimonials" section though, I departed heavily from my prototype design since on review, the design felt a bit too "fun" for the tone of the website.
So, I adjusted the section to only be the quotes rather than having pictures of the clients since the first three section of thhis page already did that.
It was at this point I decided to add a "fade-in" transition when moving between pages. I searched up how to do it and applied the code into my html and css code. I did adjust it so that it faded-in within a 0.3.s duration.
I also realised here that the nav for all the pages (besides index.html) weren't working when it was in a mobile phone screen. And I found out this was only because I forgot to add in a specific script to all the pages I made after index.html.
2.6 F.A.Q Page
My idea for the FAQs (Frequently Asked Questions) page was simple. I just wanted to add a simple accordion where the collapsed panels were common questions a client would want answered before properly considering booking the service.
I got my accordion idea from W3Schools and used it as a base (Fig 2.6.2).
I finally added the last of the code for the entire website and that was of making it so the accordion wouldn't extend the section it was in.
3. FINAL
Google Drive Link: https://drive.google.com/drive/folders/1tmik1Q6d08VFQlw7-ypVK1c45E7fi5TZ?usp=sharing
Netlify link: https://certifiedpolygraph.netlify.app/
4. LECTURES
Week 09
This week, we immediately jumped into class by learning how to create dropdown menus. It was a bit hard to follow with the many dropdown and dropdown-content codes we had to use for each specific states of the dropdown menu. But the end product is satisfying.
Feedback:
- Everything looks nice.
- Keep in mind of document flow.
Week 10
During the class, we immediately jumped to learning how to create a homepage which included a navigation bar, footer and the contents between. It was definitely a very fast paced class, but in general I got to learn better on how to just flex in my html which will definitely help when I eventually do similar things for my website.
Week 11-14
Feedback sessions.
5. REFLECTION
Experiences
I personally did not enjoy the coding aspect of the project, as I'm more of an idea person rather than a technical one. However, it can be said that there were times when I figured out what was wrong with the code and managed to fix it that it felt like I rose from the dead. This was especially true for the Submit button for the Consultation page. There were also moments where I thanked my shallow understanding of HTML because it meant I could use that knowledge simpler html code for some sections.
Observations
I realised that despite my dislike of coding, I could still muster up a final product that would actually be satisfying to see. Despite that, I did love looking at my classmate's designs and I found myself asking them of their techniques as well. I'm very grateful to have very friendly classmates!
Findings
Overall, I think I can say confidently after going through all the projects, from exercise to final, that I will most likely not do coding again! Not to any offense to Mr. Shamsul of course, it is just that coding is mostly definitely not my cup of tea and is just in general very draining to do; as it felt, to put it simply, like I was doing the 0's and 1's of the design of which I'm aware is a whole level of complexity in of itself, but my brain processed it that way. Negative association aside, thank you Mr. Shamsul for tolerating our clueless brains and I'm glad this chapter can be put to a close.
🪸
Comments
Post a Comment