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.

UBS - asking the right questions

UBS is a global firm providing financial services to private, corporate and institutional clients.

Their new brand strategy aims to adopt a more thought-provoking and personal approach to clients with a clear tone of voice that cuts through the clutter of a busy financial marketplace.

The rebranding is a full redesign that includes all elements apart from the logo, using both sight and sound with the introduction of an audio tone developed in conjunction with Leicester University.

The first expression of the new brand is a new campaign that demonstrates the power of a simple proposition - the first step to making the right choices is focusing on the right questions.

Client insight and research into what motivates clients across countries and across all client groups identified that some questions stay pretty much the same.

Thus questions form the foundation of the creative concept.

The narrative structure poses questions from different life stages - family, our values, the impact we have on other people - and suggests that asking the right questions can make things a little clearer.

The brand film of simple black text on a while background shows hypothetical questions asked by clients, whilst press adverts, using images shot by Annie Leibovitz in a muted colour palette, present personal stories as case studies.

The questions and case studies form a powerful story arc that engages the viewer by allowing them to project their own answers into the narrative.

And of course there’s a great emotional hook at the end.

A simple concept, based on solid research, well structured, gracefully executed.

Google Mobile App UX Principles

I do like a good UX framework, and Google’sMobile App UX Principles document uses practical examples to demonstrate how to improve the user experience of apps. The effectiveness of user optimisation strategies are illustrated using metrics such as app performance and user conversion on both Android and iOS platforms.

Adopt, Use, Transact, Return

In designing an app, you need to work hard to meet the expectations of users who are becoming accustomed to high quality apps that deliver usable, robust, and sometimes delightful user experiences.

Investing time and effort in creating, testing and optimising services can have a significant effect on how ‘sticky’ your app becomes.

The basics that need to addressed include optimising conversion, and avoiding interrupting users, or forcing them to think about things that should be simple. Google expresses this as a four-stage ‘Adopt, Use, Transact, Return’ framework.

Adopt, Use, Transact, Return

Adopt - Remove roadblocks to usage  
Remove all roadblocks to usage - and adoption - of your mobile app. Get users into the content / substance as quickly as possible, so that they can use, assess and experience its value to them.

First impressions count, and a splash screen gives you a short but vital window to engage a user in your proposition. But, never make users wait.

Tips / help or an onboarding sequence should only be employed if really necessary - so as not to interrupt users - but when used appropriately at key decision points, tips/help can guide the user in their initial experience and adoption.

Use - Make conversion decisions simple  
Enable people to use your app in the way that suits their needs. A clear structure combined with an excellent search facility using a range of methods, from keyword to product scanning and image search, will help users find what they want quickly and easily, satisfy their needs and drive conversion.

Transact - Provide the ultimate in convenience
Help users progress through each checkout stage with minimal effort, and with sufficient reassurance, to convert without hesitation.

Return - Self service, engagement and delight
Be useful, to engage and delight, in order to retain customers or encourage member loyalty. Because, mobile apps are the most appropriate touchpoint for repeat interactions and frequent transactions, customers and members already loyal to a brand, and mobile first use cases (that couldn’t exist without unique smartphone services leveraging rich and contextual data; etc.), are more likely to return if an app provides an engaging experience.

What not to do

Do not mimic UI elements from other Platforms 
Design for each native mobile platform – Android and iOS - because each has unique capabilities and visual languages

Do not use underlined links 
Avoid using text with underlined links, which are part of the web / browser / page model, and not part of the app / screen model. Apps use buttons, not links.

Do not take users to the browser
Keep users in-app at all times, to maintain their spatial geography and to optimise conversion.

Do not ask users to rate your app too soon after downloading it
Avoid interrupting users by asking them to rate your app if they’ve only recently downloaded it or only used it a few times. Instead, wait until they prove to be repeat users and they’ll be more likely to rate your app favourably and provide more informed feedback

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.

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.

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.

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?

Phonebloks

On Tuesday 29th October the Phonebloks video will ping across social networks 375 million times.

