Responses by Algo.

Background: Algo is an innovative data-driven studio specializing in video automation and the sibling company of illo, a ten-year-old international creative studio focused on motion design, illustration and art direction. Algo was born as its tech division, running a platform that turns data into videos at scale. It now has become an independent company with a dedicated team of eight people. To reflect this growth, the studio has decided to push its online presence further with this new website.

Design core: Abstract and geometrical, our new visual identity has ties to graphic design roots, with bold, colorful shapes, gradients, distortion effects and custom glyphs that bring a lot of character, while a strong grid and the use of typography keep everything in check. We added a Tech page to this new website that brings visitors behind the scenes of our features, showcasing how it uses AI and other technologies to create automated videos that are indistinguishable from human-generated ones. Also, we created the Toolkit page that lets users play with the building blocks that form the basis of every project. Finally, the Idea Generator on the homepage helps widen the spectrum of project ideas, allowing companies and organizations to discover what they can do with our technology.

We decided to upgrade our demo with the new Air Quality demo that showcases real-time pollution levels for the top 100 cities in the world, enabling users to download a dedicated video thanks to our serverless rendering technology.

Challenges: At the beginning of our creative process, we decided to develop the site with the no-code platform Framer. This excited us because the no-code aspect would be useful in the long run. However, it was still a new tool that our team had to learn how to work with and how to apply our own code for some specific elements. Thanks to the help of the Framer team and the web agency 7L International, we implemented all the bold ideas we had for our new website.

Navigational features: An important feature on the website are the Toolkit elements—the building blocks that can compose an Algo project. They appear both on the Toolkit page, where the items are displayed as info cards divided into eight categories, and on each Project page, where we use the toolkit tags to inform how they are used within specific projects.

We also added a counter linked to our automated video renderer, which counts the number of videos we have created so far; you can find it while scrolling the homepage. Scrolling on the page triggers the number counter and the color change of this element.

Technology: The main player of our website is the no-code platform Framer, which we decided to use because it would give us more freedom to build case study pages. On top of that, our team used CSS and React for some custom elements of the site (see our Idea Generator on the homepage and the interactive Cards on the Toolkit page.) The design process was done in Figma, and all the animations were created with After Effects.