Dynamic Design (magazine/issue 1/fall 2015)

/ EDITORIAL
Editorial
The articles in this magazine deal
with the essence of digital design
– its responsive dna. The rapid
increase of many different mobile
devices that are currently being used
are making the web increasingly
dynamic, with layouts adapting
to available screen resolution and
elastic components. A new modular
approach is being taken to layout,
making it possible to rearrange and
stack. In addition, the appearance
and content of components can be
made context-dependent.
This approach remains – for
now – mainly technical, and our
understanding of the concept of
‘context’ is still rather limited. Only
when more personal user variables
such as location, time, needs,
preferences and behaviour are
The style of this magazine
is a daring mix of high and low
culture. Although the imagery is
based in part on the Suprematism
of Malevitsj and El Lissitzky’s
Prouns (Projects for the affirmation
of the new) – a futuristic art form
from the optimistic Russia of the
previous century – it is also based
on the techno and liquid patterns of
old-school Cavello and Australian
gabberwear from a few decades ago.
This magazine’s typography has
the appearance of Swiss International
with a hint of gossip journalism.
As the Dutch composer Louis
Andriessen once said, “it is about the
good bad notes”. Discords that queer
the pitch. After all, we are making
history as pioneers of dynamic
design.
Henk Haaima
Art director
combined with dynamic designing
techniques can we truly speak of
dynamic design.
This may all seem obvious, but
the web is still largely populated by
static pages. These static web pages
are somewhat like ‘type cases’ – old
fashioned printer’s drawers used to
store letters, with content stashed
away in boxes and in which nothing
really springs to life. This is the tragic
downside of organisation-driven
design. But this means that there is
still a whole new world to discover
when it comes to dynamic design.
The articles in this magazine call
for the creation of interfaces that
respond to the user, not just in terms
of content but also layout, look
and feel. Dynamic design to create
living, breathing interfaces.
2 DYNAMIC DESIGN 3

/ CONTENTS
From responsive website to
dynamic design
Responsive techniques must be
applied now to display content based
on user interests.
Learning the hard way
Design requirements for a new
prestigious academy to provide
agencies with top talent.
No Logo
We doggedly display the logo in the
top left corner, but for how much
longer?
The fall of Photoshop
On the demise of Photoshop and the
imminent birth of a truly dynamic
design tool.
F*ck the context
Is it time to redefine today’s digital
design, ruled by the magic words
‘context’ and ‘relevance’?
Dynamic grid systems
Design principles from the previous
century are again being applied in
the dynamic era.
From inanimate book to
dynamic style guide
New working processes see the
style guide increasingly integrated
into the front-end development
environment.
The page is dead
Collections of static pages linked by
navigation buttons are an outdated
concept.
No styling queers!
The digital designer structures
and presents information.
The new design revolution
Fluid, adaptable design: a
dramatic change in the history of
the image.
Typography first
The remarkable comeback of classic
typography in modern digital design.
6
42
14
5820
6428
72
78
52
34
Contents
4 DYNAMIC DESIGN 5

Displaying relevant content in the right place at
the right time. Although this design philosophy
has been around since day one of the history of
the web, it has been given a new breath of life
with the emergence of responsive web design.
Responsive and adaptive techniques have been
used to produce more dynamic websites in which
the layout changes to match the device; now these
techniques need to be applied to display content
based on user interests.
FROM RESPONSIVE WEBSITE TO
DYNAMIC
DESIGN
/ FROM RESPONSIVE WEBSITE TO DYNAMIC DESIGN6 DYNAMIC DESIGN 7

/ FROM RESPONSIVE WEBSITE TO DYNAMIC DESIGN
Organic interfaces
We have all seen the paths cutting across
grassed areas that are created by people taking
a shortcut. These ‘elephant paths’ are a nice ex-
ample of how people want to be able to choose
their own route. Behaviour is difficult to predict
or to enforce, and this is why it is better to keep
the interfaces that we design open and flexible.
Allowing the system to adapt to change enables
us to better meet user needs.
Everything in life is subject to wear and tear.
One example is the marks on a door – the door
handle becomes worn and the area around
it often gets grubby. It would be interesting
to also make such wear visible in new media.
This can be done aesthetically, by allowing
interactive elements to age the more often they
are used, or if they are used incorrectly, or it
can be done more metaphorically: interactive
elements that are used often, and which we
know the user has no difficulty in finding, could
be made smaller. Or vice versa. Progressive re-
duction – a nod to the more technically-loaded
term progressive enhancement – is an example of
this (Grinshtein, 2013).
Use, need and context are constantly subject
to change, which means that an interface also
needs to be dynamic and slowly develop with
time; the interface as organic object. 
nent position in a large, rich, visual form, for
example with a large header and preview. Less
popular reports will be placed in less prominent
positions and in a smaller, less rich and more
textual form, for example with a title and short
description. It is of course also possible to re-
verse the rules and push messages that receive
little attention. The idea is to make the content
responsive from the user’s perspective, not just
to make a responsive website. The interface is
constantly influenced by user behaviour. The
system analyses this behavior and adapts the
layout of the web page based on a series of
editing rules. This means that the content is
displayed to be as relevant as possible. Users
influence the web page layout without them or
the editors being aware of it.
The next big thing
Now that users are often browsing on their
mobile devices, it is important to adjust the
designing process to the way in which content
appears on the screen and adapts to the avail-
able screen size and resolution. This means
that designers and front-end developers are
increasingly applying dynamic web design. But
for now, their approach is mainly technical:
What is the best way to display the design on
the various devices?
When content is displayed on a mobile
device, the lack of ‘real estate’ means that
we need to think carefully about what we
show and in which order. The next step is to
provide content based not just on technical
requirements, but also on personalisation and
relevance. In the article The Next Big Thing in
Responsive Design (Gardner and Treff, 2014) the
authors call for a broader understanding of the
concept of context. Context has many more
dimensions than the device alone.
Content, relevance and events
determine design
Consumers are looking for information on
various mobile devices, so content should be
presented in the best possible way allowing
users to find immediately what they need
and expect. Information can be filtered and
ordered, not just to match the device, but the
user too. Including variables such as relevance,
location, time and personalisation in the design
process and combining them with dynamic
interfaces will make websites more intuitive
and more useful.
For example, this insight leads to surprising
ideas for news and current affairs platforms
such as cnn news and bbc news. Imagine
an internal portal in a large organisation that
employees can use to upload video reports.
The size, form and position of the components
can be created dependent on their popularity.
This means that the number of likes, views
and shares will actually influence the design.
A popular report will be placed in a promi-
Users influence the web page
layout without them or the
editors being aware of it
8 DYNAMIC DESIGN 9

/ FROM RESPONSIVE WEBSITE TO DYNAMIC DESIGN
Challenge web conventions
Once variables such as personalisation, time
and relevance are introduced into the design
process, this signals the end of web conven-
tions. Placing the logo in the top left corner is
one such convention. It is important to display
the logo on the home page or on campaign
pages, to communicate the brand and to create
a link with advertising, but the top left corner
is not ideal as this is a kind of ‘blind spot’. The
logo deserves a more prominent position, for
example as part of the brand visuals. For more
functional areas of the website, a logo in the
footer is sufficient. The user knows which shop
he is in and does not require brand confirma-
tion in the form of a logo. When paying in a
webshop, on the other hand, the logo gives the
user a sense of security. This means that the
best place to display the logo is near the com-
ponent where the user confirms payment.
It is interesting to note that logos and their
positioning are used more dynamically offline.
Often, there are different versions of a logo,
one of which is selected each time it is used.
This flexible approach also applies more gener-
ally to the paper world. For example, the front
page of a newspaper or the cover of a magazine
will depend on the importance and relevance
of the content. This is a completely different
approach from that taken to static websites
with their carousel of content to choose from.
In the previously-mentioned article The Next
Big Thing in Responsive Design (Gardner and
Treff, 2014) the authors express their surprise
regarding the one-dimensional nature of on-
line publications: “Most online publishers have
the same template every day”. This is in contrast
to paper publications, which make use of hun-
dreds of templates, making it possible to re-
spond to the changing events of the day. There
is still a world to discover for digital designers,
and clients and end users are champing at the
bit for more relevant, dynamic interfaces.
The designer as choreographer
The emergence of responsive web design has
radically changed the role of the designer.
Establishing an online identity and designing
visual imagery remain the primary activity,
but these are no longer expressed using fixed
images or pictures. The process is now based
on working with individual components and
thinking in transitions and scenarios. For
interaction designers, the user perspective
provides an added dimension. It is intriguing
to see how users influence the layout and how
the groundswell becomes visible, without them
being aware that this is happening.
Dynamism will be the determining factor
in responsive web design. Taking the user and
relevant content as the point of departure, old
models will be challenged and the designer will
need to act as a choreographer to create a new
standard in valuable, intuitive web design. 
Use, need and context are
constantly subject to change,
which means that an interface
also needs to be dynamic and
slowly develop with time; the
interface as organic object
10 DYNAMIC DESIGN 11

Think in terms of transitions. A
layout is dynamic, so that transitions
between the different compositions
will need to be controlled. We there-
fore need not just to design the com-
positions, but to also think about the
choreography between the different
stages. A good transition will be al-
most invisible and will contribute to
the logic of the system. The designer
in the digital age is a choreographer,
not just a producer of images. 
Do not design a template or infra-
structure (building blocks) to fill
with content, but design a system in
which content and the way in which
it is used can come alive. The con-
tent determines the layout, not the
other way round.
Allow the user to also be partly
responsible for the layout, not just
the designer. The designer sets the
boundaries, but there is no fixed lay-
out. Properties such as form, colour
and composition can change based
on user behaviour.
4
5
6
Include user group behaviour as a
variable in your design. Think care-
fully about which content is valuable
for which user group and how differ-
ent content should be presented. It
is possible to provide personalised
content using Content Management
Systems with automation tools.
Identify different user groups
and draw up behavioural roles,
for example by carrying out a top
tasks and target audience analysis.
Combine the results with data from
a web analysis tool such as Google
Analytics.
Make the content presentation
(layout) dependent on the user. The
device is only one user attribute;
other attributes such as click and
navigation behaviour are just
as important. Use responsive
techniques to make the layout
dynamic and relevant.
1
2
3
REFERENCES
ąą Gardner, D. and Treff, M. (2014), “The Next Big Thing In Responsive Design”, Fast Company & Inc. URL visited on 18 January 2015.
ąą Grinshtein, A. (2013), “Progressive Reduction”, LayerVault Blog. URL visited on 18 January 2015.
ąą Hay, S. (2013), Responsive Design Workflow. Pearson Education (US).
ąą Marcotte, E. (2011), Responsive Web Design. A Book Apart.
ąą Wroblewski, L. (2011), Mobile First. A Book Apart.
ąą Wroblewski, L. (2014), “Breaking Development: Content-first UX Design”, LukeW Ideation + Design. URL visited on 18 January 2015.
This article is a reworking of a previous publication on Frankwatching: Content-first: van responsive design naar dynamische website
(in Dutch; Versteeg, 2013).
Recommendations
Six tips for creating dynamic design:
/ FROM RESPONSIVE WEBSITE TO DYNAMIC DESIGN12 DYNAMIC DESIGN 13

