Digital Signage

Tools Used

Project overview

Durham College commissioned the creation of digital signage to be displayed on one of their flat screen televisions situated within the college. These digital displays are intended to provide crucial daily information such as the current time, date, weather, menu items, advertisements, and more. These can prove to be extremely useful for individuals navigating the college and this type of signage is widely used globally, making it very applicable to all.

This project encompassed a diverse range of elements, including design layout, illustration, HTML/CSS/JS/PHP programming, working with databases, and motion graphics. Moreover, the sign showcases animated videos and ads for both the college and nearby businesses. A portion of these moving graphics were created using solely GSAP animations, while others were produced with the aid of Adobe Suite.

The Objective

The key goal is to determine the most effective approach for presenting various forms of information to Durham College students in a visual format, while ensuring a positive user experience. The main difficulty involved consolidating all the elements into a cohesive project that doesn’t inundate the audience.

THE PROCESS

Iconography

To accomplish this project, it was divided into multiple stages. Initially, I designed the interface and created a blueprint using Illustrator, including icons for the weather segment. I made various versions of the icons for each weather type, and then selected the ones that I find the best. It was important to maintain consistency in their design and small details.

Designing

While the layout/ design process was going on, we were also required to develop an admin site that could retrieve, add, modify, and delete data from a database. After finalizing the layout in Illustrator, I started programming the design section-by-section, which are quite different from each other. The branding which includes logo, typography, color scheme and more was to be used as same of Durham College.

Developing

At the lower left corner of the screen, there was space for some motion graphic ads, which I created purely using code and GSAP animations. These animations are saved in a database and accessed continuously via PHP. In the upper right corner, there were additional ads in the form of videos that I made using After Effects. The remaining components of the signage, such as logo, news, and tickertape were established using PHP to retrieve information stored in databases.

Deliverable

My primary responsibility and objective for this project was to construct a cohesive and easily updatable presentation of information and graphics. Designs were developed for each segment of the sign. The final product exhibits a straightforward, contemporary, and informative digital sign for Durham College Institute.