Jost Hochuli: In Conversation

Jost Hochuli

Jost Hochuli, the renowned book designer, graphic designer, typographer, printer and author of Designing Books, and Detail in Typography has had a slow but steady impact on modern book design and typography. First, through his work, especially that for VGS and Typotron; then through his teaching at the Schüle für Gestaltung in St. Gallen; and more widely through his publications on typography and book design.

Through these books, especially the English language edition of Designing Books, he has become probably the most influential theorist of book design since Jan Tschichold.

Jost’s belief is that book design is not just concerned with beautiful objects, but rather it is about making useful tools for reading.

Apprenticed to Rudolf Hostettler at Zollikofer Verlag (publishing company) in the 1950’s, anecdotally only two typefaces were permitted in the works – Akzidenz Grotesk and Times New Roman. Working in the modernist style known as Swiss or International school, the goal of the apprentice typographer was to simplify page design and layout so that there was no typographic ‘noise’.

Although we think of the Swiss school as being the dominant style in Europe in the fifties and sixties, in fact it was largely confined to Holland, Germany and the German-speaking part of Switzerland. Even within Switzerland, designers in the French-speaking cantons looked to France and Didot, designers in the Italian-speaking cantons to Milan and Bodoni.

Nevertheless, the Swiss school, following the path laid down by the Bauhaus architect, industrial designer and typographer Max Bill won worldwide recognition in the decades following the Second World War

“We were simply louder” said Hochuli.

Bill urged Swiss designers to follow modernist “‘asymmetric’ or organically formed typography”, to reject “the conventional text-image of axial symmetry”.

In response, contemporary designer Jan Tschichold defended the need to design some books “in the manner of traditional typography” while allowing that others might be more suitable done in Bill’s ‘functional’ typography.

As Hochuli developed his style, he was influenced by Tschichold’s plea for “the right to work in the way that I find best”, whether ‘newly revived traditional typography’ or ‘functional typography’.

Although Tschichold never visited the Zollikofer works, Hostettler considering him “A traitor to modernism”, Hochuli followed a middle path between the modernism of the Bauhaus and die neue typographie and traditional book design, before ultimately rejecting the rigidity of the grid.

Preferring to use consistent channels of white space between elements to create harmony on the page, Hochuli’s graphic design practice aimed to capture the feeling of the work through typographic layout that created “adventures on a page”.

Thus echoing the principle ‘form follows function’, Hochuli’s preference is for content to come before design, although, as Hochuli has reiterated on several occasions, the designer must not follow dogma.

--

Jost Hochuli was in conversation with Tony Pritchard, LCC senior lecturer and ISTD board member.

In association with International Society of Typographic Designers, London College of Communication, Presence Switzerland and the Swiss Cultural Fund.

1,516 mass shootings in 1,735 days

1,516 mass shootings in 1,735 days: America's gun crisis – in one chart

The attack at a country music festival in Las Vegas on Monday 2 October 2017 that left at least 58 people dead is the deadliest mass shooting in modern US history – but there were six other mass shootings in America in the previous week alone.

Data compiled by the Gun Violence Archive reveals a shocking human toll: there is a mass shooting – defined as four or more people shot in one incident, not including the shooter – every nine out of 10 days on average.

The graphic, produced by The Guardian US interactive team, a small group of designers, interactive developers and journalists working alongside the editorial team, is horrifying in it's simplicity.

A simple but effective idea demonstrating the power of information graphics to tell a story. As you scroll down, the enormity of the carnage over the last four years becomes apparent, leaving you slack-jawed at the seemingly never-ending toll - an infinite scroll of injury and death.

Type talks

We know that typefaces convey emotion as well as information.

Sarah Hyndman’s talk at the Museum of Packaging set out to explore the connections between social change, popular sentiment and typography.

In a time of increased industrialisation and globalisation, where jobs and livelihoods are threatened, where an influx of labour from elsewhere depresses wages, where old certainties are stripped away as financial systems, social order, and country borders are threatened. New leaders articulate a radical vision of the future, whilst those outside of the elite look on powerless and in search of a voice.

