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

Channel 4 ReBrand

Saturday, 10 October 2015

After 33 years, Channel 4 has all but ditched the signature '4' logo that became an iconic brand mark. It hasn't fully abandoned it because the recent rebrand actually utilises the component parts of the '4' to great effect an a myriad of different combinations.

Channel 4 has never shied away from creative and sometimes radical visuals in its idents and adverts. In 2005, the originality of its slow motion panning shots around chopped-up electricity pylons and deconstructed urban landscapes revolutionised the ident.  For this rebrand, luminaries such as Neville Brody, Jonathan Glazer and London agency DBLG have all been involved to maintain that sense of exploration. To add to the drama, the channel is facing the threat of privatisation - and the rebrand has been seen by some as a bit extravagant and ill-timed.

The new design breaks apart the channel’s famous 4 symbol into its constituent shapes, which are then randomly reassembled in various arrangements for the stable of Channel 4 programmes. A series of surreal idents created by Glazer (who directed 'Under The Skin') are included, as well as two new display fonts, designed by Neville Brody.

Its adventurous, playful and fun to look at. Its interesting that the shapes have a considerable drop shadow, a progressive move forward from flat design, and the colour palette is bright and high contrast. In fact, the whole approach feels influenced by Google's Material Design,and in that sense it is extremely contemporary. There's an excellent short film detailing the process of the rebrand, which illustrates the quirky approach and the variety of ideas that made up the project -

Its always exciting for graphic designers when a Neville Brody font is involved, and in this instance we get two - 'Horseferry' and 'Chadwick'.  Actually, we only really get Chadwick, with a series of modifications to it in Brody's trademark style - angled cuts, half serifs and broken curves - making up Horseferry.

The description accompanying the Horseferry sample states that 'the design reflects the sharp, disruptive and cutting edge personality of a unique British Institution', whilst Chadwick is built for clarity and legibility on screen.

At first sight Horseferry looks great - it harks back to Brody's experiments during the Face era, and the sharp points and machined half-serifs in particular have a techy retro1980s feel. The lowercase t and g also give a nice nod to Gill Sans, and you can see all sorts of challenging ways to use this typeface. It also looks great for Channel 4 titles like Fargo, Grand Designs and Hunted.

But a quirky typeface and of-the-moment visual styling doesn't always age well, and Channel 4's programme roster reduces the reach of the font.  For me,  Horseferry doesn't work with the likes of Hollyoaks, Educating Cardiff, Made in Chelsea and Deal Or No Deal.  See for yourself if you can bear to tune in when these programmes are on.

All of which means that I'd be surprised if this new incarnation of the Channel 4 identity will still be around in 2025.

You Can Be Serious

Friday, 9 October 2015

Amongst other descriptive terms, 'wonderous' and 'frustrating' sums up John McEnroe's famous performance during Wimbledon in 1980, when he yelled the immortal line 'You cannot be serious!'. Twice.  SuperMac clearly wasn't happy with the referee, but his real problem was with the baseline. The chalk flew up. It was right on the line. It was right on the line. Which fits nicely with the subject at hand.

Scale, units and measures may differ for print and digital design, but the essential basics of alignment, proportion, balance, whitespace and contrast - remain the same. One of most wonderous tools at your disposal to achieve these things across every format is the baseline grid.  This is a series of equally-spaced horizontal lines upon which text sits, to enable vertical rhythm as one reads down the page (and across it, if there are facing pages or multiple columns).

Using a baseline grid is the point at which you start to take layout seriously. But what can make it frustrating is that there is still no single shared method to create a baseline grid across all the standard tools in which you might design your layouts, namely Illustrator, InDesign, Photoshop.  One route that many designers are now taking is to bypass the standard tools altogether, and design for digital directly in the browser, where there are lots of grid tools, such as the grid extensions in Chrome.  But whatever tool the work is done in, its important to have a reliable way to set up an accurate and robust baseline grid.

The Baseline Grid

The baseline is the imaginary line along which typographic elements sit. Letters and words. But also sometimes, objects and symbols.  Setting up a baseline grid for various formats in a variety of tools requires different  techniques, so its worth examining how this is best achieved in each tool, and what the wonders and frustrations are of each technique.

InDesign has the most flexible set of tools to create any kind of grid. You can set up the document intent for print, digital publishing and web, and the margin, columns and gutter controls are very robust. These can be set up right at the start of a document, or added and adjusted later using the Layout and Create Guides options to create any combination of columns, gutters and rows.  The grid can be proportioned to the page or the margin, and toggled on and off.

The baseline grid is created separately through InDesign's preferences.  You can set the leading increment, control the positioning of the grid vertically, and arrange the layer options - grids in back, or grids on top. If you want to make changes, you just alter the increment.  The view threshold option gives you added control over the visibility of the grid at low zoom magnifications. 

In the paragraph tools you can then align text to the baseline grid, or free it up from snap.  The only thing you can't do with an InDesign baseline grid is rotate it to angles other than 90deg.

InDesign grid setup for Digital Publishing, with 3 columns, 30px gutters, 66px margins and 21px baseline grid.

With its multiple artboards, powerful vector shapes and alignment tools, the ability to use both layers and the arrange stacks in each layer, and both 300ppi and 72ppi canvas options, Illustrator is great for print and digital layout. You can quickly set up the columns for your grid by drawing a rectangle, using the Path > Split Into Grid option, and setting the width, gutter and column count values -


For the baseline grid, we draw a horizontal line with the line segment tool, at the width we want, and then use the Distort& Transform > Transform tool to duplicate that line with the move value (i.e. the leading in pixels or points that we require), and the number of copies - 

This combination is really powerful. The columns can be made opaque and locked in a layer, the baselines can be moved around, started anywhere on the canvas, replicated instantly across multiple artboards, and the increment can be edited easily in the Appearance panel.  Plus you can rotate the baselines to any angle. 

The one proviso is that because you can't convert the transformed line to a guide, you therefore can't snap to it, so make sure you use Illustrator's powerful zoom to get things done accurately.

Photoshop, up until now at least, has been a bit more problematic. Adobe CC is the first version of Photoshop to allow you to create multiple rows and columns in its guide options (an exact analog of the create guides tool which InDesign has had since CS3).

But in CS6 and below, all sorts of workarounds have been used to generate grids in Photoshop, from using the document grid, or painstakingly creating each guide, to using pattern-repeated transparent .pngs, and downloading .png grids generated by browser plugins.  And that's just for the columns.

Thankfully, there's a really useful free tool, the Guideguide plugin.  You can set up complex grids quickly, and edit, share, save and customise them very easily -

GuideGuide 12 column 960 grid with 18px baseline grid in Photoshop

The one drawback perversely enough, as you can see above, is that Guideguide creates guides. It can't create solid columns, so that your canvas can look daunting to work in with so many criss-crossing guides. A better option is the combination of solid vertical columns and horizontal lines, a lot like the combination used in Illustrator.

But Photoshop can't generate the column grid with the same tools as Illustrator. There is a tedious way to fill in the columns between each guide, but you'll use a lot of layers and waste valuable time. A quicker solution is to make the column grid in Illustrator, then export it as a transparent PNG and place it in the top layer of your Photoshop file. Then set up the GuideGuide rows. With this combination, as well as something that's easier to look at, you can lock and toggle the columns and the baseline grid separately.


Grid combination - 940px 12-column PNG and GuideGuide baseline.

If you do want to be serious without getting frustrated, once you have the grid combinations you like, keep them saved as templates, or set up your own actions in Illustrator and Photoshop to automate the main steps.