Phonebloks is a new concept for a mobile phone with a replaceable screen and easily moveable, changeable “bloks”, each containing a different element such as battery, chipset, gyroscope and so on that would give users a chance to choose from a range of components, and replace or upgrade them when necessary.

A phone only lasts a couple of years before it breaks or becomes obsolete. Although it’s often just one part that killed it, we throw everything away because it’s almost impossible to repair or upgrade.

The idea, by Dutch designer Dave Hakkens, came about when Hakkens realised that if a device could be taken apart and restructured more easily it would last much longer (and minimise electrical waste).

And so the idea of Phonebloks was born.

Phoneblok is made of detachable bloks. The bloks are connected to the base which locks everything together into a solid phone. If a blok breaks you can easily replace it; if it’s getting old just upgrade.

Bloks can be developed for specific needs. Solar powered batteries, sensitive screen for blind people, lightweight for travelers etc.

“Let’s say this is your phone and you do everything in the cloud - why not replace your storage blok with a bigger battery blok?” says Hakkens. “If you’re like this guy and love to take pictures, why not upgrade your camera?”

The bloks themselves would be available from a ‘Blokstore’, like an app store for hardware. In the store you buy your bloks, read reviews and sell old bloks. Small and big companies develop and sell their bloks. You can buy a pre-assembled phone or assemble it yourself by selecting the brands you want to support. The choice is yours.

And the platform can be adapted into other sizes to create new devices like tablets, cameras etc.

But at the moment, it’s just an idea.

For Phonebloks to happen, it totally depends on companies thinking there is a market for it, so the more people that are interested, the sooner companies start working on it.

Unbuntu open source font project

Following on from Bruno Maag's presentation on fonts and branding, I wanted to find out more about Dalton Maag's Unbuntu* open source font project.

Unbuntu is a free to use open source operating system developed by Canonical.  What sets Unbuntu apart from other open source projects is the aim of creating for the user a friendly and consistent experience from code to graphical user interface (GUI) to print.

Part of Canonical’s design philosophy is to ensure that users can use programs in their own language, so the font used for the operating system (OS) needed to work across a range of character sets including Arabic, Cyrillic, Greek, Hebrew and Latin and is designed so it can be extended to include other languages including Chinese, Indian and Thai.

Establishing the nature of a font requires a structured design framework to inform each stage. The difference with this project was the involvement of the Open Source community throughout – essential to influence the process and confer a sense of ownership. The design process had to be completely transparent with a flow of information in both directions.

As a core part of the Unbuntu brand identity, the new typeface needed to embody the Unbuntu values of clarity, lightness and simplicity, so early in the design process Dalton Maag established that a humanist sans serif was the most appropriate look and feel for the font.

This decision was in part dictated by the required functionality of the OS; the need for the font to work on screen at small sizes meant avoiding anything too elaborate or too wide.

Humanist fonts have their roots in early round hand calligraphy, and are seen as friendly, warm and highly legible. The clean lines and large x-height of a sans serif help with on screen readability, print well and have a contemporary feel.

The initial concepts were designed using a small number of glyphs, but enough to be able to create test copy, and get a good idea of what the finished design would look and feel like. Beginning with the Latin, Dalton Maag started designing with the four letters, n o H O, and these glyphs helped to define a guide for around 80 percent of the remaining character set.  The distinctive shapes for the ‘n’ and ‘v’ and a slight curvature to the ascenders and descenders helped establish the overall personality of the font. These unique design features would be translated across all the character sets to ensure that the design was a complete and consistent family.

The final font design includes four weights from light to bold plus their italics, a monospace font and a condensed regular.

The italic versions were designed as true italics where the a,e,f and g have different shapes that add subtle emphasis and textural difference to the roman text.