Sound familiar?

In 1970 the raw anger of a generation that felt excluded, marginalised and ignored found their voice in Punk. Expressed through attitude, music, style and typography, Punk’s anti-establishment stance found its visual expression through the work of Jamie Reid.

The stylistic conventions of Punk included mixing type styles and weights, overprinting, cluttered pages, deliberate mistakes, cultural references, blurred photography and an embrace of general messiness. All elements that rejected the rules and structure of the international style, took the typographic grids of modernism, a visual shorthand for the corporate industrial complex, and tore them apart.

Treating type as if it was a photograph freed designers from the restrictions of typesetting within a structured grid. Cut-out, photocopied and hand-drawn type also had the advantage of being able to bypass expensive printers, the rawness of the layouts on labels, flyers and zines perfectly matching the urgency and language of the authors.

 Ironically, the vibrancy of the look led to it becoming co-opted by the very establishment that Punk aimed to subvert. First ignored and feared, then embraced and tamed.

Kellog’s Squares anyone?

The creation of an expressive style that symbolises opposition to the establishment has historical precedent, and the inevitable co-option of anti-establishment typography into the mainstream follows a similar pattern. First World War Germany saw the appearance of Dadism. 1960’s America brought us psychedelia and pop art against the backdrop of the Vietnam war. The industrial decline of The UK in the 1970’s gave rise to Punk, whilst the 1980’s brought New wave and the postmodern typographic design of Brody, Saville, 8vo and Tomato (amongst others).

And so to 2016, and the rise of the Snapchat generation. With one typeface, limited tools and only a 10 second viewing window, Snapchat is the latest medium for millennials to share the moments that matter to them. it’s really immediate and ugly. You’re not designing, it’s just Times New Roman or Ariel and then it’s gone. It’s the closest thing now to how Punk looked like then.

Unstructured information and emotion that is explicitly short-lived and self-deleting, so it can’t be filtered, searched, indexed or saved, but provides today's authentic voice.

Adobe CC Export for Screens

Much excitement over the introduction of Adobe Illustrator CC’s ‘Export for Screens’ tool, bringing a structured workflow to managing and exporting web assets.

Export for Screens

So rather than having to create individual artboards at different sizes for responsive websites, ‘Export for Screens’ acts like a mini CMS, allowing you to design once, and publish artboards to multiple iOS and Android device preset formats.

Export Assets

But wait – there’s more! Export for Screens also has an option for exporting individual graphics assets. Great for producing individual icons or other graphics without having to slice up the overall layout.

And all your saved assets can live update, so if you need to edit the base artwork, the graphics update automatically.

And of course, if you export to Creative Cloud, your assets are available for anyone else working on the project.

Now I have to admit that I’m ambivalent about Adobe’s Creative Cloud. The range of tools, features and storage that Adobe offer temp me to commit completely to their platform, and I find that uncomfortable.

However, with ‘Export for screens’, I’m almost won over.

Top tips:

• Make sure your artwork is aligned to the pixel grid. [Note to Adobe – when will you offer a ‘snap artboard to grid’ option?]
• Images cropped with a clipping path export to the size of the unclipped image & need to be re-cropped in Photoshop.

Noto

Photo: Andy Dunn

Noto, Google’s multi-language font family from Monotype is designed to work over a wide range of different languages and on any device.
 
Noto covers more than 800 languages and 100 written scripts, and includes serif and sans serif fonts across eight weights as well as numbers, emoji, symbols, and musical notation.
 
The result of a five-year collaboration between Google and Monotype, one of the main aims for the typeface is to allow cultures to communicate digitally and help enable global communications across borders, languages and cultures.
 
Monotype has researched and digitally designed the characters, writing systems and alphabets for each Noto typeface, applying the rules and idiosyncrasies for individual languages to the fonts, based on the Unicode standard – a character coding system that defines the characters and languages that can be displayed and used within a computer system.
 
Because new scripts are constantly being added to Unicode, when a computer is unable to display a character in a font, it displays blank boxes instead. These are colloquially known as “tofu”. The name Noto is taken from Google’s goal of having “no more tofu”.

