textwrap

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

AI ->Canvas

Wednesday, 21 December 2011

As HTML5 support broadens out across the various browsers and devices, its becoming clear that it can do almost anything, including some stuff that designers could only have dreamed about not too long ago.

One great example is AI->Canvas, an Adobe Illustrator plug-in (from Microsoft’s MIX Online) that can export vectors as HTML5 to render as SVG static and animated images in a webpage.

Before you blink and rub your eyes, here's a different way of saying the same thing - you can create illustrator artwork and export it directly into a webpage. And if the vector features complex artwork like Gaussian blur, drop shadow and so on, the plugin rasterises that part of the work.

Ai->Canvas is able to export complex shapes, fill styles, line styles, gradients, transparency, native text, bitmaps, pattern fills, symbols, drop shadows, and more.

It supports rotation, scaling, fading, opacity and keyframe movement along a path. For more advanced useage, triggers can be added that start one animation when another animation completes. Sounds a lot like Flash, doesn't it?

This is all possible because of HTML5's rather amazing canvas tag, which allows for dynamic, scriptable rendering of 2D shapes and bitmap images.

Check out more on the AI-Canvas site, and download the plugin (oh did I mention its free).

Moving into the future with Dynamic Branding

Monday, 5 December 2011

The famous blurred Tate logo, designed by Wolff Olins, regularly appears in lists of the 'greatest logos of all time', but in a precursor to the way brands are developing, Design Week reports that the Tate is about to launch a new moving image brand identity.

Double G Studios, the London-based animation and video supremos, developed the moving image logo to reflect the Tate's continued support of film and tv arts coverage on its own Tate Channel. A video of the result isn't currently available, but there are a few stills of it -



To some extent TV has pioneered this already, with BBC, Channel 4 and Sky in particular flirting with dynamic branding, where the corporate identities ardynamic and only ever partially in complete view. So its only a matter of time before the bigger brands and organisations unrelated to broadcasting decide to go down this route. It just takes a few early adopters to start the ball rolling.

The trouble is that this sort of re-branding won't come cheap. You can't just fiddle with an established corporate identity and just animate it. Dynamic branding will mean devising and creating a whole new visual concept across all forms of media. Clients will be taking a risk, so they will be looking for cohesion and clarity as well as stunning ideas. A recent example is the re-branding of Swisscom, and here is a great video clip of the design process that produced one of the first truly dynamic brand identities -



There is plenty more to look at and read about this ground-breaking project at Moving Brands Agency website.

Does this mean the end of the static logo? Probably not, but it does mean a great deal of new opportunities for graphic and digital designers, and whatever happens, eventually we can count on the new retro look - the simple, static, black and white logo - and we'll almost be back where we started.

On The Road Amplified Edition

Monday, 28 November 2011

On the Road Amplified Edition


The long-awaited movie adaptation of Jack Kerouac's 'On The Road' is due out soon. So long in fact that, remarkably, the definitive document of the Beat Generation has gone from famous 120-foot scroll of typing paper to the very latest digital format, an iPad App, before finding its way onto the silver screen.

Penguin's 'amplified edition' has a great cover, awesome subject matter, and contains lots of interactive features detailing the book's story, the Kerouac mythology, and the associated American literati of the time. And of course the rest of Kerouac's canon is just a click away, with user-friendly 'one-stop access' to Penguin's catalogue.

Not the same as owning a battered copy of the novel, but nicely done, and a great project to be designing for. Let's just hope the film captures at least some of the magic of the book.

D&AD On Tour - Edinburgh

Sunday, 20 November 2011

D&AD will be celebrating their 50th year in 2012, and with their new project briefs hot off the presses, this is the time of year when the organisation tours the Universities and Colleges of the UK, spreading the word of its amazing Education Network, and delivering workshops, lectures and seminars to the creatives of the future.

D&AD is 50

These events are also a chance for tutors from the various institutions to meet and get talking about the issues of the day.

This year D&AD's education event was hosted by Edinburgh College of Art (ECA), where students and tutors from ECA, Edinburgh's Telford, Edinburgh Napier, Newcastle and Sunderalnd were present.

