textwrap

running words around
design education and visual communication
authored by chris m hughes

Postmodernism: Style and Subversion 1970-1990

Wednesday, 28 September 2011

Postmodernism at the V&A


At last - a comprehensive exhibition about a movement which remains almost too pretentious to discuss in public, even if you were there when it all happened, and understand it perfectly.

Being in London to see three of my students pick up YCN Awards, I managed to find time to get across London from Shoreditch to Kensington to the V&A to see Postmodernism: Style and Subversion 1970-1990.

In a rather dark enclosed space (by V&A standards), gaudy neon arrows point the way through a series of sets comprising a visual and audio history of art and design during the latter quarter of the 20th century.

From the Memphis Group and their deconstruction of modernist architecture, to the splatter, pomp and shoulder pads of new wave fashion, the rule-breaking self-expression of print design at the height of Thatcherism, and the endless parodies, facsimiles and fractured reworkings of high culture - the V&A have assembled a sort of frame-by-frame VHS video walk-through of what happened after the death of Modernism.

Along the way there are some amazing highlights. Three film sequences comprising the opening scene of Ridley Scott's Bladerunner; a clip from Koyaanisquatsi, and Laurie Anderson's 'Oh Superman'; iconic imagery of Grace Jones; David Byrne's oversize suit; photography by Andreas Gursky; huge quote from Martin Amis' novel Money in foot-high bold condensed Helvetica, and finally, a graphics room featuring Wolfgang Weingart, Paula Scher, April Greiman, Barney Bubbles, Neville Brody, Malcolm Garrett, Vaughan Oliver and Peter Saville.


'Wet' Magazine, April Greiman/Jamyne Odgers, 1979.



Grace Jones 'Island Life', 1985, by Jean Paul Goude.



Ultra Vivid Scene, 1988 - Vaughan Oliver.



Jenny Holzer - Times Square, 1970's.


Each room adds to the cerebral eclecticism of the exhibition. We can argue about what postmodernism is or isn't, but I am left with two satisfying affirmations, and one stark realisation about this remarkable show.

Firstly, that postmodernism was an accidental movement, driven by protagonists who were unaware of what they were actually contributing to. They were messing with what they knew, and making it up as they went along. Jenny Holzer's brilliant tagline 'protect me from what I want' epitomises the irony that took itself seriously. These words are still dangerous to read, and feels somehow subliminally buried in almost every ad you see on TV and in the street, here and now in 2011.

Secondly, that postmodernism, regardless of how it is defined, really did create 'no space between the avant garde and commercial spheres'. Here was the art movement which nobody could understand, but could all buy into. Whatever came after Modernism embraced the mainstream without any discernible concessions, dilution or apologies.

I grew up during the late 1970's and early 1980's, and can testify that this exhibition is recognisably authentic.

In the graphics room I was able to tick off the artefacts I own copies of - albums sleeves for Kraftwerk, Buzzcocks, Elvis Costello, Joy Division and Ultra Vivid Scene, a copy of the Face. And in the bookshop afterwards - novels by Bret Easton Ellis, Thomas Pynchon, William Burroughs and Umberto Eco, and half the design books in our studio library.

But my main realisation, and minor epiphany, is the unspoken conclusion of this exhibition, exemplified in Alessandro Mendini's strange three piece suit, covered in the famous brand logotypes of the day : that postmoderism was the last gasp of the analogue world and the first breath of the internet age.

In this exhibition there are no webpages, apps or compressed video clips. No tweets, urls or photoshopped jpegs - merely the hint of the gargantuan new brands which would appear in the 1990's - Sky, Google, Microsoft and Apple. Postmodernism came before these things, but it laid the groundwork for everything that has happened since.

In the end, this exhibition, which is worth every penny, will tell anyone who cares to discuss it, that postmodernism was in fact predigitalism. And it was a lot of fun.

Taking the Proverbial

Monday, 19 September 2011

One of my recent graduate students, Gill McColl, has had some surprising success with her final project - 'Take The Proverbial'. The project was intended to be a homage to retro-typography and traditional print processes such as letterpress.