Monotype linguistic typographer Kamal Mansour says: “The aim of the Noto project is to provide digital representation to all the scripts in the Unicode Standard. That in particular is something that many different language communities could not afford to do on their own.”

Are Annoyingly Literal Headlines Set In Title Case Optimised For SEO?

You can find them across the web, headlines written for search engines rather than readers.

Online magazines like DesignTaxi and news aggregator sites such as BuzzFeed and Huffinton Post use strangely formulaic headlines, typically including a keyword, a proper noun, a verb, and an adjective whilst avoiding simple connectives. It’s English, but not as we know it. In SEO terms the language is optimised to add ‘value’ to each headline.

But in writing for robots, you just get robotic headlines.

It’s hard to imagine classic newspaper headlines such as the Sun’s 1992 headline ‘GOTCHA’ having the same impact as ‘Royal Navy Stealth Submarine Sinks Argentinian Cruiser in South Atlantic’.

Probably the best (worst?) example is the Daily Mail Online, where the inclusion of multiple keywords in the headline means the headlines have become almost as long as the stories themselves. It's clickbait in its purest form. The logical conclusion of this process is that the headline becomes the story, just a shrieking top-line opinion seeking an instinctive knee-jerk reaction from the comment trolls.

Surely we can write better than this.

The point of SEO is to provide sufficient context for search engines to rank the story as high as possible in the search results, relative to the value of the content.

Whilst search engine algorithms are constantly being tweaked, it’s generally accepted that an editor can improve the page ranking of a story by crafting the relationship between the headline, page title and meta description.

As well as describing the story, the title needs to include a proper name and a likely keyword that the reader might be using in their search (towards the front of the headline if possible). The page title can expand on the headline, for instance using a full name when the headline just uses a shorter, well-known, shorthand (eg. Diana / Diana, Princess of Wales), whilst the meta description can include more detail for the ‘snippet’ displayed underneath the link in the search results. All three elements should aim to match the words that users are likely to use in their search, and these search-optimised keywords should also be included in the opening paragraph of the story.

Thinking more widely about the utility of the headline, fitting it within 156 characters to read fully in the search results makes it easier to circulate on social networks, and including a personal pronoun in the headline also improves the chances of readers sharing your story.

(There are of course other factors in SEO, such as unique links to the story and referring links from the story, but these are not necessarily part of the headline construction).

In 2009, usability expert Jakob Nielsen introduced the concept of writing short, snappy SEO friendly headlines that “…must be absolutely clear when taken out of context” and cited the BBC's website as a best practice example of headline-writing “…offering remarkable headline usability."

Nielsen claimed that BBC headlines have the following characteristics:

• Short, typically 5 words or less
• Information-rich
• Include keywords
• Understandable, even out of context 
• Predictable/match for reader expectations

On the other hand, headlines from viral sites are usually the complete opposite:

• Long, sometimes to the point of being rambling and incoherent
• Emotion-rich
• Few or no keywords
• Typically non-contextual
• Use shock or emotional language

And whilst there is value in using searchable terms, the results can be lost in translation.

The late advertising and copywriting genius, David Ogilvy, said that "On average, five times as many people read the headline as read the body copy.”

The point of a headline is to draw the reader into a story that they might not otherwise have read. The skill of the web subeditor is in knowing their audience so well that they can add their editorial tone of voice to the headline, whilst still capturing the imagination of the reader.

And if you can turn your headline into a pun, then so much the better.

The Scottish Sun’s ‘Super Caley go ballistic Celtic are atrocious’ is held up as one of the all time classic newspaper headlines.

And, although no one knew it at the time, it’s SEO friendly.

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.

Less than one second

Paul Butt / Section Design

Structuring and visualising data is a discipline that always appeals to me, so it was with a sense of anticipation that I took a trip to Shoreditch to see a two-day exhibiton of information and data design curated by London based information design agency, Signal Noise.

Signal Noise commissioned a series of print-based data visualisations that explored the theme of “less than one second”, based on the premise that time is of the essence now more than ever before.