The fall of
Photoshop
Photoshop is excellent software for processing
fixed images, but less suitable for dynamic design.
On the demise of Photoshop and the imminent
birth of a truly dynamic design tool.
/ THE FALL OF PHOTOSHOP
The many layers of
web design
Dynamic design guru Vasilis van
Gemert describes a concept for the
ideal design tool in his 2013 article
The many layers of web design. Al-
though still very popular, Photoshop
is essentially a tool for processing
photographs – in other words: fixed
images. The focus is on styling: in
Photoshop, wireframes are coloured
and textured using filters and
brushes. However, a tool more able
to reflect the dynamic character
of the web would be better. In his
article, van Gemert outlines design
software with four layers that corre-
spond to the phases in the modern
digital design process: content,
typography, layout and styling.
Content
Content is the starting point for
every graphic designer: what is
the story we want to tell? This is
the phase in which the designer
analyses and structures the content.
Depending on the complexity of the
information, he may seek help from
content strategists, data analysts or
functional designers.
In fact, this layer can better be
described as ‘structure first’. In his
2012 article Structure first. Content
always, Mark Boulton explains that
a distinction needs to be drawn
between what the content is – the
actual words – and where it comes
from. For example, what exactly
is an opinion piece? What are the
variables? Are images required, and
how many? The structure that the
designer creates based on such ques-
tions is very important for the 

The styling queer
is only allowed out
of the closet in the
last layer of the tool,
when the real man’s
work is done
author of the content. Content
and structure, therefore, go hand
in hand. Designers are a kind of
content director; as the German
typographer and designer Erik
Spiekermann said, “we give content
form”.
The content is read, analysed, in-
terpreted and structured in the first
layer of the design tool, which results
in a general idea of the layout. For
example, a long, complicated text
deserves a text column of appro-
priate width. A layout with several
columns, on the other hand, is more
suitable for content consisting of
shorter, more fragmented, pieces of
text.
Typography
The second layer focuses on the
typography. This is not surprising,
when we realise that most web con-
tent is written language. As Oliver
Reichenstein, founder of the design
agency Information Architects, said,
“95% of what is commonly referred to
as web design is typography”. This is a
little exaggerated in the case of digi-
tal advertising, but certainly applies
to information design. Typographic
parameters such as typeface size and
style, line length and line spacing are
determined by the previous layer;
after all, the nature of the informa-
tion determines how it should be
presented. A collection of short news
items, for instance, requires a differ-
ent typography from a long article.
A short introductory text can be set
in a broad text column with a small
font size and wide line spacing, but
this does not read well if there is a
lot of text that requires the reader
to concentrate. In this case, a larger
font size and normal line spacing in a
narrower column would be ideal.
Adobe InDesign is a tool used to
design magazines, annual reports
and other printed media. What is
great about this tool is the extent to
which the design can be standard-
ised and automated. For example,
typography is stored in a style, and
any changes made to the style are
subsequently applied throughout
the document. This also applies to
the layout. The number of columns,
the column spacing and the margins
around the type area are set when
deciding on the document layout,
but can be easily changed later on
in the design process. A change is
applied to the document as a whole,
and the effect can be seen immedi-
ately. The ideal dynamic design tool
should also be based on such princi-
ples, as these provide the dynamic
designer with a high level of freedom
as well as the ability to be in control
of his digital work of art. 

Styling
The ‘styling queer’ is only allowed
out of the closet in the last layer of
the tool, when the real man’s work
has been done. It is this cosmetic
layer that is currently the focus of at-
tention in Photoshop. The designer
gets going with his make-up box of
filters and brushes, to present the
design in the best possible light.
These style elements make the
brand real and recognisable to the
consumer and this layer is, there-
fore, no less important than the
others.
Even so, the first three layers in
the ideal design tool are essential, to
ensure that design is not seen simply
as a styling layer or a sauce poured
over the functional design. The
foundation for a good layout is laid
in the first layer. In the second and
third layers, a dynamic grid system
is constructed based on the typog-
raphy. Finally, the styling is added:
colour, blurs, gradients, and so on.
Often, the designer is thought to be
responsible for this last layer only
Layout
The designer gets the layout in the
third layer almost for free, thanks
to his work in the previous layers.
This is because typographic param-
eters are closely related to the grid
on which the layout is based. The
width of the text column is equal to
the line length, and the ideal line
length depends on the type of text.
The vertical distances are controlled
by the distance between the lines
– the baseline grid. The Dynamic
grid systems article in this magazine
shows step-by-step how a designer
constructs such a grid.
The different versions of the
layout (mobile, tablet and desktop)
are shown in this third layer, a little
like the three dimensions in the
3d design programme 3ds Max.
After all, we no longer have a fixed,
one-dimensional image; if a variable
in one dimension changes, it is im-
mediately apparent what this means
for the other dimensions and for the
image as a whole.
and people confuse the two profes-
sions: the stylist cuts and brushes;
the graphic designer structures and
presents information (Haaima,
2012).
Design criteria
Van Gemert’s concept for this
design tool is fascinating because
it represents a fantastic revolution
in digital design, from the website
as a collection of static images to a
dynamic choreography. At the same
time, the role of web designer is
being emancipated; digital design
involves much more than styling
and we see the designer as content
director, typographer and director.
The tool does justice to the dynamic
character of modern digital design.
From a collection of
static images to a
dynamic choreography
Now all we need to do is wait for a
software company to make van Ge-
mert’s dream a reality. The creative
challenge and design criteria for the
dynamic design tool are then as fol-
lows: develop a tool for the dynamic
designer that properly reflects the
multidimensional, dynamic charac-
ter of the web. The following design
criteria apply:
• The different dimensions of the
design are always visible.
• Typography and layout are
inextricably interlinked.
• The starting point is the content
or, better said, the structure of the
content.
• A change is always applied to
the design as a whole, in every
dimension. 
REFERENCES
ąą Boulton, M. (2012), “Content First. Structure always.”, The Personal Disquiet of Mark Boulton. URL visited 1 February 2015.
ąą Gemert, V. van (2013), “The many layers of web design”. Nerd. URL visited 1 February 2015.
ąą Haaima, H. (2015), “Word geen stylingnicht! (Don’t become a styling queer!)”. Dynamic Design magazine, Issue 1. Mirabeau.
ąą Reichenstein, O. (2006), “Web Design is 95% Typography”. Information Architects. URL visited 1 February 2015.
ąą Spiekermann, E. (2011), “Typographic Design in The Digital Domain with Erik Spiekermann and Elliot Jay Stocks”. YouTube.
URL visited 1 February 2015.
This article is a tribute to Vasilis van Gemert’s 2012 article The many layers of web design.

Much is being done to achieve international
recognition for Dutch Digital Design. One
important condition for this emancipation to
take place is a prestigious academy to provide
the agencies with their top talent.
/ LEARNING THE HARD WAY20 DYNAMIC DESIGN 21

Dutch Digital Design
In the Netherlands we often hear about Dutch
Digital Design. Professional journals such as
Adformatie and Creatie try to pinpoint the sig-
nature and to promote Dutch Digital Design,
and events such as Dutch Digital Day are also
capitalising on the trend.
In the digital version of the Dutch Design
Week in October 2012, Victor Knaap and Wes-
ley ter Haar of the digital production company
MediaMonks wondered why we fail to reach
the international stage when it comes to digital
design. Despite the fact that we have an excel-
lent record in applied design – after all, Dutch
Design is world famous. Possible causes are the
lack of a clear signature, limited cooperation
between Dutch agencies and the absence of
a prestigious top academy. The Swedish are
working hard to achieve international recog-
nition and have a world-famous academy in
Hyper Island. This institute is able to turn the
cold north into a hot centre of digital design.
and attributes and on integrating this into the
design process. Much work is done in multidis-
ciplinary teams. The designers receive a broad
education and come up with and prototype
design solutions. The degree programmes are
open to all. In contrast to the art academies,
there are practically no entrance exams. Until
recently, a signature, a talent or a specific pro-
fessional area of expertise were not required.
In other words: the student does not need ‘to
be able to draw’.
The ideal designer
Which type of designer are contemporary
digital agencies looking for? The digital world
has grown up: not so very long ago we spoke of
websites and web designers, but these terms
are now out of date. In the early days of the
Internet, web designers were attracted from 
/ LEARNING THE HARD WAY
Signature and personal
vision are more important
than the UX dogmas
user-centred design
and cooperation
Degree programmes in
the Netherlands
Roughly speaking, there are two types of
degree courses in the Netherlands that provide
digital agencies with designers: firstly, the
relatively new cmd (Communication and Mul-
timedia Design) courses offered by higher ed-
ucation colleges and secondly, design courses
offered by the traditional higher education art
academies.
The art academies teach designers to take
a conceptual, autonomous approach based on
the designer’s signature and vision. Students
are selected using entrance exams, which
rewards talent. The teaching programme focus
is usually on research and experiment, and
the Dutch art academies have a considerable
reputation. Very often, certain departments
stand out from the rest thanks to good lectur-
ers who are passionate pioneers in their field.
Good examples from the recent past are the
typography course in The Hague (where Gerrit
Noordzij was a lecturer for thirty years) and
the fashion course in Arnhem (which produced
internationally successful talents such as Victor
and Rolf). At the postgraduate level, De Atel-
iers – previously Ateliers ’63 – selects a small
group of international top talent each year to
train to become top artists. This academy has
produced generations of world-famous artists
such as Marlene Dumas and Joep van Lieshout.
The cmd courses given by Dutch higher
education colleges teach designers digital
media skills. These courses focus – other than
the art academies – on user requirements

all kinds of disciplines. And because technol-
ogy was limited, most people did not seem to
aim for top quality design. A lot of work was
amateurish – a kind of safe haven in which the
high rules of design did not yet apply.
However, a lot has changed since then.
Thanks to technology, much more is possible
now. There is no longer an excuse for poor
typography, for example. The possibilities are
now more or less equal to the world of print.
Clients too know that the medium has matured
and have adjusted their design expectations
and ambitions accordingly. This means that
there is a growing demand for well-trained and
talented designers.
At the traditional art academies, hours are
spent drawing models and practising pen-
manship every day. This is not so much about
drawing the actual model or writing the letters,
but these are exercises in searching for and
coming up with design solutions, such as the
relationship between positive and negative
space, or object and background. In our field,
designers spend every day developing creative
solutions. It is this traditional, unsexy, aspect
of the discipline that is often undervalued com-
pared with coming up with concepts. However,
concepts are only any good if they are convinc-
ingly brought to life.
Digital design trends such as rich typog-
raphy, handmade illustrations, signage and
storytelling make it clear that there is now more
of a focus on visual design on the web. Several
years ago, the main interest of design agencies
was to create an ‘infrastructure’ (navigation,
buttons, rich footers, and so on). Thanks to
technological trends, responsive design and content
first, the focus has now shifted to the actual content
on the page. What is the story we want to tell? The
focus is on copy and image. We are going to draw,
write and animate. Changes to the design team are
required due to these developments. Including the
need for good motion designers, illustrators and
typographers – designers who base their work on
the dynamic nature of the web.
The ideal training course
The descriptions of the two types of degree pro-
grammes and the future designer mentioned above
bring an interesting paradox to light. cmd students
know all about the Internet and have a digital dna.
Unfortunately – with the exception of a few natural
talents – they cannot draw. Art academy students 

