Jeffrey Zeldman—whose site always provides a good read—has been in a reflective mood recently. One article is a wonderful comment on divorce, an example of the most humane thing we can do under such an awful situation—and something that’s incredibly hard to do, of course.

The second article—Family Ties—is more gut-wrenching. A dispassionate reflection on our consistent inhumanity to those we ostensibly love, it brought up a lot of family memories of my own, stories related to me by those who dimly remembered them in the first place & that families prefer to keep buried. Many of us have little idea of the horrors endured by our own relatives, let alone more distant ancestors. But some of us do.

The stories I was told calcified into a big reason why I was so hesitant to have a child of my own—I worry how much rage and madness is within me & which I’ll pass onto my son. Nothing has yet happened. Yet. And that’s the worry, of course—you don’t know what, if anything, is dormant within you and your child & you’re not likely to know until it’s too late. My son is a phenomenally happy boy, but like so many others, he carries a heavy inheritance.

Not that long ago—well within living memory, in fact—the only way to show people your design work was to cart around sheaves of paper, your fingers greasily smudging the edges. We likely forget how long this has been common practice.

The Creative Review blog recently had a brief photo essay showcasing a 16th-century artist’s portfolio—the Macclesfield Alphabet Book.

Macclesfield Alphabet Book: ornamental detail for lettering of “S” & “A”

Macclesfield Alphabet Book: ornamental detail for lettering of “D”

Books like this not only showed potential clients what your house could produce, but it also retained a “house style”—anyone in the workshop could reproduce these images.

It’s been a long while since the ink dried on my Art History MA, but the style doesn’t at all look circa 1500 to me. I think it’s likely to be about 1450 at the very latest—and even then, it’s retained imagery from a far older manuscript. Have a look again at the fashion in the second illustration above: the woman’s fashion looks about mid-15th century & the man’s significantly earlier.

In any event, give me a website any day :)

On a spare machine in the studio, we had a Belkin SOHO KVM DVI switch. We got it when Ian joined as a partner, so he could hook up his laptop & use the big screen as extra real estate. It was a weird setup: the monitor was VGA (one of those ancient 21" Apple CRT Displays, a gigantic blueberry of a thing that gave you a hernia by just thinking of looking at it), but we knew that we’d eventually move to a DVI flat-screen, so we worked with DVI-VGA adaptors for years.

It wasn’t without problems. To get it working with the DVI computer & laptop to which it was attached, we needed DVI-VGA bridges; for Ian’s laptop we needed a (get this) DVI-VGA-DVI bridge, otherwise the damn thing wouldn’t work. When we first set it up, the damned thing would screech PIP every second or so when Ian’s laptop wasn’t connected—a frequent enough occurrence as he likes to work from home. We somehow, somehow got that to stop, but the trick was lost in the mists of history & sleepless nights.

When the display finally died, nearly a decade after its purchase, I promptly got a new flat-screen monitor, an Iiyama ProLite, which is pretty nice. Finally, we could rid ourselves of those DVI-VGA/DVI-VGA-DVI bridges. And that’s when everything started going very, very wrong.

You first have to hook in your DVI cables. OK, except for the bonheaded design of the switch: there wasn’t enough room for them. I used a crimper to pull off some of the decorative plastic in a couple of places to make room for the cables. But even then, they couldn’t fit as tightly as they should have. Oh, and the PIP was back, and it wouldn’t stop.

So I Googled other people’s experience of these switches, only to find that other Mac users were in a similar boat. What’s worse, to upgrade the damned thing, you needed a) a Windows computer—so we’re out of luck there, we only use Windows via VMWare Fusion; and b) a PS/2 port on that Windows machine. Despite the fact that it supports USB. Nice foresight there, Belkin.

So in a fit of pique I ordered a new KVM switch. As we were only connecting two machines to one monitor/keyboard/mouse, there was only one game in town: the Belkin Switch. Well, I clearly didn’t learn my lesson about Belkin, because I bought the damned thing, despite the negative reviews on Amazon. And of course, it wouldn’t work when I first started it up. The clue was that the switch button needs to be firmly inserted into the switch (as recounted in one Amazon review).

But then—surprise!—it worked. Great! Back to work. Until the installation of the recent Quicktime 7.6 update, where the computer had to be restarted afterwards. Whereupon the fucker didn’t work again. The switch button clearly wasn’t the issue: it hadn’t been dislodged. What to do?