We now access enormous reams of data in ‘less than a second’, thanks to technologies such as cameras that captures the movement of light in slow motion, or the Large Hadron Collider (LHC) that observes sub-atomic activity happening in millionths of a second.

Technology enables a vast number of data points and events to be read and understood across a variety of fields - from automated trades to F1 analytics - but filtering and making sense of the data so that it provides a useful insight is the job of the information graphic designer.

Despite the wide range of subjects used as source material for the exhibition, including athletics, cinematography, F1, GPS, the LHC and stock trading, I found it significant that the base structure of the majority of the visualisations was circular.

Mapping the data - Josh Gowen

The visualisations that eschewed circles were, I thought, less intuitive and less visually attractive, even though timelines are traditionally depicted as, well, a line.

Imposing a clock face metaphor seemed to provide a familiar ‘carrier’ structure for the message, enabling the viewer to quickly interpret the information.

The most successful visualisation seemed to me to be Josh Gowen’s ‘Mapping the data’, combining the clock metaphor with the shape of the LHC and a graphic that showed how the volume of data crunched by the LHC is filtered and then delivered to 151 research centres worldwide.

Telling the story by combining seven pieces of information in one graphic, plus some cool stats. What's not to like?

‘I love Comic Sans’

And so to hear Bruno Maag speak at London Design Week’s Sound and Type lecture in the glamorous environs of the Soho Hotel Screening Room.

His opening statement, that he ‘loves Comic Sans’, drew a predictable hiss of outrage from the designers and typographers in audience, but the point Bruno made is that Comic Sans is completely appropriate for its original purpose, comic book style lettering for speech bubbles in the programs MS Bob and MovieMaker

Comic Sans has a characterful letterform that connects, perfect for supporting letter recognition in early learning (and useful for dyslexics too).

So how do you engage audiences visually and emotionally with your brand? What are the essential elements that make your brand unique? How do you create bespoke tools that set your brand apart?

The challenge presented to branding in the global marketplace is maintaining the brand look and feel across all touchpoints in all markets.

Think ‘international’, and designers reach for their tried and trusted sans serifs, but where’s the emotional connection in the international style?

Remember that the ‘modern’ typeface Helvetica was cut in the 1950’s (itself based on the grotesque faces of the late Victorian 1900’s), putting Helvetica well into middle-age.

Instead, make an informed choice of typeface, one that expresses your brand values and connects visually and emotionally with your audience, a typeface that can be placed right at the heart of your brand.

Global companies, such as HP, see investment in a bespoke typeface as a key part of supporting their brand experience worldwide.

But relying on the Western European character set no longer cuts it. Fonts need to accommodate Arabic, Chinese, Cyrillic, Greek, Indian and Thai characters.

Designing a font for the Chinese market means creating 27,500 glyphs alone and can take up to two years.

And that’s before you take into account Hong Kong and Taiwanese Chinese.

Font design is a major investment, but the recognition value that an appropriate font brings to a brand makes it arguably worthwhile.

Just don’t use Comic Sans unless you’re designing a comic.

camelCase

I’m seeing a lot of camelCase word structures at the moment.

camelCase, also known as ‘medial capitals’ in the OED, is the practice of writing compound words or phrases in which the words are joined without spaces.

The practice is known by many other names, the most common of which is Pascal case for upper camel case.

In UpperCamelCase, each element’s initial letter is capitalized within the compound and the first letter either upper case – as in ‘BlackRock’, ‘MasterCard’ or ‘PowerPoint’, or left as lower camelCase – as in easyJet’ or ‘iPod’.

An early systematic use of medial capitals is the standard notation for chemical formulae, such as NaCl (Sodium Chloride), that has been widely used since the 19th century.

In the 1970s, medial capitals became an alternative (and often standard) identifier naming convention for several programming languages.

Computer programmers often need to write descriptive (hence multi-word) identifiers, like ‘end of file’ or ‘char table’, in order to improve the readability of their code.