REFERENCES
ąą Beemster, R. (2014), “Nederlandse topopleiding Digital Design wil geen ‘onderwijsboer als Hyper Island’ worden”. Adformatie.
URL visited on 2 February 2015.
ąą Hagendoorn, B. (2014), “Dutch Digital Design: verhaal achter het initiatief”. Bert Hagendoorn. URL visited on 2 February 2015.
ąą Knaap, V. and Haar, W. ter (2012), “DDW goes Digital”. YouTube. URL visited on 2 February 2015.
ąą Straathof, M. (2014), “Technologie, Design en Innovatie tijdens DDW goes Digital”. Adformatie. URL visited on 2 February 2015.
usually can draw, but they think more in terms
of style than function and technology, which
often makes them blind to the creative oppor-
tunities that the web can offer.
The ideal training course would combine
the best of both worlds: students who under-
stand the dynamic possibilities of the web and
can think in utilitarian terms. Not l’art pour l’art
but an awareness that digital design is more
than creativity with a design twist. Specialists
who can draw and who create surprising, inno-
vative work based on a personal vision or gut
feeling. Design that – graphically speaking – is
out of this world.
Interesting combinations are possible: a typog-
rapher who thinks responsively; an illustrator who
brings his work to life in html and css. And what
happens when webgl – a JavaScript api that makes
3d design possible in the browser – is linked to
graphic design?
Recommendations
Six recommendations for the ideal dynamic de-
signer training course:
1. Attract pioneers to work as teachers.
2. Select students by audition.
3. Make technology and creativity the inextricably-
linked pillars of design courses.
4. Remember: to design means ‘to be able to draw’;
so practise, for hours each day. This challenges
the dogma of concepting and the T-shaped
all-rounder. A concept as a mean in itself has no
value.
5. Link the responsive dna of the web to
typographical and graphical expertise, and the
result is dynamic design.
6. Don’t forget: signature and personal vision are
more important than the ux dogmas user-
centred design and cooperation. 
Remember: to design
means ‘to be able to
draw’: so practise, for
hours each day

No logo
The increasing popularity of mobile devices
with their reduced ‘real estate’ has undermined
the logo’s traditional ‘top left corner’ position.
However, on desktop interfaces we still cling to this
convention. But for how long?
Invasion of the logo
Published in 1999 against a back-
ground of ongoing globalisation,
Naomi Klein’s controversial book No
Logo: Taking Aim at the Brand Bullies
criticises the worldwide invasion of
public and private space by big brand
logos. No Logo could also apply to
the logo’s dominant position in
digital design, where it is not just the
marketing forces that take up valu-
able space – space that is intended
for the user – but user experience
conventions too, which terrorise the
interface. However, the logo in the
top left corner is a relic of a desktop
age now past.
Dogged convention
So why are we so keen to hold
onto this convention? The User
Experience (ux) domain focuses
on the needs of the user: it is about
displaying the right content at the
right time in the right place. Even
so, take a quick look at the websites
of the big brands and we see a lot
of space still reserved for ‘infra-
structure’ – navigation, footer and
logo. This is continued as the visitor
travels through the site, so that su-
perfluous information is repeatedly
displayed. The conclusion: there is
a lack of focus on actual content. 
/ NO LOGO 2928 DYNAMIC DESIGN

The popularity of the mobile In-
ternet and trends such as mobile first
and content first have put pressure on
the focus on infrastructure, includ-
ing the logo. If there is less space,
or ‘real estate’, available, focus is
on primary content, which does not
usually include the logo. However,
the space available on the desktop
means that we see it holding onto its
position here. This is a fact that is re-
inforced by the common practise of
using the logo as a link to the home-
page. This is remarkable: why does
the logo disappear when there is less
room – in other words: for techni-
cal and functional reasons – but it
remains in place if it has no mean-
ing for the user? After all, personal
attributes such as time, location and
behaviour are more important than
technical restrictions: what we want
is to provide meaningful content.
Dynamic logo positioning
With this in mind, it makes sense
to think both about what each page
aims to achieve and the needs and
expectations of the user relating to
each page or website section. For
example, brand communication
is important on the homepage or
landing page, where the logo should
be given a prominent position,
although whether the top left is the
right place for this is debatable as
it may have become a ‘blind spot’.
Brand communication is, however,
less important in a flow or functional
context, so the logo can be placed
in a less prominent position such as
the footer. Having said this, if the
visitor makes a payment and expects
confirmation, the logo should again
move to a more dominant position
– not the top left but the component
that the user is focusing on at that
moment. Following this logical train
of thought, which involves no more
than deciding on the user need for
each page, we see that the logo could
be used more dynamically.
A sweeping design revolution
Dynamic logo positioning makes
increasing demands on the design,
which needs to take a modular,
component-based form if the layout
is to be changed easily. Luckily, huge
steps have been taken in the form
of responsive techniques that make
the interface more dynamic. We no
longer place a brochure online, but
create dynamic interfaces. A website
is no longer a collection of static
paintings, but more like a ballet in
which the designer has become
a choreographer, deciding which
components may enter the stage and
how they interact.
Abandoning the web convention
described in this article therefore
also implies a more general design
revolution in which responsive
techniques are applied based on user
variables such as location, time and
– where known – visitor preferences
and attributes.
Dynamic identities
Changes are also taking place in the
realm of brands and visual identities
that call for a less static approach to
the logo. In her book Dynamic Iden-
tities, Irene van Nes describes how
visual identities can be composed
of both fixed and flexible elements,
allowing for more tailored commu-
nication. Irene van Nes focuses pri-
marily on the different forms that a
brand, and in particular the logo, can
take – a ‘responsiveness’ that stems
from social media and the Internet.
Graphic designers are designing
systems that ensure brand recogni-
tion in which variables beyond the
control of the designer influence the
visual identity. External data flows
continue to generate new forms
within these open responsive identi-
ties as brands adapt to environmen-
tal factors, although this concerns
colour, pattern and form rather than
layout.
User experience
conventions terrorise
the interface
Emanuel Jochum’s thesis, entitled
Dynamic Branding, describes how
flexible design systems make it
possible to turn brands into dynamic
visual identities, with real-time data
such as weather linked to design
variables such as colour and typogra-
phy. In his thesis, he emphasises the
dynamic character of the different
elements that make up the visual
identity (colour, logo, typography,
graphic elements, illustrations and
language). He also names the 
/ NO LOGO30 DYNAMIC DESIGN 31

different systems on which a dy-
namic identity is based: background
and layer, filling and container,
combination and composition, trans-
formation and adaption, automation
and transfer and customisation and
collaboration. Jochum draws the
conclusion that the dynamic identity
is mainly express in the logo and
that, unfortunately, the credo ‘digital
first’ is rarely applied. When brought
online, the dynamic character of a
visual identity usually fades, while
it is here that the most direct link
can be made between brand and
consumer.
Dynamic web
If we are to create a dynamic web,
we need logos that can take on dif-
ferent forms. Many logos consist of a
wordmark and a graphic symbol, to
which a description, brand promise
or partner logo (for example of a
consortium) may be added. These
different elements may, within cer-
tain restrictions, be used separately
from one another and in different
proportions and configurations,
making it easy to apply them in dif-
ferent contexts. The layout must also
be based on modularity and flexibil-
ity, so that the logo can be positioned
dynamically in accordance with its
relevance to the user.
There are other ways of com-
municating the brand, in addition
to dynamic logo positioning. For
example, it is possible to tell the cor-
porate story of the brand or describe
an aspect of its dna in a branding
component, which can be presented
in different forms in different places.
A brand can also be reflected by the
use of a distinctive typeface.
Finally, motion is an important
dimension in digital design. This
means hiding part of the infrastruc-
ture, including the logo, at certain
moments – for example if a visitor
wants to change flight details, the
infrastructure takes a back seat and
the focus shifts to the component
in which the change is being made.
Once this has been done, the navi-
gation or another ‘next best action’
is displayed. The result is an organic
interface that adapts to the actions
and needs of the user. 
Brand ‘responsiveness’
stems from social media
and the Internet
REFERENCES
ąą Klein, N. (1999), No Logo: Taking Aim at the Brand Bullies. Knopf Canada and Picador.
ąą Nes, I. van (2013), Dynamic Identities. BIS Publishers.
ąą Jochum, E. (2013), Dynamic Branding. Thesis. ZHdK MA Design Communication.
/ NO LOGO32 DYNAMIC DESIGN 33

/ F*CK THE CONTEXT
For decades, the world of architecture
has been dictated by contextualism.
With the words “fuck the context”,
world-renowned architect Rem
Koolhaas has firmly distanced himself
from this trend. Is it also time for a
similar redefinition in digital design,
which is ruled by the magic words
‘context’ and ‘relevance’?

Hypersensitive design
A new Oral-B toothbrush was
advertised on TV last night. This
intelligent appliance monitors the
condition of the teeth and adapts ac-
cordingly. If you have plaque, for ex-
ample, the toothbrush will deal with
it; “The brush adapts to your personal
needs”. Philips has a similar tooth-
brush, called FlexCare – a ‘sonic’
toothbrush “that adapts to your oral
care needs”. Philips likes personal-
ised light too: light systems for the
home and office are linked to an
increasing number of user variables
such as time, weather, location and
mood. hema sells bottles of eau de
toilette that you can select according
to your mood. The labels read “today
i feel dreamy” - “energetic” - “pas-
sionate” - “marvellous” or “strong”.
And fitness centre chain HealthCity
offers training programmes based
on “your unique dna”. These are
all examples of context-sensitive
design – a prevailing marketing trend
in which the brand is positioned to
match consumer needs as closely as
possible.
In digital design, ‘relevance’ and
‘focus is key’ are the proclaimed
magic words. Basing design on user
variables excludes the need for
unnecessary functionalities and puts
the focus on relevant content for
the moment and the specific user:
flexible, hypersensitive design. In
the digital world, we analyse and
test to understand the needs and
behaviour patterns of the consumer:
data-driven design is hot and test
results are used to adapt and op-
timise the design. The question is
whether this consumer-controlled
process results in good design. ‘User
involvement’ sounds nice, but are we
not assigning too great a role to the
uninformed, interfering consumer?
Is it not so that the great design
revolutions are born in the creative
brain of a single gifted designer, or
possibly design team?
/ F*CK THE CONTEXT
Fuck the context
Contextual design in architecture
stems from the 1970s and represents
an approach in which new design
is based on the current surround-
ings. The trend became generally
accepted along with the emergence
of postmodernism – a reaction to the
modernist movement (Evers, 2006).
Rem Koolhaas has, however, dis-
tanced himself from this prevailing
architectural trend, “fuck the context”
being one of his one-liners. Within
this trend, a new building is de-
signed based on the existing context
– it is as though the building enters
into a dialogue with its surroundings.
Rem Koolhaas is not impressed, and
defends the intrinsic quality of the
building. Principles such as grav-
ity – inherent to construction – are
what he focuses on. Buildings have
an autonomous significance and do
not enter into any dialogue with the
surroundings. This is to some extent
a modernist way of thinking, which
is in fact also strongly challenged in
his work.
Malerfürst
This design approach – to embrace
the art form and regard the object as
an autonomous statement – is seen
in more extreme forms in the visual
arts. In a wonderful interview aired
by Dutch national television, artists
David Bade and Jasper Krabbé visit
the German Malerfürst Markus
Lüpertz in his studio in Berlin. The
interview is great viewing for design
teams in the digital sector, not to en-
courage designers to all start calling
themselves ‘premium designers’, but
to inspire pride and the development
of a vision and signature; to claim
ownership of the design rather than
becoming entangled in functional
and technical requirements, user
needs and co-creation. 
Working with Koolhaas is
not a dialogue; he makes
announcements. He has
never heard of servitude.

