Hello everyone! Welcome to Nate's Space, Portfolio of Design and Code., And this is 'Project' page, the work that I proud with!

This is a project for the Winter 2024 website that showcases the portfolios of all Interactive Media Design students at Fanshawe College. The main goal is to present our web production skills, which are the result of what we’ve learned over the three semesters.

The target audiences include professionals in the web design and development industry, faculty members and students at Fanshawe College, and people who are interested in web and design work. One of the biggest challenges is that the winning group will have their design selected as the official website for our program’s Industry Night — a very important event. The instructors will choose the final website from the top five highest-scoring groups. So, this website design project is not only for outside visitors, but also for others in the class.

One of the biggest challenges for me in this project was figuring out how to design a website that truly reflects our program — which is not only focused on tech or website production, but also on taste, creativity, and design thinking. Many students in our program, including some of my teammates, had limited background in web development. On the other hand, many had strong design knowledge and visual sense. That meant the final product had to balance technical function with aesthetic quality that represents who we are as designers — not just coders. For me, this was the biggest and most complex website I had built at that point, and I had to complete it using my still-developing skills. It pushed me to work smarter, learn quickly, and make the most out of what I already knew.

In the early phase of the project, I focused on creating a strong identity. Because the event name feels like a party, I decided not to use Fanshawe’s official font. Instead, I picked a serif font to give a sense of elegance — more suitable for a night event than a tech presentation. I also chose color tones that represent a fun evening vibe, not too technical, because our program isn’t only about tech. One of the highlights is the Hero Section, which features a 3D Fanshawe logo made of clear acrylic-like material to add a luxurious and dimensional feel. It’s placed in front of the event title, which covers nearly the whole screen. I believe this design reflects both graphic and web design aspects. I also worked as the front-end developer, so I got to design many of the components used on the website.

In the early phase of the project, I focused on creating a strong identity. Because the event name feels like a party, I decided not to use Fanshawe’s official font. Instead, I picked a serif font to give a sense of elegance — more suitable for a night event than a tech presentation. I also chose color tones that represent a fun evening vibe, not too technical, because our program isn’t only about tech. One of the highlights is the Hero Section, which features a 3D Fanshawe logo made of clear acrylic-like material to add a luxurious and dimensional feel. It’s placed in front of the event title, which covers nearly the whole screen. I believe this design reflects both graphic and web design aspects. I also worked as the front-end developer, so I got to design many of the components used on the website.

The website’s main focus is Industry Night 2024. It includes details about our program and the final project called Brothers in Arms, where three selected groups will present their work to real clients during the event. The site will show information about these three groups. Another highlight is the full student portfolio section — a showcase of every student’s work. I designed it as a single-page website with all content in one place. One of my teammates used the GSAP library to animate different sections for a better user experience.

I applied everything I’ve learned over the past two semesters to this project — from HTML, CSS, to more advanced use of JavaScript (based on what I knew at that time). It helped me improve my skills a lot. I feel proud and excited about many parts of this project. It’s also one of the first times I’ve worked with such a large amount of data — about 70 students’ profiles. Even though the data is mock, it was a fun and challenging experience.

One of the key lessons I learned from this project was about the limitations of using 3D elements on websites. To properly implement 3D in a web environment, it requires more advanced knowledge of Node.js and specific supporting libraries, which I had not fully mastered at the time. Because of that, our 3D feature could not be displayed properly on platforms outside of the live preview in the coding environment. This technical limitation was one of the main reasons the project didn’t reach the full potential we had hoped for. However, despite the issue, our team was ranked among the top 5 highest-scoring groups, and we received positive feedback for the overall design direction.