We took along a contingent of 20 HND students, and as well as a cool industry-led workshop, and a series of portfolio surgeries, they were treated to a great lecture by Jack Renwick, the former Creative Director at The Partners, the UK's leading Branding Agency. Jack has just set up her own, as yet un-named agency, and had all sorts of advice, insights and amusing anecdotes about the world of graphic design.

As well as showing some great samples of her innovative work at The Partners, she talked about the importance of team-work, nurturing client relationships, developing creative ambition, and having fun thinking for a living.

The tutor round-table meeting, chaired by D&AD's Head of Education Rhiannon James, featured Dave Ward from Realise, Edinburgh's leading digital agency, presenting 'Up-Grade' - an industry/education initiative piloted in collaboration with Edinburgh's Napier.

The project gave a class of undergraduate designers a six-week placement at the agency, shadowing key figures in the organisation and developing a short digital project with a virtual budget of 50K. Realise hope to roll out this model of employer engagement to other institutions.

Our HND Year 1 and 2 students will be assigned D&AD project briefs during the first week of January 2012.

Museum Lates

Saturday, 19 November 2011

My HND 2 class have just finished 'MyType' - a brief to attract twentysomethings to a aeries of late night exhibitions and happenings at the National Museum of Scotland (currently running as 'RBS Museum Lates').

Our group of industry mentors mentors were involved in art direction on these projects and provided lots of useful and constructive criticism during the design process.

Samples of kinetic type and interactive apps found their way into some of the solutions, and here are a few nice examples -


Who Killed Gill Sans?
Steven Brown - guerilla ad for 'Who Killed Gill Sans?'


Day/Night - Kat Rebacz
Kat Rebacz - A Day/Night of Type Adshel Posters


Xpresn - Jordan Porteous
Jordan Porteous - a night of xpresn


Fairground Type, Michael Kerr
Michael Kerr - Fairground Type








Nic Cameron; wordplay invite

18 Essential Design Quotes

Friday, 18 November 2011