The twist was that Gill would rework a list of common proverbs into more contemporary tones and meanings. The combination of quirky copy and classic typographical mixes produced some memorable designs.


Taking the Proverbial

Taking the Proverbial


Gill's work now has its own e-commerce website, and a distribution deal in a number of high profile shops and galleries, where the prints have been selling amazingly well.

Take The Proverbial recently made the pages of the Scotsman Supplement, and this week has featured on Computer Arts Magazine's blog, where Rob Carney, the editor of Computer Arts, posted a great review of the work and included some nice quotes from Gill about her work.

Gill has been working with the Touch Agency in Edinburgh and is currently working freelance.

More:
Take The Proverbial@Computer Arts Blog

Demystifying Responsive Design

Wednesday, 14 September 2011

screen sizes example
One of the current industry buzzphrases at the moment is 'responsive design', and its definitive statement-of-intent was expressed by Ethan Marcotte in his seminal article 'Responsive Web Design', back in May 2010.

Since then Marcotte has published a well-received and extremely useful book on the subject, and the industry has perked up its ears.

Rather than being a bona-fide technique, 'responsive' design is more like a philosophy which has gradually emerged in reaction to the issues posed by the diverse range of screen sizes, resolutions and devices which now display web pages. In a nutshell, a web design should embrace the limitations of each device and display a 'version' of itself to each device and its user.

This notion that a single web design should present a coherent visual style across all devices is, on the face of it, hugely ambitious. It makes the browser wars of the late 1990's and early 2000's sound like a walk in the park in terms of effort, technical know-how and good old-fashioned patience. But the advent of html5, and css3 in particular, mean that responsive design is achievable and reliable so long as web designers bring a new set of best practices to the design process.


Techniques
Some of the key aspects of responsive design will be familiar to many web designers, including students in my classes, because in essence they are all just examples of good practice and good accessibility, and have been around in various forms for a number of years -

1.a fluid (or semi-fluid) column grid layout
2.device-specific stylesheets
3.resizeable images
4.media queries

Brought together, these tweaks allow a web page to dynamically adjust to the size and resolution limitations of whatever device it is served up to.

Options
In practice, designers are using either of two techniques to display versions of their designs to each device. The first technique is to use a media query in the head of the document that identifies which type of device is viewing the page. A specific stylesheet created for that device is then loaded. A simple css example would look like this:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 800px)" href="layout2.css">

The media query specifies a media type (screen), and a media feature (max-device-width), with a related value (800px).

In the example, layout2.css will be used to serve up the webpage until the browser size goes beyond 800px, at which point a different stylesheet (and hence an adjusted layout arrangement) would take over.

We could add another media query to this, such as -

<link rel="stylesheet" type="text/css" media="handheld" href="layout3.css">

This time, layout3.css is loaded to display on a handheld device. Other stylesheets called in the head of the page, like layout2.css, are ignored.

This use of dual stylesheets can also be combined with the 'orientation' media query for the iPad and some tablet devices. For more on this, you can refer to my recent post on this subject, together with the sample css. A related approach to this idea uses the @import rule, which imports a stylesheet when a particular device sizing is called for.

But what becomes apparent is that you need multiple stylesheets, and a variety of media screen queries to satisfy each device. Which all sounds a bit version-messy and time consuming.

A more elegant and streamlined way to accomplish this is by using css3 to create media queries on the fly inside a single stylesheet.

The rule is called @media, and all that needs to be done is to list an alternative set of values for any existing div id or class that's already in the stylesheet -

@media screen and (max-device-width: 800px) {
#wrapper {
width:780px;
}
}

In this example, as soon as the browser size is reduced to 800px, the wrapper is displayed at a new width of 780px. Everything inside the wrapper, e.g. the header, the menu, font-sizes and so on, will be re-organised automatically if the values have been expressed as floats and percentages in a fluid grid.


