The Power of Structure

Creating structure is one of the key tasks for designers, but if we are creators of structure, what sort of structures are we creating?

Architecture influences the way we move through physical space. We create places for reflection and zones for action within perceptual boundaries and physical constraints.

Information architecture performs the same function, creating virtual spaces – patterns - whose purpose is communicated through space, form, colour, image, typography and behaviour.

These structures define entrances and exits to spaces where we engage in actions in both real and virtual worlds. Well-designed spaces and declare their purpose and encourage us to interact, to perform and to create.

The visual structure we build into our designs affects the way people see them. Is our visual hierarchy working so that readers find what they need, and in the right order? Are elements appropriated weighted so that their relationships are clear? Do people gravitate toward the most important information on the page, or are there elements that distract? Can our audience clearly see what to do next?

We begin to nudge the user experience by developing a conceptual structure that describes a consistent visual language. Our primary goal must be clarity. Does this graphic help to illustrate the idea, or make it more confusing? Communicating through words and images influences the way we think about things, and over time, becomes part of our brand.

Social structures influence the way we interact with others and set out the opportunities for social interaction. This area is one that designers have only just begun to investigate. Can you poke people? Favorite something they did? Engage with a brand? How is reputation managed? Are you able to import or export your relationships, and (more importantly) does it make sense to do so?

Of course these structures do not function in isolation. They overlap, intermingle, and co-exist. As designers we need to recognise the most appropriate patterns, and how to use them in our designs.

Build well.

Design by algorithm

Logos that change based on external variables

The tension between the desire for uniformity and the need for originality has provided a rich seam for branding agencies to exploit.

The idea that the essence of visual design can be expressed via a universal set of rules has a rich history, from the greek golden section via vetruvian man, compositional techniques, and the typographic grids of modernist typography.

But whilst brands can be monolithic or flexible, their visual expressions remained fixed until the 1980’s when the introduction of desktop publishing made it possible to produce designs that change based on external variables.

Some brands might need to show diversity of service or product, while others see flexibility as a crucial competitive advantage. So for those organisations that have evolution written into their essence, a dynamic identity provides an exciting and relevant structure for brand expression.

NAI

A radical scheme for the NAI (Netherlands Architecture Institute) by Bruce Mau provided many distorted, out of focus logos that allowed for flexibility and experimentation. Soon after, the Tate Gallery took the NAI’s lead and introduced an ever-changing logo for its ever-changing displays (courtesy of Wolff Olins).

Less successful was Abbey National’s 2003 ‘soft and fuzzy’ rebrand, ditched when Santander acquired the bank, but Wolff Olins returned to the idea of flexible brands, with a more controlled iteration in PWC’s device-friendly identity where a set of translucent rectangles flex and change depending on their usage.

PWC's flexible branding

However, logo selection is often made from a tightly controlled master set rather than from dynamically created marks.

Now, the use of the algorithm has enabled the rise of tailored design, where application of a consistent set of rules to a dynamic data set produces a unique output - design expressed as art.

A recent example of this genre is MIT Media Lab’s development of its flexible identity. Created by Pentagram, and based on the same grid as its predecessor, its aggressive pixelated letterforms create an uncompromising set of marks with echoes of Wim Crouwel’s New Alphabet.

It’s not a beautiful logo, but as the visual expression of the Media Lab’s multiple research groups at the core of its academic structure, it fits.

Lockups of two characters within the grid allow for almost every possible letter combination— “an algorithm” explains Pentagram, “will generate all the possible solutions for any given group acronyms in the future.”

This visual language sets the tone for a highly flexible range of applications and future permutations of the identity that will have the same look and feel without having to be the same.

In a more sensitive use of the pixel-block style, Norwegian design studio, Snøhetta, has designed the obverse of Norges Bank new bank notes. The design, based on the boundary where sea, shore and sky met, renders images from the Norwegian coastal landscape in a Minecraft-like pixellated form, the degree of distortion related to the ‘windspeed’ that increases with each denomination.

On the 50 kroner note the wind is weak, so the boundary between sea and coast is rendered in calmer short, square shapes; while on the 1,000 kroner note the wind is strong, creating longer, stretched-out forms that allude to rolling breakers and windswept trees.

But whilst Snøhetta uses the idea of windspeed to create the pixel distortion, the execution is static. A 2010 scheme for Nordkyn from Oslo’s Neue Design Studio, also using data based on the feed from the Norwegian Meteorological Office, produces a new logo dynamically for every application.

