Posts about Design

Name Sans, subway typography, and the TTC

I am in love with Name Sans, ArrowType’s metro-inspired typeface. Not only is the typeface really good, but the web page is nice too. A lot of type foundries have websites that are borderline unusable, but this is simple and demonstrates what makes the face unique, all without making me feel like I’m entered a funhouse.

When I lived in Toronto, I was fascinated by the typography in the subway system. A lot of the type was rendered in Helvetica or Univers, but some of the walls used Toronto Subway,” a bespoke typeface originally designed in the 1950s, but redesigned in 2004 by David Verschagin because the original design was missing characters, and nobody knew who the original designer was.

Here’s a quote from Wikipedia’s article on the topic:

The font was recreated by David Vereschagin in 2004. Because the original designer of the font is unknown, and no documentation of the font had been kept, Vereschagin digitized the font by visiting stations and making rubbings of the letters on the original Vitrolite glass tiles as well as taking photographs. This is now used by the TTC as their font for station names. Vereschagin designed a matching lowercase, inspired by Futura and other similar designs. As one of the few typeface designs to have originated in Canada, it was used in a number of zines as a mark of local pride.

You can purchase Toronto Subway from Fontspring.

Joe Clark has also written a great paper on the topic (in fact, it might be one of my favourite research papers I’ve ever read on the internet). According to him, Toronto’s subway typography involves the aforementioned typeface of unknown origin, subways lined with washroom tiles, a billion-dollar New York subway design system clone, a new design system from a wayfinding expert that was installed, tested, and ignored, and a billion-dollar corporation that uses as its main font a Helvetica clone that came free with Corel- Draw.” 

The most wild thing about Joe’s well-researched story is how all the half-finished design systems lurk across the city after decades. I lived there from 2015 – 2021, and I can confirm all these systems were never replaced or updated. It is not cohesive, and it makes the subway very confusing for people who are new to the city. In fact, people who are new to the city often can’t explain why they’re so confused by the subway system, the same way most of us can’t explain why inconsistent branding throws us off. But the inconsistent designs have left Torontonians confused for decades.

This one story is a perfect metaphor for Canadian politics: indecisiveness, a lack of vision, a lack of clarity, and occasional deceptive appearances of forward progress and momentum.

Ever since learning all this, I’ve paid a lot of attention to subway type. Name Sans is one of the better ones I’ve come across. It’s playful enough that you could use it for branding, but I think it’d make for good signage too.

I really loved Dan Mall’s latest post about answers to common design questions. Exactly the sort of thing I wish I came up with.

Design is hard in the middle

I’ve always found the work of design to be difficult. 

When I started working as a designer, it was difficult because I didn’t know what I was doing. I was tripping and stumbling in the dark, messing around in Photoshop and InDesign, trying to lay out magazine ads and technical manuals proficiently. I don’t think the work was particularly good; I may have had good taste, but I lacked the required skills to get there. 

Now that I’ve been working as a designer for over nine years — ten in October! — the primary challenges are different. As I get older, the blank page becomes more daunting, probably because I don’t want to repeat myself. I’d rather be like George Carlin and come up with new material for every project. But even once we get passed the blank page (try pen and paper first), the middle — the process — is hard. Design is not a straight line.

Good design resources about the process are scarce. I assume every designer struggles with this (especially post-COVID, when so many work alone from home with less immediate feedback), but none of us share the struggle in the messy middle. We just share the beautiful end results in our portfolio. 

In that respect, design is an odd creative field. Authors love to write books about their writing process. Filmmakers make documentaries exploring their craft. Musicians release demos as bonus tracks. But designers don’t share the process. We hide it like it’s some trade secret. Even Dribbble, ostensibly a platform where we can share what we’re working on,” is mostly used to share work we’ve finished.

The process is ignored.

My favourite video on the internet is Aaron Draplin taking on a logo challenge from Lynda (now LinkedIn Learning). I watch the video every time I get stuck, so I’ve seen it a few times: Draplin makes jokes, draws freely, zips around Adobe Illustrator and, most importantly, talks about all the cool stuff he has lying around his workspace.

