flexible visual system

Generative Poster System

project type

Flexible Visual System

client

Personal project for the Oxford Art Factory

my role

Research, & development of design system

tools

p5.js, HTML, CSS

overview & goals

The Oxford Art Factory (OAF) in Sydney is an iconic live music venue that demands diverse, eye-catching posters. This poster system is a custom tool that empowers OAF to create unique, brand-aligned event posters with ease. The goal was to streamline the design process, maintain brand consistency, and provide venue staff with a user-friendly design tool, ultimately paving the way for future expansion into dynamic digital content.

Note: I haven’t shared a link to the final system here, but I’m happy to provide access upon request. Here is a screenshot from the final system's user interface

Final Posters

This poster system blends design, programming, and user interaction to craft a new way of telling a brand's story. By acting as a creative partner, the system helps produce designs that are both flexible and cohesive.

These posters, generated by our system and fuelled by data from actual OAF events, showcase a myriad of design variations possible, each distinct yet staying within the brand's design language.

System Features

This visual system boasts an array of features, each crafted to provide maximum creative autonomy while preserving brand integrity

1. dual layouts

Choose between showcasing a band or artist's image or selecting a pattern. If no image is available, users can choose from 3 patterns that complement the design language.

2. Image Placement Flexibility

Users can upload an image and easily adjust its size and position on the poster by dragging and resizing it with their mouse, ensuring it fits perfectly.

3. customization Made Easy

Tailor the poster’s appearance with colour and design options that perfectly align with Oxford Art Factory’s established brand identity.

4. Effortless Text Management

Easily manage event names, captions, and date/time information, with automatic text resizing for seamless integration.

5. Simple Event Details

Set event frequency, start time, and ticket pricing with simple inputs, serving the venue's diverse event formats.

6. Consistent Branding

Key elements such as the logo and event name are consistently placed on every poster, ensuring each design remains cohesive and instantly recognizable as an Oxford Art Factory creation, even as other elements vary.

7. ready-to-print output

Export the finished design in A3 or A4 format, ready for immediate use.

Benefits to OAF

1. Endless Variations, Consistent Branding

The system enables endless design possibilities while maintaining brand consistency. It empowers even non-designers, like venue staff, to create unique, brand-aligned posters. This balance of structure and freedom fosters innovation while staying true to Oxford Art Factory’s visual identity.

2. Cost Savings

The Generative Poster Design System provides Oxford Art Factory with a cost-effective solution, allowing for the creation of unique, brand-aligned posters without the associated hiring expenses.

3. Streamlined Workflow

Create posters quickly with a user-friendly interface, saving time and resources. Features like automatic text resizing, ticket pricing options, and QR code generation simplify each step and boost workflow efficiency.

4. Adaptive and Scalable

This system is built to adapt and grow. Any updates to brand elements (logos, colours etc) instantly apply across new posters. With this foundation in place, it can easily expand to design systems for social media posts, brochures, or signage, ensuring a cohesive look and strengthening brand recognition.

Research Process

My research was enriched by insights from the book Flexible Visual Systems by Dr. Martin Lorenz, which talks about how important it is to have flexible design strategies in our ever-changing world. His perspective on shifting from static to dynamic visual design informed the development of this system that allows users to create posters within defined brand guidelines through a user-friendly interface.

I planned the system using an Object-Oriented approach, with objects like "Poster," "Template," or "Pattern," each with properties (size, colour, layout options) and methods. It was coded with HTML, CSS, and p5.js.

To provide context for the rest of my research on this poster, Before I expand on the research for this poster,

From Concept to Code

Building this system started with in-depth research on Oxford Art Factory’s posters and event ticket pages. After reviewing hundreds of examples, I pinpointed the key information and common variations:

Event Name
‍Some events included a caption, while others didn’t, so I made this an optional field.
‍Event Image
Recognizing that some events might lack a picture, I added an alternative graphic option to maintain the design integrity.
‍Event Date and Time
I added a calendar and clock dropdown for easy selection of any date and time.
‍Ticket Information
Events could be free, priced, or offer both regular and concession prices, so I created flexible options to accommodate these options.
‍QR Code
I included a link input that automatically generates a QR code on the poster.

The final layout keeps all essential content while ensuring each poster looks great.

poster wireframe

The result of my research was a wireframe for the poster and it's user interface, as shown below:

Design Process

I started the design process by revisiting key design principles and exploring similar venue posters, both online and around Canberra. This research resulted in a mood board that served as a reference throughout the project.

I also explored geometric patterns and the interplay between patterns and grids, focusing on how grids can be used to create repeating geometric patterns. The goal was to develop a flexible visual system that maintains brand consistency while allowing for creative expression.