/ F*CK THE CONTEXT
From his first words, it is clear
that Lüpertz has a distinct point of
view regarding the discipline: “Kunst
is ja immer gleich und hat immer mit
einander zu tun”. It is impossible, he
says, for an artist who knows nothing
of the classics to have an opinion of
a sculpture created now. When the
interviewers suggest that, because
of his status, he probably no longer
suffers from insecurity, he is sur-
prised: “Sie sind ständig auf der Suche
nach der Vollendung, Sie sind ständig
verzweifelt, Sie bauen ständig Ruinen,
Sie gehen ständig falschen Wegen. Noch
mehr Unsicherheit?”. He regards the
creation of the perfect painting as an
inevitable quest. This autonomous
creative process contrasts sharply
with partnership-based scrum
teams, co-creation and user involve-
ment. The question is whether the
digital sector can afford to democ-
ratise, and in doing so eliminate the
creative process.
Later on in the interview,
Lüpertz is again surprised. Art has
been truly free since the end of the
Second World War, but even so,
most fellow artists choose to “Elend
zu illustrieren”. The natural reflex
as an artist or designer is to seek
out the boundaries and to produce
something within those limitations.
In fact, Koolhaas makes the same
statement with his “fuck the context”.
A former director of the Kunsthal in
Rotterdam said, “To him, architecture
is war. Working with Koolhaas is not a
dialogue; he makes announcements. He
has never heard of servitude”.
Finally, to the question what
makes good art, the Malerfürst
replies: “Was ich und meine große Kol-
legen machen”. And: “Ein Bild ist gut
wenn ich es freigebe”. This may sound
like an inflated ego or arrogance, but
that is not how Lüpertz says it. As
an artist, he believes, you have a big
responsibility for what you create,
also towards the sector in which you
work. 
3938 DYNAMIC DESIGN

/ F*CK THE CONTEXT
World famous
De Rotterdam is Koolhaas’s new
building in the Rotterdam district
Kop van Zuid. The municipal gov-
ernment is one of the occupiers of
this ‘vertical city’. A hilarious news
report from just after the official
opening describes how municipal
employees are being given psycho-
logical training to help overcome
their fear of lifts and heights.
Because of such issues, involv-
ing the user in the design process
would most likely have resulted in
a completely different building – in
any case one not quite so tall. What
is clear is that the floodgates would
be open: we would be placing the
design process in the hands of users
who know nothing about architec-
ture and residential buildings. A
design process based on user data
would seem to be ideal, and would
result in a user-friendly building,
but that building will never be world
famous. It will not win any design
awards. And, possibly worse: the
user will not thank you in the end. It
is like any relationship: unthinkingly,
unquestioningly accept your part-
ner’s every wish and desire and he or
she is eventually going to get bored,
fling you in a corner and leave. Partly
thanks to what Koolhaas has created,
Rotterdam has gone up several rank-
ings as the “best city in the world to
visit”. The building has already won
prizes; a new step has been taken in
architecture.
New magic words
The danger of involving the user
and placing too much of an empha-
sis on contextual design is that it
produces poor, safe design. In all
cases, designs are the result of the
pride, knowledge and philosophy
of a talented designer. However,
this awareness still needs to pen-
etrate the world of digital design,
which is dominated by co-creation,
data-driven and contextual design,
T-shape and Scrum. The problem is
that such ideas stand in the way of
trend-setting, pioneering design,
as well as the ability of the digital
design sector to mature. It is time
to leave that era behind us. We can
learn a lot from the great names in
other disciplines. Pride, a rigorous
knowledge of your field and – most
importantly – a personal conviction
and even faith are the new magic
words in digital design. 
‘Wenn ich dass Bild freigebe,
ist es ein gutes Bild’
/ F*CK THE CONTEXT
REFERENCES
ąą Dutch broadcasting corporation AVRO (2013), “Artmen-Berlijn”. NPO Uitzending Gemist. URL visited on 25 January 2015.
ąą Evers, B. (2006), Architectural Theory. From the Renaissance to the Present. Taschen.
ąą Huisman, J. (2013), Het streven naar grenzeloosheid; de ongrijpbare Rem Koolhaas. Boekmanstichting.
ąą Steinz, P. (2013), “Rem Koolhaas (OMA)”. Read Around the Globe. URL visited on 25 January 2015.

Dynamic
grid systems
With the development of responsive and adaptive
technologies, digital design has gone dynamic.
Classic design principles from the 20th century
are again being applied to construct grid systems,
without which there can be no dynamic design.
/ DYNAMIC GRID SYSTEMS
Dynamic technology
The emergence of countless mobile
devices has made the web more
dynamic. Responsive and adaptive
technologies make it possible to
change the layout to fit the available
screen resolution and components
have become elastic – capable of
filling the available space. A modular
structure allows components to be
reorganised and elements to be dis-
played in a different position or not
at all, depending on the device. For
example, not displaying animated
background photographs if the de-
vice’s battery level is critically low.
Priority guides and breakpoint
graphs are new deliverables in the
design process. Priority guides
describe the hierarchy on a page
(Clemens, 2012), based on which
decisions can be made regarding
how and in which order components
are displayed on the various devices.
Breakpoint graphs show where the
breakpoints lie in the responsive sce-
nario (Hay, 2013). A table or chart is
used to show when – at which screen
resolution or on which device – the
layout needs to change. These are
not exact numbers, but ranges.
Although the two concepts are
often used interchangeably, there
is a difference between responsive
and adaptive design (van der Zee,
2013). In the case of responsive
design, the focus is on displaying
content on different screens and the
grid and the elements on the grid –
for example images – are adjusting
smoothly to match the screen. In
the case of adaptive design, not only
the design but also the functionality
changes, for example with location,
and the grid and the elements on the
grid adjust incrementally. Adaptive
design is very similar to a technology
and design style known as progressive
enhancement, in which interfaces
adapt depending on the capabilities
of the user device, in other words:
the content and functionality and
the way in which these are presented
– the layout. 

Grid systems
If responsive and adaptive technol-
ogies are to be used correctly, an
underlying grid system is required.
In developing this grid system,
designers and front-end developers
are referring to classic works on grid
systems, for example by Josef Müller
Brockmann (Rastersysteme für die
visuelle Gestaltung) and Rudolf
Bosshard (Der typografische Raster).
The development of mobile devices
and responsive and adaptive design
is therefore reason for a return to
these classics from the last century.
Modularity, image systems and de-
sign automation are classic themes
that can be applied now to develop a
good responsive scenario. A knowl-
edge of classic design is therefore
helping the digital designer to con-
struct dynamic grid systems.
Grid systems as a foundation for
solid design became popular in the
1950s as part of the International
Typographic Style, or Swiss Style,
which emphasises cleanliness,
readability and objectivity. Josef
Müller-Brockmann (1914–1996) was
one of the key players in the Swiss
Style and author of the influential
book of reference for graphic design-
ers, typographers and 3d designers
entitled Rastersysteme für die visuelle
Gestaltung (1999). He described the
design philosophy as follows: “Der
Gebrauch des Rasters als Ordungs-
system ist Ausdruck einer bestimmten
geistigen Haltung, indem der Designer
seine Arbeit in konstruktiver und
zukunftsorientierter Weise auffaßt.
Durch eine konstruktive, analyseerbare
und nachvollziehbare Gestaltung kön-
nen der Geschmack der Gesellschaft,
die Form- und Farbkultur einer Zeit
beeinflußt und gehoben werden. Die
Anwendung des Rastersystems versteht
zich als Wille zur Rationalisierung der
kreativen und der produktionstech-
nischen Prozesse.” In fact, this is a
fairly accurate prediction of design
as we now know it in our digital age.
However, whereas the decision to
systematise or objectify aesthetics
was for Brockmann ideological-
ly-founded, in the world of large
digital platforms ‘automated beauty’
is the only option. Pages are created
in real-time, by different systems
and based on user variables, and a
digital platform consists of an im-
mense collection of pages all linked
to one another. In the age of respon-
sive technology, these pages have
become fully dynamic. The context,
usually the device, determines the
way in which content is presented,
which differs according to the user
and constantly changes depending
on events and relevance. The classic
grid system has therefore returned
in the digital age to rationalise this
complex creative and technical pro-
duction process.
The typographic grid
A grid divides an area into smaller,
equally-sized fields. The height of
the fields corresponds to a certain
number of lines of text and the width
to the text column width. This is why
we use the term typographic grid,
as the grid and typography are so
closely interlinked.
One or more white lines may be
placed between the vertical fields
and the columns are also separated
horizontally by white space – gutter.
The size of this depends on the type-
face and the look and feel required.
These margins are used to separate
images and other content from each
other. When the content is placed
on the grid, a single field in the grid
forms the smallest unit, although
all kinds of variations can be made
possible by merging fields.
A few steps are followed to deter-
mine the width of the text column.
The typeface is selected based on
the brand identity, readability or
other design requirements. The font
size depends on factors such as the
type and length of the text, the type-
face and the distance from which the
text will be read. For example, longer
texts that require a high level of con-
centration should be given a larger
font size and should be placed in a
text column of ideal width (empirical
research shows that the ideal line
length is between around seven and
ten words). News items can be given
a smaller font size in a layout with
several narrow text columns, as here
it is more about scanning the text
and quickly absorbing information.
The typeface is another factor in the
choice of font size, as a letter with
a lot of white can be made smaller
than a letter with relatively little
white. The amount of white in letters
depends to some extent on the size
of the inner spaces in vowels such as
a, o and e. Finally, the font size also
depends on the average distance to
the screen for each device.
Ideal dimensions also apply
to line spacing. In The Elements of
Typographic Style, Robert Bringhurst
describes the relationships between
different typographic properties
such as typeface, font size, line 