That’s when I descended into Support Hell. You’ve been there, so you know that you have to tell them everything, model, OS, setup, shoe size, anal distension limit, etc. I got a couple of very useless suggestions (unhook everything, restart, hook it back up, piece by piece), which didn’t do anything, but reading about the Quicktime update suggested that some components need to be updated. I did that & the computer came back to life. Hurrah!

Until the next restart-required software update. Are you sensing a pattern here? What solved this was, essentially, voodoo: I restarted the computer again, cleared the PRAM three times, rubbed the cat’s tail around my left eye three times counterclockwise & we were back in business.

I have a suspicion that I’ll be engaging in multiple restarts for the rest of the KVM’s life…

So Microsoft have distributed the next public release of Internet Explorer 8. If you’re using XP (and who among you, honestly, is using Vista?), you can get it here.

Here’s an interesting note in the “known bug” list: looking at the markup within an iframe tag is impossible if the first item within is a comment. Ohforchristssakeareyouserious.

Well not exactly. Further to my previous attempt at making a workbench launcher I found that rubyosa is not the only way to interact with osx applications through ruby. rb-appscript is an alternative derived from appscript, which boasts 5 years production use amongst other things.

Necessity may well be the mother of all creation but I have oft found laziness and irritation to be close relations. As a new user I'm still settling into a Mac and Rails working environment. I'm using TextMate and Terminal.app with several tabs in the same window.

I soon grew tired of tapping this kind of sequence into my macbook:

gem server
⌘T
cd dev/workspace/projectname
script/server
⌘T
cd dev/workspace/projectname
script/autospec
⌘T
cd dev/workspace/projectname
mate .

It seemed sensible that there would be some way to script this. In the end Applescript turned out to be the way forward - the problem was too osx-centric to do with a bash script in any way I could think of or find.

On Friday, Sitepoint posted its latest podcast (MP3 link) with a discussion unfortunately germane to a lot of developers’ work: what to do about Internet Explorer 6. They linked to one of my articles as background material (as if I’m an expert or something).

I found the discussion somewhat strange—as I do all podcasts, really, because instead of a “proper” media show where the participants research before presenting their views, podcasts are the equivalent of nattering around the water cooler.

Much of the discussion whipped around why on earth people don’t upgrade their browser. I mean, c’mon. There are lots of reasons for this & if you’ve ever worked in a large corporate atmosphere as I did a very long time ago, you can come up with a few more. The prime users of IE6, I’d wager, will be first: those using ancient machines—they’re people who either cannot upgrade or don’t know how to upgrade. The second and far larger user base: those behind corporate intranets, where everything’s been tested in the simplest way possible, with one browser only & one version of that browser only. Lots of corporate intranets use ActiveX & will restrict its usage to IE6 because, well, that’s what they restricted it to. It’s the lazy path to information design, but corporate IT departments—trust me on this—are often filled with lazy people.

But corporate IT isn’t the only lazy culprit out there. Lately, some banks have been caught out using lame browser-sniffing techniques & have thereby excluded the latest browser on the scene, Opera 10, from using their websites because “it’s too old”. (For those interested in why the sniffer didn’t work, it’s because the browser sniffer doesn’t parse more than one digit, so Opera 10 is classed as Opera 1. That’s practically the dictionary definition of “lame”.) And don’t think that standardistas are exempt from laziness: one of the podcast’s participants stated he “didn’t even test in IE6 any more” (albeit for personal sites), which to me is pretty scandalous. After all, the whole point of the web is its inclusivity: the more, the merrier.

If you’re using Mac OS X and you’re a developer and you’re too busy working to think about backing up your work, then Time Machine is fantastic & a lifesaver. Time Machine will automatically back up your work on an hourly basis. Coupled with a Time Capsule—which provides both the storage for those backups and your wireless connection—backing up is seamless, which is as it should be: if it isn’t seamless, you’re not going to back up nearly as often as you should.

However, Time Machine is not without its faults. I found it frustrating to set up initially, as I was setting up individual accounts (with passwords) & the setup for this is not clearly laid out. Worse, however, is that you can’t set up default rules—like ignore any directory named logs (those developing in Rails will know the files in logs can get huge), although you can set directories (or files) to be ignored manually.