It was only in the late 1960s that the widespread adoption of the ASCII character set made both lower case and the underscore character ‘_’ universally available. Some languages, notably C, promptly adopted underscores as word separators (‘end_of_file’) however, some languages and programmers chose to avoid underscores, among other reasons to prevent confusing them with whitespace, and adopted camel case instead (‘endOfFile’).

One theory for the origin of the camelCase convention holds that C programmers and hackers simply found it more convenient than the standard underscore-based style.

Another account claims that the camelCase style first became popular at Xerox PARC. The PARC Mesa Language Manual (1979) included a coding standard with specific rules for Upper- and lower camelCase that was strictly followed by the Mesa libraries and the Alto operating system.

Since the 1980s, it has become increasingly fashionable in marketing for names of technology products (BlackBerry, YouTube), merged companies (PricewaterhouseCoopers, ExxonMobile, GlaxoSmithkline) and for naming your avatar in online gaming (SpongeBobSquarePants anyone?). However, camelCase is rarely used in formal written English and most style guides recommend against its use.

iPhone screen layout

In developing smartphone screen interfaces, the challenge is to fit the core feature set into the vertical screen area. Make the buttons too big and you need to lose some content. Too small and the interface is frustrating to use. But if size matters, how small is too small?

In the case of the iPhone screen (480x320 pixels), the structure of the vertical interface is established using a 44 pixel grid. This establishes the minimum size for a tap target on an iPhone, like a button or a list item, at 44 pixels – about the size of a fingertip touching the screen. By building the standard controls in proportion to that measure, apps can be developed for handheld devices that are actually built for hands, using finger-sized units.

That doesn’t mean that the button graphics have to be 44 pixels high. Instead, whilst a button graphic may be visually smaller, nominally within a 20x20 pixel box, the graphic sits within an active 44 pixel ‘tap area’ that extends beyond the button edges. That way, if touching slightly above and below, or to the left and right of a button, the tap is still registered by the button footprint.

At least one dimension of Apples’ standard controls always fits to this 44 pixel measurement. For example, although the QUERTY keyboard buttons are as narrow as 30 pixels, they still retain the 44 pixel height.

Rows of buttons are then fitted into multiples of 44 pixels. For example, the iPhone home screen organises buttons into rows 88 pixels deep.

Using multiples of 44 provides a natural rhythm in proportion to your fingers and helps establish the look and feel of your interface in harmony with other iPhone apps.

A periodic table of visualisation methods

© Ralph Lengler & Martin J Eppler

Like the London tube map, the periodic table is frequently used as a structure for classifying other collections.

This classification of visualisation methods works surprisingly well and displays some useful visual examples on rollover.

Visualising data II

Practical steps for good visualisation
In my previous post on Data Visualisation, I highlighted the four key principles for good visualisation:

• Design for your audience: Think about how to emphasise the key point(s) that you are trying to convey to this audience with this particular visualisation
• Accurately represent the data: The visualisation should show the underlying data without distortion, and avoid common pitfalls that obscure the real information.
• Organise the information: The visualisation should have a clear purpose - communication, exploration, tabulation or decoration.
• Keep it clear: The visualisation should focus on the message(s) for the audience, and all visual clutter kept to a minimum (except where useful to highlight key points).

What does this mean in practical terms? For each principle there are a number of basic steps that can be taken to improve your data visualisation. Some of these are straightforward to implement, for example ensuring that you are not using decorative effects that hide the data. Others require more work, for example testing your visualisation with key audiences.

Design for your audience   

• Test your visualisation with your key audience
• Know when to use dynamic tools, when to use charts, and when to use tables
• Limit the number of categories shown in a visualisation - be selective in what you present in order to emphasise the key message(s)

Accurately represent the data   

• Don’t distort the scale to give undue weight to statistically insignificant data 
• Keep the zero on the axis scale
• For bar-charts, set the base of the bars to zero (not the lowest value)
• Avoid varying the size/area of objects in graphs, except to convey difference in values
• Avoid using line charts where data is only available for a small number of data points

Organise the information

