What I learned from the $2,000 elusive design book “Designing Programmes”

Svilen
Svilen
May 21, 2017 · 7 min read
Image for post
Image for post
Image for post
Image for post

Designing Programmes by Karl Gerstner is one of the most elusive design books in the world. Brand new copies retail for over $2,000, and even used versions go for over $250. Luckily for you, I spent my hard earned $277 for a copy so you don’t have to..

Let’s start

The entire introduction is spent philosophizing the very definition of a “programme” but in essence, you can think of it as an algorithm that produces different, yet cohesive outcomes.

It starts with an example of a 15th century Gothic cathedral Karl passed by on his way to work every day…

Image for post
Image for post

Notice how every window design is different, yet looks related.

The architects of the cathedral used a “design program” which adheres to the same constraints and variables in order to produce different ornamental designs which feel like they belong together.

Karl describes it in detail:

Image for post
Image for post

MIT’s Media Lab Rebrand

In 2011, they rebranded their identity and for a logo, they used a “program” that could generates 40,000 different permutations so each student, faculty member, building and project can get their own unique logo for the next 25 years…

Image for post
Image for post
Small batch of the 40,000 possibilities

Just 3 years later, MIT’s media lab changed its identify yet again, but retained the grid of the earlier logo design program…

Image for post
Image for post
Image for post
Image for post

This in essence captures the spirit of what design systems are all about.


Deriving complexity from simplicity

The astonishing richness and beauty of geometrical patterns

The book offers another great example of a morphology program:

1. Divide a square into 9 smaller squares

2. Replicate 3x, forming a bigger square

3. Mark the 49 intersecting nodes (dots)

Image for post
Image for post

Now, the program itself is very simple: connect the nodes in the original 3x3 square (shown in #5 below) anyway you wish, then reflect it onto the other 3x3 squares as show in examples 6–20:

Image for post
Image for post

As you can see, immensely diverse and interesting possibilities exist within these extremely simple set of rules.

Now let’s shift to applying programmes outside of visual design to other fields as well.


Morphological Typography

Designing means to pick out determining elements and combine them

In this section, Gerstner presents us with his “morphological box of the typogram” which breaks down certain expressive characteristics of typography by rows…

Image for post
Image for post

The power of this mechanism is that you could blindly make selections as you go from row to row and arrive at the creative solutions shown below:

Image for post
Image for post
Image for post
Image for post

Let’s examine how the first example could have been generated by the typographic morphological box.

This logotype…

Image for post
Image for post

…is the result of the following choices:

Image for post
Image for post

This systematic, generative approach to creative output is another great example of a design programme.


Program as Grid

The typographic grid is a proportional regulator for composition, tables, pictures, etc. It is a formal program to accommodate x unknown items. The difficulty is to find the balance, the maximum of conformity to a rule with the maximum of freedom. Or: the maximum of constants with the greatest possible variability.

The grid is a fundamental principle in design which plays a major role in 60s Swiss design, thus explaining Gerstner’s affinity for it (he was a prolific Swiss graphic designer for those who haven’t Google’d him yet.)

His contribution to grid theory is his famous “mobile grid” which he developed for the German magazine Capital:

Image for post
Image for post

I know what your thinking- WTF.

But the grid is actually a lot less intimidating than it looks at first glance- I put together this diagram to show that it’s actually 6 separate grids into one:

Image for post
Image for post

Programs as Photography

Image for post
Image for post
Image for post
Image for post

Notice how the camera adheres to the same movement at each angle to provide a consistent perspective of the car.


Programs as Literature

Image for post
Image for post

As beautiful as this beautiful poem may be, it wasn’t written by a romantic staring into the moon out of his window. Much like the morphological typography box earlier, it was generated by a similar mechanism…

Image for post
Image for post

As you can see, you can combine any of the alphabetically labeled boxes above to form poetic sentences without much thought. Go ahead and try it.


Program as music

This is the first layer:

Image for post
Image for post

The different sized points represent different sounds. In this second layer, the 5 lines represent different frequencies:

Image for post
Image for post

When you superimpose the 2 layers on top of each other, you get sounds played different frequencies:

Image for post
Image for post

Now in the last described step perpendicular lines are drawn between the points and lines, which represent “distance to be observed” which I only assume is time.

Although convoluted and difficult to understand, the beauty of this musical program is that it can be played by any number of performers with any kind of instruments.


Integral Typography

Integral means: shaped into a whole. There the Aristotelian dictum that the whole is greater than the sum of the parts is assumed. And this vitally concerns typography. Typography is the art of making a whole out of predetermined parts. The typographer “sets” individual letters into words, words into sentences

He goes on to say… “letters are the elementary particles of the written language- and thus of typography. They are figurative signs for sounds without content, parts which acquire meaning and a value only if they are combined. This means that combinations of two, three and more letters show in any case a word-picture, but define letters render a definite idea only in a certain sequence”

He demonstrates this by showing that only one combination of the four letters form a meaningful word- “wife.”

Image for post
Image for post

The following example is applied to the brand identity of a record shop called “Boîte à musique”

Image for post
Image for post

The brand flexibility is displayed below- example 14 is company card with various proportions, example 15- notepaper, example 16 and 17- ads, and 18- a gift voucher:

Image for post
Image for post

Another example is given with Holzäpfel’s brand:

Image for post
Image for post

3D Programmes

Image for post
Image for post

The second example is a cylinder split into 9 rings based on the golden ratio proportions, which can be rotated to form various permutations based on the angle it’s observed:

Image for post
Image for post

Color Programmes

Image for post
Image for post

That’s all folks… I’ve tried to capture the main ideas that I found interesting, but the book has plenty more. If you found this useful, please like and share with others who might also derive use from it. Let me know your thoughts, feedback or questions in the comments :)

Svilen's Realm

I invent, design and craft experiences and solutions…

Svilen

Written by

Svilen

Speculative Designer | creator of RubixToolkit.com & DesignSecrets.org

Svilen's Realm

I invent, design and craft experiences and solutions ranging from reimagining the mundane to protecting fundamental human rights. I share my visions with the world through the language of design, film, and writing.

Svilen

Written by

Svilen

Speculative Designer | creator of RubixToolkit.com & DesignSecrets.org

Svilen's Realm

I invent, design and craft experiences and solutions ranging from reimagining the mundane to protecting fundamental human rights. I share my visions with the world through the language of design, film, and writing.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store