Textwrap has undergone a few cosmetic changes, primarily to increase its responsiveness across various devices, but also to prepare for a full switch to html5 (which the hosting tool Blogger can't currently support). One casualty of this has been my sliding jquery quotes, so I thought they deserved a post of their own - eighteen essential design quotes by a selection of visual communication's true pioneers. In no particular order -

Less is more unless it's less. Then maybe more really is more.
Paula Scher.

Working in one typeface is like writing a novel with four words.
Stefan Sagmeister.

Why be inhibited by the edge of the page?
Neville Brody.

I work into the future with no preconceived direction.
Wolfgang Weingart.

Order was always wishful thinking for me.
Joseph Muller-Brockmann.

We need the machine because we have no time.
Wim Crouwel.

I'm astonished that things can still amaze me.
Milton Glaser.

Discipline and freedom are elements of equal weight.
Armin Hofmann.

The real meaning of form is made clearer by its opposite.
Jan Tschichold.

Enough of depicting - now it is time to build.
Rodchencko.

The Mac is just another kind of pencil.
April Greiman.

The creative process can be reduced to the art of selection.
Karl Gerstner.

Technique is just a means of arriving at a statement.
Jackson Pollock.

The line has almost become a work of art in itself.
Van Doesburg.

Everything starts from a dot.
Kandinsky.

Don't mistake legibility for communication.
David Carson.

What you see is what you see.
Frank Stella.

It's harder to be heard now with everyone talking at once.
Malcolm Garrett.

The Cola Wars

Wednesday, 16 November 2011

Here is a fascinating infographic from Business Insurance Quotes, which depicts the timeline of the never-ending battle to lead the drinks market between Coca-Cola and Pepsi.

The infographic, styled in a retro palette featuring both famous liveries, looks at the early years of the rivalry, the stock prices from 1977, various acquisitions of both companies, and plenty of useful branding comparisons. Statistics make great subject matter.


The Cola Wars
Source : Business Insurance Quotes

Sagmeister's Happy Film

Sunday, 9 October 2011

Happy film screenshot

At the recent AGI Conference in Barcelona, Stefan Sagmeister gave an interesting talk about his new project, "The Happy Film", in which the New York-based designer tries to explore his own well-being.

In this documentary, Sagmeister will work closely with a group of health professionals to monitor his happiness (or lack thereof) as he experiments with meditation, drugs and various other medical therapies.

Throughout the film, Sagmeister’s maxims from his book “Things I Have Learned in My Life So Far”, will function as typographical set pieces that relate to the experiments.

Sagmeister is always looking to broaden out what it means to be a visual communicator, and this project sounds fascinating. Check out the project's Kickstarter page, where Sagmeister explains the ideas - they are running out of money and there are just seven days left in which to reach their goal of $50,000.

Muller-Brockmann reworked in CSS3

Saturday, 8 October 2011

It's important these days that trainee graphic designers can work in print and digital formats, and encouraging this integration can be problematic. I've been devising some new exercises to help students familiarise themselves with the wonders of CSS3 on the web, and at the same time demonstrate the control and beauty of print as exemplified in the International Style.

The idea is to take a classic poster with a format that doesnt traditionally fit in a web layout, and reconstruct it completely in CSS3 and html. In the example we've gone with a classic Joseph Muller-Brockmann -



The two CSS3 properties that will be needed are the transform property, which can rotate elements, and multi-columns, which breaks text blocks up into columns inside a containing block.

The result will work in mozilla, opera and webkit browsers, and the workflow will require a deconstruction of the image into its constituent parts. These are then measured and incorporated into an html structure, and then the css is added to control everything.

Establishing the div structure
1. An image of the poster is placed in Illustrator in an A4 canvas (A4 will sit nicely inside a 1024 X 768 screen when it is converted to pixels, and the resolution of the image is irrelevant).

2. Transform the poster by rotating it until the type is horizontal. This gives us the angle of rotation, which in this case is -28 degrees.

3. Now we can use the rectangular grid tool and uncover Muller-Brockmann's awesome grid for this poster. The poster features a five-column text block, and an empty column to the right of it - so we need six columns. In the vertical aspect, we can also identify six sections, based on grouping two lines of headline type together. And hey presto - a classic 6X6 grid. The grid is divisible by three, giving us a rule-of-thirds guide, and the grid cells help determine the pointsize of the headline text, and the sizes of our containing divs.

4. With the grid in place, we can draw boxes over the design elements to identify the blocks, and then remove the poster - and it will look something like this-



Measure the block elements
Set Illustrator's units to pixels and select the boxes and note down the dimensions. All of this gives us the following results -

angle of rotation - 28 deg
innercontainer - 828px by 668px
headline divs - 74px high
headline font size - 74px
horizontal grid cells - 111px wide
text block section - 560px wide

One further container will be needed, because we are rotating the content 28 degrees to the left, and will require something unrotated in which to house everything. This container will have the same dimensions as the inner container.

Create the html
<div id="outercontainer">
<div id="innercontainer">
<div id="first"/>
<div id="second"/>
<div id="third"/>
<div id="fourth"/>
<div id="columns"/>
</div>
</div>

The css for a horizontal layout
For this we can style the divs and create a single class for the headline text, set at 74px font size. Everything is then positioned based on our horizontal measurements. The grid cell width of 111px allows us to create the padding for the offset starting point of the lines of headline type - for example, 'Stadttheater' starts two grid blocks in from the left, which gives us 222px of padding. The way each word lines up vertically will be controlled in this way.

Intuitive Guesswork

I chose a letter-spacing of -4px to try and emulate the tight tracking of the original. I'm also using Helvetica, whilst Muller-Brockmann used Aksidenz, and have reduced the div heights from 74px to 70px to mimic the tighter leading in the poster.

Adding the CSS3

We'll rotate the innercontainer by -28 deg and break the text block into 5 columns with guttering of 20px. No widths are needed - the container block controls this.

#innercontainer {
width:668px;
transform:rotate(-28deg);
-ms-transform:rotate(-28deg); /* IE 9 */
-moz-transform:rotate(-28deg); /* Firefox */
-webkit-transform:rotate(-28deg); /* Safari and Chrome */
-o-transform:rotate(-28deg); /* Opera */
padding-top:120px;
}

