Guardrails or handcuffs? Building creative and sustainable design systems

(upbeat music) - Hi, I'm Mark.

Today, I'm here to talk to you about design systems. There's a lovely German word, zeitgeist.

You've probably heard of it.

It means the spirit of the time.

Design systems are probably and have been the exact guys for a little while now, involved in product design. But in this talk, I'd like to discuss how we move away from the prescriptive, constrictive sameness in our design systems and towards more creative potential human approach.

First so, I'd like to talk to you a little bit about Manchester.

So I grew up in Manchester.

I haven't lived there for a long time now, but it's it looks a little bit like this.

I grew up a little bit outside of Manchester, but there are plenty of streets that look like this black and white raining all the time.

One thing is, pretty true of Manchester throughout the years, though it's a home of great music and has been for decades.

I grew up, like I say, around the 80's in Manchester around that time, I was old enough to go into Manchester on own as a young kid.

And around 1989 there was this thing called Manchester. A truth be told, a lot of people took a lot of drugs. And there was one guy who was very central in Manchester and Manchester culture.

I remember seeing him on TV.

He was a TV reporter to begin with.

And then he turned into a local kind of entrepreneur. He was pervasive.

He was kind of everywhere throughout my childhood, on TV and the things that he produced and things that he worked on, his name was Tony Wilson. And he started off as a TV reporter for the local news. I remember seeing him on the middle of in more than than this sideways rain and he's talking to some farmer or rather, you know, he was just somebody you saw on TV. He then founded Factory Records.

Now you may have heard of Factory Records, you may not have but you almost certainly will have seen and heard the output from Factory Records, Happy Mondays, New Order.

So this local record company hired local designers, local freelance designers to produce a lot of the artworks. And this stuff was everywhere in Manchester. There was a time where, you know, this record label was so prolific, not just the records themselves, but stickers on lamp posts, flyers through your door. As a design student in Manchester, in the early 90's, I was taught by some of the designers who had worked there, you know being a freelance record designer, print designer doesn't pay terribly well. So a lot of these people you know, taught on, on design courses and this work like I said, this was everywhere.

This was being taught to young designers.

Designers were emulating this work.

And it kind of became this, DNA of the city right? This, on every lamp post, there was this feeling, this hyperlocal sense of what it was like to be in and of Manchester.

That was the zeitgeists of the time, I like to call it something else.

I like to call it a thingness.

There was a thingness about Manchester, and it wasn't it couldn't be really described as, a single thing. It was lots of little things that made up it to to feel like Manchester while you were there, which is quite unique to any of the city that I'd been to. Why am I telling you this? Well, to me, the goal of a design system is to create a thingness.

It's a, a design system really is a connectedness between products, content, services.

It's a described system.

So a little while ago, in fact last year, I was giving a talk on design systems, and I asked people of, Twitter.

You know, if I was a senior manager and I was being asked to fund a design system project what are the pros and cons? What are the costs and benefits? You know as you might expect, I got a lot of replies. I got a lot of positive responses about sustainability and then how it enables scale, the reuse of code, time-saving, shed resources.

You know, there are a lot of advantages, a lot of good reasons why you should have more. Equally, there are a lot of, though I won't say it was griping but there were a lot of negative comments as well. So the fact that our technology moves very quickly and there could be obsolete.

The ongoing commitment, designs systems are our products and there is considerable time and money needed to be invested with really hard to come to demonstrate a clear ROI as well.

So there are lots of disadvantages.

We probably know all of these, one thing that came through in the positives, the parts came through more loudly and clearly than anything else was this idea of consistency right? Design systems solve the consistency problem. And they enable scale, reach and the shared vocabulary between people, between teams, and then they enable conversations about standards. They surface organisational issues, you know, they can be a driving force for a lot of change within an organisation. But there are challenges.

And we probably are aware of a lot of those challenges those are sort of worked with them for a little while. A couple of weeks ago, Ethan Marcotte a really great talk for a CID CSS. And it really resonated with me and, like him, he talked about a scenario that he seen in design system teams. And I've seen this too, a lot of the past decade or so. I'd like to just walk you through what he said and see how this resonates with you.

So here we are, we have a design system, of the core of our organisation and around it, in those grey circles are our product teams. You know, we've got a bunch of product teams or however, the organisation is structured regardless they're the consumers of the system.