http://horizons.dandad.org/

Although not strictly speaking a logo, D&AD’s 2013 Annual used a similar methodology to create ‘identities’ that reflected the global spread of winners at the D&AD Awards. The algorithm creates a unique composition based on longitudinal and latitudinal location data, with colours chosen by time, and meteorological data used to determine the hue

Where an entry lacks a suitable data feed to produce dynamic data, use of a picker to sample random colours from an image can provide the necessary random variable.

ITV colour picker

Similarly, ITV’s rebrand created the opportunity to tailor the colour palette of the logo using key colours and tones from the programme being promoted, so popular entertainment gets a vibrant palette, whilst the logo can take on a more sombre appearance when the programming (or news) requires it.

As well as colour, shape can have an influence. Sagmeister’s identity for Casa Da Musica needed to echo the exuberance of the architecture because ‘as we studied the structure, we realized that the building itself is a logo’.

Casa Da Musica dynamic logos

The essence of the brand identity was to illustrate the many different kinds of music performed, through an algorithm that paired colours sampled from a composers image with different facets of the building. Depending on the music the logo changes its character and works dice-like by displaying different planes and hues.

Sound can also be used as the dynamic element.

Precedent’s work for the Leeds College of Music, using a tool created by Karsten Schmidt, allows staff and students to create their own visual identity by inputting visualisations of their own music to create their own unique sound signatures to use in graphic applications.

Arguably, those dynamic designs that incorporate a random element into the algorithm achieve a more aesthetically pleasing result, negating the principle of the application of a universal rule.
But because many audiences will only see a single iteration of a dynamic identity system, it follows that if any individual variant is weak, the overall identity suffers. For the overall brand to be successful, the pieces need to equal the whole.

So the key question to ask of any dynamic identity is whether it accurately expresses the brand in all its executions.

Colour management

And so to Fedrigoni Paper on Clarkenwell Road to attend a presentation on colour management by designer Andy Brown and colour consultant Paul Sherfield of the Missing Horse Consultancy

The Print Handbook

Andy is the author of The Print Handbook, a pocket guide to help designers get the best from their print projects, and I’d met Paul a couple of years ago when he was contracted by COI to help improve our studio colour management.

As the responsibility of pre-press has shifted from printers to the design studio, creatives find themselves required to colour manage their open or PDFX output files, but have little idea of how to work within a structured colour-managed environment. Paul’s mission is to help designers improve their pre-press workflow by explaining the benefits of colour management policy, where it is needed and how it is applied.

Colour management provides a unified environment for handling colours, where a common colour reference is used at each step of production, from photography through design, plate making and printing.

It aims to unify the image throughout the entire production process by using the profiles of the various devices to manage colours.

Comparison of some RGB and CMYK colour gamuts

Basically, you have two colour gamuts, RGB for optical devices and CMYK for output devices. RGB has a wider gamut, whilst CMYK ‘clips’ the available colours into a space that can be rendered by an output device.

However, neither is an absolute – both RGB and CMYK gamuts are device dependent, so the space you work in depends entirely on the input device and the intended output device.

Problems of colour perception also arise because the designer is looking at a monitor that generates colour in RGB, a local colour proof is typically produced in CMYK on an inkjet printer (which deposits ink on the surface of the paper), whilst the commercial printing process (which is also working in CMYK) presses ink into the substrate. (Printed material reflects light, so colors also look different depending on the lighting environment!).

To achieve the best colour fidelity, you therefore need to align your input, editing and output devices, from camera through to press, so they are all working in a common colourspace (independent of any device) so that the various colours can match as closely as possible. This is the basic principle of colour management.

Translation between devices is achieved using International Colour Consortium (ICC) profiles. Based on Apple’s ColorSync engine, ICC profiles are the accepted means of maintaining the consistency of colour files when transporting them between the originator/creator, publisher and printer.

The ICC profiles manage colour between different devices, ensuring that the correct rendering intent is maintained.

The standard rendering intent for printing in North America and Europe is the Relative Colorimetric method. This compares the extreme highlight of the source colourspace to that of the destination colourspace, and shifts all colours accordingly. Out-of-gamut colours are shifted to the closest reproducible colour in the destination colourspace.

So how do you go about setting up a colour-managed environment?

Working backwards from your commercial printer, find out what colour profile your printer is using for the intended press and paper stock, and ask how they would prefer your open or PDFX files set up.

