Dynamic Design (magazine/issue 1/fall 2015)

/ EDITORIAL

EditorialThe 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 HaaimaArt 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 designResponsive techniques must be applied now to display content based on user interests.

Learning the hard wayDesign requirements for a new prestigious academy to provide agencies with top talent.

No LogoWe doggedly display the logo in the top left corner, but for how much longer?

The fall of PhotoshopOn the demise of Photoshop and the imminent birth of a truly dynamic design tool.

F*ck the contextIs it time to redefine today’s digital design, ruled by the magic words ‘context’ and ‘relevance’?

Dynamic grid systemsDesign 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 deadCollections of static pages linked by navigation buttons are an outdated concept.

No styling queers!The digital designer structures and presents information.

The new design revolutionFluid, adaptable design: a dramatic change in the history of the image.

Typography firstThe remarkable comeback of classic typography in modern digital design.

6

42

14

5820

6428

72

7852

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 interfacesWe 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 thingNow 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 designConsumers 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 conventionsOnce 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 choreographerThe 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).

RecommendationsSix 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 designDynamic 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.

ContentContent 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.

TypographyThe 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.


StylingThe ‘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

LayoutThe 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 criteriaVan 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 DesignIn 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 designerWhich 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 NetherlandsRoughly 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 courseThe 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?

RecommendationsSix 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 logoThe 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 logoPublished 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 conventionSo 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 positioningWith 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 revolutionDynamic 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 identitiesChanges 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 webIf 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 designA 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 contextContextual 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ürstThis 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 famousDe 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 wordsThe 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 technologyThe 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 systemsIf 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 gridA 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-handAs 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”.

DrawbackIt 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 designThe 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

SummaryThe 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 styleAlthough 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.

MeasureBased 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 firstThe 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 spacingThe 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 justificationWhen 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

SpacingA 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 designTo 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.

LayoutA 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 guideIn 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 togetherThe 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 standardA 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 sameThe 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 designThe 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 behaviourOne 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 stepsDesign 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 worldIn 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 dimensionsFrom 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 worldWebsite 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 pagePeople 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.

ConclusionThe 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 designIn 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 boundariesThe 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 imageStyle 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 worldAs 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 imagesThis 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 boxesThe 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 designerBased 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 revolutionsTechnological 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 designThe 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 designContrary 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.

AboutHenk 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 byMirabeauH.J.E. Wenckebachweg 1001114 AD Amsterdam-DuivendrechtThe [email protected]

Printed byVeenman, RotterdamThe [email protected]

Translated byChristy de Back, Serena [email protected]

Jobs and internshipsPassionate designers and design students eager to take part in the new design revolution are cordially invited to send their portfolios to [email protected].

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.

PublisherMirabeauwww.mirabeau.nl

EditorHenk Haaima

Art directionHenk Haaima

DesignKoen Huiskamp, Simon Dijkman

ContributersWessel 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