#columns {
margin-top:10px;
height:180px;
width:560px;
-moz-column-count: 5;
-moz-column-gap: 20px;
-webkit-column-count: 5;
-webkit-column-gap: 20px;
column-count: 5;
column-gap: 20px;
font-size:10px;
color:black;
line-height:normal;
letter-spacing:normal;
overflow:hidden; /*for any extra lorem ipsum*/
}

Here is the final result as a screenshot -




And here is the block and topological information, using Web Developer in Firefox -



To make the most of this exercise, I would select a dozen or so posters from the likes of Muller-brockmann, Armin Hofmann and Emil Ruder, each with varying degrees of difficulty in terms of css3 reworking, and ask each student to select three works and replicate them using the technique. CSS3 can also render opacity, curves, shadows, skew and perspective, so the options are wide open, and the results can look really impressive.


View the webpage
Download the css

Retracing the BBC's Global Visual Language

Wednesday, 5 October 2011

The BBC is currently testing the beta version of its continuing Global Visual Language 2.0 project, which began back in 2008 when the corporation reviewed its sprawling online offering, and decided to try and unify its visual and interaction design.

What followed mirrored the general trend in web design in the last few years - wider, centered page layouts, an underlying grid system, and a magazine-style presentation full of larger headline fonts, colour-coded sections, better use of whitespace, and comprehensive accessibility features - and all controlled with css.

The BBC commissioned Neville Brody's Research Studios to create 'a modern British aesthetic', with innovative navigation and structure, a robust content management system, and a more satisfying user experience.

The result was the current module-based layout, launched late in 2009, which will soon be superceded once the beta site is finalised. The new offering will feature an improved content grid, set into a sliding jquery, and even more whitespace. You can read all about the project, and see some good examples of the colour scheme, navigation bars and grid layouts, in a great post on the BBC blog, which I've linked to at the bottom of this article. And here's a screenshot of the beta -


BBC Beta


What makes this continuing design evolution really interesting is that the BBC site contains links to old reportage in the layout and format of the relevant times - and this provides us with an arcane peek into the distant past of web design. Bear in mind that the BBC has always had development money, and each iteration was amongst the best of its time, at least in terms of presenting daily updated information to a broad audience.

To demonstrate this remarkable visual development, we can use a nice story from earlier this week, when the BBC reported on the joint winners of the Nobel prize for Physics. To see this in action, follow the links below in order, clicking back to this page to access each link -

Here is the current page featuring the article. At the foot of the page, there is a short list of related links.

Click on this one first:
Mysterious force's long presence - this is the BBC site in 2006. It has three columns, laid out using tables, and is set to 800px wide. Above the footer are three rudimentary module boxes in a centered position, and blockquotes and floated images feature in the central column. The site also has externally linked css files.

Now go back and choose this one:
Distant supernova shows Universe defies gravity - this is the BBC site in 2001, three columns, laid out in tables and set to 600px wide. Note the column-filling image and right-aligned section menus. All the styles are inline, and Verdana is the dominant font.

And finally go back and click on this one:
Universe's expansion speeds up - this is the BBC site in 1998, a by today's standards, its a real shocker. Three columns, laid out in tables and 600px wide. All the content feature inline styles and clunky table borders. Underlines are the only text decoration on the hyperlinks. This website is looking back almost as far in time as the cosmologists in the article were.

Modern cutting edge web design is moving towards responsive layouts, where media queries are being used to re-orient websites to narrower layouts for the various devices we now access the web on. The effect is not unlike browsing through these BBC versions, although the user experience is almost unrecognisable.

More:
BBC Online @ wiki
BBC's Global Visual Language 2.0

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.

A Rye Smile @ the Marketing Awards

Friday, 20 May 2011