length and line spacing. ‘Dark’ let-
ters - letters with little white – require
a larger line spacing if they are to be
read properly. This also applies to
sans-serif letters. The relationship
between sans-serif letters is weaker
than that between serif letters in
which the letters are optically linked
to one another, so that a larger line
spacing is desirable.
Typography and grids go
hand-in-hand
As we can see, typography turns out
to be more than choosing a typeface.
Oliver Reichenstein, the founder of
design agency Information Archi-
tects, said, “Information design is
not about the use of good typefaces, it
is about the use of good typography.
Which is a huge difference. Anyone can
use typefaces, some can choose good
typefaces, but only few designers truly
master typography”. It is an intriguing
fact that typography and grids go
hand-in-hand and are directly re-
lated to one another. Changing one
typographic property such as font
size not only has consequences for
the other typographic properties, but
for the grid system as a whole. After
all, the column width depends on the
average number of words in a line,
and this in turn determines the line
spacing, on which the field height in
the grid system and the field spacing
is based. Ensuring a match between
the typographic properties and
the grid is an important task of the
graphic designer. Oliver Reichen-
stein had the following to say about
the importance of typographical
skills: “Webdesign is 95% Typogra-
phy”. This may be somewhat exag-
gerated, but based on the assump-
tion that most web content is written
text, we see the importance of the
typographical grid in digital design.
This relationship between grid
and typography is, however, not en-
tirely self-evident. Many designers
construct a grid as a way of dividing
up a large area then fill the resulting
containers with typographic and
other forms of content, focusing on
the readability of the text at the ex-
pense of the grid. Good designers set
themselves apart from average de-
signers by ensuring a good balance
between typographical properties
and the grid. This allows the text to
truly come to life, with the support
of carefully selected typographical
properties.
As front-end developers in the
responsive age know, there is no
such thing as an absolute dimension
measured in pixels. The classic tools
from the graphic design world are
interesting in this respect as they are
based on proportions rather than
dimensions. In the exercise above
describing how to achieve an ideal
readable text column, we notice
that the text column width depends,
amongst other things, on the chosen
font size. Thinking in terms of typo-
graphical relationships and propor-
tions rather than absolute distances
is an excellent foundation on which
to construct a responsive scenario.
After all, we no longer know on
which screen resolution the design
will be displayed.
The quality of the design is deter-
mined not just by the typography but
also by the relative dimensions of
the type area and margins. In printed
media, the type area is the actual
area of the paper covered in print; in
digital design, it describes the area
of the screen actually used to display
content. However, this is more
relevant to the tablet and desktop as
there is so little space available on
mobile devices that the margins are
too small to play a role in interface
design. Mathematical formulas such
as the Golden Section are used to set
the margins, as a carefully selected
type area produces a balanced layout
and positively affects how we read
and scan the pages. Sometimes
margins are not used at all, so that
images continue right up until the
edge of the page (run off the page as
it were), resulting in a monumental
layout.
Oliver Reichenstein has the fol-
lowing to say about the supposedly
rational downside of grid systems:
“Although grid systems are the founda-
tion for almost all typographic design,
they are often associated with rigid,
formulaic solutions. However, the belief
that all great design is nonetheless
based on grid systems (even if only sub-
verted ones) suggests that few designers
truly understand the complexities and
potential riches of grid composition”.
In response to the criticism that
the grid limits creativity, Karl Gerst-
ner developed a ‘mobile grid’: “The
typographic grid is a proportional regu-
lator for type-matter, tables, pictures
and so on. It is an a priori programme
for a content as yet unknown. The
difficulty lies in finding the balance
between maximum formality and
maximum freedom, or in other words,
the greatest number of constant factors
combined with the greatest possible
variability”. 
Drawback
It is often thought that there is also
a disadvantage to applying a grid. A
grid rationalises the creative process,
which may well make the layout
rather impersonal. It is, however,
important to realise that a grid is a
means to help simplify and control
the design, rather than a means to
an end. Ultimately, the look and feel
will depend on the brand proposition
and the design’s strategic objectives.
In the world of art there are many
examples in which grids are applied
and the result is far from rigid. Take,
for example, the music written
by the composer Johan Sebastian
Bach: although renowned for its
mathematical nature, the music
nonetheless plays on the emotions.
The artist Marien Schouten also
works with grid systems, which still
partly show through in pencil when
he has finished. Irrational forms put
this systematic world to the test.
His paintings sometimes run away
with themselves, a fact that is made
painfully obvious due to the rational
structure beneath.

Modular design
The use of grid systems goes hand-
in-hand with modular design, which
is based on a structure of units, or
components, which can be placed
in different contexts. The context
affects the way in which the com-
ponent is displayed, which means
that the component can take on
different forms. For example, a news
item may consist of little text but
rich visuals. Modular design and
dynamic grid systems are therefore
the two main pillars of design in the
dynamic age.
However, modular design also
has its downside, as an excessive fo-
cus on components can be blinding.
According to the Renaissance archi-
tect Leon Battista Alberti (ca. 1450),
harmonious proportions are based
on the relationship between the
elements themselves and between
the elements and the whole. It is
therefore essentially about harmony,
although discords also ultimately
contribute to the experience of
harmony or beauty – as a kind of
extension of consonance; the Dutch
composer Louis Andriessen refers to
such discords as “good false notes”.
The dimensions and properties of
the screen do not provide an aes-
thetic experience in themselves, no
more than a component or element
does – it is only when all the optical
parameters are combined that this is
achieved. These optical parameters
include typographic properties and
graphic elements such as illustra-
tions and background colours, but
also the relationship between the
content as a whole (the type area)
and the margins and dimensions
and proportions of the screen. The
designer is responsible for achiev-
ing harmony between these optical
parameters and creating an image
system that results in convincing
design. 
/ DYNAMIC GRID SYSTEMS48 DYNAMIC DESIGN 49

Summary
The construction of a dynamic typo-
graphic grid system consists of the
following steps:
• Structuring information: the layout
depends on the kind of information
being shown.
• Producing priority guides: what
is the hierarchy in the displayed
information?
• Based on the previous two steps:
making accurate layout sketches
of the different screen resolutions,
giving an idea of the required grid
system.
• Determining the relationships
between the type area (screen),
margins and actual layout, for
example based on the Golden
Section.
• Determining the typeface.
• Selecting the font size.
• Choosing the text column width. It
is in this step that the grid is linked
to the typography; depending on
the nature and length of the text,
typographic properties such as
line length and line spacing are
determined.
• Selecting the line spacing: this is
related to the line length, typeface
and font size.
• Producing a breakpoint graph.
What is the scenario for re-
organising and scaling and
progressive enhancement? What
will be shown on which device and
in which context? 
REFERENCES
ąą Clemens, D. (2012), “Design Process In The Responsive Age”, Smashing Magazine. URL visited on 25 January 2015.
ąą Bringhurst, R. (2004), The Elements of Typographic Style. Hartley & Marks Publishers.
ąą Brockmann, J-M. (1999), Rastersysteme für die visuelle Gestaltung. Niggli.
ąą Bosshard, R. (2000), Der typografische Raster. Niggli.
ąą Zee, T. van der (2013), “Responsive Webdesign or Adaptive Webdesign?”, Tweepixels. URL visited on 20 April 2015.

The elements of
typographic style
Although it has been a classic in the
graphical world for many decades,
Robert Bringhurst’s textbook The
Elements of Typographic Style is now
also appearing on the desks of visual
designers and front-end developers.
Bringhurst’s mission is the optimum
display of text to ensure maximum
readability – not as a means to an
end, but to inject life into the con-
tent.
The current popularity of
Bringhurst’s book in the digital
world stems partly from its focus on
relative measures and proportions, a
concept that is of particular interest
in today’s increasingly dynamic
interfaces. Absolute measurements
in terms of pixels no longer exist,
but typographic designers were
already used to thinking in terms
of relationships and proportions
because they base their work on the
letter, the size of which is expressed
in relative measures not pixels. As
well as the shared design focus on
scale and proportion, there is also
an increasing awareness of the
importance of good web typography.
After all, the technical possibilities
are now almost equal to those on
paper.
We should be aware that most
digital content consists of typo-
graphic content. To use the words of
Oliver Reichenstein, when it comes
to typography on the web: “95% of
what is commonly referred to as web
design is typography”. So, to the series
of technological trends of mobile first
and content first, we can now add the
design trend typography first.
The ideal guide
“Discover the outer logic of the
typography in the inner logic of
the text”. Designers structure and
present information. Bringhurst
describes in great detail how differ-
ent typographic properties such as
measure, line spacing, hyphenation
and justification can be applied to
achieve optimum legibility. In other
words, to produce a text that, thanks
to its optical typographic properties,
reflects the character and content
of the text. This article takes us into
the world of Bringhurst – a rather
dry world it must be said, consisting
mainly of lists of basic principles.
However, the excitement comes
when we set it against current devel-
opments in user experience design
and discover that The Elements of
Typographic Style is the ideal guide in
the dynamic design process.
Measure
Based on empirical research,
Bringhurst claims that the ideal line
length is governed by the following
rules:
• The ideal line length is equal to 30
times the letter size.
• It has 66 characters.
• For a layout consisting of a single
text column (a book), the measure
should contain 45 to 75 characters.
• For a layout consisting of more
than one column (a magazine), the
measure should contain 40 to 50
characters.
• If the text is justified, the
measure must include at least 40
characters. 
/ TYPOGRAPHY FIRST
Typography
first
The remarkable comeback of classic typography in
modern digital design.

The ideal measure determines
the column width on the grid, but
this ‘typography first’ approach is
inconsistent with the usual method
in which the grid is first drawn then
filled with text and other content,
in fact in which basic rules such as
those described above are treated
with contempt. The text is boxed
in; it is unable to come to life and its
‘inner logic’ cannot be expressed in
the design.
Line spacing
The following rules apply when de-
termining the ideal line spacing:
• The longer the measure, the larger
the line spacing.
• ‘Dark’ letters – letters with little
white – require a larger line
spacing.
• Sans-serif letters require a larger
line spacing. This is because serifs
provide more continuity between
the letters, so that the measure
appears to be a more coherent unit
than if sans-serif letters are used.
• Always achieve a balance between
spaces and hyphenation (when
justifying). Justified text becomes
ragged and difficult to read if the
wrong hyphenation settings are
applied and if the text is placed in a
column that is too narrow.
• Take care to apply the correct
language settings.
• Only apply manual hyphenation in
titles.
• Do not change the letter spacing
unless absolutely necessary; a
larger spacing only improves
readability in titles written in
capital letters.
• The word spacing – the distance
between the words – is related to
the typeface and the hyphenation
and justification settings. Irregular
spacing between words detracts
from legibility and results in an
uneven page colour. 
• Letters with a slanted stroke, also
called a humanist stroke, require
a smaller line spacing than letters
with a vertical stroke. This is
closely related to the previous rule,
as a static (vertical) stroke gives
letters a more structured and less
written character, making them
seem more isolated. A larger line
spacing is then required to present
the measure as a coherent unit.
Line spacing therefore depends
on typeface, letter size and meas-
ure, and a simple property such as
‘serif’ or ‘sans-serif’ can influence
the line spacing which, just like the
measure, then affects the grid. It
is often thought that typography
is little more than the selection of
a typeface, but anyone can do that
(Spiekermann, 2011). Typography is
about the application of typographic
properties – an intriguing puzzle
made more complicated by the rela-
tionships between them.
Hyphenation and justification
When selecting hyphenation and
justification settings, the following
rules apply:
in narrow columns. This makes it
look a bit ‘messy’, reflecting the
speed of the news stream. Longer
editorials are better placed in
columns with an ideal measure
and hyphenated text. Justified text
results in a structured layout, due to
the straight lines on either side of the
column. Depending on the nature
of the text, therefore, designers
select the best way to hyphenate
or justify the text. The adage still
applies: “Discover the outer logic of
the typography in the inner logic of the
text”.
• Avoid using hyphenated words
at the end of more than three
consecutive lines.
• When hyphenating, use at least two
letters before the hyphen and at
least three letters after.
Due to the limited possibilities
provided by browsers, hyphenation
and justification is a relatively
unexplored area in digital design.
Justification is possible, but without
hyphenation and in the case of
narrow text columns, it produces
a ragged text that is difficult to
read. Imminent improvements
to browsers will expand the
typographic possibilities of the web.
It is up to the typographer to
decide whether or not to hyphenate
or justify text. If no hyphenation or
justification is applied, we speak of
free text. The choice whether or not
to hyphenate and justify depends on
the nature of the text. For example,
a newsflash in a newspaper or
magazine can be placed in free text
Spacing
A regular typography also helps
produce a text of optimum reada-
bility. This is achieved by ensuring
a good balance between typeface,
letter size, line spacing and hyphen-
ation and justification. The colour of
the page is also determined by the
spacing:
/ TYPOGRAPHY FIRST
‘Discover the outer logic
of the typography in the
inner logic of the text’

