Brand System — Motion Toolkit

Brand System —
Motion Toolkit

Brand System —
Motion Toolkit

Overview  Legendary brand agency Wolff Olins created a modular brand system for a top-secret client. Our team then transformed the guidelines into an interactive tool that enables everyone to generate limitless logo variations and animations.   

Overview  Legendary brand agency Wolff Olins created a modular brand system for a top-secret client. Our team then transformed the guidelines into an interactive tool that enables everyone to generate limitless logo variations and animations.   

Overview  Legendary brand agency Wolff Olins created a modular brand system for a top-secret client. Our team then transformed the guidelines into an interactive tool that enables everyone to generate limitless logo variations and animations.   

A Motion Toolkit is an invaluable asset within a brand system. It enables anyone in the client organisation, no matter their design expertise, to easily generate visuals & animations that perfectly follow brand guidelines.  

A Motion Toolkit is an invaluable asset within a brand system. It enables anyone in the client organisation, no matter their design expertise, to easily generate visuals & animations that perfectly follow brand guidelines.  

A Motion Toolkit is an invaluable asset within a brand system. It enables anyone in the client organisation, no matter their design expertise, to easily generate visuals & animations that perfectly follow brand guidelines.  

After diving deep into the 60-pages-long guidelines Wolff Olins shared with us, our team come up with an intuitive interface to help generate countless unique logo variations. A crucial aspect for a client made by hundreds of different business units. 

After diving deep into the 60-pages-long guidelines Wolff Olins shared with us, our team come up with an intuitive interface to help generate countless unique logo variations. A crucial aspect for a client made by hundreds of different business units. 

After diving deep into the 60-pages-long guidelines Wolff Olins shared with us, our team come up with an intuitive interface to help generate countless unique logo variations. A crucial aspect for a client made by hundreds of different business units. 

The brand is a circle made of spokes. The system supports a variable number of spokes, creating a thinner or thicker outline. 

The brand is a circle made of spokes. The system supports a variable number of spokes, creating a thinner or thicker outline. 

The brand is a circle made of spokes. The system supports a variable number of spokes, creating a thinner or thicker outline. 

Starting from 12 colours (across the entire spectrum) and 5 colour pairing rules, the client uses the interactive colour wheel to try all options and see the logo preview update live. The tool supports RGB, CMYK and Pantone colour systems in output. 

Starting from 12 colours (across the entire spectrum) and 5 colour pairing rules, the client uses the interactive colour wheel to try all options and see the logo preview update live. The tool supports RGB, CMYK and Pantone colour systems in output. 

Starting from 12 colours (across the entire spectrum) and 5 colour pairing rules, the client uses the interactive colour wheel to try all options and see the logo preview update live. The tool supports RGB, CMYK and Pantone colour systems in output. 

Starting from 12 colours (across the entire spectrum) and 5 colour pairing rules, the client uses the interactive colour wheel to try all options and see the logo preview update live. The tool supports RGB, CMYK and Pantone colour systems in output. 

Hit next and you land in the Lock-up section, where  given the logo design chosen  the client can enter the Wordmark on one or multiple lines. 

Hit next and you land in the Lock-up section, where  given the logo design chosen  the client can enter the Wordmark on one or multiple lines. 

Hit next and you land in the Lock-up section, where  given the logo design chosen  the client can enter the Wordmark on one or multiple lines. 

Hit next and you land in the Lock-up section, where  given the logo design chosen  the client can enter the Wordmark on one or multiple lines. 

The last section is all about Motion. Together with the team at Wolff Olins, we developed 4 logo animation styles, including both loops and in&out animations. Heres a selection of our favorites outputs: 

The last section is all about Motion. Together with the team at Wolff Olins, we developed 4 logo animation styles, including both loops and in&out animations. Heres a selection of our favorites outputs: 

The last section is all about Motion. Together with the team at Wolff Olins, we developed 4 logo animation styles, including both loops and in&out animations. Heres a selection of our favorites outputs: 

The last section is all about Motion. Together with the team at Wolff Olins, we developed 4 logo animation styles, including both loops and in&out animations. Heres a selection of our favorites outputs: 

A few months after final delivery, the client decided to cancel the entire brand refresh. It happens. Were still very proud of the work done. We hope you liked it too.  

A few months after final delivery, the client decided to cancel the entire brand refresh. It happens. Were still very proud of the work done. We hope you liked it too.  

A few months after final delivery, the client decided to cancel the entire brand refresh. It happens. Were still very proud of the work done. We hope you liked it too.  

A few months after final delivery, the client decided to cancel the entire brand refresh. It happens. Were still very proud of the work done. We hope you liked it too.  

Want to try the interactive tool? You can find it here. Need to turn a brand guideline or motion guideline into a video making machine? Youre in the right place. Book a demo. 

Want to try the interactive tool? You can find it here. Need to turn a brand guideline or motion guideline into a video making machine? Youre in the right place. Book a demo. 

Want to try the interactive tool? You can find it here. Need to turn a brand guideline or motion guideline into a video making machine? Youre in the right place. Book a demo. 

Want to try the interactive tool? You can find it here. Need to turn a brand guideline or motion guideline into a video making machine? Youre in the right place. Book a demo. 

Credits ✶ For Wolff Olins: Direction Jan Eumann + Creative Director Quae Luong + Producer Raphael Picciarelli — For Algo: Direction Luca Gonnelli + Dashboard Design Camille Pagotto + Dashboard Development Nima Farzaneh & Mattia Giordano + Automation Marco Oggero + R&D Director Matteo Ruffinengo + Producer Marina Echer Barbieri

Credits ✶ For Wolff Olins: Direction Jan Eumann + Creative Director Quae Luong + Producer Raphael Picciarelli — For Algo: Direction Luca Gonnelli + Dashboard Design Camille Pagotto + Dashboard Development Nima Farzaneh & Mattia Giordano + Automation Marco Oggero + R&D Director Matteo Ruffinengo + Producer Marina Echer Barbieri

Credits ✶ For Wolff Olins: Direction Jan Eumann + Creative Director Quae Luong + Producer Raphael Picciarelli — For Algo: Direction Luca Gonnelli + Dashboard Design Camille Pagotto + Dashboard Development Nima Farzaneh & Mattia Giordano + Automation Marco Oggero + R&D Director Matteo Ruffinengo + Producer Marina Echer Barbieri

Credits ✶ For Wolff Olins: Direction Jan Eumann + Creative Director Quae Luong + Producer Raphael Picciarelli — For Algo: Direction Luca Gonnelli + Dashboard Design Camille Pagotto + Dashboard Development Nima Farzaneh & Mattia Giordano + Automation Marco Oggero + R&D Director Matteo Ruffinengo + Producer Marina Echer Barbieri

Sign up for our newsletter to get updates on projects, technologies, data-viz and automation.

Is there a typo in your email ?
Is there a typo in your email ?
Is there a typo in your email ?

Algo is a data-viz

studio, specializing in video automation.



hi@algo.tv

+390114055748





Insta, Tw

Linkedin

Newsletter

Behance


Check out our sister studio, illo.tv

Algo is a data-viz

studio, specializing in video automation.


hi@algo.tv

+390114055748





Insta, Tw

Linkedin

Newsletter

Behance


Check out our

sister studio, illo.tv

Algo is a data-viz

studio, specializing in video automation.



hi@algo.tv

+390114055748





Algo is a data-viz

studio, specializing in video automation.


hi@algo.tv

+390114055748





Insta, Tw

Linkedin

Newsletter

Behance


Check out our

sister studio, illo.tv

Site built in Framer