So these are the folks who who take the components, and the rules of the system and apply it for their customers or users.

The products and people are served by this system. So let's take this example of them.

You know, there's a centrally produced component in this case, like an accordion, right? Something like that.

Every team takes and uses as this accordion, brilliant works very well.

It does exactly what, you know a lot of those benefits written in green that I was talking about earlier.

But then as time goes by, one of those teams discovers that they actually need the accordion to do something slightly different.

So they go to the design systems team and they say, "We need a slightly different accordion right? Because the one that you've given us whilst it's great, we need it to do something slightly different." The design system team says, "Actually, okay, great, fine. But we need to go through this process of collaboration in order to make another record DNN because we have to make that available for everyone else. Kindly just get by with the one that we've got, you know maybe change a colour or something.

Add a couple of icons you know, that scope within the design pattern to do that." The product team are not willing to do that. They, think that they need something pretty different. So what did they do? They go ahead and fork it.

They just create their own pattern, why? Because it's faster and it's easier.

And when the pressure of shipping, the pressure of, of actually the bottom line for an organisation is in question then you know, the design system team's needs are actually a lower priority than getting this thing out at all.

So, there's another team over here, team C as I like to call it.

And they have an accordion as well, though slightly different, slightly different to the one provided by the design systems team and slightly different again to the one, I think of a product team.

So what did they do? They fork it and they produce another.

Of course they do.

So we're getting this position where we have a design system.

We have one accordion.

We have a slightly different accordion, or we have another accordion.

Now you may be, you know, if you've worked in design systems before you may be nodding along as I'm as describing this, as Ethan said, you know it's my experience as well, that this is normal and natural, don't panic.

This is why collaboration is so important.

And whether the processes of collaboration around design systems is so important to smooth the way for acceptions and additions to those centrally provided patterns.

So with consistency being the issue, and the driving motivation behind design systems. We have two product teams at the side here and the design system sits in the middle.

It tries to strike a balance between one product team's needs and another product team's needs, with a compromised best fit solution.

But this proliferation of forked components will continue. It's just human nature, for us to want to create slightly different things. How can we provide this consistency whilst this is happening, by controlling the usage of the system, by policing it, by coming down hard on those who deviate or do we document what people are doing with it and we pave the cow paths that way.

Jeremy Keith talks about this as a system that is prescriptive, a prescriptive design system. One that is defined centralised and controlled. One where patterns and rules and usage like language are tightly defined centrally and controlled centrally.

There's a other system which he outlines, which is a descriptive design system.

Now this is one that is emergent, one that is being created.

One that is built over time, paving those cow paths as people, fork components and, the design system team then just builds on top of them. But that is another I think, that is another system beyond these two.

And I think it's an enabling system.

I think it's one that is looser, it empowers teams. It allows for this creativity.

Remember that is a natural sort of human process. More importantly, I think it creates this thingnes this sense of connectedness between elements in a design system.

The good news is, for us as designers is this has been done before, quite a few times, I'm now going to talk through two examples here. And they both happen to be Olympics, the identity systems for two different Olympics over, over a few decades.

Why am I talking about stuff that isn't digital? Well, I think that we have a duty as designers to look beyond our own fields, as to draw inspiration and to see where this has worked and what hasn't worked in other design disciplines and Olympics are almost unparalleled in the scale of application.

Yes, they're consumer focused.

They're also B2B focused and they cover everything from print and identity design, to architecture, to signage to fashion and clothing, to iconography and typography. They cover the whole gamut.

So the first example I'm gonna talk through with you, is the 2012 London Olympics.

An Olympics of course with my kind of a home Olympics, and it was incredibly divisive as a design system a little bit like as we say in the UK it was Marmite system. So you either loved it or you hated it.

Of course the logo was, core and central to that hatred. But I think it's a system that was far reaching unambitious, and it was derived centrally from the logo and spread out across all material.

The logo was designed by Wolff Olins and the overall branding was by FutureBrand. Central to the system was the fractal grid. It was the starting point for almost all things within the system.

It was derived from the logo and the grid became this tool to make the design decisions with.

So here you can see it applied to the seating in the arena which created these kind of random fractal-like random shapes within the seating.