• Bar graphs are good for showing how data changes over time.
• Pie charts are visually simple and easily understood, but can be manipulated to give a false impression.
• Scatter graphs or line graphs are used to investigate the relationship between two variables, providing sufficient data points are available.
• Bubble charts or triangular graphs can be used to show how the relative dominance of one or more factors combined can influence direction of travel.
• Radar or kite charts are good for comparing multiple factors for different options.
• Choropleth/Isopleth maps show areas shaded according to a prearranged key.
• Treemaps display hierarchical (tree-structured) data as a set of nested rectangles.
• Sound and motion can be used to show changes over time, or changes based on dynamic variables.

Keep it clear   

• Avoid using purely decorative effects such as 3D that can hide the data
• When choosing a colour palette, limit the number of colours used and ensure that different colours can be distinguished from each other
• Where colour is needed, use solid blocks of colour and avoid complex fill patterns
• Avoid using strong or bold colours for the background in a visualisation

Visualising data I

Although information design has always been one of the many skills a designer is required to have, the discipline of structuring information is now recognised as a distinct skill set within creative work. Data visualisation, made popular through the Guardian Datablog, is now a central tool in helping people to navigate and explore an increasingly complex data landscape.

Good data visualisation can help researchers and other users to explore datasets and identify patterns, associations and trends, and also to communicate that understanding to others.

Good data visualisations provide an effective representation of the underlying data that illustrates the answer to a particular question. They can inform non-specialist audiences and help decision makers make robust decisions based on the data being presented. Presenting data in this way can support strategic planning, performance monitoring or delivery improvement.

Good data graphics should:

• Make large data sets coherent, and encourage the audience to make comparisons between different data sets
• Reveal the data at several levels of detail, from a broad overview to the fine detail.
• Avoid distorting what the data has to say
• Present many numbers in a small space - but also emphasise any significant numbers
• Help the audience think about the important message(s) from the data, rather than about methodology

Principles of a good visualisation
Good data visualisation is simply another way to communicate with your audience, and the same principles of good communication design applies to data visualisation as with other ways of communicating;

• Identify your key audience;
• Set out the data accurately;
• Identify the point(s) that you want to make; and
• Create the clearest visualisation that conveys that message, using that dataset to that audience.

Design for your audience   
Think about the message that you are trying to convey to your audience with your visualisation - and focus on emphasising this message. Try not to cram too many key points into the visualisation.

Different audiences may need different visualisations. An appropriate design for a visualisation to be used by researchers exploring how economic indicators vary over time and between places may not be appropriate when showing the same data to non-specialists in order to emphasise key economic trends.

Accurately represent the data   
The visualisation should show the underlying data without distortion. For example, axes should always show zero to avoid exaggerating the importance of differences between data values.

Clear, detailed and thorough labelling should be used. Write out explanations of the data on the graphic itself, and label important events in the data.

Don’t try to do everything with one visualisation.
Organise the information in order to emphasise what you are trying to say to the audience. Don’t bury the key messages in a mass of detail.

Set out key points on the graphic itself, and label any significant or anomalous data events - the graphic should speak for itself.

Keep it clear   
The graphic should focus on the message(s) for the audience, and all visual clutter kept to a minimum. But don’t cut out all visual elements - things that emphasise the key message are useful if they help get your points across to the audience

Reduce and refine. Keep asking yourself whether your visualisation suffers any loss of meaning or impact for the audience if an element is taken out.

The next post looks at some practical steps for good visualisations.

Imaginary customers

Designing a successful user experience requires a clear understanding of your audience –their wants, needs, likes, dislikes and likely behaviours. Put together, this information forms a user profile.

If your project has sufficient time and budget, a range of focus groups composed of people who fit the user profile (and there may be more than one) can be used to inform your initial designs and then test each stage of design development. Insights from focus group testing can be used to refine the design and make sure that it resonates with your target audience.

However, if time and budget are unavailable, even a little audience research goes a long way. One of the simplest and cost-effective ways of gaining insight into your audience is to use an imaginary user profile, or persona, created from desk research, project knowledge and a little common sense.

The level of detail that is required will vary depending on the nature of your project, but creating a relevant persona means that you and your team always have a touchpoint to refer to when designing. This helps make sure that design decisions remain in line with the needs and expectations of your audience.