The first several times I watched the video, I was amazed by the amount of junk Draplin collects (and worried that a key part of success as a great designer would involve becoming a pack rat). But I eventually realized that Draplin isn’t collecting these knickknacks; he’s noticing them. That act of noticing – of focused observation – is his process.

I think we as an industry could do a better job sharing how we work. A few years ago, I audibly groaned when a friend who was new to the design industry asked if I preferred Sketch or Figma. (I was kind of a jerk, I know. Dear friend, if you’re reading this, I’m sorry.) That question isn’t particularly interesting to me, although I think the evolution of our tools and the impact they have on us is worth watching and considering.

The questions that I think are most important: how do we do the work? How do we create focus? Where do we get our inspiration from? How do we survive the middle?

The tools and the output

For years now, we’ve heard new conventional wisdom from all the creative gurus: the tools don’t matter. You have everything you need to make what you want to make.”

It probably won’t be surprising to long-time readers of this site that I feel the opposite is true. The tools reveal the process, or at least imply our process. There is no right or wrong tool, so much as there are right or wrong tools for us.

No tool makes you better at your job, but the good ones make your job better. If you do high-end work with computers, a fast computer will always be a good tool. The right kitchen tools make cooking easier, or at least more fun. A good desk chair literally saves your body. Any tool that motivates you to do more of the thing you love has value.

George R.R. Martin does all his writing (very slowly) with DOS word processor. Specifically, he uses WordStar 4. That looks something like this. One could make an argument it’s not the best tool for the job. But it’s his process. The tool merely reveals his priorities.

On the other hand, tools that get in the way have no value at all. I recently auditioned Sketch for the first time in years. Since 2019, I’ve used Figma with all my clients. In 2019, these apps were quite similar, but since then, Figma has completely leapfrogged Sketch. Things that used to take me ten minutes to do in Sketch take ten seconds in Figma. This audition was incredibly revealing of how the tools have changed, how my process has changed, and how my work has changed.

But it got me thinking: does the tool change me? Does it change my output? Are all my designs just huge Auto Layout demos?

Constraints breed creativity. What do the tools breed in us?

A swipe file for digital designers

Copywriters have something they call a swipe file — a place they store bits of marketing and writing material they want to refer to later for inspiration. Austin Kleon’s Steal Like An Artist Journal includes its own swipe file.

Commonplace books have a similar idea: it’s a place to store your favourite stuff other people make. H.P. Lovecraft kept one. Ryan Holiday called his a project for a lifetime.”

You have to make your own wells of inspiration.

For many years, when I saw designs I liked and wanted to save for later reference, I would use Pinterest to save it, or simply take a screenshot and stick a copy of it in my Mac’s hard drive somewhere. (The latter is a much better solution than the former.)

Of course, a screenshot isn’t really enough. A good swipe file tells you where your inspiration comes from. It should include notes. Maybe even a full taxonomy. At that point, your basic file browser ain’t going to cut it. There’s no way to serendipitously discover things in the Finder.

These days, I like using Eagle, a macOS app that does a great job organizing all the visual media it saves. With support for everything from pictures to videos to full webpages, I think the app is a godsend. I was suspicious of it at first, mostly because it seemed to good be true, but it has survived three computers and a silicon transition without losing a single image, so I’m pretty confident in it these days.

It’s unfortunately Mac only, but it’s a darn good Mac app (if you like Mac-assed Mac apps). If you’re a Windows person or love your iPad for this sort of thing, I can’t help you. But I’d love to hear what you use.

When a design is in doubt

When in doubt, the answer is simple: reduce, reduce, reduce.

Didn’t Dieter say the best design is as little design as possible?

Probably still true. Probably true of words too.

(Edited for brevity.)

Further Sketch news in Figma’s world

I was saddened to hear about layoffs at Sketch. No company deserves to suffer layoffs, and certainly not a company that has done so much for its industry as Sketch. If you’re hiring, it sounds like the 80 people they’re letting go would be great for your team.

