This project is a deep dive into one design tool – Mechanic. Led by Deniz Kurt, in partnership with Design Systems International, this project explores how AIxD will use code-based design generator Mechanic to design its own still and motion graphics.

With this project, we wanted to create a generative design tool with AIxDesign visual identity, to see the limitations and possibilities of Mechanic design tool, both as a collaboration and a case study for Design Systems International, and to run experiments with this toolkit, to further develop an AI-based tool.

*OK so, Mechanic is a code-based generative design tool. It’s not technically AI as it isn’t a self-learning system. However, we hoped that using code-based design tools will seed the foundation (and create the data sets!) for future AI-based design tools.

What is Mechanic?

Mechanic is an open source framework by DSI to create custom, web-based design tools that export design assets, and create your customized semi-generative design toolkits right in your browser.

So basically, if you have a design system and a visual identity, you can code these into the Mechanic boilerplate that you run locally in your computer, and make a toolkit with your own visual identity; i.e. your color palette, fonts, grids, assets, and graphic layouts.

Who is involved?

The project is led by Deniz Kurt from AIxDESIGN and executed in partnership with Design Systems International (the creators behind Mechanic)

I’m (Deniz) a creative technologist & AI researcher based in Amsterdam, and I love discovering generative design and creative coding tools such as Touchdesigner, Processing, P5js, etc, in addition to generative AI tools, and searching ways to improve them. While some of these tools are code based, and they allow you to create visual depictions through computational creativity, some also have node based interfaces (like Touchdesigner or Houdini) and you can create these visual implementations using different parameters without necessarily coding.

I was very excited and impressed by the idea of creating a generative design tool myself, with AIxDesign and Design Systems International we planned and implemented this project to automate our design process, and to make a case study for DSI to further improve and use Mechanic in different cases.

This web app allows anyone from the team to generate a simple graphic using the Mechanic system ✨

With this (web-based) tool, we can:

• change and adapt the images, texts, layout, and the blobs extracted easily with one click, as bookmarklet you run by dragging on your bookmarks tab.

  The toolkit has the following functionalities:

  • Grid enable / disable

  • Fonts

  • Titles & subtitles

  • Layout alignment options for texts, images and blobs

  • Event date / schedule

  • Color palette selection based on AIxD color identity

  • Blob extraction scraping from Google image database

    Screen Recording 2023-02-24 at 09.45.56.mov

  • Toggle to enable/disable blobs visibility

  • Image size and positioning

The code is also released open-source for anyone to use. And the specific AIxD code.

So how did we get to ^ this output?

Iter #_1: Setting up Mechanic 🧪

First we setup Mechanic, to understand how it works, and set some experiments with their templates, using different parameters and tweaking and changing the code.

We are using Javascript code to change the Mechanic functions. Mechanic works with p5js, Canvas and Vanilla JS. Mechanic is an open source library, so we can create our own visual-generating systems.

We first tried to create our functions, on top of the mechanic poster generator tool:

Our aim was trying to achieve following visuals through Mechanic:

After a set of experiments, we’ve figured that Mechanic was turning out to be much more complicated then expected; because the output we wanted to create was not going to be possible to create by adding / creating extra JS functions on top of the existing Mechanic templates. We have figured out that we were going to need a separate Mechanic boilerplate from scratch, an AIxD template boilerplate with all the visual identity and design system we have, and we were going to build on top of that. Even though Mechanic is a great tool for creating generative visuals, we understood that if you have a certain design system, you would need to build a dedicated boilerplate.

Iter #_2: We have a boilerplate design generator! 🪄

We needed much more hands-on involvement from DSI, to create a code repository from scratch, and help to create a customized design generator tool with the specific parameters and design system we would like to adapt.

These specific parameters were:

• AIxD fonts,
• AIxD colors,
• A system to scrape & use the blobs easily from Open Images Database, and a function to show their image source,
• The layout based on AIxD design system.

After these set of meetings, collaborations, we initiated the 2nd iteration and decided to start with the system for scraping the blobs (this was the biggest challenge and maybe the most important one) and a function to add colors from AIxD palette.

For the next steps we needed to add;

• a grid system,
• the stroke/fill property to blobs,
• layout properties,
• a function for image upload,
• AIxD font properties (fonts, font weight, font size).
• texts (title, subtitle, schedule, date)
• AIxD logo.

Iter #_3: Incorporating the AIxD visual identity! 🎨

• We added the fonts
• We have the color scheme of 21 colurs in total, 7 color palette and its shades.
• We are able to upload 3 blobs automated, with stroke and fill feature, and the blobs are movable, and also scalable.

For the last step, there are still some tweaks to be made. We were aiming to have a tool that can produce posts like these, with the background svg objects, the grid system and the basic font styles all working together.

Iter #_4: We have a beta web app to test! 🎉

We have a first beta version to test! A web app that we can test with the team and continue to develop.

We had a slight different outcome than what we had in mind, but we are happy with this first beta version: We had started this journey to create event graphics in Mechanic, by adding JS functions into Mechanic boilerplate, and code within Mechanic to change the styles, and add our own styles, visual identity to it and create event graphics and video intros using JS and P5js. However, we turned out to have this separate tool, that enables us to create an AIxDesign template, starting with event graphics, and we can continue building on top of it while our design system improves, and automated on the way with Mechanic.

Now, we are able to use this tool as a creative design automation tool, that we can play & create on a web based interface.

For future applications, we should try using this framework for more social media posts designs, and add auto generating as a function, by generating the layout options and blob placements with a shuffle button.

Next steps =

• Align rules in web app with design system by checking with Andrew (update colors etc.)
  • Implement ‘AIxD General’ program colors (Andrew will know what this means :) )
• Decide 1 type of graphics to test the tool for (e.g. community-hosted events)
• Testing for usability with the team (> Prabhnoor)
• Process feedback
• Later: Maybe try expand for other types graphics
• Add the repository to Glitch.app, so we can have an open source collaborative repo that everyone can work on it

Feature requests =

• Different dimensions W x H (e.g. Instagram square or Eventbrite dimensions)