INTERACTIVE DESIGN / FINAL PROJECT

╎Gwendalyn Firly Bong / 0374580

╎Bachelor of Design (Honours) in Creative Media

╎Final Project & Report

I. Instructions

II. Final Project

III. Report

IV. Reflection

I. INSTRUCTIONS

II. FINAL PROJECT

Link to Final Website: https://donquijoteredesign.netlify.app/

Website Chosen: Link

Google Drive Project File Link: https://drive.google.com/drive/folders/1jrMi57_TwcihfSjjywllNF6HffsFXsW3?usp=sharing

Process

Based on the Figma design I previously created, I started making a fully functional website.

Figure 1.1: Figma Design

I decided to create 5 pages:

Homepage
About Don Quijote
Contact
Inquiries
Official Mascots

1. Homepage

Firstly, I started doing the homepage. Since my website has different blocks of colors separating each section, I started by creating different containers. I then created a navigation bar at the top, along with a bottom information bar, since I would be using it in all of the web pages.

I wanted the top navigation bar to be big and clear in order to allow users to access different parts of the website quickly.

Figure 1.2: Navigation Bar

Figure 1.3: Navigation Bar Code

Figure 1.4: Footer Contact

Figure 1.5: Footer Code

After setting up the navigation and contact bars, I moved on to developing the main content of the homepage. The homepage consists of four sections: the hero section, store search, services, and topics. I created separate containers for each section and applied the appropriate gradient backgrounds to match the design.

Figure 1.6: Hero Section

Figure 1.7: Hero Section Code

Figure 1.8: Store Search

Figure 1.9: Store Search Code

Figure 1.10: Services Section

I made this part interactive by making it blurry when not hovered over, and more opaque when hovered on.

Figure 1.11: Blur

I decided to use a simple horizontal scroll for the carousel instead of Javascript.

Figure 1.12: Carousel

Figure 1.13: Carousel Code

2. About Page

For the About page, I only had to work on the 2 content parts in addition to the navigation bar and footer. I used the code from the home page (the left and right parts) and adjusted it to my liking.

Figure 2.1: Section 1

Figure 2.2: Section 1 Code

Figure 2.3: Section 2

Figure 2.4: Section 2 Code

3. Contact Page

At the start of this project, I was worried about using JavaScript since I had no prior experience with it, and I initially tried to avoid it altogether. However, I really wanted to try creating an accordion menu for the FAQ section of my webpage. To learn the basics, I used W3Schools, as recommended by our teacher.

Figure 3.1: W3schools Accordion Tutorial

Figure 3.2: JavaScript Code

I reused a similar code to the services section to create a similar blur effect for the contact part.

This one accordion menu

4. Inquiries Page

I had the most trouble working on this page. The form part required a lot of trial and error, and I had trouble creating the spacing in between each sections.

Figure 4.1: Inquiry Page Zoomed Out

Figure 4.2: Code Page 1

Figure 4.3: Code Page 2

After completing the form, I decided to add a small pop-up box to signal the completion of the form. For this, I had to experiment with JavaScript.

Figure 4.4: PopUp

Figure 4.5: JavaScript Code for Popup

5. Mascot Page

This Page was the easiest to make, taking the base from the previous pages, and replacing them with the pre-existing photos from the original website

Figure 5.1: Mascot Page

Figure 5.2: Mascot Page Code

III. REPORT

Developing the website was quite challenging for me, as it was my first time building a fully functional site from scratch. I was able to learn a lot during the physical classes, but I mostly had to relearn everything again during the process of making the website, since actually applying the code is extemely different than watching someone doing it.

While working from the Figma prototype, I quickly realized that not everything could be translated exactly into the final website. Some design elements were difficult to implement, and I had to make several adjustments. For example, I wasn’t able to recreate the “Topics” section as perfectly aligned squares and had to compromise on the layout.

The home page took me the most time to complete. Since it was the first section I worked on, I spent a lot of time experimenting with containers, text sizes, and overall layout. I also had to design the top navigation bar and footer, which would be reused across the rest of the site. In contrast, the about page was much easier to build, as I only needed to focus on the main body content. That said, I did struggle a bit with aligning elements on the left and right sides of the page. Sometimes, the text wouldn't sit properly, and the images would overlap with the text. The mascot page was the simplest to complete, as it consisted entirely of images, just like in the original website. The inquiries page, however, was the most challenging. Creating a functional form involved a lot of trial and error, especially when dealing with padding, spacing, and different input types. I relied heavily on resources like W3Schools to understand how to set up various answer fields. I also ran into difficulties with the contact page, which was the first section where I used JavaScript, before even starting on the inquiries page. Since I had no prior experience with JavaScript, this part was particularly frustrating and required a lot of research and troubleshooting.

I had the most difficulty with JavaScript. Since I had absolutely no prior knowledge of it, I had to do a lot of research just to understand the basics. I relied heavily on resources like W3Schools and YouTube tutorials to learn as I went. To be honest, I also reached out to friends who were more familiar with JavaScript and asked for help with adjusting parts of the code. From my friends, I also found out an easy trick to do when trying to center a specific element. Instead of fumbling around with the CSS code, I can just write <center> directly in the HTML code. This saved me a lot of time, and I wish I could've learned about that earlier on.

Another challenge I faced was making the website responsive. After completing the full website, I used the browser's inspect tool to test and adjust how the site looked across different screen sizes. However, I struggled a lot with this process; every small change seemed to break something else in the layout. *For example, my images kept disappearing, and the text layouts were often misaligned or overlapping. It took a lot of trial and error to get things working properly, especially when adjusting for mobile views.

After completing the website, I tested every aspect across different devices to ensure everything worked properly. I carefully checked all the links, hover effects, buttons, and interactive elements. During this process, I discovered several small issues, especially with padding and spacing, which I took the time to fix.

Overall, I was able to achieve my main goals for the website. I improved its interactivity, enhanced visual clarity, reduced clutter, ensured responsiveness, and created a more modern design. Although I faced many challenges along the way, especially as someone new to web development, the experience was rewarding and a great learning opportunity. I'm excited to continue improving my skills in website design and coding, especially since I know it will be valuable in many future projects.

IV. REFLECTION

This project was a big learning experience for me. It was my first time building a full website from scratch, and I realized very quickly how different it is from just designing in Figma. One of the key lessons I learned was the importance of planning. I didn’t plan out the structure or layout deeply enough before coding, which led to a lot of trial and error, especially with responsiveness and spacing. I also challenged myself to learn JavaScript for the first time. It was tough, but I managed to create interactive elements like an accordion and a pop-up. I used resources like W3Schools and YouTube, and even asked friends for help. In the end, I’m proud of how far I’ve come. I faced many challenges, especially with making the site responsive, but I learned a lot and gained confidence in my coding and design skills.

Search This Blog

Gwendalyn Firly Bong (0374580)