After Adobe bought Figma, I suggested to a couple different teams I freelance with that we could try Sketch again for our workflows. I’ve been impressed with their marketing efforts since the Figma acquisition (sadly it sounds like the marketing team is who they’re letting go of), and I miss using a Mac-native design app. 

Sadly, I think this ship has sailed. None of these developers are in love with Figma, and all of them hate Adobe, but Sketch being Mac-first immediately ruled them out for the teams I’m on. I wish Sketch took the Affinity route: build an amazing Mac app, and then build out native Windows and iPad versions. That could have made Sketch an unbeatable proposition in an increasingly tool-agnostic world.

It’s Figma’s world now. And in Figma’s world, it’s hard to beat ubiquity.

Redesigns in the open

Two of my favourite designers on the web are writing about the redesign process of their websites, as they’re designing them. The first to do this was Johnnie Hallman, who introduced the concept here. His posts have been enlightening, as always (he’s got me interested in Contentful, which is saying something).1

The second designer to take this on is Frank Chimero. I’ve been reading Frank’s writing religiously since 2013, when he was interviewed in The Great Discontent. It was obvious right away that he had a unique perspective on design, writing, and web development. I’ve read his blog multiple times over, studied every iteration of his website, and read his book several times. Needless to say, I’m a huge fan.

With all that being said, it’s been a delight to read through his thought process as he redesigns his blog. Many of his concerns regard typography, which is something I’m also obsessive about. Frank is sharing images of his process as he designs his website in the browser, and sharing how he approaches his work from the outside in,” as he often says.

Some of my favourite posts from Frank so far:

  • Perfect Trifecta: an examination of the moods and aesthetic Frank considers for his website.
  • Looking at Letters: in which Frank blows up typeface sizes and dissects, at great length, the way he compares the differences between similar typefaces (like Source Sans and National 2, or Scto and Untitled Sans). If you’re into type, or you’re a designer, this is the sort of writing from which we all benefit.
  • Scales and Hierarchy: Frank demonstrates the way he sets font sizes and line heights, and then talks about creating hierarchy with spacing, weight, colour, size, differing typefaces, and design accents.

Frank and Johnnie’s posts have illustrated what’s been missing in contemporary design writing, at least for me: none of us are writing about how we do the work. We’re sharing finished products and listicles. There is a dearth of education design writing that exists to do something other than market ourselves. 

I’m not redesigning my blog (yet), and I just launched a new version of my portfolio, but I’d like to start writing material like this myself.

Footnotes
  1. For those of you who don’t know, Johnnie also makes Cushion, a delightful web app for freelancers that helps them invoice clients and plan their projects. I have been a paying customer for years, and it’s very excellent at what it does.↩︎

Things I like: Söhne and the new Klim Type website

I’m super late to the party on this, but I’m a huge fan of Klim’s new(-ish) typeface, Söhne, as well as their amazing new website. Really, really clever website, and the face looks gorgeous.

How to design a better portfolio

About a week ago on Twitter, I asked a poorly phrased question, which I’ll re-phrase here for clarity’s sake:

Why do designers focus on images in their portfolio’s archive, instead of properly describing their work?

This is something I’m just as guilty of as the next designer. Here’s an image of what my portfolio looked like at the time of the tweet. You can find countless other design portfolios that riff on a theme just like this.

A screenshot of my earlier portfolio

My favourite portfolios are really image-heavy, and I suspect that’s true for most people. Those portfolios are so fun to look at and make. But I often find myself wondering if those portfolios are effective.

If you’re a potential client, why would you click on a thumbnail image? Some designers might hope that the thumbnail tells the story of their project, but the thumbnail is inconclusive at best and misleading at its worst. It often shows off what the final result looks like, but it doesn’t share the thinking behind that visual approach.

But that’s what designers should sell. We need to sell the thought process that gets clients results, because that’s what a good designer gets paid for.

Design pricing is in a race to the bottom. Or maybe it’s already bottomed out. But I think a lot of that is because we’re showing off visuals, instead of explaining our process or discussing our results.

So I’ve made some changes to my portfolio. Now, when you visit the home page, you’ll see a list of every project I was proud to be a part of. Instead of images, each project gets a description. Some of those descriptions link to case studies, and some don’t — but the work is all present and explained.