As the summer gets underway, I've been lucky enough to see a number of my students start to pick up well deserved awards. HND 2 student Ross Duncan is a good example. Ross picked up Silver for Creative Student at the annual Marketing Society Awards in Glasgow, on Thursday 19th May.

We actually had two nominees in attendance - Ross and Gill McColl. Both students had already been through a written submission and a presentation with the judging panel for the 'Makers Mark' brief.

The Gold award went to Sophie D'Agostino - a final year student at Dundee, who previously gained her HND in Visual Communication under my tutelege at Edinburgh's Telford.

Ross Duncan - Makers Mark:








More info:
Marketing Society Scotland Star Awards

D&AD InBook Awards

Sunday, 1 May 2011

This year Edinburgh's Telford is celebrating more D&AD nominations. Two of my HND students, Abbie Macpherson and Jonny Paterson, have received an InBook Award at D&AD this year, whilst HND Illustration picked up an InBook for illustrator Daniel Seex.

InBook - Advertising
Abbie and Jonny took on the Aviva brief - to create a campaign to help Aviva get 500,000 children from around the world off the streets and back into education.

As part of this brief, Aviva's agency AMV BBDO also offered a month's paid placement to one of the winners.





Check out the full entry on the D&AD website.


InBook - Illustration
Dan Seex, a final year student in Illustration, has already established himself in freelancing and is due to graduate in June. He tackled the Diesel brief - to create an illustrated interpretation of a musical track that is experienced by the viewer in an unconventional and pioneering way.

Dan chose a track entitled 'In the Belly of a Shark' by English hardcore punk band The Gallows, and came up with a suitably deranged set of visuals in the style he has been developing over the course of the last few years -






Check out the full entry on the D&AD website.

Explosions in the Sky Return

Wednesday, 27 April 2011

There is still some life left in the record cover. Here is the rather amazing coverart for the equally amazing and long-awaited fifth album by Texas post-rock pioneers Explosions in the Sky.

The record was released simultaneously on CD and limited edition vinyl, complete with a quadruple gatefold sleeve that constructs two different three-dimensional rooms. Also included is a huge 36" X 36" double-sided poster which provides the base surface, all put together by the band's resident artist and collaborator, Esteban Rey.










The Gridnik at the Design Museum

Saturday, 9 April 2011


Pic sourced from Creative Review.

London's Design Museum is currently running the first UK retrospective of legendary Dutch graphic designer Wim Crouwel, one of the giants of visual communication, and a devout modernist who anticipated and exploited the arrival of digital technologies during the 1960's and 1970's.

Crouwel's typography and signage (the whole transport system in Holland, for example) have had a huge influence on design since the 1960's.

Spanning more than half a century, the exhibition covers Crouwel’s prolific print output at the seminal design agency Total Design, and features a wealth of great examples of the clean and controlled style that made him so famous.

Crouwel was heavily influenced by Emil Ruder and Karl Gerstner, embracing and then extending the Swiss Style, and he popularised grid-based layouts, which earned him the enviable nickname 'Gridnik'. He also produced some cool typefaces, including Fodor, and the radical but influential New Alphabet -



Crouwel is a regular speaker at design events, and is a highly quoteable character, as this classic clip from Gary Hustwits's Helvetica (2007) shows -




The exhibition runs till July 3rd, and also features these excellent talks and events -

Working With Wim - 9th May
Rick Poynor on Graphic Design in the Netherlands - 23rd May
Pioneers of Industrial Culture with Wim Crouwel - 23rd June
PechaKucha X Wim Crouwel - July 1st.

Safe Is Boring

Here are a couple of interesting typographical experiments by one of my HND students, Terry Smith, who is spending his Easter break on work placement in Edinburgh at the Union Agency.

The first is his project submission to the MPA Roses Awards, which won a commendation. Terry chose brief 8. 'Younique' set by Manchester-based Branding specialists Like A River -

"Great advertising & design connects with its audience. In six steps connect yourself with a hero. Present as a book and show us how unique your are."


Younique 1