Worst is the lack of any idea of what Time Machine is backing up. When you’re a developer, this can be very frustrating, as periodically you’ll find that you’re suddenly backing up gigabytes of data without knowing why. This is bad: when Time Machine runs out of space, it removes the oldest backups, so you can’t go “back in time” as far as you may need to. For instance, my last backup is 4 October when it should be something back in June, when I first bought the Time Capsule. Something was eating up space.

You could adopt a Zen attitude to this: let it do its thing, accept this state of affairs & doubtless you’ll be happier—until your Time Capsule is filled, that is. Or, you could be obsessive-compulsive & make yourself miserable trying to figure out wtf is going on. TimeDog helps you see something of what’s been backed up, but I found it unhelpful as it wasn’t letting me know about the latest backups—in my case at least, it only appears to give you information about the initial backup. Well, that’s not helpful.

Last night, however, the right chain of events occurred that provided the solution—for web developers, at least. I was performing a MySQL sync for one of my clients—in this instance, I also sync the database locally so I can check my work against the client’s actual data. Time Machine started up just after I started syncing locally. At first it was backing up about 2.5MB. Suddenly, however, it was backing up over 2GB worth of files. Strange, I thought—I had excluded the db folder on the Rails project, so the synced YML files shouldn’t be backing up.

And then it hit me: Time Machine was backing up the actual updated MySQL databases. Obvious, really, when you think about it. For Mac developers, your MySQL databases will be in one of two places:

• If you’re using the default OS X setup, /var/db/mysql;
• If you’re using MacPorts, /opt/local/var/db/mysql.

All you have to do to remove these from backups is to go to Time Machine preferences, click “Options…” & exclude the above directories.

You may want to prune more selectively, however: for me, the db sync only really affects one particular client. You can go into the mysql directory & merely prune out the database that’s filling up your Time Machine. Please note that this database won’t be backed up, however—you may want to back it up manually at specific intervals.

Yonatan Shemmer of the University of Sheffield’s Department of Philosophy contracted us to design a poster for his new AHRC-funded project, “Constructivism in Practical Philosophy”. Because it had to compete with other posters on limited bulletin board space, the design could only be the size of an A4 sheet.

Students of art history won’t be surprised how swiftly we turned to Russian Constructivism for the design. As an art movement, Russian Constructivism was very bold—stark, even, at times. This is ideal for poster design! Particularly when you’re competing against lots of other things clamouring for your interest.

We used a stripe of bold red to differentiate between the activities of the project & its star participants, with smaller stripes to highlight two important items, the link to their blog & information about the conference that’ll be held in in August. We also added a very pale, graded yellow wash over the background—5% yellow up at the top right to white at the bottom. The result is subtle, but when it’s up against other white posters, unmistakable.

More information about the Project can be found on their blog.

Earlier this week, I promised that I’d provide some examples of our graphic development process. This is the first in the series.

Simply put, I love logo design. Even though it’s simply the development of corporate identity—and is therefore about as commercially-oriented as anything can be—there’s something actually exciting about defining someone so precisely in a graphical medium. In logo design, your aim is to get to the essence of an organisation—to idenfity not only what it is that they do, but communicate how they do it. They may sell widgets—but are they friendly? Or are they formal? Do they do or sell one thing, or many things? In your design, how specific can you—or should you—be about their work?

The answers to these questions come through a lot of conversation with your client—you’ll pick up on a lot of how they present themselves to the outside world by how they interact with you; but you’ll also need to speak with them about how they want to consciously present themselves. And in any discussion, note that the client may not be certain about how they want to present themselves. So if you’re presenting multiple designs to them, you often want to highlight different aspects to refine how they see themselves.

When we present work to our clients, we do it online, primarily to avoid scheduling conflicts, but also so that the client can think about what we’ve done in their own time. Pursuing design work in a meeting creates groupthink, which is something you want to avoid: no one is satisfied with work designed by a committee.

But as a designer, your job doesn’t end there. Few people are equipped with the vocabulary to discuss the arts. Your clients may completely bypass elements of your design that are blindingly obvious to you. So you have to walk them through your designs.

