Industry Night

Overview

For this group project we built a responsive, mobile-first website to promote Industry Night, an event where graduating students from the Web Development and the Interactive Media Design programs at Fanshawe College have the opportunity to show off their skills and achievements to potential employers, industry professionals, and peers.

We worked together to design, develop, and implement the website.
Highlighted features and focus areas included: the About Us page, student portfolios, testimonials, and contact forms. The web development focused on the seamless experience of these features across mobile, tablet, and desktop.
We used Trello for task management and Discord for communication.

Problems

1. Dynamic Content Rendering: Dynamically generating student portfolios and testimonials using arrays and objects.

2. Consistency Across Deliverables: Design and functionality across web layouts, motion graphics, and branding required communication and regular reviews. Trello helped us keep track of tasks and consistency.

3. Responsive Design Challenges: Seamless user experience across mobile, tablet, and desktop required lots of testing and optimization of layouts, interactive elements, and animations.

4. Time Management: With video production, layout design, and development all happening at the same time, meeting deadlines required a lot of planning and prioritization.

Research

To match our design with Fanshawe College’s branding, we looked at the Fanshawe College homepage. This helped us stay consistent with the college’s visual identity, tone, and user experience guidelines.

We also researched other event and portfolio showcase websites for layout ideas, interactive features, and ways to present student work.

Process

1. Planning & Collaboration:

• We used Trello to assign tasks and track progress and Discord for daily check-ins.

• Initial brainstorming sessions to outline the site structure and roles.

2. Design & Motion Graphics:

• Web Designers (Bryle, Music) created mobile-first layouts in Adobe XD, focusing on a clear hierarchy and responsive design.

• Motion Designer (Bernardo) created a 10–15 second promo reel to introduce the site and set a professional tone.

3. Web Development:

• As the Web Developer, I built a responsive mobile-first site.

• I used JavaScript to dynamically render:

  • A list of student portfolios with links

  • Testimonials on page load.

4. Testing & Optimization:

• We tested the site for responsiveness and performance on multiple devices and browsers and refined layouts and code as needed.

• All files were managed with GitHub for version control and file management.

The final Industry Night website showcases the skills and achievements of the Interactive Media Design program and its students. Features include:

• Responsive Website: Featured dynamic student portfolios and testimonials and a mobile menu with custom animations.

• Promo Reel: A 10–15 second video introducing the program and event, integrated into the homepage.

• Event Details: Information about Industry Night, purpose, activities, and networking opportunities.

• Program Information: Highlights of the Interactive Media Design program, client projects, and student achievements.

Together, all these elements create a polished promotional site that effectively showcases the Industry Night event and the Interactive Media Design program.

Reflection

This project was a great learning experience in teamwork and collaboration. Key takeaways:

• Learned to collaborate efficiently using Trello for task management and Discord for real-time communication.

• Gained a deeper understanding of JavaScript for implementing dynamic content and interactive features.

• Improved skills in creating responsive, mobile-first websites that function seamlessly across devices.

Working as a team, we created a professional and engaging website for Industry Night, combining our skills and ideas effectively. While aligning design and functionality posed some challenges, communication and teamwork ensured a cohesive result.