Now to look at these, you know, on face value you wouldn't necessarily draw that connection between the logo and the seats, but they were used here for planning wayfinding signage.

So overlaid over a perspective, drawing to give odd structures to the supporting struts there or the shapes of the signage itself.

Now when these were then manufactured no to a wayfinding kind of beacon or posts look the same, they were all different.

And it gave rise to these very kind of obscure objects, throughout the Olympic park.

But even Mundane things such as tickets here, the ticket designs, the iconography and the colorways. They felt like they were connected to the system because in there is the fractal.

It's the fractal grid is underpinning it.

And then there were these odd moments of calm and joyful branding within the system as well.

This is the walk around the Olympic park, you basically follow the butterflies but these fractal sharp edges derive from the grid, pull everything together, visually and physically within the space that created the sense of thingness from the centre out.

Another example would be the, the 1972 Munich Games. This is an original poster of the Torch Relay. That's actually hanging up over there in my wall, in my studio.

It's, really large as well.

It's like a zero size.

The system that was created for the 72 Olympics was hung on this central idea that it's this is a cheerful, joyful games.

Otl Aicher was the man at the centre of the design system. Munich was spring boarding off the Mexico Games and the Tokyo Games, which were incredibly successful. And he and the German Olympic committee were really keen to demonstrate that the Germany was a very different place to a couple of decades ago.

It was a vibrant democratic, modern country and the system was a celebration of it.

So it was not defined centrally from a simple component, such as the fractal grid and the, from the 2012 games. This was considered much more holistically. The system that was developed were wonderfully named department, they were called Department 11 and there was maybe 80 or so people in there with a huge multidisciplinary team.

And it was very holistically designed in its nature. You know, everything from postcards, to the icons, to the programmes and tickets, they were considered as a whole.

Even down to this weird little dog called Waldi, you can actually see Waldi's not really big, they're like a wooden toy that you can buy I've yet to get hold of one.

You can get a lot the real collectibles around the games because these were produced.

It was just so much produced right? The Olympic games then poster on my wall is produced on a really terrible thin paper.

Like it's, you know, it's throw away.

It was designed to just be thrown in the bed after the games.

So it's amazing, but quite a lot of it survived considering the despite the graphic design quality and the branding quality and the system design quality, actually the material it was printed on was pretty poor.

So, the system even, you know, like the London Games even went down to the, to the architecture, and landscaping, again, the seats featured, and again there was weird clothes for the volunteers the height of 1972 fashion here.

So, Otl Aicher talked about his system for creating his material, in a really interesting way.

He said, "The system was strictly designed, had a strictly designed grammar but then allow for plea of free playful expression." I really liked that phrase.

I really liked that it's a strictly designed rules, but there's enough freedom within those rules to allow for that deviation, for that human expression whilst keeping a connectedness between anything that's produced. The way that I like to describe this is that simple easily communicable rules allowing for human expression. How can we do that in our design systems? Our digital design systems of today no matter what we we're producing them for? How can we allow for that human expression? I've been thinking about this a little while for a little while.

And the projects I've been working on recently is really helped me pull together some thoughts. So I think one of them is to articulate the design space. So in type of design, this is why I mentioned that I'm working on a project at the moment related to type design.

So typefaces are designed within this thing called the design space.

So an example of this would be, you know you have a bold type face going to a very thin type face and that is an axis of kind of boldness or weight. Then you might have another, which is slant. So going from straight to, italics or a blicked and then you can have another, which is the width. So very compressed, very extended.

Now, if you take those three axes, and you create a 3D cubeish thing from it, and that is a, really useful model, within which design decisions can happen.

Now type designers have been doing this for decades. This is how they, conceptualise and they produce their type faces is through instances and subsequent interpolations within this space. For the 2012 games, all design decisions existed within this design space, within the fractal grid. This helps with one critical question that comes up when you deviate, or when you want to deviate from a design system that is prescriptive.

One that is not described as Jeremy calls them. The question is, what does this look like? So the challenge with that, is that anything that goes outside of the design system, not operating within a design space is a challenge because those decisions are subjective.

Those are decision subjective from the designer, to the stakeholder or client.

And then it becomes about this back and forth. The dance of justification around why something should look the way it should as opposed to the system. I've tried to do this a few times.