It’s also a good idea to present “Pros” & “Cons” for your designs—and to be as honest as you can about them. Why would you need, or even want, to do this? Because every design is a compromise between competing requirements. When you’re developing your work, you might think “This’ll look great on a website, but like ass on a printed page” & you’ve got to communicate this to people who, again, don’t necessarily see it. Why can’t they? Because you’ve got more experience of the print & online worlds: they don’t. They usually just type stuff into a Word document. So, ultimately, you’ve got to guide your clients, as honestly as possible, through the implications—both physical & psychological—of any design that you create.

Case Study: WindowKing

As a way of illustrating the above points, I’ve picked some logo design out of the deep archives. This is the work for a company called WindowKing, the first job we created for a favourite client that’s still with us. Back in 2001, this client wanted to create an e-commerce website to sell windows exclusively, through a new name: WindowKing. The logo would be used primarily on the web, but probably on printed invoices as well. The windows were primarily modern designs in PVC & wood, but they had a line in more expensive, sash-based windows as well, which they wanted to eventually also sell online. At the time the client’s company was fairly small, but they were very forward-thinking: they remain one of our most sophisticated & clued-up clients to this day.

I won’t go through the development of the site, as that’s beyond the scope of this post, but also because, visually speaking, everything stems from the logo design. When you’re creating a completely new entity for a client, you’ve got a clean slate to work on. Colours, fonts & stylistic approach all cascade from the logo to any other material, be it letterhead or website.

We very soon hit upon using a little crown in the logo. In addition, the company was informal in their approach, so we wanted to reflect that. But since they also wanted to sell more expensive, classic windows, we needed to create some designs that reflected this future direction. Also, if you focus too closely on cute imagery & fonts, the result can be cheap & cheeerful—which hardly reflected the client’s products.

NB: Keep in mind that these logos were designed in 2001. The colours & fonts employed are very much of a piece with the graphic design you found on the web at the time. We don’t work in a vacuum. Also, I’ll present what I wrote to the client at the time & add commentary to that afterwards. Finally, we hadn’t yet refined our design presentation, so “Pros” & “Cons” don’t make any appearance here.

The first design conveys a combination of modernity (the “Window King” text) with traditionalism (the “WK” in the box at left).
Fonts: Aristocrat & Futura Bitstream

Wow, I have no idea what the hell I was thinking of. It just doesn’t work at all. Combining modernity with traditionalism is a tough thing to pull off at any time, but those colours & those fonts? I look back at this & suspect that this was the “ringer”—the design you put in just to round out a presentation, but don’t intend for the client to pick. Beware. I’m now older and wiser & I can state that all too often, the client will pick the fucking ringer. And you’ll have to live with it. So avoid doing this.

This second design also plays with traditionalism with the type, but the gradated background suggests looking out a window at the sky.
Font: Edwardian Script

A fairly cute design, but this would’ve been expensive to print: you’re talking four colour plates. I also think the “looking out the window” idea doesn’t work at all, it just looks like a blue sky with one part chopped off for no reason except for a dodgy attempt at “dynamism”. Despite all these nasty comments, however, I think it would’ve worked well on a website, but ultimately it doesn’t convey anything of the informal atmosphere of the client’s business.

This third design is professional & modern, yet somewhat playful in the use of the crown. This logo would be striking used for either a website or printed material such as letterheads.
Font: Futura Bitstream (Light & Bold)

Now we’re talking! I look back & still think this is the strongest logo of the set. It’s striking, cheap to print (one colour!), nicely balanced & amusing without being over the top. It still betrays my love affair with Futura: the font that wanted to be Helvetica, but couldn’t. The colour dates it to the early 2000s, but otherwise this is still a logo I’d be happy to have in my portfolio.

This fourth design is straight & classic, eschewing any gimmicks. It’s a little more run-of-the-mill than many of the other designs, but such designs convey stability over differentiation.
Font: ITC Stone

Hmm, my notes say “Engraver’s Gothic”, which is the correct font. In any event, when I wrote “it’s a little more run-of-the-mill”, I meant it. You have to present clients with a “safe” choice: some people don’t want to stand out from the crowd, sometimes because they’re a really small company that wants to project the idea that they’re big & established (and boring), sometimes simply because they’re timid. You can interview a company all you want & this is the kind of thing that doesn’t come out of any discussions. And whilst it may seem timid on our part to offer a boring design, it’s important to remember that shouldn’t try to force a design upon your client—what might seem great & bold to you may just look crazy to them.

