The Design Process

Wednesday, 24th December 2008

This article on writing by James Patrick Kelly should be required reading for anyone involved in any creative activity. I read it years ago, and though I forgot the exact phrase, I’ve followed its basic principles ever since; whenever I’m stuck on a design I remove the thing I like the most and continue to develop the design without it. Almost every time it’s that thing, that darling, that is holding me back, distracting me from the design. I find that what I’m doing is trying to adapt the rest of the design to fit with this thing, rather than than developing the design as a whole. Even if it wasn’t that thing, the act of removing something from the design, that act of subtraction is what frees up my thinking again. The article addresses this nicely, and you can see how it applies to more than writing:

Some writers like to fix problems by addition rather than subtraction. First they layer in just a little more complexity to develop a rounder Aunt Penelope. And then they expand the garage scene, so it will foreshadow the car chase. Last they have Biff’s lawyer explain the rules of evidence to his secretary after the trial so that slow readers will get the end. If these writers worry about wordiness at all, they might tighten a few lines here and there. Drop a “he said,” on page two. Major surgery is for beginners, right?

Nowadays it’s become (almost) a natural process and I find myself peering suspiciously at something that’s just too shiny, too perfect, too lovely, too early in the process. This isn’t to say I remove everything that’s nice from my designs, far from it, but what I tend to do is to move through versions very quickly. Version 1 of a design might have some text treatment I’m fond of, version 2 might have some aspect of a layout I like, version 3 something else, until I think I’ve got the ideas recorded and I can develop the design without them distracting me. Since I’m moving to a new version whenever I get stuck, these early versions are rarely complete designs; they’re more like rough sketches. While I’m working I’ll return to these sketches and use the ideas from them if they’re suitable, which is a far more pleasing way to work, and ends up being much more successful. Usually, of course, after I’ve got the final design (or a clientworthy version) I’ll look back at the ‘darlings’ I’ve saved and decide that they’re not all that special anymore, that they’ve been surpassed by what I’ve done while free from distractions. The ones that I still like I keep around for future inspiration. Sometimes, I even remember to look at them.

Saturday, 29th November 2008

I’ve been following this series of articles by Johnson Banks about their Art from Barrels project for Glenfiddich. The aim of the project was to get across the length of time it takes to make a barrel of Glenfiddich Single Malt, and the end results are pretty interesting. I haven’t got all that much to say about it, especially as the articles explain it all pretty well, other than to say I’ve discovered I like sandblasted letters in charred wood:

Monday, 3rd November 2008

I came across these two logos recently, the Guild of Food Writers one via NOTCOT, and the Victor one via an Engadget link to this deadly device. The Food Writers one is beautiful; simple, clean and clever - something any organisation would be proud to call its own. The Victor one has a few issues, like the strangely discordant ct, but the V is entertaining and nicely done. So there we go, two nice logos.

So what’s the problem? Well, to look at the websites of these two organisations you’d think they were ashamed of them.


Click each of the logos to see a snippet of the site, saved for posterity.

On the Food Writers site I didn’t immediately recognise the logo as being the same one - it’s disguised with that nasty gradient, the cheap glow and the atrocious lettering next to it. I can’t quite reconcile the motivation that commissioned such a great logo from 300million with that of allowing the website to end up looking (and working) like that. Maybe it’s a supplier issue. Maybe they’re working on a new site? Maybe I should pitch a new site to them.

The Victor logo isn’t treated quite as badly, so while it has completely unnecessary bevels and shadows applied at various sizes and angles on the site and other materials, on the product itself it’s used cleanly and simply. If you look closely at the Victor® Multi-Killâ„¢ Electronic Mouse Trap (!) the power indicator is a glowing green version of the V from the logo, so there’s hope. It’s such a shame that in every other application, it’s smothered with cheap, lazy effects.

Sunday, 19th October 2008

Drawn linked to this fantastic PDF, ”Studies in Pen Art”, a scan of a 1914 pamphlet by William Dennis. It has loads of examples of penmanship and advice on techniques and equipment which is pretty much all relevant today - although not perhaps the emphasis on speed; even a commercial letterer today wouldn’t have to produce work as quickly - producing this kind of lettering by hand would be a project in itself these days and so more time would be devoted to it. Still, we all have deadlines and knowing how to work quickly is never a bad idea. The PDF is available for download from the Drawn page - worth a look.

Friday, 29th August 2008

There’s some lovely identity and online design work here. I found it via Graphic Exchange, who commented that the presentation style adds to the visual appeal. I have to agree. Identity work is often about the feel and weight of the physical artifacts - the headed paper, folders, envelopes - and a good way to document them is with good macro photography. You can’t feel the paper, but you can see how it might feel.