I had a lot of fun making this. My portfolio isn’t as flashy as it was before, but I hope my portfolio will now be more effective.

Good design is a fight

If you’re a designer who works with clients on a regular basis, it’s easy to be exhausted. Working with clients is hard! I’ve seen many designers, myself included, shake their heads in despair at client requests. I’ve also seen a lot of designers give up fighting them. 

But you can’t. The fight is what leads to good design. Good design is a fight. 

I’ve known one of my current clients for years now — probably getting close to half a decade. They’re a great crew, and the boss is a fantastic guy to work for. But we got into a few arguments on the most recent project that ended with me apologizing for the ruckus once the whole thing was over. 

The client simply said this: it’s okay. Arguing is part of good work.”

If you want to design something of value, you’re inevitably going to upset people. Design is saying no to a thousand ideas so you can say yes to one good one. That naturally leads to arguments. 

But don’t be disheartened: the best designers, in the world’s most desirable companies, fight every day. It’s a fight to make something worthwhile. But it’s a fight you can win.

Awesome design alert: the Helsinki Philharmonic Orchestra

I’ve been meaning to talk about the new brand identity of the Helsinki Philharmonic Orchestra for a while. This is absolutely wicked stuff from Bond Agency, a top-notch graphic design studio.

A large version of the Helsinki Philharmonic Orchestra logo

A few years ago, I did the design work for a music magazine called The Modern Producer. (I should really put that case study back up on the website; it was great.) One of the things I had fun with was the idea of using a waveform in the logo. The branding for the Helsinki Philharmonic Orchestra takes that idea so much further. I absolutely adore it.

The branding for the Helsinki Philharmonic Orchestra in use on print materials

I also love the motion that they bring into this identity. It all comes together beautifully, with clean typography and a real sense of energy. I get the feeling convincing people that seeing an orchestra is energetic is a tough sell, and this branding absolute nails it. I love every bit of it.

The branding for the Helsinki Philharmonic Orchestra is one of the year’s bests, folks. Check it out in all its glorious detail over at Bond Agency’s website. And Bond, if you’re reading this, much respect to you for this incredibly inspiring work.

Cooper Hewitt

One of the projects I’m working on is an identity project for a new Canadian charity. I’ve been trying to find a typeface that’s legible and distinctive, particularly in the regions of the world where they’ll be sending volunteers. I’ve found myself entranced by Cooper Hewitt’s typeface, which is open source and available for unrestricted public use.

In researching the typeface, I stumbled onto Pentagram’s new-ish case study about the project. It’s a very long read, but so incredibly insightful. In truth, I haven’t finished reading it yet. But the case study’s awesome, and I couldn’t wait to share it.

Check out Pentagram’s case study here.

Minimalism

Most of my clients start talking about the sort of design work they’re looking for and use the word minimalism”. Almost every time, they mean simplicity. But they’ve heard a lot of designers talk about minimalism in the past few years and think it’s going to unlock some hidden green valley of successful business heretofore unwitnessed by mankind. 

Great designers talk about minimalism all the time. Dieter Rams, of Braun fame, spoke frequently about using minimalism to remove layers of abstraction from his industrial design. Jony Ive speaks eloquently about minimalism whenever he narrates a new iPhone video for Apple. Recent Microsoft hire Andrew Kim used the term in a (now missing) blog post on his website to discuss his affection for the Xbox One S’s new design language. 

I think minimalism has a bad end game, though. 

Minimalism leads us to the sort of invisible” hardware and difficult software in films like Minority Report. I’ll be the first to say that Minority Report has some of the cooled computers ever. But every computer in the film looks completely unusable — like trying to open a coconut with a fingernail. 

Minimalism is all about the removal of features in an effort to achieve a zen-like product. It’s a philosophy more than a design mandate. And almost every hardware feature removed from a product gets added back into its software, which is why your phone feels increasingly complicated every year. 

I get it. I get that it’s the way things are going. But as designers, we should be aiming higher. 