Outputting to a PDFX format retains your embedded colour profile so that your printer knows the colour intent.

For example, in the UK most printers working to ISO 12647/2 will use Adobes ‘Coated FOGRA39 (ISO 12647-2-2004)’ profile which is in the later versions of Adobe CS and used by their colour settings file ‘Europe Prepress 3’. Colour profiles created in this way will prove to be repeatable and maintain their colour fidelity for both litho and digital presses - and are therefore preferable to custom profiles.

Your local proofing device should be set up to use the same profile.

In Adobe Bridge, set your CS colour settings to ‘Europe Prepress 3’.

Calibrate your monitor into the same working space – although note that as monitors warm up, the perceptual colour will change slightly, so for colour-critical work, monitors should be re-calibrated at regular intervals.

Finally, ensure that all images have an ICC profile embedded – if not, then a generic RGB colourspace, such as sRGB or Adobe RGB (1988), will be assigned when the file is first opened or imported. (If you open a document embedded with a colour profile that doesn’t match the working space profile, in most cases, the best option is to preserve the embedded profile because it provides consistent colour management.)

sRGB is recommended when you prepare images for the web, because it defines the colour space of the standard monitor used to view images on the web.

Adobe RGB is recommended when you prepare documents for print, because the Adobe RGB gamut includes some printable colours (cyans and blues in particular) that can’t be defined using sRGB.

So having aligned the colour profiles of all the devices in your workflow, you can design in in a colour-controlled environment, knowing that what you see really is what you’re going to get.

Big design

gov.uk

When the award-winning gov.uk site launched in 2012, it marked the moment ‘big design’ entered the mainstream.

Driven partly by the need to be accessible, and partly by the requirement to work on mobile devices, the launch of gov.uk also coincided with the design industry moving from skeuomorphic design towards the flat aesthetic seen in Microsoft’s Windows 8 ‘Metro’ interface, Apples iOS8 and Google’s Materials Design.

This combination of HTML5 dynamic backgrounds, overlayed with large type and control icons on flat colour panels has created a youthful ‘flat’ UI design meme that references the Bauhaus and Swiss Design schools and provides a single underlying system providing a unified experience across platforms and device sizes.

The new BBC responsive website, now in beta testing, follows the same principles.

BBC Beta

Every week, the BBC News website gets around 115 million visits, and the number coming from mobiles and tablets is increasing all the time to the point that these devices now account for 43% of unique browsers.

Looking at device usage, it seems clear that the increased take up of tablet and mobile devices, with their requirement for larger button target areas, is driving the move towards ‘big design’.

Apple iOS7

For any organisation, maintaining different versions of websites for desktop, tablet and mobile (as well as accounting for different screen sizes, different browsers and legacy systems) is unsustainable. Designing simpler responsive sites, optimised for different screen sizes, is the most efficient structure, but it means that control areas designed for display on mobile devices take up a proportionally larger area of screen when displayed on a desktop device.

Microsoft Metro/Windows8

Google Material Design

This also represents a shift in the way websites are designed. In the early days of the web, websites were merely ‘brochureware’ extensions of printed publications. (The first web page I designed for the DTI just had a telephone number on it.) Then came sites that replicated the (sometimes labyrinthine) internal structure of an organisation. In the third wave these sites were turned around to be more user-centric.

Now we are seeing the rise of more focused task-centric sites, and enabling users to carry out these tasks (often on the move) using a simple graphic UI that stands out from the background visual noise is a major driver in big design.

But in deploying large blocks within your content, the challenge now for a designer is how to develop the visual structure without losing a sense of style.

The resolution of mobile screens means that good typography, tracked and spaced with as much precision as print, is now achievable. Icons and other UI elements don’t need candy stripes or glossy reflections to make them look better at low resolutions.

So while it’s good to know what best-practice is, it’s possible for designers to push the boundaries, because we can.

In These Stones Horizons Sing

Continuing the theme of a visual language being structured by an overarching idea, graphic design can learn a lot from looking at architecture.

Wales Millennium Centre

The Wales Millennium Centre was designed and built in Wales. The brief to the architects, Percy Thomas, was that it had to be unmistakably Welsh and internationally outstanding.

Wales’ identity is conveyed through the materials used to build the Centre. They connect to Wales’ culture, landscape, and history.

The exterior walls are clad in horizontal layers of welsh slate, inspired by the architects’ memories of the stratified cliffs along Wales’ Glamorgan coastline around Ogmore and Southerndown.

