Durham College Digital Signage

🖥️ Overview

An interactive digital signage system designed for Durham College, built to share important information with students in a clear and engaging way. Displayed on large screens across campus, the signage presents real-time weather updates, campus news, menus, and motion-based advertisements, all styled to align with the college’s brand.

Role

Visual Design, Motion Graphic Design, Development

Tools

Adobe Illustrator, Adobe Aftereffect, HTML, CSS, PHP

Scope

Solo project — research, ideation, design, and coding

🧠 Understanding the problem

Students needed an engaging, centralized source of information they could glance at quickly between classes. The college wanted a dynamic, branded platform that could:


  • Display real-time weather and time/date
  • Rotate important college updates and announcements
  • Showcase internal and external promotional content through motion graphics

    • 🎯 Objectives

    The primary goal was to design an interactive digital signage experience that would deliver key information to students in a clear, visually engaging, and timely way. Specifically, we aimed to:


  • Create a modular display system to accommodate various content types (weather, news, menu, ads)
  • Ensure the interface was visually consistent with Durham College’s branding
  • Use motion graphics and animation to increase viewer attention and retention
  • Incorporate real-time data integration (weather forecast, time, dining updates)
  • Design a layout that was easy to navigate at a glance and worked across screen sizes
  • Produce educational ad content that loops seamlessly and maintains user interest

    • 🔍 Research

    I explored how universities and institutions used on-campus displays to share live content. Key observations:


  • Cluttered screens overwhelmed students rather than informed them
  • Static content was easily ignored
  • Brand inconsistency weakened credibility and trust

    • This guided our focus on motion, simplicity, and visual hierarchy.

    🔧 Project Scope

    We structured the digital signage in modular sections using an iframe-based system. Content was built with:


  • HTML/CSS/GSAP for transitions and animated banners
  • PHP & MySQL for live time/date and weather integration
  • A ticker tape system for displaying Durham’s dining menu
  • News sliders with smooth scrolling interaction
  • 3 educational animated ad loops built in GSAP

    • 🎨 Visual Design & UI

    Advertisement videos