The designers also needed to consider the spacing between letters, as this creates a natural rhythm in the text that helps the reader to read with ease and understand the message. Manual adjustments, including kerning pairs, were addressed to ensure that the finished look was aesthetically pleasing.
Cultural sensitivities and nuances also needed to be taken into account for the left to right reading Arabic and Hebrew fonts. Arabic glyphs are derived from one another, but change meaning with the addition of diacritics, whilst Hebrew letterforms have a squarer feel and ‘hang’ from the x-height rather then sitting on the baseline.

Dalton Maag’s engineering team then performed a complex process to ensure that the font rendered on screen correctly. This included a checking and verification process to make sure that it met TrueType specifications, the addition of Unicode system information to identify each glyph co-ordinated across all the font styles and weights, and extensive manual hinting to make the font appear faithfully at any resolution on any device.

Finally the fonts were tested in a number of different environments and applications to check that they behaved as intended before being released.

The final design is a beautiful example of typographic design. It gives shape to the Open Source philosophy of Ubuntu, whilst remaining functional and aesthetically pleasing.

Exhibited in the Design Museum, the Unbuntu font family is a practical example of how a the partnership between the Open Source community and professional type designers can use the power of design to produce something valuable for everyone to use.



*Unbuntu is named after the Southern African philosophy of ubuntu, which often is translated as “humanity towards others” or “the belief in a universal bond of sharing that connects all humanity”.

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

The Big Draw 2012

At the V&A for The Big Draw, I attended one of the seminars given by Heatherwick Studios.

The main theme was about the importance of sketching in order to structure your design thinking.

Guggenheim Bilbao - Frank Gehry

Quick sketches made with your client on site are a great visual shorthand that can be developed later in the studio. The challenge is to keep the energy of those initial sketches as the design goes through various iterations and refinement on drawing boards, computer and CAD systems.

Sketching elevations and floorplans, page layouts or wireframes conveys much information that would be lost if the same information was provided as a narrative. Sketches are easier for both the layman and expert to interpret and so understand the vision of the designer.

East Beach Cafe - Heatherwick Studio

And with the increasing number of competitions and awards that require a story arc, anecdotally, many designers are going back at the end of a project to retrospectively create that all important ‘back of the napkin’ sketch that inspired the project in the first place (with apologies to Renzo Piano).

The Shard - Renzo Piano

Now, where did I put my pencil…

Olympic User Experience and Design

A great piece from the BBC's Nick Haley on the design thinking that has gone into delivering the BBC Olympic project across desktop, tablet, mobile and connected TV.

18 months in development, the design needed to accommodate the core sports audience as well as those who only become interested at big sporting events. The content structure builds on the design language already established by the BBC's UX team, but adds extra layers of detail as you drill down.

Extensive user testing was used to help the BBC team understand how people wanted to interact with the Olympics and to refine the placing of key information.

Illustrated with some initial post-it note sitemaps development sketches, this is a great case study for students of UX design.

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 III

A Structural Model for Choosing Visualisation Formats
In my previous posts on Visualising Data  and Practical Steps for Good Visualisation, I defined good data visualisation as something that can help researchers and other users to explore datasets and identify patterns, associations and trends, and also to communicate that understanding to others.

There are three different aspects to the way that visualisations can be used to communicate, so the final format of your visualisation should be informed by where it sits in the visualisation space (adapted from work by MacEachren on how people use maps):

• Communication or understanding: Is the visualisation presenting/communicating known information to an audience, or revealing unknown trends?
• Interaction: How is the user able to interact with the visualisation?
• Audience: Is the visualisation intended for public dissemination (eg, to a general audience), or private use (eg, by more technical audience)

After MacEachren (1994)

The diagram above shows these three aspects plotted in a three-dimensional cube, which shows how different types of visualisation can be classified by the way that they are used.

For example, visualisations that lie in the furthest-top-right corner are those that are primarily intended to communicate information to a general audience in a non-interactive way, such as presenting performance data to citizens using printed (or PDF) reports. Visualisations in the lower-bottom-left corner are those that are designed for specialists to actively explore and analyse information, such as using spreadsheet data to identify patterns.

Know who your audience are and what the message is that you want to convey, and design your visualisation accordingly.