The idea is to be able to imagine how a particular user will interact with your design. So if your audience has been identified as a young people not in employment, education or training (NEETs), your persona will outline their likely personality attributes, esteem, sense of belonging, security, and physical needs (based on Maslow’s hierarchy of needs).

• Identify the main audience types by talking to your client and researching their customer base at the start of the project.
• Create a shortlist of attributes including demographics (age, education, gender, location, profession) and psychology (attitude, interests, lifestyle, personality).
• Encourage empathy by giving each persona a name (and a stock photo also helps to bring it to life).
• Share the user profiles with your client and project team.

This fictional user profile represents your audience, and depending on the type of project, you may need three, four or five personas that reflect the range of your audience.

You can now imagine how your personas would interact with a piece of information and use the insight gained to help refine your design and make sure it meets the needs of your audience.

Character archetypes and patterning

Thanks to Dr Janis Wilson from Archetypology for a fascinating presentation at Wednesday’s Language Consultancy Association event, The Archetypology of Brands.

Archetypes are derived from neuroscience, psychology and classical studies. Essentially they are groups of certain personality traits and behaviours that can be recognised, categorised and expressed as a persona.

These personality traits and behaviours are laid down in the subconscious brain as ‘loose patterns’. The power of these loose patterns is that the brain is programmed to respond to stimuli that are a close fit. If your message is a close fit to the pattern, it triggers a response that requires fulfillment. If your brand offers this fulfillment, then the loose pattern is reinforced in a feedback loop that is now conditioned by your brand message.

In simple terms, you can use a structure of 12 classic archetypal characters – Innocent, Regular guy, Caregiver, Explorer, Hero, Outlaw, Lover, Creator, Ruler, Sage, Jester and Magician - to describe both your customers and your brand. In theory, if you know what your brand character is, and whom you want to talk to, adopting the correct tone of voice for a conversation between the two archetypes triggers this patterning and helps you to deliver your message. The key is to use the appropriate language between brand and audience archetypes to trigger the loose patterning in the subconscious.

Where it gets interesting is the knowledge that people move through all 12 archetypes at different life stages (although they will have a preferred archetype that they return to), whilst successful brands tend to stick with the same archetypal character.

Then it gets more complicated.

Each archetype has a number of sub-archetypes, and within these are a number of different, sometimes opposing behaviours.

So character archetypes can have a dark side. When a brand expression loses its way it tends to exhibit these opposing behaviours. This could explain why successful brands, for example, British Airways, BP, Coca-Cola, Gap, sometimes get it so wrong. The message no longer resonates as it disrupts the expected pattern. Returning to their archetypal character normally sees the brand refreshed and revitalised as the fit with the audience archetype loose pattern is restored.

As brand strategists, brand managers and copywriters, you can leverage these patterns to connect with and influence your customers.

Chickens and eggs

An interesting way of describing the relationship between a brand, a campaign and a creative brief courtesy of TBWA London’s Executive Creative Director Dede Laurentino at MediaPro 2011.

Think of a chicken laying an egg.

Think of the chicken being the big idea and an egg being the creative expression of that idea.

A big idea serves a brand in all its expressions, whether they are internally facing (like newsletters or HR policy etc.), or externally facing (like posters, TV, website etc.). A big idea produces any number of eggs for the lifetime of the campaign.

However, a creative brief only addresses one element of the brand, one egg at a time.

But surely for a campaign to work, the same creative expression must apply to all eggs so that everything looks the same?

No.

And I can give you 26 reasons why not.

Think of an alphabet.

There are 26 different letters in the alphabet. In different fonts. In different colours. 26 different creative briefs.

Put them together and they still work to deliver a message. An integrated campaign. On brand.

If the letters are all the same beautifully crafted letter ‘A’, in the same font, in the same colour, then there is consistency. But there is no communication.

So no matter how many different creative treatments are produced, they all need to remain true to the big idea. To the brand.

That is why the big idea is like a chicken.

Allow a chicken to thrive, and you’ll keep getting new eggs.

It’s the chicken that comes first, not the egg.