Our goal should be to make usable products. If we want to delight people, we should be serving them with design. This applies to client services too. Clients come to us for our expertise, and our rationale — particularly the rationale of UX/​digital designers — should lean towards anti-minimalism. Human-centred design is decidedly anti-minimalist. 

Most of us aren’t minimalists. We like our creature comforts.

Minimalism is about clarity and simplicity. I believe in clear, purposeful design. But I don’t think minimalism is the only way, or even the most responsible way, to get there.

Blue and orange

I’ve read a lot of articles about how homogenous web design has become, but few have compelled me like Morgane Santos’ on Medium. For the first time, I felt as a web designer that I wanted to join this conversation.

This part of the article grabbed my attention:

Perhaps the biggest issue with all this homogeneity is how lonely it can feel when you want to do something different. Two separate friends have told me how they don’t feel like they fit in with the design community. These two friends are guys who more or less fit the Designer Dave stereotype, too. If they feel isolated, how does everyone else feel?

I started to gather my thoughts, but explained to my wife later on that I didn’t feel qualified to share them — which is interesting to me because it proves Ms. Santos’ theory. I, too, am white and in my mid-twenties (although I do not have a beard). Some of my web design work falls prey to certain stereotypes (although I don’t necessarily feel all of it does). In many ways, I relate to Designer Dave. With that being said, I’ve tried to gather my thoughts coherently regardless.

What’s happening in design reminds me of what’s been happening in filmmaking over the past twenty years. Have you noticed that a lot of popular action movies have been bathed in orange and blue?

Blade Runner screenshot Thelma and Louise screenshot The Dark Knight Screenshot

Once you see it, it’s hard to un-see it. Priceonomics has a really good rundown on what’s going on, and you should read the whole article, but this quote deserves special mention:

One way to figure out what will look good is to figure out what the common denominator is in the majority of your scenes. And it turns out that actors are in most scenes. And actors are usually human. And humans are orange, at least sort of! Most skin tones fall somewhere between pale peach and dark, dark brown, leaving them squarely in the orange segment of any color wheel. Blue and cyan are squarely on the opposite side of the wheel. You may remember from preschool that opposite” color pairs like this are also known as complementary” colors. That means that, side-by-side, they produce greater contrast than either would with any other color. And when we’re talking about color, contrast is generally a desirable thing.

I’d need to do more research, but I’d be willing to wager that a teal and orange colour scheme makes your average film studio more money on opening weekend too. Most big-budgets films are cast in this orange and blue look, while indies feel more free to roam around.

That’s not very different from web design: while market forces are unwilling to invest in unusual design, smaller organizations who need to stand out may be more interested. The same way some directors make one for the studio, and then one for them, it’s financially sensible to do the same thing as a designer. (I’m not saying to compromise your values; I’m telling you to make enough money to support yourself and your families.)

My second thought is this: there are ways to play with established conventions.

Priceonomics included an image from Mad Max: Fury Road in their article. It was my second-favourite movie last year, and a big part of that was because I adored the colours. The story is that director George Miller wanted to show the film in black and white, but Warner Bros. refused (market forces at work). In response, Miller gave them what they wanted: blue and orange, cranked up as high as he could make it go.

Mad Max: Fury Road screenshot

That sense of over-saturation practically outdoes Transformers, and in a backhand way, forces you to notice it and be aware. I don’t know a single person who saw it who didn’t mention the colours. It’s subversive. Miller wants the colours to be part of the film’s intensity, yes, but he also wants it to reflect the insanity of everything else going on. It’s absolutely intentional.

I think we can learn something from Miller: If you’re given constraints that you don’t like, be subversive with them. We design for audiences who are smart enough to notice, and while they might not realize you’re being playful, they’ll appreciate your work all the more. You’ll stand out within the confines of homogeneity.

All that being said, at the end of the day, I don’t know the answer to homogeneity in web design, nor do I feel qualified to share my thoughts on the topic. For me, sharing this takes courage.

I learned in school that our brains are wired to notice semiotic patterns. Blue and orange is one such pattern. Boring websites are another. And while neither are going away any time soon, I think there’s a lot we can do to subvert expectations and experiment with new things.