.. _case-studies:
************
Case studies
************
Before venturing into the project described in :ref:`motley-2020-identity`, I will quickly analyse two cases which help to put a context to it. I will show how some of these cases influenced it, but also how the project departured from them.
The cases were selected out of a myriad for two reasons: the first and most important was to show the two cases that planted the seed for the aforementioned project. :ref:`case-studies-graphcore` was the first project of this kind that I had ever encountered and which most consequentially triggered my interest for the field of algorithmic visual identities. :ref:`leon-sans` was the project which suggested to me the idea of continuously transforming a typeface via custom code in real time.
The second reason was to showcase the use of variable typography and kinetic graphic elements in visual identities. :ref:`case-studies-genesis-beijing` was selected mainly because the logo itself is kinetic and can take an arbitrary amount of forms. Its overall quality is also so impressive that it alone would legitimise the analysis. Finally, :ref:`barcelona-design-week` is one of the few high quality projects that I found which makes such a conspicuous use of a variable typeface in the core of its visual identity.
.. _leon-sans:
Leon Sans: an algorithmic typeface
==================================
The algorithm and implementation of the Leon Sans typeface is, of course, much more elaborate and sophisticated than this quick overview can—or should—convey. A full explanation is beyond the scope of this thesis: here I am only interested in showing how this example inspired the work described in chapter :ref:`motley-2020-identity`, subsection :ref:`motley-2020-identity-typography`. There we have used Leon Sans as an inspiration, rather than a source of detailed implementation.
Leon Sans :cite:`kim_cmiscmleonsans_2020` is unlike any of the typographic references shown thus far, in that there is no font file in the traditional sense (e.g. *font-file.woff* or *font-file.otf*). To be sure, there is a file—or, rather, a set of files—that define the vector information of the font face. But these files contain, instead, Javascript objects. These objects are used to draw the characters on an HTML canvas.
The way the characters are drawn is similar to how a commercial vector software such as Adobe Illustrator or Sketch draws lines: the vector information of the font tells the rendering engine where the vertices are (`x` and `y`) and what to draw between them (a straight line or a curve). User parameters define what the rendering looks like: what the line width (that is, the font weight) is, what color it assumes, and how it animates. Figures :numref:`%s <2000-leonsans-001>` and :numref:`%s <2000-leonsans-002>` show, as an example, two states of the *weight* parameter and the visualisation of the underlying vector information.
.. _2000-leonsans-001:
.. figure:: _static/2000-leonsans-001.png
:align: center
:alt: Leon Sans
:figclass: align-center
Leon Sans with small value for weight
.. _2000-leonsans-002:
.. figure:: _static/2000-leonsans-002.png
:align: center
:alt: Leon Sans
:figclass: align-center
Leon Sans with large value for weight
Because the typeface is rendered by the Javascript engine on an HTML canvas element in real time, it can be object to continuous transitions, based on user interaction (though pre-programmed animations can also be created). This was the most important inspiration for the typeface described in the chapter the subsection :ref:`motley-2020-identity-typography`.
The main difference between the approach taken by Kim :cite:`kim_cmiscmleonsans_2020` and mine is that the former draws the typeface from inside out, that is, the vector information describes the *center* of the glyph lines and uses stroke width and style to make the font weight vary (see Fig. :numref:`%s <2000-leonsans-001>` and :numref:`%s <2000-leonsans-002>`). As we shall see, in :ref:`motley-2020-identity-typography` the font files there were given and I used the existing contour of each glyph to perform transformations on each vector point.
The approach from Leon Sans works in this very specific case because this typeface has no contrast along its lines. The glyphs are drawn as lines without weight variations. This is the most important reason why this approach could not be used for the project described in :ref:`motley-2020-identity`, where the contour of the typeface is very irregular. Nevertheless it was an important point of departure and inspiration for the expressive use of typography.
.. _barcelona-design-week:
Barcelona Design Week 2019: variable typography
===============================================
For the 2019 edition of the Barcelona Design Week, the local firm ESIETE worked with Argentine type designer Eduardo Manso to create a custom variable typeface (:numref:`Fig. %s <2000-barcelona_design_week_2019_00>`), based on the Steradian typeface family.
.. _2000-barcelona_design_week_2019_00:
.. figure:: _static/2000-barcelona_design_week_2019_00.jpg
:align: center
:alt: Variable typeface for the Barcelona Design Week 2019
:figclass: align-center
Variable typeface for the Barcelona Design Week 2019 visual identity :cite:`underconsideration_walk_nodate`
The theme of this edition, *transitions*, represented in "the identity and the animations go beyond the basics by modulating the transitions from lightest to boldest not just left to right or top to bottom but diagonally and in chevrons" (Fig. :numref:`%s <2000-barcelona_design_week_2019_program_01>` and :numref:`%s <2000-barcelona_design_week_2019_program_02>` ) :cite:`underconsideration_walk_nodate`.
.. _2000-barcelona_design_week_2019_program_01:
.. figure:: _static/2000-barcelona_design_week_2019_program_01.jpg
:align: center
:alt: Barcelona Design Week 2019 program
:figclass: align-center
Barcelona Design Week 2019 program :cite:`underconsideration_walk_nodate`
.. _2000-barcelona_design_week_2019_program_02:
.. figure:: _static/2000-barcelona_design_week_2019_program_02.jpg
:align: center
:alt: Barcelona Design Week 2019 program
:figclass: align-center
Barcelona Design Week 2019 program :cite:`underconsideration_walk_nodate`
Although this use of typography is not in and of itself groundbreaking, it is worth highlighting because of its use of new developments in type technology, namely font variations (see again :ref:`brand-identity-digital-typography` in chapter :ref:`why-a-kinetic-visual-identity`). Creating animations or even the static versions of the images in the examples above without resorting to it would render the task incredibly tedious, perhaps prohibitively expensive in this case, as every point of every glyph would have to be edited individually.
With a variable font it becomes easy to determine a transient thickness for individual glyphs at individual moments. The following code does not derive from the identity itself, but is a likely implementation of it. It translates into image (:numref:`fig %s <2000-barcelona_design_week_2_weights>`, first line) in the following way: each letter has its weight relative to its neighbour offset by `80`, which is the number that divides the scale 100–900 equally. The first letter, *T*, has a weight of `100`, the thinnest; the next one, *R*, `180`; and so on until the last letter, *S*, has the weight of `900`, that is, the thickest of them.
.. code-block:: html
T
R
A
N
S
I
T
I
O
N
S
.. _2000-barcelona_design_week_2_weights:
.. figure:: _static/2000-barcelona_design_week_2_weights.png
:align: center
:alt: Recreation of of the effect from the Barcelona Design Week 2019 identity using a possible technique employed by the original creators
:figclass: align-center
Recreation of of the effect from the Barcelona Design Week 2019 identity using a possible technique employed by the original creators. This example uses the variable font Aktiv Grotesk VF :cite:`dalton_maag_dalton_nodate`
The next line of text would offset the weight distributions by one unit, so instead of starting with `100` it would start with `180` and continue from there.
.. code-block:: html
T
R
A
N
S
I
T
I
O
N
S
The method described above is the simplest for creating such a transition: a linear interpolation between the first and the last weight, i.e. each step is equal to every other step. But using curves makes the result more visually appealing. One possible way to do it with the example above is by using a cosine wave to transition between the values. The following simplified code shows an example of how this could be done:
.. code-block:: javascript
const output = Array.from('TRANSITIONS').map( (letter, i) => {
const angle = i * ((Math.PI) / 10) - Math.PI;
const cos = Math.cos(angle);
const mappedAngle = Math.cos(angle)*0.5 + 0.5;
const values = Math.round((mappedAngle * 800 + 100) * 1000)/1000;
return ''+letter+'';
})
This would give us the following:
.. code-block:: html
T
R
A
N
S
I
T
I
O
N
S
Notice how the `wght` parameter changes as a function of a sine wave, as opposed to fixed-size steps. :numref:`Fig. %s <2000-barcelona_design_week_2_weights_002>` shows a comparison between the first method (upper line) and the second (lower line).
.. _2000-barcelona_design_week_2_weights_002:
.. figure:: _static/2000-barcelona_design_week_2_weights_002.png
:align: center
:alt: Recreation of the transition effect (upper line), but using a cosine wave instead (lower line).
:figclass: align-center
Recreation of the transition effect from :numref:`fig %s <2000-barcelona_design_week_2_weights>` (upper line), but using a cosine wave instead (lower line)
This smoothing technique was also used in the subsection :ref:`motley-2020-identity-typography`, where I have used a cosine wave to modulate the font weights and avoid the dull, linear transition. Although, for reasons that will become clear, there I was not able to use a variable font and another approach to transitions had to be taken.
.. _case-studies-graphcore:
Graphcore: generative graphical elements
========================================
.. _pentagram-graphcore:
.. figure:: _static/2000-pentagram-graphcore.png
:align: center
:alt: Graphcore grid system
:figclass: align-center
Two stages of a grid generated by the Graphcore grid system. Image from Pentagram :cite:`pentagram_graphcore_nodate`
The Graphcore visual identity, created by Pentagram :cite:`pentagram_graphcore_nodate`, uses a grid system (Fig. :numref:`%s `) as the basis of the algorithm to generate graphical elements. In principle, this algorithm could be followed by a human agent to create those elements in a manual process. Such process, as it can be deduced from public data about this case, is the following:
1. create a grid (which is always similar, but never the same, see :numref:`%s `):
a. split the canvas into four columns and four rows (:numref:`Fig. %s a `);
b. choose a random square defined by that split;
c. further split that square into two columns and two rows (:numref:`Fig. %s b `);
d. if the grid is ready, stop, otherwise go to *e*;
e. choose a random square within the newly created sub-grid and continue to *c* (:numref:`Fig. %s c `);
f. if the grid is ready, stop, otherwise go back to *b*.
2. define the amount and frequency of each of the shapes defined by the brand guidelines;
3. place the shapes on the grid, respecting the box sizes defined in step 1;
4. apply colors to the shapes according to the *colors* section of the brand guidelines;
As suggested in the section :ref:`brand-identity-digital`, this rather tedious process can be encapsulated by software, which allows for the creation of an immense variety of graphical elements while ensuring they follow the brand guidelines. That is exactly what Pentagram did: a desktop application (:numref:`Fig. %s `) that Graphcore employees (and presumably their partners) can use to generate graphical elements.
.. _pentagram-graphcore-001:
.. figure:: _static/2000-pentagram-graphcore-001.png
:align: center
:alt: Three iteration of the grid algorithm
:figclass: align-center
Three iterations of the grid algorithm. Image by Régis Frias.
.. _jhp_lp_graphcore_18:
.. figure:: _static/2000-jhp_lp_graphcore_18.png
:align: center
:alt: Graphcore desktop application
:figclass: align-center
Graphcore desktop application for generating graphical elements. Image from Pentagram :cite:`pentagram_graphcore_nodate`.
Figures :numref:`%s` and :numref:`%s` show a sample of the graphical elements applied to business cards. Here one can easily see the variety of versions that can be created and, at the same time, how well they adhere to the brand guidelines.
.. _graphcore_business_cards_01:
.. figure:: _static/2000-graphcore_business_cards_01.jpg
:align: center
:alt: A business card with generated graphical elements
:figclass: align-center
A business card with generated graphical elements. Image from BrandNew :cite:`underconsideration_price_nodate`
.. _graphcore_business_cards_02:
.. figure:: _static/2000-graphcore_business_cards_02.jpg
:align: center
:alt: A wide variety of graphical elements can be generated by the application
:figclass: align-center
A wide variety of graphical elements can be generated by the application. Consistency and adherence to the brand guidelines is guaranteed. Image from BrandNew :cite:`underconsideration_price_nodate`
As the example applications show the grid logic was carefully crafted to produce visually appealing results, by means of a thoughtful compromise between repetition and variation. Even stripped from the graphical elements it already creates a balanced composition (see again :numref:`Fig. %s `).
The preexisting graphical components—octagon, square, circle, diagonal line, faceted arc—can be easily accommodated within a square of the grid, by design. User defined biases for each of the components will determine which and how many of them will be generated. This is the greatest source of control for the human agent operating the application, and, one could say, room for the creative use of it.
A parameterised desktop application as the one described above is not a requirement for this kind of approach to visual identity to work: one could easily imagine a script that generates an indefinite amount of graphic elements or even a limited number pre-generated by the authors of the visual identity. On the other hand such an application helps to keep human agency as the main source of judgement for the outcomes. Humans using it will generate the visual elements with their own parameters and choose the ones that best fit their current goals or use case.
.. _case-studies-genesis-beijing:
Genesis Beijing: generative logo and identity
=============================================
Wolff Olins created the visual identity for Genesis Beijing, "a public development that combines a hotel, offices, gardens and a museum :cite:`wolf_ollins_genesis_nodate`", with motion at its very core:
It’s built from five patterns or ‘flow states’ that form the experience of ‘wu wei’ – play, pause, reflect, exchange, concentrate :cite:`wolf_ollins_genesis_nodate`.
The result is a logo (:numref:`Fig. %s <2000-genesis-beijing-002>`) and graphical elements :numref:`Fig. %s <2000-genesis-beijing-001>` that are not fixed by a brand book, but can be created in many variations in different situations. In traditional identities the logo does not animate except in transitions, but the Genesis Beijing logo can be shown as an ongoing animation. This is an extreme version of the dynamic visual identity explained in the subsection :ref:`static-and-dynamic-identities`.
.. _2000-genesis-beijing-002:
.. figure:: _static/2000-genesis-beijing-002.png
:align: center
:alt: Genesis Beijing logo variations
:figclass: align-center
Genesis Beijing logo variations :cite:`wolf_ollins_genesis_nodate`
The graphical elements come from the five patterns mentioned above (:numref:`Fig. %s <2000-genesis-beijing-001>`). As with the logo they can also be shown as ongoing animations. It is important to note, though, that both the logo and the graphical elements suggest motion even in static settings, such as print.
.. _2000-genesis-beijing-001:
.. figure:: _static/2000-genesis-beijing-001.png
:align: center
:alt: Genesis Beijing graphical elements
:figclass: align-center
Genesis Beijing graphical elements :cite:`wolf_ollins_genesis_nodate`
Wolff Olins also created a desktop application for generating brand visual assets (:numref:`Fig. %s <2000-genesis-beijing-003>`). Users can control the variation of the logo with parameters such as line length, rotation points, flow and line frequency, as well as colors and added randomness. Again the visual identity is kept consistent by the inner logic of the algorithm, which allows variations only within certain boundaries.
.. _2000-genesis-beijing-003:
.. figure:: _static/2000-genesis-beijing-003.png
:align: center
:alt: Genesis Beijing desktop application for generating brand visual assets
:figclass: align-center
Genesis Beijing desktop application for generating brand visual assets :cite:`wolf_ollins_genesis_nodate`
As a final note, I would like to mention that the definition I gave of a *kinetic visual identity* implies the concept of *built-in motion*, but one should not understand that as a statement that the motion should always be *present*, or *actualised*. Instead, what it means is that motion and interaction should be considered from the foundation of the visual identity.
Key findings and reflexion
==========================
The research question that this thesis is trying to answer (*how has the modern computer, in the guise of software, caused changes in the practice of visual identity?*) was posed in the form of *how*, instead of *whether*; that is, the question *presupposes* that the changes have already happened. This question arised partly from the observation of cases such as the above.
The approaches and techniques shown in this chapter are important building blocks for the development of dynamic identities, as explained in :ref:`what_is_a_brand_identity` :cite:`murdock_fluid_2016`. That is, the identity is not ready when the brand guide is delivered, but it will be continually updated and expanded as new uses emerge and as new stakeholders join the conversation.
Specifically regarding typography, Leon Sans (:ref:`leon-sans`) opened for me the possibility of a typeface that can be continuously transformed in real time and which can be used expressively (ref. to :ref:`brand-identity-digital-typography`). In the project described later (:ref:`motley-2020-identity`) I did not try to mimic this behaviour, but, rather, drew inspiration from it and applied some of the thinking to another context.
:ref:`barcelona-design-week` covers another area of the expressive typography landscape. There, suggested motion—in the form of repetition with variations—rather than actual motion strikes the balance between consistency and variety.
:ref:`case-studies-graphcore` and :ref:`case-studies-genesis-beijing` embed motion and flexibility in their desktop applications. This possibility was a starting point for the project in :ref:`motley-2020-identity`, but not (or at least not yet) implemented. But more important than the desktop applications are the possibilities opened up by them, which are essentially those brought about by the advent of software (see again, e.g., :ref:`movable-type-digital-revolutions` ).
The use of a desktop application potentialises the future creation of visual assets (as opposed to their being predefined in the brand guide). But this is not the only way of creating open or flexible visual assets. A desktop application gives users the ability to interfere in the creation of the assets by means of changing its preprogrammed parameters.
On the other hand there is no reason why the parameters could not be changed in real time not by employees of the company or their creative partners, but by the end users themselves. In that case they could create and modify visual assets as they interact with some of the touch-points a brand has with them. This is at the core of the idea of the kinetic—and, more specifically, interactive—visual identity (ref. to :ref:`brand-identity-digital`).
I have kept the attention of these cases on two main components of visual identities: typography and graphical elements, since this is the focus of the project described in the chapter :ref:`motley-2020-identity`. These elements are, in that chapter, highlighted for their kinetic and interactive features.