Upperquad – Website, Generative Art, Print
Hello From Here
Scroll ↓
Client
Internal project
Role
Creative Direction, Art Direction, Visual Design, Production
Year
2019, Produced at Upperquad
Awards
Awwwards SOTD, FWA Of The Day, FWA Insights, CommArts WebPick, CSS Design Award, CSS Winner, Fonts In Use, Site Inspire
Team
Kailie Parrish, Louis Amiot, Lily Zhou
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.
Creating the Posters
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.
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.
Generating Parametors
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.
The Website
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.
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.
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.
The Gallery
Every poster is added to the interactive gallery where you can browse work from people around the world.
Promoting the site
In addition to the website, we ran an outdoor media campaign in the streets of Berlin with 34 custom posters and mailed holographic art prints to our friends across the globe.
▴ Photo: Helge Mundt
