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

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"/>

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 {
-ms-transform:rotate(-28deg); /* IE 9 */
-moz-transform:rotate(-28deg); /* Firefox */
-webkit-transform:rotate(-28deg); /* Safari and Chrome */
-o-transform:rotate(-28deg); /* Opera */

#columns {
-moz-column-count: 5;
-moz-column-gap: 20px;
-webkit-column-count: 5;
-webkit-column-gap: 20px;
column-count: 5;
column-gap: 20px;
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.

BBC Online @ wiki
BBC's Global Visual Language 2.0