Design read from a distance: posters and campaign visuals

Short answer

A billboard is seen from a distance and in motion, in a few seconds; that's why its color has to carry a single message, through large areas and strong light-dark differences. In a social media feed, on the other hand, the visual is seen close up, in the hand, but while it's being scrolled past very quickly; here, "stopping" color isn't chosen to be read from a distance, but to stand apart from the rest of the feed, and so it depends on the colors of the surrounding content, and even on whether the app's theme is light or dark. In both environments, color is chosen on a screen but seen in a different environment: a billboard gets printed and lit at night, while a feed opens on countless different phones.

Distance and duration

Two things determine a poster's or billboard's color decisions: how far away it will be seen from, and for how long. A billboard at the roadside passes before the eyes of someone in a car from maybe a hundred meters, maybe within a few seconds. A poster in a subway station can be seen from a few meters, for longer, by someone waiting there. A visual on a phone screen, meanwhile, is seen from about thirty centimeters, but it stays on screen for a very short time while it's being scrolled past in a feed.

Distance and a short dwell time bring the same rule for color: not detail, but large areas and strong differences. The value contrast we saw in GT-02 is even more decisive in design read from a distance, because as the eye moves farther away, it loses fine shapes before it has trouble telling hues apart. Checking whether a billboard, in grayscale, shrunk down to the size of a postage stamp, is still legible is a good simulation of seeing it from a hundred meters away.

Two schools from poster history

The language of design read from a distance developed over more than a century of poster tradition. The two schools covered in this lesson give two different answers to the same problem.

The first example comes from Hungary. In 1912, Mihály Biró created a red man figure holding a hammer for a poster he made for the left-wing newspaper Népszava. According to poster collections in Budapest, this "red man" went on to become one of the icons of Hungarian political posters in later years. The figure's power comes from being defined by a single color: when a figure becomes identified with one saturated color, that color and that shape turn into an icon recognized from a distance, at a glance.

The second example comes from Switzerland. The approach that developed in the 1950s and 1960s, known today as the Swiss Style or the International Typographic Style, is recognized by grid-based layouts, plain typefaces, and a limited color family. Josef Müller-Brockmann's traffic safety posters for the Swiss Automobile Club are good examples of this language: in his 1953 poster "Schützt das Kind!" ("Protect the Child!"), a photograph by Ernst A. Heiniger and a plain typography build a sense of speed and danger between a giant car that doesn't fit in the frame and a child fleeing from it. The 1960 poster "Weniger Lärm" ("Less Noise") is part of the same series.

The lesson common to both schools is this: in design read from a distance, color is used sparingly and powerfully. Biró's figure becomes an icon through a single color; the Swiss poster filters its message through a limited color family, strong light-dark contrasts, and an orderly layout. Neither uses color as decoration; both use it to bring forward the one thing that should be read at first glance.

Scroll-stopping color in a feed

The question on the lesson card carries this tradition into today's environment: how does the use of scroll-stopping color in a social media feed differ from a billboard?

On a billboard, the problem is distance; in a feed, the problem is speed. According to an independent study cited by Facebook, people could recall content in a mobile feed at a statistically significant rate after an exposure of just a quarter of a second. This shows that a visual in a feed has to be noticed in that very first instant, while the finger is still scrolling.

Two differences follow from this. First, separation on a billboard is relative to the surrounding street, while separation in a feed is relative to the other content. GT-03's principle of visual search also applies to a feed: the more the surroundings are filled with similar colors, the more easily a different color stands out. If everyone in a feed is using the same pastel tones, the same bright gradients, what stops the scroll might be a completely different color, or it might be an unexpected simplicity.

Second, the feed's ground is variable. The same visual appears in light theme on one user's phone and in dark theme on another's. A light visual that glows against a dark theme can disappear against a light theme, and the reverse happens too. Giving the visual its own ground at its edges — a clear frame or a colored field — makes it independent of the app's theme.

On a billboard, the situation is reversed: the ground — the sky, a building, a tree, or the other billboards next to it — isn't under the designer's control, but its variability is limited. A billboard, to some extent, brings its own ground with it: its large colored areas set it apart from the clutter of its surroundings.

Risk from screen to print

Campaign visuals today are mostly designed on screen. But a billboard is printed at large scale, a poster goes onto paper, and a bus-stop lightbox goes onto a backlit film. The screen's bright neon colors — especially bright cyans, electric blues, and neon greens — often can't be fully reproduced with the printing press's four inks; the gamut limits covered in EK-04 are a concrete problem here.