Younique 2

Younique 3

Younique 4


The second example demonstrates Terry's approach to creativity. Inspired by a comment made by a fellow student, Terry constructed the words 'safe is boring' in heavy duty cardboard, and then set fire to them -




This year MPA Roses had 337 entries from across the UK. Full details and results on the DRUM's Roses Student Creativity Awards page.

Amnesty at 50

Sunday, 3 April 2011

Today's Observer newspaper features fifty great Amnesty International posters to celebrate the 50th anniversary of the organisation. These form part of an exhibition of Amnesty posters which will be held in the Guardian and Observer building at Kings Place, 90 York Way, London from 4 -28 April, and which is open to the public.





Many of the posters feature direct visual references to political events in the year in which they were designed, and some of them are by renowned artists, including the one shown here by Picasso. Check out the gallery.

Modern Times

Saturday, 2 April 2011



Still on the subject of movies, a short filmed by a friend of mine Ben Craig was recently featured in The Hollywood Reporter as 'this year’s first hot short', and has subsequently had glowing reviews in the likes of Wired magazine and various film websites.

The Edinburgh-based film-maker 
is actually an Art Director at the Union Agency, and has made the cross-over from advertising to film with almost no budget, just a green screen studio, some willing friends, a lot of digital skill and of course a brilliant idea.

Modern Times pays homage to Kubrick's 2001 and latterly Duncan Jones' amazing 'Moon', but the sensibility is more cinematic advertising than sci-fi storytelling.

This thought-provoking short taps into the current zeitgeist of our era - the ever-increasing digitization of visual art forms - and how it threatens to deny generations of viewers access to the great analog works of 20th century cinema, photography and literature. The magic of cinema is celebrated in a futurist but entirely logical way.

Modern Times has generated interest from studios including Warner Bros, Fox and Paramount, and Ben has responded by releasing a behind-the-scenes clip documenting the making of the piece, which, despite revealing some CGI secrets, somehow manages to take nothing away from the impact of the actual film.


The End of the World as He Knows It

Friday, 1 April 2011



Just watched the brooding, almost wordless documentary directed by Sophie Fiennes, featuring one of my favourite artists, Anslem Kiefer.

The film premiered at Cannes last year, and examines the work of the 65-year-old German, famed for his apocalyptic and harrowing industrial landscape paintings and sculptures. Back in 2000, Kiefer started building 'La Ribaute', a series of elaborate installations, at a derelict factory near Barjac in the south of France.

The resulting work is sprawled over a 35-hectare site and is composed of massive underground tunnels, organic paintings, industrial sculptures, and crumbling stonework structures.

After a 25-minute introduction which pans through much of this work, Kiefer emerges in his studio and, aided by assistants, expertly manipulates lead, concrete, ash, soil, glass and even gold as he works on some amazing pieces of art.

The film features an unsettling atonal soundtrack by the composer György Ligeti and is not for the faint-hearted; it makes Koyaanisqatsi look like a Hollywood blockbuster.

In some ways Kiefer's methods are very much like those of Jackson Pollock. There is a sense that the 'action' of creating his work is an integral part of the expression, and much of his art is constructed on the ground.

Later in the film Kiefer is interviewed, and talks about his belief that the sea, being the original womb of all organic life, drives many of our dreams and spiritual beliefs.

What emerges is a portrait of a giant of late-twentieth century art who still has something essential, original and unapologetically nihilistic to say about the human condition and where we are all going.

Here's the original Trailer:



More:
Cannes Film Review - Peter Bradshaw in the Guardian
Anslem Kiefer wiki
Over Your Cities, Grass Will Grow
Anslem Kiefer Collection@Moma

Beyond the Fold with iPad2

Tuesday, 29 March 2011

Apple’s iPad is already an iconic gadget that has sold in excess of 15 million units since its launch less than a year ago. With the release of iPad 2, the seminal tablet device is expected to sell even more, and bring the iPad out of the early-adopter slot and into the mainstream.

