Responses by Lily Zhou, senior developer; Louis Amiot, senior developer; and Kailie Parrish, associate creative director, Upperquad.

Background: Hello from Here is a generative poster project and gallery. It’s a creative experiment that enables anyone to make a poster by inputting a city and interacting with artwork generated by real-time weather data. Every poster gets added to a gallery of people saying hello from around the world.

Upperquad just opened a new office in Berlin, Germany, and we wanted to create an interactive experience to announce the office. Generative posters were the perfect mix between our studio’s obsessions and our new home’s character, referencing Berlin’s long-established poster culture. In addition to the website, we ran an outdoor media campaign in the streets of Berlin with 34 custom posters and also mailed holographic art prints to our friends across the globe.

Design core: The site begins with a simple, yet playful, 3-D input bar that encourages users to enter a city. Once a city is entered and the poster is generated, we see similar bars become the main feature on the poster. The depth that the three-dimensional bars gave us was exciting to play with. A stylized map of the location appears on some sides while kinetic type adorns others. The bars’ direction is determined by the wind speed, though users can play with the scale and position.

For the typography, we chose a German-made font named Bandeins Strange for its abstract qualities in some letterforms. It gives a more interesting texture when kinetic motion is applied to it.

For the background colors, we kept it simple with black representing nighttime and white for day time. The vibrancy of the color spotlights was inspired by Berlin posters and street art. Color on the generated posters is determined by the temperature while the blurriness comes from the cloud coverage. Users may adjust the size and position of the color. The goal was to give users a way to make it their own while providing parameters to make them feel cohesive when placed together.

Favorite details: While an input field is normally not very exciting, we knew ours had to entice users enough to get to the meat of the project: customizing the posters. We came up with a simple but distinct design that ended up being one of our favorite elements. Given the hundreds of submissions from over 45 countries, we’re quite proud of the user journey.

Challenges: The toughest part of the site was the generative posters themselves, as we needed to actually get into coding to design them. We also had to find the right balance, where each poster feels unique while still looking consistent when placed among others in the series.

Navigation features: While the posters are made up of some complex graphical elements, we made the creation process as simple as possible. Users can interact solely with the poster canvas itself to navigate through all of the steps. It’s a seamless transition from one step to the next.

Technology: We used React on the front end and Firebase for the gallery back end. The generative posters are a complex combination of kinetic type (using p5.js), image processing and cursor-movable 3-D shapes (using the three.js library), all generated based on data fetched from various weather and map APIs.