So I've tried to articulate a design space in a few projects I've worked on, going back quite a few years now, I did some work with CERN, their physics laboratory in Switzerland, those ones who've discovered the Higgs boson yes those, they wanted a new website, and we did a bunch of work with them to try to articulate this design space.

What does it mean to the different audiences of CERN, how they're perceived or how their content is perceived and read and understood how they present themselves. And a lot of people compared what CERN do to NASA, right? NASA explores the universe and outer space and CERN explores inner space, explores that super power atomic level.

The challenges is that NASA has it really easy 'cause there are pictures like this, right? They have astronauts and spaceships and the earth rise and CERN don't have that.

They have other things.

So they have visualisations of the collisions that happen within the Large Hadron Collider, and they look something like this.

So this was a, critical moment in our point of trying to articulate what a design system would look like, if it was based around this idea of what is wondrous about the work that CERN do, when we're holding them up to the same level as NASA, and this is the kind of stuff.

So those they add some just amazing visualisations. And what we did is we tried to articulate this design space in an easy way, so that we could answer the question. Okay what does this look like? So here right down, we have a graph of, at the bottom there are four main identified kind of audience user segments for the certain website, scientists, educators, students, and the general public. And then mapped onto that, is this idea of comprehension. So if you're a scientist, you have a very high comprehension of the work that CERN does.

You understand it.

Chances are that you're involved.

The general public however, has a very really low understanding of particle physics.

So what we can do to map on top of that, is this access that we call wonder.

And if for the general public, you have very very low comprehension of the physics, but you love pretty pictures, likely that's, it's like NASA.

You love those pictures, but you don't wanna hear they don't want to see the hardcore science. Interestingly, the inverse is true for scientists. They don't wanna see the pretty pictures but they want the real hardcore science facts that work. So we can use the scale then.

And we plotted points of the, the website and the digital products that we were working on against the scale. And it determined what things look like, how they deviated from the system and how we could create the system to allow for those deviations.

So things like that home page, have these big images. And that's because it was over on the general public it's served the broadest audience.

So the wonder was high, but comprehension was low. The inverse to that was this a certain directory. So this was one of the very first web pages ever made 'cause the, worldwide web was made at CERN. One of the first pages was a directory.

That's basically just a big list of all the stuff. And it hadn't been redesigned in like 20 years. And we were unfortunate enough to redesign it. A lot of people hate us for the work that we did on this, but as you can see, right? It's, links, it's low wonder.

It's, purely functional in it's approach.

So you know, high comprehension, low wonder. My previous job I was actually still in science, I worked at the European Molecular Biology Lab for a couple of years leading that digital team.

And we tried to similar thing, there were some similarities but some not.

And we tried a whole bunch of different models, and they just wouldn't stick, right? Nobody you know as well as the digital team understood them. You know, even some of the broader service teams who would use the design system got it.

They understood what we were trying to do.

A lot of the stakeholders were just not getting it not, digging it.

So we tried a bunch of different ways to articulate this design space.

In the end, it came down to one thing, which was this volume knob idea.

So we've all seen spinal tap, right? It goes all the way up to 11, but this idea that we could tune up or down several axes, those axes in particular were colour, layering and imagery. And we could go through a product or a website or a service application or we could say right on a scale of one to five on our volume knob, what is this? So colour? Is this a one or is this a five? And you know, we just map those across those axes. And that will give us kind of a ranking, you know we'd add those up.

Like the top one there, they add up to four, it's pretty low.

So it will determine how the feeling and the component that the system used, it would determine the design there.

So a couple of examples here, right? This is the home page.

You can see, it's kind of dialled up in a lot of ways. This is the shop window for the website.

So as you can see here, there's the annual report. And that's kind of dialled down a little bit, but it's still fairly dialled up because of the audiences that it, that it caters for.

Why this was really important was for, the research groups within EMBL.

So the research groups had their own websites, and in order for them to kind of adopt them to make them their own.

We had to provide different kind of sliders and options for them in order to allow them to be, feel creative to allow them to express their research groups work and who they were.

Now, some research groups would use not interested. They're like, "Ah, just give me a working website and that's all that I want." The other research groups just wanted to go crazy, right? They wanted to make something really their own, and actually we couldn't stop them.

