Digital Signage
Digital Signage
A web-based digital signage system created for Durham College, showcasing real-time weather, daily menus, promotional videos, and live campus news. Built using HTML, CSS, JavaScript, and PHP, this signage project merges UI design, motion graphics, and backend integration for a fully responsive, live-content display.
Dec 20, 2024
CLIENT
College Project
CLIENT
College Project
CLIENT
College Project
Role
Designer & Developer
Role
Designer & Developer
Role
Designer & Developer
Project Overview
Project Overview
Project Overview
This digital signage project was developed for Durham College’s Faculty of Media, Art, and Design to function as a dynamic, multi-functional information display. It combines various media streams, including:
Weather updates
YouTube promotional content
College news
A daily meal ticker
Looping motion graphics
Each content zone was carefully laid out to maximize clarity, engagement, and value for students and visitors.
The entire system is web-based, allowing it to be updated easily through a remote server. I documented the entire build process on a development blog (JumpSite), sharing each milestone as I designed and implemented features such as the weather feed, custom icons, and ticker system.
This project pushed my abilities across frontend, backend, and content management, blending creative and technical disciplines into a polished, professional execution. The result is a signage platform that is both visually engaging and technically robust.
This digital signage project was developed for Durham College’s Faculty of Media, Art, and Design to function as a dynamic, multi-functional information display. It combines various media streams, including:
Weather updates
YouTube promotional content
College news
A daily meal ticker
Looping motion graphics
Each content zone was carefully laid out to maximize clarity, engagement, and value for students and visitors.
The entire system is web-based, allowing it to be updated easily through a remote server. I documented the entire build process on a development blog (JumpSite), sharing each milestone as I designed and implemented features such as the weather feed, custom icons, and ticker system.
This project pushed my abilities across frontend, backend, and content management, blending creative and technical disciplines into a polished, professional execution. The result is a signage platform that is both visually engaging and technically robust.
This digital signage project was developed for Durham College’s Faculty of Media, Art, and Design to function as a dynamic, multi-functional information display. It combines various media streams, including:
Weather updates
YouTube promotional content
College news
A daily meal ticker
Looping motion graphics
Each content zone was carefully laid out to maximize clarity, engagement, and value for students and visitors.
The entire system is web-based, allowing it to be updated easily through a remote server. I documented the entire build process on a development blog (JumpSite), sharing each milestone as I designed and implemented features such as the weather feed, custom icons, and ticker system.
This project pushed my abilities across frontend, backend, and content management, blending creative and technical disciplines into a polished, professional execution. The result is a signage platform that is both visually engaging and technically robust.
Design Process
Design Process
Design Process
I began the project by wireframing the layout, making sure content zones like weather, news, media, and menus were visually balanced and easy to read. To enhance the visual appeal, I designed a custom set of weather icons in Illustrator, giving the seven-day forecast a clean, professional look. Once the visual foundation was set, I coded the structure using HTML and CSS, then introduced dynamic functionality with JavaScript and PHP. These features included a live time and date display, automated weather updates, and an infinite ticker system cycling through breakfast, lunch, and dinner menus.
The signage also incorporated a video carousel showcasing YouTube-based promotional content, alongside three looping motion graphics I produced for Xbox, Kinton Ramen, and a Durham College PSA. After development, I deployed the system to a remote server and optimized it specifically for large display screens to ensure clarity and performance. Throughout the process, I maintained a detailed development log on JumpSite, sharing real-time progress, design decisions, and technical problem-solving as the system evolved from concept to fully functional installation.
I began the project by wireframing the layout, making sure content zones like weather, news, media, and menus were visually balanced and easy to read. To enhance the visual appeal, I designed a custom set of weather icons in Illustrator, giving the seven-day forecast a clean, professional look. Once the visual foundation was set, I coded the structure using HTML and CSS, then introduced dynamic functionality with JavaScript and PHP. These features included a live time and date display, automated weather updates, and an infinite ticker system cycling through breakfast, lunch, and dinner menus.
The signage also incorporated a video carousel showcasing YouTube-based promotional content, alongside three looping motion graphics I produced for Xbox, Kinton Ramen, and a Durham College PSA. After development, I deployed the system to a remote server and optimized it specifically for large display screens to ensure clarity and performance. Throughout the process, I maintained a detailed development log on JumpSite, sharing real-time progress, design decisions, and technical problem-solving as the system evolved from concept to fully functional installation.
I began the project by wireframing the layout, making sure content zones like weather, news, media, and menus were visually balanced and easy to read. To enhance the visual appeal, I designed a custom set of weather icons in Illustrator, giving the seven-day forecast a clean, professional look. Once the visual foundation was set, I coded the structure using HTML and CSS, then introduced dynamic functionality with JavaScript and PHP. These features included a live time and date display, automated weather updates, and an infinite ticker system cycling through breakfast, lunch, and dinner menus.
The signage also incorporated a video carousel showcasing YouTube-based promotional content, alongside three looping motion graphics I produced for Xbox, Kinton Ramen, and a Durham College PSA. After development, I deployed the system to a remote server and optimized it specifically for large display screens to ensure clarity and performance. Throughout the process, I maintained a detailed development log on JumpSite, sharing real-time progress, design decisions, and technical problem-solving as the system evolved from concept to fully functional installation.
Deliverable
Deliverable
Deliverable
Deliverables for this project included:
Fully functioning digital signage web app
Custom-designed weather icons
Live meal ticker system
Embedded motion graphics
YouTube video integration
The system was built using HTML, CSS, JavaScript, and PHP, then optimized for large screen displays and deployed via a remote server.
A live development log was also created to document each build stage, from initial concept and design to server deployment. This log highlights the technical and creative steps taken at every stage of production, providing a detailed behind-the-scenes look at the Durham College Digital Signage project.
Deliverables for this project included:
Fully functioning digital signage web app
Custom-designed weather icons
Live meal ticker system
Embedded motion graphics
YouTube video integration
The system was built using HTML, CSS, JavaScript, and PHP, then optimized for large screen displays and deployed via a remote server.
A live development log was also created to document each build stage, from initial concept and design to server deployment. This log highlights the technical and creative steps taken at every stage of production, providing a detailed behind-the-scenes look at the Durham College Digital Signage project.
Deliverables for this project included:
Fully functioning digital signage web app
Custom-designed weather icons
Live meal ticker system
Embedded motion graphics
YouTube video integration
The system was built using HTML, CSS, JavaScript, and PHP, then optimized for large screen displays and deployed via a remote server.
A live development log was also created to document each build stage, from initial concept and design to server deployment. This log highlights the technical and creative steps taken at every stage of production, providing a detailed behind-the-scenes look at the Durham College Digital Signage project.