This risk has two solutions. The first is to choose the campaign's key color from the start from among the colors that can be reproduced in print, and to use that same color on screen too. The second is to use a special printing ink for the critical color; this costs more, but it preserves the brand's signature color. In both cases, a printed sample needs to be tested close to its real size and outdoors, in daylight. The print medium's own language is the subject of EK-08.

Example — faces under night light

A health campaign uses large portraits of people with different skin tones on billboards around the city. The billboards are seen in daylight during the day, and at night by floodlight or backlighting.

The daytime test succeeds. At night, two problems appear. First, floodlights don't light the billboard evenly; the center can stay bright while the edges stay dark, and a face near the edge, especially a dark-skinned face, can lose its detail. Second, the color of the light can be warm or cool, and as we saw in FS-01, this changes how skin tones look; the eye partly corrects for this, but if a billboard has no neutral surface to compare against, that correction weakens.

The team's solution has three steps: placing the portraits in the billboard's more evenly lit center region; opening up the shadow detail of dark skin tones slightly in the print file to increase their visibility at night; and placing the campaign's white or light neutral logo in a corner of the billboard, to give the eye a reference surface from which it can estimate the color of the light. These steps aren't an aesthetic preference; they're the result of a test aimed at making every face read with the same clarity, by day and by night alike.

Common misconception

Summary

1. In design read from a distance and in a short time, color carries a single message through large areas and strong light-dark differences; Biró's red figure and the Swiss poster's limited color family are two different forms of this same principle.
2. On a billboard, separation is relative to the surrounding street; in a feed, it's relative to the other content and the app's theme. Scroll-stopping color is the color that differs from the feed's current color environment, and giving the visual its own ground makes it independent of the theme.
3. Colors chosen on screen can fall out of gamut in print, and night illumination changes colors and faces; that's why campaigns are tested at print scale, by day and by night, with faces of different skin tones.

Test yourself

1. (Easy) What is lost in a design as viewing distance increases?
2. (Easy) What is an out-of-gamut color?
3. (Medium) How does the use of scroll-stopping color in a social media feed differ from a billboard?
4. (Medium) Which principle of design read from a distance does Mihály Biró's red figure show?
5. (Hard) Why does a visual in a feed behave differently depending on the app's light or dark theme, and how can this be prevented?
6. (Hard) What factors disrupt the visibility of faces with different skin tones on a billboard lit at night, and how are they fixed?

Answers

1. Fine details and small shapes; only large areas and strong lightness differences remain legible ("Distance and duration").
2. A color defined in one medium that can't be produced in another; for example, the screen's bright neon colors are reduced to a duller equivalent in four-color print ("Risk from screen to print").
3. On a billboard, the problem is distance; in a feed, it's speed. Separation on a billboard is relative to the surrounding street, while separation in a feed is relative to the other content and the app's theme; scroll-stopping color in a feed is the color that differs from the current content environment, while on a billboard it's a single message read from a distance through large areas and strong contrasts ("Scroll-stopping color in a feed").
4. The principle that a single saturated color builds a strong silhouette in front of a plain ground and is recognized instantly from a distance ("Two schools from poster history").
5. A light visual that disappears against a light theme glows against a dark theme, or the reverse happens, because the visual's ground is the app's theme. Giving the visual its own ground at its edges — a clear frame or a colored field — makes it independent of the theme ("Scroll-stopping color in a feed").
6. Floodlights not lighting the billboard evenly can make faces near the edge, especially dark skin tones, lose their detail, and the color of the light changes how skin tones look. Placing the portraits in the evenly lit region, opening up the shadow detail of dark skin tones, and adding a neutral surface as a reference for the eye fixes this ("Example — faces under night light").

Sources

• Budapest Poster Gallery, «The beginnings — Art nouveau & Red propaganda».
• Cooper Hewitt, Smithsonian Design Museum, «Poster, Schützt das Kind! (Protect the Child!)».
• The Museum of Modern Art, «Josef Müller-Brockmann. Weniger Lärm. 1960».
• Marketing Dive, «Facebook: Why mobile video ads must work fast».

Next step

GT-07 looks at another source that shapes a designer's color decisions: how the "color of the year" choices that different organizations announce each year are made, what marketing function these announcements serve, and the risks of blindly following a trend. GT-08, in turn, returns to the tools on a designer's desk: it covers palette generators that work from harmony rules, extracting a palette from a photograph, accessibility-checking tools, and using AI-assisted generators with a critical eye.