What all this achieves
Ideally, a single website based on responsive design will produce a range of visual versions across various devices. This example is a particularly good one - Sparkbox.com -

sparkbox device layouts


When the user resizes their browser window, the site will adjust to display whatever version fits the device size. To see this in action, simply reduce the size of your browser right now on textwrap.net to 800px and then down to 480px and see what happens.

This all sounds like hard work, but it delivers a seamless viewing experience across a myriad of devices, and satisfies branding guidelines. It also establishes two pieces of best practice that will become standard in the industry.

Firstly, that a selection of designs at various scales and layouts are created during the development of the site, both as visual mock-ups and as demos. Designers will start looking for a sense of visual unity.

Secondly, that a set of pre-defined alternative values for id's and classes are written in tandem as the layout is created.

From a purely design viewpoint, we should all be celebrating, because more than ever, print-based paradigms will become the dominant visual aspect of responsive design.

Typography, proportion, whitespace, vertical rhythm, and economy of content will trump animated banners, multiple options, jqueried menus and image galleries. Responsive web design will introduce a new form of controlled minimalism to web design. It will also redefine the limits and usefulness of branding guidelines.

For web design, the focus has to be on the future. Apparently, by 2014, more than 50% of all websites will be viewed primarily on a mobile device.


More:
Responsive Web Design @ smashingmagazine
StunningCSS3 Media Queries
Buy Ethan Marcotte's book

TYPO Conference

Monday, 12 September 2011

London is buzzing with Design events this autumn. As well as the London Design Festival, which is currently on at the V&A, and the YCN Student Awards (which I will be attending later this month), the capital will host the return of Europe's foremost design conference, TYPO.

Following sixteen successfull years of TYPO Berlin, TYPO London is a three day conference on graphic design, typography, publishing and communication, and features an amazing speaker programme full of A-listers from the world of visual communication. The list includes design pioneers Neville Brody, Michael Bierut, and Erik Spiekermann, and the likes of Gary Hustwit (director of HELVETICA and OBJECTIFIED), and Eva-Lotta Lamm (the former design lead at Skype).

This short film on the TYPO Blog documents the history and background of the event -



As well as a website to promote the event, there is also an interesting TYPO Blog with lots of updates and speaker information as it happens.

As usual with these events, the only downside is the cost of attending, which is around £650 for a Professional Ticket and £250 for a Student. Steep but in all probability, well worth it.

More:
TYPO Blog
TYPO @ Twitter

Diet Coke is OK

Friday, 2 September 2011

Diet Coke OK Packaging

Creative Review this week posted a nice set of images showing Turner Duckworth's rebranding of Diet Coke.

The new packaging will apparently only be with us for a short time, as a limited edition campaign, and features a cropped detail of the Coke logo wrapped around the can. Put two of the cans together and the word 'OK' emerges across the tins.


Diet Coke OK example

In most circumstances it would be risky reducing brand visuals by displaying a partial piece of a logo, but this is Coca Cola we are taling about, and even a single ascender on one glyph of the typeface is enough to be instantly recognisable. And it looks great on the silver can.

Sticky Fingers and Squares

Thursday, 1 September 2011



From the huge offices of Montreuil, home to gaming giant Ubisoft to the business district of La Défense, and to the technology uarter of Issy-les-Moulineaux, a new war has broken out between Parisien office workers, and its being fought in full public glare.

This war is in fact a corporate collage contest known as 'La guerre des Post-it' (the Post-it wars). The battle is between disparate groups of bored, lazy and imaginative office workers who have all somehow stumbled upon a lunchtime game of sticking thousands of pink, yellow, orange and green post-it notes on their windows to create various pixelated images.

Apparently (and you couldn't make it up) workers from competing firms meet at lunchtime to compare their creations and plan exchanges. ether workers who would not otherwise have met.

And its in the aforementioned Ubisoft that office manager Emilie Cozette is credited with inventing the activity. The Guardian reports that his latest effort extends over three floors and contains upwards of 3,000 Post-it notes. Collage is enjoying a strange renaissance.