Motion Graphics
Three GSAP-animated advertisement zones with smooth transitions, timed loops, and brand-compliant motion principles.
Campus Broadcast · Display System
Durham College
Digital Signage
Broadcast-style dynamic displays for a connected campus — inspired by CP24 news graphics.
01
Overview
Broadcast-style displays for a connected campus.
The initiative developed dynamic digital displays for flat-screen TVs across campus — modelled after broadcast news graphics similar to CP24. These signs communicate essential real-time information including time, weather, dining options, and promotions to support campus navigation for students, staff, and visitors from diverse backgrounds.
As UI Designer, I was responsible for organizing information hierarchically, developing prototypes, crafting visually engaging interfaces, incorporating stakeholder feedback, and improving the overall user experience to enhance campus communication effectiveness.
- Client
- Durham College
- Category
- UI Design
- Year
- 2024
- Stack
- HTML · CSS · JS · PHP · GSAP
- Reference
- CP24 broadcast news graphics
02
Objectives & Challenges
Designing for screens people walk past.
Campus signage demands a different kind of UX thinking — the audience is always in motion, the content is live, and the system must work for everyone from first-year students to visiting families.
Primary Objectives
- Build intuitive, accessible interfaces for a diverse campus audience
- Maintain brand consistency with Durham College's visual identity
- Optimise readability for display screens at distance and in motion
- Collaborate with stakeholders to define and evolve requirements
- Refine experiences through iterative feedback loops
Key Challenges
- Accessibility compliance — ADA and WCAG standards on public displays
- Scalability for future campus expansion without redesign
- Visual consistency across all signage components and locations
- Integrating diverse live elements — logo, weather, ads, promotions
- Technical complexity — animations, database queries, and dynamic content
03
Process
Four stages from brief to broadcast.
-
01
Discovery
Define objectives, gather requirements from stakeholders, and map out the full information hierarchy.
-
02
Design
Develop unique visual styles per component — weather, news ticker, ad zones, and logo area.
-
03
Development
Code and style all elements with HTML, CSS, JS, and PHP backend integration for live data.
-
04
Optimisation
Gather stakeholder feedback, refine visual hierarchy, and validate accessibility compliance.
04
Deliverables
What was shipped.
Styled Components
Weather display, live news section, ticker tape, and logo area — each with its own visual language and responsive layout.
PHP Backend
Database integration for dynamic content management — enabling real-time updates to promotions, dining menus, and announcements.
Tech Stack
HTML
CSS
JavaScript
PHP
GSAP
UI Prototyping
Live
GSAP Ads
Ads running in the browser.
Three self-contained GSAP-animated advertisement zones — each loops seamlessly and integrates with the PHP content layer. Interact with them live below.
Motion
In Motion
Ad concepts on screen.
Three motion graphics studies produced alongside the live GSAP builds — showcasing timing, easing, and brand-aligned composition.
Motion Graphics · 01
Motion Graphics · 02
Motion Graphics · 03
Live Project
See the display
See the display
in action.
Explore the full Durham College digital signage experience — live components, GSAP animations, and real-time data integration.
View Full Experience