This visual language ties the building to the Welsh landscape, and the structure of the fascia and colonnades also echoes the tunnels and galleries of the mines that once dominated Welsh industry.

You can see the clear line of thought that developed from the architect’s sketch books through the design drawings to the finished building. The success of translating the architects vision into a structure with a coherent visual language has produced a powerful statement of Welsh identity.

Just what was it about Richard Hamilton?

Just what is it that makes today’s homes so different,
so appealing?

Visiting the retrospective of Richard Hamilton at Tate Modern, I was struck by the way he constantly embraced new ideas in his art, and experimented with different drawing, painting, collage and printmaking methods and latterly digital techniques.

Hamilton took a very experimental approach to art, exploring the boundary between figurative and abstract images and the interface between organic and industrial forms.

In 1951, for his exhibition Growth and Form at the ICA, Hamilton used grid-based structures to look at form in nature and explore their influence on design trends in contemporary architecture and design.

In the seminal 1955 Man, Machine and Motion exhibition at the Hatton Gallery in Newcastle and then at the ICA, Hamilton arranged around 200 images in a modular steel grid. The viewer was encouraged to explore the installation and see images around, above and below them.

His developing interest in popular culture led to the creation of the collage seen as the first Pop art work, Just what is it that makes today’s homes so different, so appealing? Hamilton listed the characteristics of Pop art;

• designed for a mass audience
• transient
• expendable
• low cost
• mass produced
• young
• witty
• sexy
• gimmicky
• glamorous
• big business

Effectively he was describing the next 50 years of modern advertising.

Heartbleed

It's a simple logo for a complex bug. But creating an identity to raise awareness is entirely the point.

You’ve probably never heard of CVE-2014-0160. But you probably have heard of the Heartbleed bug, the security hole in some implementations of the OpenSSL protocol that provides secure communication between servers.

The two are one and the same, except that CVE-2014-0160 is the name assigned under the Standard for Information Security Vulnerability Names protocol, wheras Heartbleed is a catchy, scary name with a catchy, scary logo depicting a red heart. Bleeding.

The power of the Heartbleed logo is in its sheer, bold literalness, and in that regard it’s perfect for its purpose.

Heartbleed was given its identity by the international security company Codenomicon, which independently discovered the CVE-2014-0160 OpenSSL exploit on the same day as Google researcher Neel Mehta.

Most security holes like CVE-2014-0160 would be posted on messageboards read only by the coding and hacking community, but in this case Heartbleed was so serious that everyone who uses OpenSSL in applications such as web, email and instant messaging was at potential risk of having their passwords compromised.

A Codenomicon engineer came up with the name Heartbleed, inspired by a tangentially related piece of software called Heartbeat, and in a brilliantly inspired piece of marketing, Codenomicon registered Heartbleed.com, designed an FAQ explaining the bug, and accompanied it with a logo by Codenomicon designer Leena Snidate.

The logo went viral and the Heartbleed brand was born.

Don’t be surprised if the next major bug also gets its own name and logo™ and probably a clothing range.

A structured identity for the Brecon Beacons

The Brecon Beacons is an area famed for its exceptional natural beauty, wide open hillsides and natural light. It is also designated as a ‘dark sky’ area with little or no light pollution.

In 2010 Visit Wales designated the Brecon Beacons as a national park, and Small Back Room were asked to create a new brand for the Brecon Beacons, basing the designs around the ideas of light and the thought ‘Our National Park’.

Taking the idea of light as central to the branding, the logo contains two intersecting lines that create a triangle or cone of light, which creates an underlying structure that influences the visual language of the brand. For example, the cone can be used as a supergraphic.

I like the idea of supergraphics that stem from the core brand. I first became aware of this when working with the Department of Health (DH) brand, where a segment of the DH arc is used as a container for images.

But supergraphics are not limited to print.

Taken to an extreme, the shard-like visual language developed by FutureBrand from the construction lines for the 2012 London Olympic logo, were used to create environmental graphics that could be expressed on a huge scale, for example as seating patterns in the Olympic stadium and pool.

You can imagine the same principles being used to influence the environmental design for visitor centres, signage and events like Brecon Jazz.

The Brecon Beacons brand is designed to be bilingual, and the brand colour palette is extended to enable the brand to be used as flexibly as possible.

The website will launch in April, and stakeholders will be able to download digital assets to apply the brand locally. I hope they're able to imagine the possibilities and to use it well.