A brand that needs to communicate with its audience today, needs to do so on many channels (instagram, youtube, blogs, newsletter etc) and at a high speed. The available solutions to keep up with this requirement - canva templates and AI generated imagery, fall short on few things. Canva templates all look and feel the same and while you might be able to tweak the layout, typography and colors to match your brand guidelines, its actually the other visual elements (photographs, illustrations etc) that establish your identity. AI generated posters on the other hand are generic and lack the levers and controls you need to adapt it to your brand's visual identity.

In this talk, I will share a software and workflow that I have built over p5js to help create visual assets collaboratively with my team. This tool brings the power of p5js and the javascript ecosystem to bring in flexibility needed for any computational design and provide additional primitives needed to make it convenient for visual design work. I will demonstrate examples of use of this tool with case studies from my work.

Features :

• Uses p5js syntax. No custom syntax or DSL to learn. Comes with an ecosystem of books, guides and community to learn from.

• Frameworks bundles support for visual design helpers like design tokens (colors, typography, size), grids, cells, layers etc

• Everything is code. This makes it possible to collaboratively edit and track changes.

• Everything is code. You can bring in your choice of coding agent if needed.

• File path to codify meaning - each drawn item on a canvas is defined in a javascript file that is grouped into layers and projects as per their file system location

    ├── projects
    │   ├── project-1
    │   │   ├── layers
    │   │   │   ├── 01
    │   │   │   │   └── sketch.js
    │   │   │   └── 02
    │   │   │       └── sketch.js
    │   │   └── project.js
    │   ├── project-2
    │   │   ├── layers
    │   │   │   ├── 01
    │   │   │   │   ├── hero.jpg
    │   │   │   │   └── sketch.js
    │   │   │   ├── 02
    │   │   │   │   ├── frag.glsl
    │   │   │   │   └── sketch.js
    │   │   │   ├── 03
    │   │   │   │   ├── frag.glsl
    │   │   │   │   └── sketch.js
    │   │   │   └── 04
    │   │   │       └── sketch.js
    │   │   └── project.js
    │   ├── project-3
    │   │   ├── layers
    │   │   │   └── 01
    │   │   │       └── sketch.js
    │   │   └── project.js

Visuals

Links to the visuals in case the images don’t get embedded in the proposal :

• Screenshot of p5js based custom tools to generate templated designs

• Visual Design made using these tools

• Other visuals created using the tool

1. Using p5js for visual design with case studies shared from our work

2. Introduction to Creative Coding, Generative Systems and Computational Design

3. Works of key artists and designers that influence this