“Don’t compose without a scale”.
Scale refers to the intervals between
typographic units such as text size,
but also the relationship between
the type area – the actual content –
and the page – the margins around
the content. Absolute measures
no longer exist in the digital age,
and each design has its own scale
that also expresses the designer’s
personality.
The key to responsive design
To conclude, an increasing
awareness of the importance
of typography on the web has
resulted in a renewed interest in
Robert Bringhurst’s The Elements
of Typographic Style. This book
For example, the Information
Architects design agency has been
pioneering in breathing new life
into the world of Bringhurst in the
dynamic age. Their iA Writer is a
text processing tool that applies the
balance rules listed above, resulting
in an almost contemplative focus on
the reading and writing of text.
Layout
A balanced consideration of the
scale criteria listed below will allow
the designer’s signature to shine
through in the typographic design:
describes the basic principles of
typography, which digital designers
can apply to bring text content to
life. This remarkable comeback of
classic typography is also a result of
the focus on scale and proportions
in modern digital design. Bringhurst
reveals the secrets that are the key to
developing a responsive scenario. 
• Determine the relationships
between the content and the page.
• Adjust the proportions of the page,
margins and text block or content
field to match one another.
• Make use of mathematical
formulas such as the Fibonacci
series or the Golden Section, which
are based on natural proportions
or, even better, come up with your
own system.
REFERENCES
ąą Reichenstein, O. (2006), “Web Design is 95% Typography”. Information Architects. URL visited on 1 February 2015.
ąą Spiekermann, E. (2011), “Typographic Design in The Digital Domain with Erik Spiekermann and Elliot Jay Stocks”.
YouTube. URL visited on 1 February 2015.
/ TYPOGRAPHY FIRST
The Elements of
Typographic Style
is the ideal guide in
the dynamic design
process

/ FROM INANIMATE BOOK TO DYNAMIC STYLE GUIDE
From
inanimate book
to dynamic
style guide
In the past, style guides were documents
presented as a deliverable at the end of a project
- often in the form of a PDF. However, new
working processes in which visual designers and
front-end developers are working more closely
together mean that the style guide is increasingly
being integrated into the front-end development
environment.

Visual designers and front-end
developers working more closely
together
The emergence of responsive web design has
radically changed the world of design. No
longer a fixed image, a design is expected to
adapt to its context. So, how is content dis-
played on a desktop, tablet or mobile device?
When developing a responsive scenario,
designers and front-end developers work
closely together to decide on the typography
and grid. However, in addition to the exist-
ing specialist roles of designer and front-end
developer, a new role may also be created: that
of the front-end designer – fusing the traditional
front-end and visual design roles. This online
desktop publisher makes sure that everything is
produced ‘web-ready’ as it is sometimes more
efficient to work directly in the browser or code
than through Photoshop.
The disciplines are also starting to merge in
another way: at the start of developing a new
digital platform, the front-end developer puts
together a library of components that can be
used in the various projects. These components
are generic and are ordered in categories such
as tools, services and news. This is a collection
of building blocks that can be used to build
the website but it can also be used for other
projects. A new project – often the redesign of
a section of a website – is therefore based on
this component library, but new components
or variations on existing components can also
be added to the library during a project, so that
the library responds, as it were, to changes.
In many cases, the structure of such a devel-
opment environment is made to be consistent
with that of the style guide, so that the logical
next step is to integrate the two. The result: a
style guide that is no longer simply made up
of static instructions regarding colour, form,
photography, and so on, but that also shows
interactive components.
Traditional style guides
are often produced
in the form of a bulky
book, which rather
misses the point
Not a record or document, but a
guide and standard
A traditional pdf style guide for large, interna-
tional brands is static and difficult to update.
So what we really need is a more dynamic
environment that achieves the consistent,
global application of the online identity; a style
guide in which changes can be made directly
and immediately, so that the same, real-time
information is available worldwide. However,
this is almost impossible with a pdf that needs
to be resent each time a change is made and is
often printed and left to lie on a desk for years.
Another advantage of a dynamic style guide
is that its function is no longer simply to record
and document, but to guide and provide a
standard, not only because the information is
up-to-date, but also because it can be person-
alised. Traditional style guides are often pro-
duced in the form of a bulky book, which rather
misses the point. Instead of this, personalised
information could be provided – for example
on the start page – focusing on specific roles
such as front-end developer, photographer or
copywriter. The user is presented with a form
of the style guide that applies to his specific
role, turning it into a helpful tool that actually
gets used.
You have to change to stay
the same
The idea that a style guide with its rules and
regulations in black and white can ensure
the consistent application of a house style is
stuff and nonsense. The world is constantly
changing, and so too the brand and corre-
sponding visuals, which means it is better to
acknowledge the organic, or dynamic, charac-
ter of house styles. As Willem de Kooning, a
Dutch-American abstract expressionist artist,
once said, “You have to change to stay the same”
(Ferrara, 2012). As a house style adapts, it
makes sense to develop a dynamic style guide
that reflects these changes.
Dynamic style guide for
responsive design
The world is being swamped with devices in
all shapes and sizes, forcing design to become
more dynamic. Design that adapts to these
different devices by becoming fluid is a huge
revolution in the history of design, and in the
history of the image in general. Slowly but
surely, designers are starting to realise that the
screen is not a sheet of paper of a fixed size.
Responsive design has a strong behavioural
component – the content stretches and rear-
ranges itself depending on the context, and a
digital style guide should reflect this ‘organic’
design. 

Organic design: component form
and behaviour
One advantage of a digital style guide is that it
can show not just the form, but also the behav-
iour of the components, for example how a but-
ton reacts to a mouseover, or how a component
or layout responds to different screen reso-
lutions. It can also show the html code and
css, which can be copied by developers and
used in a new application. New variations of
existing components that are developed in new
applications can also be included in the style
guide. This implies a significant step towards
a development environment and a style guide
that is far removed from the traditional style
guide in the form of a book – the merging of the
style guide and the development environment.
Design teams are currently made up of
interaction designers, graphic design and
front-end developers, all of whom are capable
of working in such an environment. Of course,
designers will still make sketches in Photoshop
or a sketchbook, but the results of the design
process will be immediately brought to life in
the environment. Designers like to see ‘living’
design, and for front-end developers it is great
to see real data and functionalities. However,
too often there is still a discrepancy between
front-end and back-end development as the
components are not linked to real functions
and data in the back-end. Such an integrated
environment is a logical conclusion of the
close relationship between form, function
and technology and the content first approach
(Wroblewski, 2014), in which real content and
data play a role in the design process from the
very beginning.
Next steps
Design deliverables such as styles, grids and
breakpoint graphs can be directly included in
the style guide as working html. Currently,
much work is still done using designs produced
in Photoshop, but these ‘dead’ documents
disappear once the project is completed, while
every online identity continues to develop.
Graphic style specifications such as colour
palette, typography, sizes and distances are
also best developed directly in html and css
together with the front-end developer, to allow
changes in the online identity to be made in
real-time.
It will be impossible to imagine life without
a digital style guide in the future – a style guide
that is also integrated with the back-end and,
possibly, with the release process too. In an
ideal world, the style guide will contain real
content and data in pages, components and
style rules and could therefore develop into a
mini-application rather than simply describ-
ing the design in a browser. This application
could be linked to all the background systems
and databases, turning the environment into
a content, form and function resource – the
ultimate integration of design, development
and management. 
REFERENCES
ąą Ferrara, T. (2012), “A Way of Seeing”, The Museum of Modern Art. URL visited on 25 January 2015.
ąą Wroblewski, L. (2014), “Breaking Development: Content-first UX Design”, LukeW Ideation + Design. URL
visited on 18 January 2015.
This article is a reworking of a previous publication on Marketingfacts: Digital styleguides: van statische pdf naar
digital styleguide met werkende componenten (in Dutch; Haaima and van Kampen, 2013).
Design that adapts to these
different devices by becoming
fluid is a huge revolution in the
history of design, and in the
history of the image in general

Websites are undergoing a radical change:
the website as a collection of static pages
that are linked is no more.
The page
is dead
/ THE PAGE IS DEAD
The old world
In a not so distant past, websites
were elaborate collections of static
pages that were linked to each other
by navigation components. In the
early days of the web, navigation
buttons were mainly placed to the
left of the page in a menu list, but
they soon moved to the top. This
created more space for the actual
content and each page opened con-
sistently with the logo and naviga-
tion in the same place; a real haven
in the profusion of information often
spread across the pages.
In the more recent history of the
web, the need to provide full access
to all the information got completely
out of hand by placing extended
footers at the bottom of every page.
These were huge components,
sometimes with almost complete
sitemaps. This is referred to as ‘in-
frastructure’. In addition, web pages
– and overview pages in particular
– were mainly filled with collections
of components like printer’s boxes
with separate letters in the days of
the printing press’ (Haaima, 2015).
These web pages offered something
for everyone but nothing specific.
Thanks to trends like mobile first
and content first, this type of design
is slowly but surely dying a death. It
is in the restraint that the master is
revealed, and if there is little space
available then choices need to be 