Science organisations don't work that way.

They are, they have very flat hierarchically a lot of people doing what they want which can present some challenges to design systems.

So, as you can see here, an example over on the left there, that's totally dialled down ask for somebody who doesn't wanna do anything.

It's like a one on the volume scale.

And the one on the right there is a little, higher. So this idea of articulating the space, the design space providing those guard rails, those edges, of where you can deviate to.

Another providing that through, is a couple of ways you can do it.

You can provide it through an examples.

So a lot of branding systems such as the Olympics, they would produce a set of rules like Otl Aicher said, some strict grammar, type, colour iconography devices such as the fractal grid.

And then they provide a bunch of examples of how they'd apply it to things.

And then that would be a toolkit for other professions to say, "I can go, okay," And then to interpret, right? There should be enough of a straight grammar there for them to interpret and to express whatever they were doing, whatever meeting they were doing it in a native way. And we can, so we can do that digitally as well. The other way that we can do it is to bake those variants into components, right? We can end up with an accordion with four, five eight different variations, a lot of design systems do this at the moment to be able to accommodate those range of you know, the kind of the volume range of things, or just simply through design tokens, by having being able to change the background colours, by able to change the typography with icons without icons, you know, a lot of these component level variables can be changed.

I wanna leave you with a thought from another, kind of a hero of mine, is Bruce Lee.

So weirdly, so Bruce Lee, as you know martial artist, film star, but in his prime when he was younger, he broke his back.

And while in hospital, he started formulating ideas around his own style of martial arts.

So Bruce Lee came from a very kind of rigid style-based martial arts system and to him and just in many ways it didn't work because it only worked within the system, but real life isn't like that.

So he understood that approach to combat didn't work and his martial arts system is based on the realities of combat is based on flexibility and adaptability of what actually works in a given context.

So he, this is a lovely, a lovely quote over here. It buys relevance to what we're talking about today. "To my followers of Jeet Kune," that was what he named his style, "Know this all fixed set patterns are incapable of adaptability or playability, but truth lies outside of fixed patterns." So maybe the thingness, this acknowledging the deviations from a predefined system is a way to create sustainable systems.

And then reality of our design systems lies outside of predefined rigid ponderance.

Thank you very much.

(upbeat music)

Guardrails or handcuffs? Building creative and sustainable design systems

Mark Boulton - Design Director, writer and speaker.

Zeitgeist

Black and white photograph of a street in Manchester, England. Overcast day and uniform looking fort-style flats

1989 - madchester rules,

Black and white photograph of Tony Wilson. He wears a dark suit and sunglasses.

Collage of nine record album covers featuring artwork produced by Factory Records.

image of the cover art for the band New Order's debut album: Movement. Beside this, a similar graphic design in the style of the album cover.

Zoomed in microscope view image of strands of Deoxyribonucleic Acid. DNA

Thingness

To me, the goal of a design system is to create a thingness

Screenshot of Mark's Twitter feed from Aug 22, 2019 with a tweet from him reading: Dear people of my Twitter timeline. If I was a senior manager being asked to fund a five year design systems project, what would be the answer to these two questions:

  1. What are the benefits of a design system?
  2. What are the pitfalls, risks and difficulties?

Green text reading: Consistency. Sustainable. Enables scale. Ease of use. Centralized. Robust code. Cost-saving. Common nomenclature. Shared resource for external partners. Enables rapid design prototyping.

Orange text reading: Obsolete in 5 years. Ongoing commitment. Considerable investment in time and money. Maintenance. No clear return on investment. Stifles creativity. Ties design to code. Change of leadership and or funding.

Consistency enables:

  • Scale
  • Reach
  • Shared vocabulary

The design systems between us

Hyperlinks to written and video versions of Ethan Marcotte's recent talk to SydCSS

Abstract representation of a purple coloured systems icon in the centre of the screen surrounded by solid grey circles representing teams.

Replay of the prior slide but some elements of the systems icon have been replicated and overlaid in purple on the circle icons.

Replay of the prior slide. One of the systems icon elements is now replicated in a green and located beside one particular circle icon.

Replay of the prior slide. One of the systems icon elements is now replicated in yellow and located beside one particular circle icon opposite the prior circle with a system element beside it.