iPad may well have rescued print by reinventing what can be done with the magazine format, and now iPad2 will demand a new perspective on web design. It's a lot lighter, thinner and faster, and this makes web browsing a far more practical experience than with the original iPad.

In a way web design is like particle physics. The more we learn about it the better it gets, but those improvements require us to continuously reassess the principles and break formerly sacrosanct rules.

For example, just a few years ago no competent web designer would have dreamed of setting text above 18pts on screen in plain html. But these days, with better screens resolutions, anti-aliasing adjustments, and the improved control of css, large html text is commonplace (and can look awesome).

As of now, the iPad has thrown up three key issues that will force a new paradigm for web interaction.

1.Orientation

By offering users portrait orientation, websites for tablets will become taller, revealing information which on a standard screen would be 'below the fold', and forcing designers to reign in the ever-increasing pixel width of website visuals.

A knock-on effect will be a reduction in the reliance on whitespace that is currently in vogue, and which produces clean minimal designs. The consequences could be busier content and more restrictive visual elements. This seems like a step backwards and not forwards in terms of interface design.

2. No More Mouse
The use of touchscreen, and the general tactile ethos of the iPad, means that website interaction is completely different to using a computer. The whole canon on usability may need to be re-written. Web designers will have to come up with multi-touch capability and larger, simpler navigation.

Using chunky buttons and large icons seems like a good solution, but for those of us who were around in the early days of web design, this feels like a real anachronism.

3.Flashless

And thirdly, the iPad does not support flash, so websites which have previously relied on animation and video content, developed with time-consuming skill, will need to either be rebuild or have alternative versions.

But in a turn-up that most cosmologists would die for in their field, it turns out that the answer to these web design issues are very simple.

The technical trick to accommodate both orientations is in getting the layout to fit both sizes on the fly. This is fairly straightforward using css, and is already in use (with varying degrees of success) with handheld devices. The website requires two stylesheets, one with the 1024px width sizing, and one with the narrower 768px sizing.

In the former, the content is laid out like a standard website, with a main content area and flanked columns, whereas in the portrait orientation, the same flanked content is shunted below the main content using the float property. Everything is triggered by three lines of html - this one to control the scaling of pixels -

<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0">

and these two media queries to call the styles on orientation -

<link rel="stylesheet" media="screen and (orientation:portrait)" href="one.css">
<link rel="stylesheet" media="screen and (orientation:landscape)" href="two.css">


The result is one set of content which displays in two interchangeable layouts - on the left, the 1024 X 768px landscape with a column floated right, and the same page at 768 X 1024px with the column floated left (and hence shunted below due to the narrower width) -




As for larger buttons, the rise of social media has brought them back in vogue, and icon-based navigation makes a lot more sense than it did ten years ago. Icons are far more intuitive to a generation who have grow up with the internet. The iPad by its very nature is a less accessible tool to use than a computer, and so accessibility issues which dog traditional screen-based web design become less relevant.

And finally, the question of Flash has already been answered. Google's Android system has already adopted html5 and css3, and Apple have followed suit. HTML5 can produce much of the dynamic interaction we associate with Flash, with the added magical editable power of css.

I think we are going to see more horizontal scrolling with multi-columned text content, taller vertical layouts, and a lot less pages in websites. We'll also see the standardised adoption of html5 and css3 to produce inventive styling, and touch icons will start to take over from the more cumbersome text navigation. It's only a matter of time before web design as we know enters a new era, beyond the fold.

Font Aid V : Made for Japan

Sunday, 20 March 2011

The Society of Typographic Aficionados (SOTA) recently issued a call-to-action for designers and typographers to create a typeface to benefit earthquake and tsunami relief in Japan.

Font Aid logo

'Font Aid V: Made For Japan' is a project which hopes to raise funds to help relief efforts in Japan. Each submission has to be a set of three glyphs which demonstrate the designer's personal interpretation of Japan.

This is a great way of combining socially responsible design with a worthy cause, and so far there have been 150 glyphs created by 80 contributors from 27 countries. The project deadline of March 25th 2011.

The SOTA website contains more details and the submission guidleines.