bles such as time and location can be
applied to create a useful interface.
For example, the information need
of a traveller who has booked a flight
changes considerably, depending on
whether it is three weeks, three days
or three hours before departure. The
interface has become fluid.
The disappearance of the website
as a collection of static pages that are
linked is the unavoidable result of
contextual design. After all, con-
textual design constantly changes
depending on user variables and it
no longer has one single form. Each
user sees their own personalised
interface, which also evolves with
events and time. Just like a newspa-
per’s front page, a contextual home-
page can take on countless forms.
Modular design – a design structure
made up of components and ele-
ments – is what makes contextual or
personalised design possible. The
design must be extremely flexible
and able to adapt to environmental
and user variables.
The page has, as it were, become
a theatrical stage on which compo-
nents enter and take their definitive
form. Components are interacting
with each other and the configura-
tion of the components is constantly
in motion. A play of space and time
has replaced the creation of static
pages; we are working on a stage that
is constantly transforming itself.
New dimensions
From a network of static pages to
a dynamic interface. The user no
longer clicks from page to page but
finds himself in a functional flow
or experience. If we want to avoid
going back to making static pages,
we need to design based on the di-
mensions of space, time and sound.
From now on, every production will
/ THE PAGE IS DEAD
made. To simplify this choice, the
designer has to base his decisions
on the content – what is the story
that I want to tell? Applying this
content first approach, it is relatively
simple to come up with a hierarchy
for the display of information. This
approach has also influenced the
design of desktop interfaces, as we
have come to realise that there is lit-
tle point to randomly disseminating
information. Simple interfaces with
specifically selected information
are in, even if there is enough space.
Finally, we are beginning to over-
come our fear of the horror vacui, or
empty space.
The paradigm in user experience
design has always been: ‘focus on
the user’. However, we seem to be
realising for the first time that the
user actually needs to be made visi-
ble. Based on data analysis, content
can be matched to user needs and
preferences, and personal user varia-
include spatial, motion and sound
design. Together with typographical
and graphical design, these are the
components of interface design.
The dynamic process is guided by a
script similar to the world of music
(score), dance (choreography) and
film (screenplay).
The introduction of motion
makes it possible for the interface
to adapt in real-time to the move-
ments and actions of the user. When
specific information or functionality
is displayed, it is useful to briefly
conceal unnecessary information.
Motion design has become an indis-
pensible dimension in design.
This also applies to space: when
we design a specific interface, space
is a dimension that we can introduce
to the design to eliminate the need
for endless numbers of scroll pages.
For example, the canvas can be big-
ger than that shown within the limits
of the display. Layering is another
approach to space, and the display
of a real three dimensional world is
also possible. The recent decision
taken by Apple to support webgl –
displaying in 3d in a browser – makes
the widespread application of 3d
possible.
Sound has long been banned
from digital design. Most likely, we
were traumatised by the background
muzak in the early days of the Inter-
net. Unfortunately, this ornamental,
irritating use of sound has ensured
that we no longer regard sound as an
integral part of our design. How-
ever, we do need to use it if we are
going to bring the interface to life,
in particular to support functional
operations. The noise that you hear
when you touch in and out at a train
station, for example, contributes to a
positive user experience, without the
sound being immediately noticea-
ble. The age of the silent movie is
over: sound is – like space and time
– another indispensible dimension in
digital design. Once we start design-
ing in the dimensions of space, time
as well as sound, the page will be
truly dead. 

/ THE PAGE IS DEAD
The new world
Website content can be categorised
into three types: function, informa-
tion or inspiration. What do these
three domains look like in the new
digital world without pages?
The new Virgin America website
is an example of the functional do-
main. The complete interface is used
for functionalities such as selecting a
date or destination, while traditional
brand photography, special offers
and news items have almost com-
pletely disappeared. Although the
site still starts with the traditional
horizontal bar at the top for the logo
and navigation, this changes its func-
tion as the user interacts with the
interface. There are some negative
comments to be made regarding the
design, for example the user needs
to move large distances across a big
screen to do something as simple as
select a date in a calendar. But what
is so incredible and revolutionary is
that the page has disappeared. The
focus is on looking for, selecting and
booking a flight. The interface has
truly become a user object – as utili-
tarian as sitting in a chair or opening
a door.
A few years ago, Google Glass was
all the rage; a trend that was illus-
trated with cool videos about the fu-
ture of the Internet. We saw a world
with a kind of Jehovah’s witness
look and feel, in which interfacing
was fully integrated within our daily
lives. The imagery of transparent
interfaces or projections is fascinat-
ing; an imagery that is based on the
operation of and interaction with the
interface. Flowing organic forms in
constant motion. The Internet is no
longer a web of pages – there are no
pages with components, but a con-
stantly transforming interface.
A peek into the future of the
informative domain: the layout and
typography of the articles published
on the Information Architects blog.
This design agency has become
famous with its revived focus on
web typography. Articles are placed
in a text column of the ideal width,
with a good, legible letter type and
an ideal font size and line spacing.
The focus is on the article content,
and nothing must distract from this.
The article content is, in the words
of the classic typographer Robert
Bringhurst, “honoured by ideal ty-
pography” (Bringhurst, 2004). In the
side column, a marker appears then
disappears to show how much of the
article is still left to read. Because of
the almost meditative focus on text
and typography, the experience of a
page is no more. 
We are beginning to
overcome our fear of
the ‘horror vacui’, or
empty space
6968 DYNAMIC DESIGN

Finally, inspiration websites –
with brand experience relating to a
theme as their main goal – still often
have a traditional design with lots
of rich visuals and short copy. In the
new world, this will be done using
broadcasting or storytelling. Based
on the brand proposition, a relevant
experience will be chosen. The
visitor will no longer visit a page, but
enter an entire world.
This brief outline of the de-
sign of these three domains in the
new world shows that traditional
pages filled with infrastructure and
components have disappeared. The
functional domain draws the visitor
into a flow with the interface as user
object. The informative domain
gives the visitor the time and space
to absorb textual information.
Finally, the inspirational domain
allows the visitor to lose himself in
an experience or story.
Hört auf zu malen!
In 1966, the German artist Jörg
Immendorf painted the picture Hört
auf zu malen! (Stop painting!). The
young artist was studying at the art
academy in Düsseldorf under the
world-famous Joseph Beuys. Beuys
was legendary for his succinct re-
views of his students’ work, and the
paintings of the young Immendorf
were again and again appraised with
a “Scheiße”. Frustrated, Immendorf
decided to daub one of his paintings
with the text “Hört auf zu malen” –
an act of desperation that resulted in
his first “Gut” from the master and
marked a turning point in Immen-
dorf’s career. A radical ending of
a past that has served its time and
the breaking of new, more hopeful,
ground is a good metaphor for the
revolution that we now find our-
selves part of in digital media. Stop
designing pages!
Killing off the page
People often base their design on
a medium or channel. Let’s make
something for social media, or an
app, or we’ll make a web page. If we
think in this way, we will produce
pages and fill the imaginary sheet
of a4 with components. To prevent
this from happening, it is better to
start with an analysis of the infor-
mation or function to be displayed.
The design will follow. In fact, this
is the content first approach. We
start with the nature of the content
and only then make the transition
to interfacing. The result is a design
that merges form and content. The
content is not forced into a certain
form, which could be a sheet of a4
– the scroll page. Content-driven
design implies the death of the page.
The concept – the way in which the
content is displayed – guides the
translation into the various channels
and media.
Conclusion
The only answer to the large digital
themes of our time – contextualis-
ation, omni-channel and simplifica-
tion – is to let go of the website made
up of static pages that are linked and
has a table of contents – the website
as infrastructure. By designing based
on the content and introducing
the dimensions of space, time and
sound, the static page will disappear
and the dynamic interface will take
its place. 
REFERENCES
ąą Haaima, H. (2015), “The new design revolution”. Dynamic Design magazine, issue 1. Mirabeau.
ąą Wroblewski, L. (2014), “Breaking Development: Content-first UX Design”, LukeW Ideation +
Design. URL visited on 18 January 2015.
/ THE PAGE IS DEAD70 DYNAMIC DESIGN 71

/ NO STYLING QUEERS!
‘Design matters’ (Vormgeving telt) is the title of
a Dutch publication by the Association of Dutch
Designers (BNO) dating back to 2001, based on
research by KPMG.This research shows that
graphical design as a business tool is powerful,
effective and profitable. Now, almost 15 years later,
let’s analyse the precise role of the designer in the
digital world.
NO STYLING
QUEERS!
user interface designer and visual
designer, to name just a few. In some
cases, the interaction designer is re-
sponsible for both the functional and
the graphical design. What’s more,
multimedia design courses usually
offer this mix of disciplines, so that it
is not unusual to see students taking
on several roles together.
Graphic design
In defining the role of the graphic de-
signer in digital media, it is helpful
to make the following distinction:
the interaction designer is responsi-
ble for function, the graphic designer
for form and the front-end developer
for technology. Although some over-
lap is possible, these are separate
disciplines that demand different,
almost incompatible, skills.
What does that mean exactly: the
graphic designer is responsible for
form? Every web designer knows
what it is like to design a home page,
or a part of it, such as the top nav-
igation in which a huge amount of
data needs to be displayed in a small
area. How to deal with this? The
interaction designer determines the
content, the interaction between and
the hierarchy of the displayed infor-
mation. The designer then deter-
mines what it will look like – layout,
typography, colour and images. If
the designer decides to more or less
literally apply the interaction 
Blurred boundaries
The User Experience (ux) domain
is undergoing rapid, radical change,
partly due to technological innova-
tions such as responsive web design.
In addition, front-end developers
have been given a place in the design
process. In projects for clients, Agile
methodologies are often applied and
interaction designers, visual design-
ers and front-end developers work
so closely together that the bound-
aries between the various disci-
plines have become blurred. Who is
responsible for what? There is now a
proliferation of names for the digital
designer: user experience designer,

designer’s wireframe – a kind of
floor plan of the website – this does
not have the required outcome. In
fact, clutter and chaos are the result.
The designer therefore needs to
get out his visual box of tricks and
take a more abstract approach to
the wireframe. Graphic design is the
structuring and presentation of in-
formation. As described in the Dutch
publication Vormgeving telt (Design
matters), “Designers go a step further
than the written content. They make
use of non-verbal elements to control
perception and to invoke the required
response in the user.”
Identity and image
Style and image are important
components of a product’s identity
that design communicates through
association. The challenge for
the designer is to ensure that this
identity matches the consumer’s
experience of the image (bno, 2001).
This means that the designer finds
himself in the world of visual iden-
tities and brands – a totally different
discipline from the interaction
designer who operates in the world
of function and user.
Design is a creative discipline.
As Gert Dumbar said, “I would link
creativity to something known as ‘ser-
endipity’.” Serendipity is the occur-
rence and development of events by
chance in a satisfactory or beneficial
way (Wikipedia, 2014).
In the UX world
As mentioned above, a designer
who simply colours in a wireframe
is making a big mistake and does
not do justice to his profession. In
addition, interaction designers do
not have the ability to think in terms
of form and layout. Happily, such ab-
errations are consigned to the past.
The emergence of responsive design
has made it essential to work from
the content and content hierarchy in
order to design interfaces for mobile
devices. The content is structured
and prioritised and relationships are
identified, for example in a con-
tent pyramid. However, this is no
longer translated to the screen level
because the screen has also become
a relative concept.
In his article Design Process In The
Responsive Age (Smashing Magazine,
2012), Drew Clemens describes how
interaction and graphic designers
can best work together. The inter-
action designer produces a priority
guide, which the graphic designer
‘reads’ and translates into design.
These are positive changes in the
design process, brought about by
responsive web design, and they
pave the way for the classic graphic
designer. The graphic designer has
always translated a collection of con-
tent and a set of requirements into a
brochure, for example, or an annual
report. The analysis and structuring
of content form the foundation of
every good design; good but poor-
ly-designed content has absolutely
no power.
Thinking in images
This article represents a plea for
the traditional graphic designer
and the reintroduction of his role
in the world of ux. There is only
one important difference now: the
design of digital experiences is in-
credibly complex. Whereas a graphic
designer can possibly still think in
terms of ‘pictures’, digital design-
ers think in terms of relationships.
The number of online touch points
between the brand and the con-
sumer has become infinitely large
and broad: from wide-screen tv to
mobile app, and from Facebook to
online activation. Achieving a con-
sistent user and brand experience is
now a challenge. The designer de-
termines what the constants are and
where the context, device or target
audience require a different design,
or variation on the design. An exam-
ple is a button that needs to be larger
and easier to click on touch devices.
The designer has in fact become a
director or choreographer. 