Anyway, here are some of my favourites - it’s only a very small sample and they’re scaled down quite a bit, so take a look at the full site. The UI of the site is all flash, but it’s a pretty good example of the genre. I like the way the colours change as you move through the work.





Tuesday, 19th August 2008

Steve sent me a link to the all-new official site for the Prime Minister of the UK, which, incredibly, is in beta. Get that: The official online presence for the leader of (allegedly) the fifth richest country in the world is a crummy beta site with dodgy kerning, inconsistent use of typefaces, colours, rounded corners, spacing, and, well everything apart from general crumminess. Look at the masthead. It’s in Clarendon, Times New Roman Bold and Georgia. The typographic soup continues with the addition of Arial for body text (and oddly, some headlines too), and on a graphic, Copperplate. There are boxes with rounded corners at the top but not the bottom, containing images that also have rounded corners but where the curvature doesn’t match the container (and appears to be damaged by JPEG artifacting on most images). The site is a mess.


The masthead at the time of writing. Click the image to see a broader view of the home page.

The idea of adding features to the site such as YouTube, Twitter and Flickr feeds is a good one, and yes, these things can be a bit messy to integrate at first, but it’s not hard to get those things up and running in any design. The hard bits, especially for a site as prominent as this, is to ensure security, that the background infrastructure can handle the traffic and (importantly) all your content is written and entered into the site. Is this a site that got designed and implemented by several groups who never communicated? It looks like there may have been a design done at pitch stage, but largely ignored throughout development. A good, consistent design is vital for any site, and sticking to it is a must throughout all stages of development.

Still. All these things can be fixed. The design can be clarified, the layout can be rationalised, attention can be paid to consistency and quality, the HTML and CSS can be cleaned up, but it beggars the question, why did they launch an unfinished site and call it a beta? This is not what betas are about. This is arguably one of the most important sites representing the UK and should be implemented to the highest of standards, and yet they launched a crap blog and tried to cover their arses by calling it a beta. Very poor show indeed.

Monday, 11th August 2008

Banknote patterns fascinate me. I can get lost for hours in all the details, seeing how the patterns fit together, how the lettering works, the tiny security ‘flaws’ - they’re amazing. Central to banknote designs are Guilloche patterns, which can be created mechanically with a geometric lathe, or more likely these days, mathematically. The mathematical process attracted me immediately as I don’t have a geometric lathe and nor do I have anywhere to put one. I do, however, have a computer, and at the point I first started playing with the designs (mid-2004) Illustrator and Photoshop had gained the ability to be scripted. So off I went, using the hypotrochoid equations on Mathworld to create rather rough and ready patterns - scripting at this point didn’t have a very usable set of functions for creating beziers, so I had to use crummy line segments. The process took ages and served just to prove to me that I could do it, but the results were too poor to go much further.

Then, a couple of years later I discovered Grapher on the Mac. Aha! Now here was a program that could create the patterns I was after and export to EPS. Well, kind of. It could create the patterns, most of the time, and export to EPS, though not always. I got a couple of patterns out of it and had a look round for other options. Again, not much - not much that I could afford, that is.


The basic hypertrochoid equation. This makes a nice rosette.

Then we get to now. I give Grapher another go, and at last, I can create and export patterns:


There are still some extremely frustrating limitations though. First of these is the resolution of drawing the graph. I’m sure for most graphs the default resolution is fine, but when creating these patterns you need tiny increments. Tiny tiny ones. If the line is going from one side of the graph to the other and back again a thousand times in a couple of radians, you don’t want the graph program to start dropping line segments, or corners, or anything really. Grapher does allow you to increase the resolution, but it’s not sticky - change anything in the equation and it pops right back to the default. Every. Single. Time. The same thing seems to happen with the line thickness too - I wanted all the designs to be at 0.1, but it kept changing it back to 1.0. Frustrating! There are a couple of other UI things I’d change, like having an option to keep axes at 1:1 ratio to each other, even when you resize the window.

Another, deeply irritating frustration with the whole process is to do with Illustrator. Try and open an exported EPS in it, and you get “An unknown error occurred”. Photoshop can accept the EPSs as placed objects, and InkScape can (eventually) open them, so Grapher seems to be outputting valid EPS files. I suspect that the number of lines in the graph is causing the premier vector editing app in the industry to fall over. Oh dear.

Still, after all this, I can still get the patterns made, and get them into an image editing program, which is quite something. Now I just need to find the magic numbers to create just the right patterns I want.


This beast creates the pattern above. The m is not strictly necessary for this one, but varying it is good for experimentation.

Note: I know there are programs devoted to creating these patterns - Excentro being apparently one of the most popular, but I’d rather use the software tools I already own first. I played a bit with Excentro and it certainly makes some things a hell of a lot easier - but I’ll hold off buying it for now until I’ve got an actual project I can use it for.

Page 1 of 3 pages  1 2 3 >