INTERACTIVE DESIGN / FINAL PROJECT: 5-PAGE WEB DESIGN
01/07/2025 - 27/07/2025 (Week 11 - Week 14)
Aveline Kristie / 0372310
Interactive Design / Bachelor of Design (Honours) in Creative Media / School of Design
Final Project: 5-Page Web Design
TABLE OF CONTENTS
1. Instructions
2. Tasks
3. Reflection
1. INSTRUCTIONS
2. TASKS
For the final project, we were required to turn our Figma prototype into a real, functional website consisting of five pages. To start, I created five HTML files, one for each page of the site.
I began by working on the navigation bar because it would appear on all pages. Initially, I designed a simple navigation menu, but I quickly realized the importance of responsiveness, so I revised it by adding a mobile navigation feature for smaller screens.
After finalizing the navigation, I moved on to creating the footer, which would also be consistent across all pages.
Fig 2.4 Creating Footer Processes
Fig 2.5 Creating Footer Processes
In the footer, I included social media links for three platforms: Facebook, Instagram, and LinkedIn. However, after receiving feedback from Mr. Shamsul, I was advised to make all the social media logos appear in white so that the footer looked cleaner and more uniform in colour. This adjustment made the overall design more professional and visually appealing.
Fig 2.6 Creating Footer Processes
Next, I focused on the hero section for homepage. I decided to improve the button design by adding a hover animation. This small change made the interaction more engaging because the button slightly enlarges when hovered over. It’s a subtle effect, but it adds to the user experience.
Since I used background images on all pages, I also learned how to apply an overlay to ensure the text and content above remained readable. Initially, I thought it would be difficult, but it turned out to be simpler than expected and made the design look much better.
For the About Us page, I applied what I had learned back in the class about creating lists to structure the content effectively.
Next, I added a JavaScript-based scroll animation. This means that as the user scrolls down the page, sections fade in with a slight movement, making the page more visually interesting and dynamic.
Fig 2.11 Creating Scroll Animation Processes
To enhance user experience, I also implemented a “Back to Top” button. This feature allows users to quickly return to the top of the page without manually scrolling, which is especially helpful on longer pages.
On the Services page, I wanted to make the content more interactive. I created clickable cards that link to specific sections of the page. Since the company offers four different services, I designed four cards, each representing one service. This made navigation within the page more convenient for users.
For the Portfolio page, my goal was to implement a slider to showcase images horizontally. After some trial and error, I managed to make the slider work.
Fig 2.15 Creating Portfolio Page Processes
However, I didn’t like the default scrollbar, which looked too noticeable and disrupted the design. To solve this, I customized the scrollbar through CSS, making it transparent and minimalistic for a cleaner look.
Fig 2.16 Creating Slider Processes
On the Contact page, I created a functional form that users can fill out and submit. I wanted to make the form user-friendly by adding feedback confirmation after submission. To achieve this, I added JavaScript that displays a message confirming the submission.
Fig 2.17 Creating Contact Page Processes
I also included a dropdown menu and designed a hover effect that changes the options colour to red, which matches the website’s overall colour scheme.
All social media icons in the website are fully clickable, directing users to the respective platforms. Also in the contact page, I enhanced these icons with hover effects, making them feel more interactive and modern.
Fig 2.22 Creating Contact Page Processes
After completing the desktop layout, I worked on making the website responsive. I wrote additional CSS for screen sizes of 768px and 480px to ensure the design adapts well to tablets and mobile devices. This involved resizing fonts, adjusting spacing, and rearranging elements so nothing looked cropped or misaligned. I also ensured that images scaled properly without breaking the layout.
Fig 2.23 Creating Responsive Website Processes
Fig 2.24 Creating Responsive Website Processes
Finally, before deploying the site to Netlify, I created a favicon. I designed it in Adobe Illustrator using the letter “T” from the TagTeamSigns logo, set within a 512px by 512px artboard. I exported the favicon in both PNG and ICO formats and added it to the HTML pages so it would display on browser tabs.
Fig 2.27 Creating Favicon Processes
For the final step, I uploaded all the files to Netlify, renamed the project, and deployed the website. Now, it is a fully functional and accessible site that anyone can visit. This project allowed me to apply everything I learned in class, from HTML and CSS to JavaScript and responsive design.
Fig 2.28 Deploying Website Processes
In conclusion, the completed website aligns closely with the approved Figma prototype in terms of design, layout, and elements. It contains five fully functional pages, a responsive navigation system, and consistent use of colours and typography. Interactive elements such as a working contact form, back-to-top button, animated hover effects, and a portfolio slider enhance user engagement. The site is fully responsive across desktop, tablet, and mobile screens. Performance and usability have been considered, with attention given to layout adjustments and visual clarity. The website has been successfully deployed to Netlify, making it accessible through a public link.
Final Outcome
Website Link: https://avelinekristiefinal-project.netlify.app/service
Google Drive Link: https://drive.google.com/drive/u/1/folders/1YpaxLeCqwETYJqCcc5uQ20xZ6isGcfAm
3. REFLECTION
This project was a great opportunity for me to learn and apply what I had studied in class by turning my Figma prototype into a real functional website. One of the biggest challenges I faced was making the website responsive in different screen sizes. I managed to overcome the errors I've experienced while making either the HTML or CSS code. I also learned new skills while creating the website by learning with friends or looked for tutorials in YouTube. These steps taught me how HTML, CSS, and JavaScript work together to create a better user experience.
Another important part of the process was improving the design details. I applied overlays to background images for better readability, customized the scrollbar, and made social media icons interactive. Working on responsiveness was also a big learning experience because I had to adjust layouts for tablets and mobile devices. Overall, I am proud of the final result because it looks professional and works smoothly. This project help me to gain my skills in developing a working website.
Comments
Post a Comment