A system of measurement, a modu-
lar structure, a collection of compo-
nents and a set of rules are the tools
of the designer who operates in this
landscape of relationships – in other
words at an abstract level. From
pictures to relationships.
When you are in a provocative
mood, it would be fascinating to say
to a group of visual designers, just to
get the debate going: “The front-end
developers are in fact today’s real de-
signers.”. They are the professionals
who can think in terms of relation-
ships and imagery systems by nature
and who have a sharp eye for market
developments.
Styling queers and their
make-up boxes
The challenge for the graphic de-
signer is clear. After all, it is good to
emphasise the difference between
styling and design. If a designer
‘colours in’ for example using style
tiles, wireframes or html proto-
types, he is merely a stylist. We have
all seen the stylists on the commer-
cial channels; styling queers with
their make-up boxes adding a bit of
colour here and a bit of gloss there.
Graphic design is a totally different
discipline – the designer structures
and presents information and gives
visual meaning to brands.
The four tasks of the digital
designer
Based on the traditional discipline of
graphic design and the complexity of
new media design, a short summary
is given below of the four tasks of the
digital designer.
1. Do not think in terms of pic-
tures, but relationships. Design
an imagery system (in which the
goal is a consistent brand and
user experience) that takes into
account context, device and target
audience.
2. No styling queers, please! The
designer structures and presents
information and is responsible for
the visual rendering of the brand.
3. Focus on brand and identity and
leave function and interaction to
the interaction designer.
4. Remember: “Design is a creative
discipline. Designers look at the
larger picture and make creative and
practical use of what they find there.
As a result, the outcome is often not
just a solution, but also a surprise.”
(bno, kpmg, 2001). 
REFERENCES
ąą BNO, KPMG (2001), Vormgeving telt (Design Matters). BNO (The Association of
Dutch Designers).
ąą Clemens, D. (2012), “Design Process In The Responsive Age”, Smashing Magazine.
URL visited on 25 January 2014.
This article is a reworking of a previous publication on Frankwatching: Word geen
stylingfreak! Over de rol van de grafisch vormgever (in Dutch; Haaima, 2012).

/ THE NEW DESIGN REVOLUTION
Fluid and adaptable design is a dramatic change in
the history of the image.

Design revolutions
Technological innovation can have a huge
impact on the arts, architecture and design. For
example, the Flemish Primitives were the first
to use oil paints in the 15th century. Oil paint,
which is a pigment mixed with oil, dries more
slowly than tempera, a pigment mixed with egg
yolk. This gives artists more time to paint, so
they can work on the finest detail. Another ad-
vantage of using oil paint is being able to create
transparent layers. This gives paintings texture
and extra richness in colour.
When new materials and techniques are first
invented, they are often used cautiously to start
with. It is only later that people really make
the most of the advantages. It was Rembrandt
in the Dutch Golden Age, two centuries after
the discovery of oil paint, who pushed its use
to the very limit, daubing thick layers onto the
canvas. Close-up, the paintings seem almost
abstract, but from a distance it is clear that the
material reinforces the dramatic nature of his
work.
It was in the 19th century, during the In-
dustrial Revolution, that people first began to
work with steel – an incredibly dense, strong
material. Crystal Palace was built in London
– a huge steel construction with lots of glass,
constructed for the Great Exhibition in 1851.
The Eiffel Tower in Paris, also built for a Great
Exhibition (1889), was able to reach incredible
heights for the time, thanks to its wrought iron
construction. However, it was decades later
that people really began making use of steel
in skyscrapers in America, a new construction
method that stemmed from a technological in-
vention and changed our city skylines for ever.
The web has become more dynamic over
the last ten years with the application of re-
sponsive and adaptive technologies. Thanks to
these new technologies, the object can adapt
to the available screen resolution, which has
become a relative, unpredictable concept in
our mobile age. Now, if we link these dynamic
technologies to more personal user variables
such as time, location and user behaviour,
needs and preferences, we move into the realm
of dynamic design. A whole new world opens
up. As Gardner and Treff appropriately stated
in their recent article: This is The Next Big Thing
in Responsive Design. 
Many websites resemble
these type cases, or
printer’s boxes, used in the
dodgy 1980s for displaying
personal knick-knacks

Type case design
The impact of this new design revolution
becomes clear if we compare it with the
current status of web design. Many websites
still look fairly ‘static’, as we are still looking
at pages – pages that barely alter with changes
in important user variables. Take, for exam-
ple, the target audience buttons on the home
pages of the major banks. If the visitor clicks on
‘business’ instead of ‘private’, nothing changes
– some different texts and hyperlinks appear
on the screen, and with a little luck a photo of
a businessman in suit and tie. Incredible really
– you would expect a completely different look
when such an important user variable changes.
Many pages are still completely static – often
beautiful designs and carefully thought out,
like a painting, but nevertheless design that be-
longs in a 20th century digital design museum,
as do the terms website, web page and Internet.
A good name for this kind of design is type
case design. Type cases, also known as print-
er’s boxes, are compartmentalised drawers
used by printers in the 20th century to store
the letters of the alphabet. Although printer’s
boxes disappeared in the desktop publishing
era, they underwent a revival on living room
walls in the dodgy 1980s for displaying per-
sonal knick-knacks. Many websites resemble
these type cases – grids in which everything is
placed neatly and tidily, anonymously really.
The problem is that nothing really comes to
life – the downside of an organisation-based
approach to design in which each interest or
department is given its own compartment.
This is in sharp contrast to the world of
traditional printed media, which is infinitely
more dynamic than the web. Just think of the
spectacular magazine covers and newspaper
front pages that change in response to events
taking place in the world the design makes it
possible to really get a feel for these events.
The dynamic systems behind newspapers
mean that they are able to respond directly
to ongoing events (Gardner and Treff, 2014).
Without even needing to read them, we can see
and feel in just a few seconds what the news is
about – is it a day with ‘breaking news’, or is it a
normal day with several items of more general
news – this is all reflected in the design.
Although website design now usually adapts
neatly to the available screen resolution on the
device, people expect an online experience that
responds to real user variables such as location,
time and the frequency with and the way in
which the application is used. Static websites
have become museum pieces; dynamic design
is the new design revolution.
Dynamic design
Contrary to what many people think, dynamic
design does not have to be complicated. A dig-
ital design agency’s home page, for example,
can take on different forms in terms of colour,
typography and layout depending on what
is happening in the company at the time and
what is being displayed. An airline or financial
case looks good on a simple, white background,
while a fashion case is better off with a black
background to reinforce its dramatic images.
If an employee places a message or the agency
wins a prize, this can be displayed across the
screen in large letters as ‘breaking news’ and
other content shifts down for a while.
The concept of progressive reduction
(Grinshtein, 2013) refers to how interactive
elements are displayed. For example, when a
visitor first uses an application it can be useful
to display the login button in large, rich visuals,
for example in the form of an icon with clear
instructions. If a visitor uses the application
often, a small icon without instructions will be
enough. However, a visitor who returns to the
site having not used it for a while requires a
slightly richer form of the ‘minimum version’.
This phenomenon is also referred to as
experience decay – the user needs to get used
again to how the application works.
Interactive elements, therefore, have differ-
ent forms depending on user behaviour. This is
a remarkable fact. We have also seen that the
layout can take on different forms, and this also
applies to components – page sections such 

The world of
traditional printed
media is infinitely
more dynamic
than the web
An excellent example of dynamic design
in architecture is the Wyly Theatre in Dallas.
Designed by Joshua Prince-Ramus (rex)
and Rem Koolhaas (oma), the building has a
flexible construction and can be adapted to
variables such as visitor numbers or the type of
performance or event. The stage can take on an
infinite number of configurations – a fascinat-
ing example of flexible design that continues to
change with time.
To conclude, fluid and adaptable design is a
dramatic change in the history of design and in
the history of the image in general. As with the
revolutions in art and architecture described
above, the opportunities and boundaries of the
new technologies will only be fully explored
and delineated in the years to come. 
as news items, tools or forms – which can take
on different configurations depending on the
context. This context is determined by varia-
bles such as user interest and behaviour, events
or the nature of the information displayed. As
a result, website creation is more like a dance
choreography, film script or music score. After
all, we are working in terms of relationships,
time and space.
This development calls for a new type of de-
signer. A designer who thinks way beyond the
boundaries of his field. A designer who likes
to flirt with new technologies. A designer who
rebels against old paradigms. For example, one
implication of dynamic design is the disap-
pearance of web conventions such as the fixed
logo position in the top left corner (Haaima and
Versteeg, 2015).
REFERENCES
ąą Davies, P.J.E. and Denny, W.B. (2010), Janson’s History of Art. Pearson Education (US).
ąą Gardner, D. and Treff, M. (2014), “The Next Big Thing In Responsive Design”, Fast Company & Inc. URL visited on 18
January 2015.
ąą Grinshtein, A. (2013), “Progressive Reduction”, LayerVault Blog. URL visited on 18 January 2015.
ąą Haaima, H. and Versteeg, P. (2015), “Van responsive website naar dynamisch design”, Dynamic Design magazine, issue 1.
Mirabeau.
ąą REX (2015), “Wyle Theatre”. REX website. URL visited on 3 March 2015.
This article is based on the following lectures: Dynamic Design: The Next Revolution In Design (Henk Haaima and Franklin
Heijnen on ‘eDay’, 6 November 2014) and Design For Change (Henk Haaima and Eelco van Collenburg in the ‘Dutch Design
Week’, 19 October 2014).

All the articles in Dynamic Design were written
by Henk Haaima, with the exception of From
responsive website to dynamic design, written
by Paul Versteeg and Henk Haaima and From
inanimate book to dynamic style guide written by
Bran van der Meer, Richard van Kampen and
Henk Haaima. The fall of Photoshop article is
a quote from Vasilis van Gemert’s article The
many layers of web design.
About
Henk Haaima is art director at the digital
design agency Mirabeau. His focus is on digital
branding with a mission to transform static
websites into dynamic design.
Published by
Mirabeau
H.J.E. Wenckebachweg 100
1114 AD Amsterdam-Duivendrecht
The Netherlands
hhaaima@mirabeau.nl
Printed by
Veenman, Rotterdam
The Netherlands
info@veenmanplus.nl
Translated by
Christy de Back, Serena Lyon
info@christydeback.nl
Jobs and internships
Passionate designers and design students
eager to take part in the new design revolution
are cordially invited to send their portfolios to
hhaaima@mirabeau.nl.
Copyright is held by the publisher and authors.
No part of this publication may be reproduced or
made public in any form, whether electronically,
mechanically by photocopying or any other
means, without the prior written consent of the
editorial team.
Publisher
Mirabeau
www.mirabeau.nl
Editor
Henk Haaima
Art direction
Henk Haaima
Design
Koen Huiskamp, Simon Dijkman
Contributers
Wessel Kramer, Ekaterina Holyapina, Ianthe
Bato, Ivan Masic, Thijs Rentier, Eelco van
Collenburg, Mariëlla van de Stolpe, Anneloes
Hilbers, Edgard Beckand, Robert de Blok,
Adjan Kodde
/ CREDITS
Credits

Dynamic Design (magazine/issue 1/fall 2015)

More Related Content

What's hot (20)

Similar to Dynamic Design (magazine/issue 1/fall 2015) (20)

Recently uploaded (20)

Dynamic Design (magazine/issue 1/fall 2015)