The fifth design suggests lettering painted upon a window. A caveat on this logo, however: it would not make a good logo for any printed material.
Font: Bodoni Bold Compressed

No, it wouldn’t make for a good printed logo; I look back upon this & cringe a bit. I can instantly see what I was getting at: the font & the “window effect” looks like something out of film noir. WindowKing, private eye, at your service, ma’am. This is far too gimmicky.

The sixth design again emphasises the “royal” aspect of the site’s title, and the colours suggest quality.
Font: Laser

I still think this logo works pretty well, but it’s too generic: the company could’ve been “Bedding King” & it would’ve been equally appropriate. I do remember being struck by the wonderful, repeated diagonals of Laser—it makes a great pattern & really conveys dynamism, which is why I chose it for this company.

The seventh design is bright & cheerful, while still suggesting quality. The blue background suggests that the crown has been set on a window ledge.
Font: TreacyFaces QueenDido ExtraBold

The purple is supposed to convey royalty, but it’s the wrong shade. No matter: that can be repaired. What can’t be repaired is the feeling that this looks like the logo for an airline company. I’ve never been able to get the font into any other design successfully, which is a shame: the contrast between thick & thin is really good.

The eighth design, like #4, is based solely upon the typeface. The colours & choice of typeface however, suggest a more technically-oriented site. Font: Industry Sans

This was an attempt to get a then-favoured font into a design: such love affairs are usually brief & I can’t fathom what I saw in it, as the lowercase letters aren’t in proportion with the uppercase. I was right, the logo looks like something technically-oriented, but that’s because of the colour & not the font: it looks like a line from a terminal window. A technically-oriented design emphasised the client’s eagerness to put their business online & represented at the time that whole “Bright Future” meme. They didn’t pick this one & I’m glad for it.

The ninth design is a less formal re-working of [the design that looks like an airline logo]. It would be more successful on a web site than on printed material.
Font: ThaiTrade

The reason why it’d be less successful in printed material is because it would cost rather a lot to print. There’s something interesting about the serif strokes that extend from the bottom of the font’s glyphs, but in larger sizes this can become distracting. Of all the designs, this one most successfully mixes both the “window” & “king” aspects of the company’s name.

The green employed in the design is very much a relic of the early 2000s, however: painfully bright, it was supposed to convey freshness.

The tenth design relies upon the typeface to denote quality.
Font: Mona Lisa

I think this pairs well with the first design: in other words, it’s a non-starter. By “quality” I may have meant “longevity”, as the font harks back to the 1920s & 1930s. The attempt to slice the design in half doesn’t work because the uppercase is so wildly taller than the lowercase: the “K”hangs, awkwardly, in an arbitrarily divided space.

The eleventh, and final, design is the most playful of all; yet the choice of typeface also conveys a more personal touch which might go over well with consumers.
Font: Secretarial Pool

I still think there’s something appealing about this design, but it’s risky: whilst it might make the company appear more approachable to consumers, it conversely might make them not take you seriously. The font’s very much of its time: in the late 1990s & early 2000s, there were several designs that harked back to 1950s advertising.

Lessons Learned

So which did the client pick? Off the bat, they picked the “Thai Trade” design: no tweaking requested. In retrospect, it’s obvious why: as I mentioned, it graphically accorded equal weight to both “window” & “king”.

In terms of what we learned from this exercise, it was primarily: don’t present too many designs. First of all, it might confuse the client: with so many avenues they could choose, how do they decide where to go? Second, as I’ve tried to convey in my comments above, there are a lot of non-starters.

In addition, make the advantages & disadvantages of each design very clear to the client: hence the use of “Pros” & “Cons” in our discussions these days. We go even farther than this these days: each design is presented with a title that differentiates it from the others.

I still mourn that third design, though.

Happy New Year!

Yet another website for book cover design enthusiasts: …by Henry Sene Yee Design showcases his own work and others as well. I find it particularly illuminating that Yee takes us through the process of designing his covers—and includes rejected designs, some of which are absolutely gorgeous.

It’s inspired me to share some of the design process I’ve gone through for logos, posters & book covers. Watch this space as the year unfolds.