Three system icon elements beside the core system icon. One element is coloured yellow, one is coloured green, and one is coloured purple. 10:07

Quote from Ethan Marcotte:This is normal and natural.

Consistency

Graphic of a systems element icon with a line through the middle of it. The phrase: product team needs is written on either side of the systems icon.

Replay of prior slide with additional graphics of one of the system elements. One is coloured green. One is coloured orange.

Paraphrase from Jeremy Keiths: This is a prescriptivedesign system. One that is defined, centralized, controlled.

Replay of prior slide with the following text added: A descriptivedesign system. One that is emergent, built over time

But there is another, I think. An enabling system. One that is looser, empowers teams, allows for creativity. In parenthesis, the text: remember, it's natural. Creates a thingness

Side by side images of 2012 London Olympics logos demonstrating colour and pattern variations. The logo features four abstract, jagged, and slanted shapes that imply a freeform block letter interpretation of the numbers 2012, with two and zero on the top and one and two beneath. Each shape or number has between four and eight edges, and no two angles of these edges match. In the image on the left, all four shapes are colored in uniform solid colour blocks of pale blue. The upper left shape is overlaid with the word london, written in lowercase white Klute font typeface which was custom created for the games and designed to be reminiscent of graffiti. The upper right shape is overlaid with the traditional logo of the five interlocked Olympic rings in white outline. The lower two shapes are solid colour blocks with no further graphics or text. The logo on the right features the same four shapes, but the upper left shape is coloured dark pink with pale blue striped cutouts over the top portion. The upper right shape is also dark pink, and overlaid with an abstract arrangement of three white curved outlines. The bottom left is mostly coloured dark pink with a forest green cutout element. The lower right shape is the same forest green with some abstract orange cutout elements.

Image of the pale blue version of the logo overlaid with an asymmetrical fractal grid of dark pink lines that extend out from the logo outline. Each individual gridline is overlaid on the corresponding plane of each edge of the logo's number shapes, creating a pattern resembling a concatenation of shards splintering out from the logo at disparate angles.

Image of the same fractal grid of dark pink lines overlaid on an abstract fractal black and white image representative of arena seating.

Photograph of the London Olympic arena. The arena is open air and the various sections are delineated by black and white markings creating misshapen patterns when viewed at distance.

Image of a design perspective rendering of wayfinding signage for the arena. Large abstract gate signs are coloured hot pink with black silhouette images of visitors walking underneath. The image is overlaid with fractal black and white gridlines whose perspective line angles align with the asymmetrical geometry of the signs and their supporting beams.

Side by side photographs of the completed signs that were installed in Olympic park, modelled on the drawing templates. They are angular, misshapen, and unique.

Two images. The first, a graphic rendering of entry tickets to events. These mimic the pink, pale blue, and orange colour scheme of the logo and feature abstract, edgy outline images of figures engaged in various sporting activities. The second image features an icon index of the icons used for each Olympic event, also in the same colour scheme.

Abstract graphic of a butterfly composed of slanted, jagged lines reminiscent of the logo with the text caption: Walk in the Olympic Park. Beside this, a photograph of a series of solid white butterfly stencils painted onto a grey wall. The stencils match the form of the abstract butterfly shape on the graphic.

Photograph of the German-language poster of the torch relay from the 1972 Munich Olympic Games. The top half of the poster features seven bi-coloured horizontal bars in various soft shades of blue, green, yellow, and orange. The illusion of an abstract flame form emerging from the bars is created by breaking the colours up at different points along the bars. The lower half of the poster is solid pale grey with the German phrase: Olympischer Fackellauf which translates to Olympic torch relay in English. The text is written in white, clear, round typeface.

Image of two 1972 Munich Olympics promotional posters. The one on the left features a soft blue toned sketch of a tower with images at the base implying tents or canopies. The image on the right features a brightly coloured poster with a large graphic of geometric, almost Argyle style diamond and triangle pattern with large blocks of bright colours that cover the bulk of the poster. Written at the bottom of the poster is the German phrase: Olympische Spiele München 1972 which translates to Munich Olympic Games 1972

Image of tickets and other graphic paraphernalia. The colours are muted purple, green, and yellow tones. Stick figure icons performing various sports appear on the tickets along with information on the time and location of the event. Each item has only two colours within any one graphic schema

