Digital Signage

UI . HTML/CSS . JS (GSAP) . MOTION GRAPHICS

PHOTOSHOP . ILLUSTRATOR . AFTER EFFECTS

This digital signage system was developed for the flat screen displays throughout Durham College's campus, providing students, staff, and visitors with a range of useful information. It showcases real-time updates such as the current time, date, weather, daily menu offerings, advertisements, and other important announcements. With the constant flow of people on campus, this signage serves as an efficient way to communicate relevant details to a diverse audience. As digital signage continues to gain popularity worldwide, this system offers a versatile solution that caters to various needs and backgrounds.

Deliverable

About the Project

This project highlights a diverse set of skills, including motion graphics, graphic design, coding, GSAP animations, SVG elements, and PHP/database integration. Its primary goal is to emphasize the growing influence of the digital world, showing that it's not just a passing trend but a permanent fixture. The project also explores various forms of digital advertising and innovative methods to update and display information, all while enhancing the visual appeal and user experience of the content.

My Role :

I designed a cohesive, updatable digital display for Durham College, incorporating motion graphics and GSAP animations for dynamic sections like weather, news, and advertisements. I handled the database integration to ensure real-time updates, while the provided PHP code managed the functionality. The result is a sleek, user-friendly digital sign for the campus.

The Process

Design Concept

The digital signage system was crafted with a modular approach, featuring six key sections — dynamic brand videos, targeted ad placements, a weather and date display, a scrolling ticker for instant updates, and a dedicated news feed. Each element was thoughtfully designed to communicate information effectively while keeping the layout visually balanced and user-friendly. Developing this system pushed me to combine creative design with technical execution, utilizing HTML, CSS, JavaScript, and GSAP for smooth animations and transitions. Integrating backend functionality and working with databases added both challenge and depth to the project, allowing me to expand my coding expertise and problem-solving skills.