Transport for Wales — Generator
Transport for Wales — Generator
Transport for Wales — Generator
Transport for Wales is evolving from a rail operator into the organization shaping how an entire nation travels. Cardiff-based brand studio Uned built a multimodal brand system to support this transformation. They turned to Algo to create a bespoke branded creative tool — a generator that enables their teams to create on-brand visuals and motion at scale.
Overview - Transport for Wales is evolving from a rail operator into the organization shaping how an entire nation travels. Cardiff-based brand studio Uned built a multimodal brand system to support this transformation. They turned to Algo to create a bespoke branded creative tool — a generator that enables their teams to create on-brand visuals and motion at scale.
Transport for Wales is evolving from a rail operator into the organization shaping how an entire nation travels. Cardiff-based brand studio Uned built a multimodal brand system to support this transformation. They turned to Algo to create a bespoke branded creative tool — a generator that enables their teams to create on-brand visuals and motion at scale.
Transport for Wales is evolving from a rail operator into the organization shaping how an entire nation travels. Cardiff-based brand studio Uned built a multimodal brand system to support this transformation. They turned to Algo to create a bespoke branded creative tool — a generator that enables their teams to create on-brand visuals and motion at scale.
Toolkit
Toolkit
Brand Guardianship For a large, complex organization like TfW, rolling out a brand is a major undertaking. Brand guidelines often fail at scaling a new brand across the whole company. As the brand guardians of TfW, Uned Studio wanted to ensure the brand is protected while enabling it to grow. Bespoke branded creative tools enable anyone in the team, even those who aren’t designers, to create brand assets without breaking the brand rules.
Brand Guardianship For a large, complex organization like TfW, rolling out a brand is a major undertaking. Brand guidelines often fail at scaling a new brand across the whole company. Bespoke branded creative tools, instead, enable anyone in the team, even those who aren’t designers, to create brand assets without breaking the brand rules.
Brand Guardianship For a large, complex organization like TfW, rolling out a brand is a major undertaking. Brand guidelines often fail at scaling a new brand across the whole company. As the brand guardians of TfW, Uned Studio wanted to ensure the brand is protected while enabling it to grow. Bespoke branded creative tools enable anyone in the team, even those who aren’t designers, to create brand assets without breaking the brand rules.
Brand Guardianship For a large, complex organization like TfW, rolling out a brand is a major undertaking. Brand guidelines often fail at scaling a new brand across the whole company. As the brand guardians of TfW, Uned Studio wanted to ensure the brand is protected while enabling it to grow. Bespoke branded creative tools enable anyone in the team, even those who aren’t designers, to create brand assets without breaking the brand rules.
The core concept of the brand spans from the T Network: a joined-up national system bringing rail, bus, walking and cycling together into one connected network. Defined by a specific color each, these different ways to travel unite and translate into the Travel Lines, a brand architecture element inspired by maps — a graphical element delivering a sense of journey & connection.
The core concept of the brand spans from the T Network: a joined-up national system bringing rail, bus, walking and cycling together into one connected network. Defined by a specific color each, these different ways to travel unite and translate into the Travel Lines, a brand architecture element inspired by maps — a graphical element delivering a sense of journey & connection.
The core concept of the brand spans from the T Network: a joined-up national system bringing rail, bus, walking and cycling together into one connected network. Defined by a specific color each, these different ways to travel unite and translate into the Travel Lines, a brand architecture element inspired by maps — a graphical element delivering a sense of journey & connection.
Travel lines are created using a gradient that runs along a path—a simple yet often not supported feature in general-purpose design and animation software. Building a tool centered around travel lines pushed us to find the best technical solution to this challenge. Since Lottie, P5.js, and other technologies did not handle this perfectly, we turned to WebGL.
Travel lines are created using a gradient that runs along a path—a simple yet often not supported feature in general-purpose design and animation software. Building a tool centered around travel lines pushed us to find the best technical solution to this challenge. Since Lottie, P5.js, and other technologies did not handle this perfectly, we turned to WebGL.
Travel lines are created using a gradient that runs along a path—a simple yet often not supported feature in general-purpose design and animation software. Building a tool centered around travel lines pushed us to find the best technical solution to this challenge. Since Lottie, P5.js, and other technologies did not handle this perfectly, we turned to WebGL.
Uned Studio build a precise grid system where travel lines stack on top of each other and form a cohesive visual element, and every curve can only be 45° or 90°. Every new line leans on the previous one in a pixel perfect stack.
The lines stack on top of each other and form a cohesive visual element based on a precise grid system where every curve can only be 45° or 90°. Every new line leans on the previous one in a pixel perfect stack.
Uned Studio build a precise grid system where travel lines stack on top of each other and form a cohesive visual element, and every curve can only be 45° or 90°. Every new line leans on the previous one in a pixel perfect stack.
Uned Studio build a precise grid system where travel lines stack on top of each other and form a cohesive visual element, and every curve can only be 45° or 90°. Every new line leans on the previous one in a pixel perfect stack.
Generative — An interesting challenge we faced while building the tool was writing an algorithm that could generate new, random combinations of the travel lines. In the end, we gave the client a couple of dozen prebuilt layouts and also a randomize button able to generate infinite new combinations.
Generative — An interesting challenge we faced while building the tool was writing an algorithm that could generate new, random combinations of the travel lines. In the end, we gave the client a couple of dozen prebuilt layouts and also a randomize button able to generate infinite new combinations.
Generative — An interesting challenge we faced while building the tool was writing an algorithm that could generate new, random combinations of the travel lines. In the end, we gave the client a couple of dozen prebuilt layouts and also a randomize button able to generate infinite new combinations.
Granular Control — We had lots of fun building all the features that give the TfW team full control over how the travel lines appear in the canvas, whether it’s their look, layout, or motion.
Granular Control — We had lots of fun building all the features that give the TfW team full control over how the travel lines appear in the canvas, whether it’s their look, layout, or motion.
Granular Control — We had lots of fun building all the features that give the TfW team full control over how the travel lines appear in the canvas, whether it’s their look, layout, or motion.
① Scale and drag around to reposition
① Scale and drag around to reposition
① Scale and drag around to reposition
① Scale and drag around to reposition
② Precisely control their trim
② Precisely control their trim
② Precisely control their trim
② Precisely control their trim
③ Re-order layers anyway you want
③ Re-order layers anyway you want
③ Re-order layers anyway you want
③ Re-order layers anyway you want
④ Choose between different animation modes and tweak the timing
④ Choose between different animation modes and tweak the timing
④ Choose between different animation modes and tweak the timing
Lozenge — In addition to Travel Lines, we’ve also built a mode called Lozenge allowing the client to stack texts, icons and pictures into interesting layouts and compositions, to be used mostly for print, with export in 4K PDFs or SVGs.
Lozenge —We created a wide variety of Big Number video cards, especially useful to celebrate a data milestone. The client is able to stitch individual scenes together into a longer, modular video, via the bespoke stitching tool.
Branded Creative Tools — enable anyone in the organization to become a brand creator and generate their own brand assets in a matter of minutes. They free the internal creative team from simple, recurring tasks, allowing them to focus on high–value projects. That’s why these tools are rapidly becoming a standard deliverable in branding projects.
Branded Creative Tools — enable anyone in the organization to become a brand creator and generate their own brand assets in a matter of minutes. They free the internal creative team from simple, recurring tasks, allowing them to focus on high–value projects. That’s why these tools are rapidly becoming a standard deliverable in branding projects.
Render — Since the tool would be hosted on-premise on the client infra, we decided to build a front-end only web app, meaning there is no cloud rendering behind this and all assets & videos are exported directly in the browser, in SVG, PDF, PNG or MP4.
Render — Since the tool would be hosted on-premise on the client infra, we decided to build a front-end only web app, meaning there is no cloud rendering behind this and all assets & videos are exported directly in the browser, in SVG, PDF, PNG or MP4.
Render — Since the tool would be hosted on-premise on the client infra, we decided to build a front-end only web app, meaning there is no cloud rendering behind this and all assets & videos are exported directly in the browser, in SVG, PDF, PNG or MP4.
Branded Creative Tools enable anyone in the organization to become a brand creator and generate their own brand assets in a matter of minutes. They free the internal creative team from simple, recurring tasks, allowing them to focus on high–value projects. That’s why these tools are rapidly becoming a standard deliverable in branding projects.
Branded Creative Tools enable anyone in the organization to become a brand creator and generate their own brand assets in a matter of minutes. They free the internal creative team from simple, recurring tasks, allowing them to focus on high–value projects. That’s why these tools are rapidly becoming a standard deliverable in branding projects.
Lozange — In addition to Travel Lines, we’ve also built a mode called Lozenge allowing the client to stack texts, icons and pictures into interesting layouts and compositions, to be used mostly for print, with export in 4K PDFs or SVGs.
Lozange — In addition to Travel Lines, we’ve also built a mode called Lozenge allowing the client to stack texts, icons and pictures into interesting layouts and compositions, to be used mostly for print, with export in 4K PDFs or SVGs.
Credits for Uned — Founder Vicky Beech, Creative Director Rhian Edwards, Lead Designer Jez Knight Harris
Credits for Algo — Creative Director Luca Gonnelli, Project & Tech Lead Nima Farzaneh, WebGL Development Italiano.jpeg, Project Management Marina Echer Barbieri, Portfolio Mara Salazzari
Credits for Uned — Founder Vicky Beech, Creative Director Rhian Edwards, Lead Designer Jez Knight Harris
Credits for Algo — Creative Director Luca Gonnelli, Project & Tech Lead Nima Farzaneh, WebGL Development Italiano.jpeg, Project Management Marina Echer Barbieri, Portfolio Mara Salazzari
Credits for Uned — Founder Vicky Beech, Creative Director Rhian Edwards, Lead Designer Jez Knight Harris
Credits for Algo — Creative Director Luca Gonnelli, Project & Tech Lead Nima Farzaneh, WebGL Development Italiano.jpeg, Project Management Marina Echer Barbieri, Portfolio Mara Salazzari
Credits for Uned — Founder Vicky Beech, Creative Director Rhian Edwards, Lead Designer Jez Knight Harris
Credits for Algo — Creative Director Luca Gonnelli, Project & Tech Lead Nima Farzaneh, WebGL Development Italiano.jpeg, Project Management Marina Echer Barbieri, Portfolio Mara Salazzari
Subscribe to our newsletter and never miss an update about Algo's projects, AI, and video automation technologies.
Site built in Framer