Cartoon style graphic outline of a Waldi the weiner dog who was the mascot of this Olympics. Striped bands of colour are vertically blocked across the dog's body. These colours match the colour schema of the other branding for the event

Aerial image of the London Olympic Stadium showing undulating architectural lines and misshapen built elements.

Photograph of section view of a portion of the arena, with bright green seating and a curved, parametric grid style roof canopy.

Photograph of volunteers wearing some 1972 Munich games uniforms. The mens' uniforms are pale blue and orange and typical of 1970s fashion and style. The womens' uniforms are pale blue and reminiscent of traditional German lederhosen, including white knee stockings and aprons.

Quote from Otl Aicher Strictly designed grammar allowing for free, playful expression.

Simple, easily communicable rules allowing for human expression.

Articulate the design space

In type design, typefaces are designed within a design space.

Graph with three axes representing boldness of type, slant of type, and width of type. The boldness axis is vertical, the slant axis is diagonal, and the width axis is horizontal. The letter a appears at the lower left intersection of the three axes and corresponding lines are drawn out connecting to a bold letter a, an italicized letter a, and a thin letter a respectively.

Perspective lines are overlaid onto the existing slide, causing the one dimensional graph to give the illusion of a three dimensional representation.

Replay of the 2012 Olympic logo slide with the hot pink fractal grid overlaid.

What does that look like?

Photograph of the CERN logo affixed to the side of a building.

Photograph of the Earth-rise taken from the moon.

Visuaization of the collision of subatomic particles within the Large Hadron Collider. Bright colours and defined lines spinning out in a catherine wheel firework style.

Trio of slide visualizations of collisions of subatomic particles.

Graph titled: comprehension. Four person icons representing the CERN website audience. A map showing the gradient between levels of comprehension on an axis scored from low to high.

Replay of the prior slide with an additional axis overlaid on the diagonal across the comprehension axis. This axis is labelled wonder and also shows the gradient from low to high across a range of users.

Screenshot of a CERN webpage showing a visualization of the collision of subatomic particles beside a text box explaining the concept of the speed of light in very concise terms, along with further links to other concepts and areas of interest.

Screenshot of the same CERN webpage as the prior slide but with a different photograph of scientists inside the Large Hadron Collider * Adjacent text box explains the concept of speed of light.

Replay of comprehension and wonder scale with a bar highlighting the breadth of the scale between low and high wonder resonance.

Screenshot of The CERN Directory intro page demonstrating how the page worked. A search bar at the top can be customized according to whether a user is looking for a CERN employee, scientist, or more general information. The rest of the page is divided into three sections with lists of hyperlinks. The first list of links is labelled: departments, groups, and units. The second is experiments and projects. The third is a jump menu linking to more general information such as maps, news, jobs, and physics concepts. A smaller text box near the top features quick links to useful contact page links and telephone numbers.

Replay of comprehension and wonder scale with a bar highlighting the breadth of scale between low and high comprehension resonance.

Text reading: European Molecular Biology Laboratory. Images of handwritten post-it notes detailing various schemas, diagrams and idea maps.

Image of a volume knob captioned: The numbers all go to eleven.

Text inferring a graph. Three rows are labelled Product one, product two and product three. Three columns are labeled colour, imagery, and layering. Numeric values fill the cells.

Screenshot of the EMBL homepage. A slider image header features a representational graphic of the kind of work they do with abstract images ofDNA strands, trees and clouds, the Earth, and people. The graphic is overlaid with a text box titled: Exploring the secrets of life. Underneath the header slide, three clickable column blocks featuring a combination of images and text covering broad categories. One is about a fellowship program, one is about solar power and one is about malaria.

Screenshot of another EMBL webpage communicating data from the annual report with a combination of text and infographics.

Side by side screenshot from a particular research group. The one on the left is a basic page predominantly composed of text and links. The one on the right features a header image of the team with a short text intro and links and images to the team's work.

Photograph of actor Bruce Lee on the set of his signature film Enter the Dragon.

Quote from Bruce Lee: My followers in Jeet Kune Do know this: All fixed set patterns are incapable of adaptability or pliability. The truth lies outside of fixed patterns.