Use Typecast to design for the reader by putting type first. Try it now

Design Q&A

Inside the TechCrunch Redesign with Dan Mall

Tuesday 21st January 2014

In late 2013 TechCrunch launched the most typographically functional redesign we’ve seen in a while, thanks in large part to Dan Mall of SuperFriendly. Today he takes us inside the redesign, shares how he feels about clients changing his designs, and tells us how element collages improve client feedback.

Since the Tech Design relaunch went live, many have likened it to The Verge. How inspired were you by that site?

I take inspiration from everywhere, but The Verge is an easy one to reference for a number of reasons. It’s a great site. It’s beautiful looking. They’ve done a great job on the typography, and the team there is really pushing the envelop on their latest articles with design and the reading experience. There’s also lot of overlap between the subject matter covered by the Verge and TechCrunch. But it wasn’t the only thing we were inspired by.

I think it’s really difficult to invent patterns from scratch, and I don’t think it’s worth reinventing the wheel every single time. So I looked at hundreds of sites to see what patterns are working and which to apply.

Dan Mall's design inspiration

Dan collected inspiration from blogs, news sites and other resources during the TechCrunch project

I stole a lot of the patterns on TechCrunch from other sites, and I’m happy to admit that. Some of the patterns on the homepage are from people’s blogs I liked, and some on the article page I stole from news sites. I think it’s the combination of how those things come together – everything from colors and typography to layout and subject matter – that makes it unique and just TechCrunch.

Tell me a bit about your design process on the project.
How did you get the ball rolling?

I mostly started with type, and also element collages.

Tech Crunch is a publishing company, so the reading experience was really important to them. I wanted to make sure that it would be really good even if there was nothing else on the site – no colors, no image, no anything. So I treated everything else as enhancements to the typography. If the type could stand alone and make for a really great experience, that’d be a great place to be.

What issues with the existing type were you most keen to overcome?

It’s hard to talk about type in a vacuum because a lot of it is really based on the context the typography lives in. Robert Bringhurst starts his book The Elements of Typographic Style by saying, “Type exists to honor the content”, and I don’t feel like a lot of sites do that. It’s easy to choose great looking typefaces because there are a lot that are well made, but it’s not often that the type honors the content on the site by saying the same thing the content says.

The typography on the previous version of TechCrunch had that problem. Something was getting lost in translation by using Arial to communicate the right tone for what TechCrunch was writing. That’s really hard to do with web-safe fonts. Arial can only do so much to communicate your brand because it’s a vanilla typeface (and it was intended as such). Helvetica’s the same thing. The stuff that Matthew Carter has done – the Verdanas and the Georgias – I think that they have a different tone, but they’ve become watered down because people have used them so often (by necessity). Now that we’re able to use more typefaces, they don’t come with as much baggage – at least not yet.

Tell me about your type choices for Tech Crunch and why you felt they were best for the job.

We used Alright Sans by Okay Type for headlines and meta information, and then for the body we used Open Sans. I’m really pleased with Alright Sans for TechCrunch. It’s kind of editorial, but it’s a utilitarian typeface that still has personality. It matches well to the irreverence TechCrunch has in its writing. So from a tonal perspective, I think it works really well.

Alright Sans and Open Sans

Alright Sans’ structure and tone was a perfect match for TechCrunch’s super-long headings, while Open Sans offered clear, readable body copy

From a functional perspective, we looked at the fact that TechCrunch writes really long headlines, so I moved to real copy very quickly. In fact I think the first thing I showed them used real headlines. There was very little lorem ipsum because this site is so dependent on what the actual words are.

I started with condensed typefaces because I figured they’d take up less horizontal space and would fit more characters on a line. But we didn’t end up going that way. Some of them felt too long, even though it was the same number of characters. I was pretty skeptical that a non-condensed typeface would perform well, but just by varying the size and leading on Alright Sans, it balanced readability without looking like it was too much.

Dan's font stacks in Typecast

Early font pairings designed using Typecast

We were pretty excited to discover that you used Typecast on the project. How did it help you?

One of the things I love most about Typecast is the ability to browse and play with type. I try to buy as many typefaces as I can, but obviously I can’t buy every single one. And I don’t want to be so extravagant that I’m buying typefaces that I’m never going to use. Being able to quickly set typefaces in Typecast, being able to see them in the browser and look at what they’re doing and look at how they feel very quickly – that was really important to me. That’s one of the things Typecast really solves for me that nothing else has been able to before.

The other thing was being able to mix typefaces that I own with those I don’t. Being able to bring some of the typefaces that are on Typecast into Photoshop with some of the typefaces that I own has been really good. (Pro tip: in Typecast you can set fonts you own via the CSS editor by treating them as system fonts.).

Once we were solid on a type direction, it was important to compare services and renderings. One typeface we’d chosen was being served through Google Fonts, Typekit and Fontdeck.  Being able to set all three really quickly side by side in Typecast was great. We could go ‘Ok this one renders well in large scenarios. This one renders better on smaller scenarios’ and decide what we could and couldn’t live with. To have had to build pages, sign up for services, download their code and all of that stuff to make those comparisons would have just been too time consuming. I would have done it, but it would have been much more painful without Typecast.

Tell me about the element collages you mentioned earlier.

I’ve been doing element collages for the last year. It’s sort of a combination of type and also a little imagery, just to get the high-level art direction down. They help me do two things: get ideas that I’m really excited about out of my head, and get the right type of feedback from the client in the right way.

How do they differ from style tiles?

To me, they’re a specific type of style tile. I like style tiles, and the way Samantha Warren suggests doing them is a good one. But I think when people apply that to their own projects, sometimes they’re too high level about it and their tiles misdirect the client. The tiles focus only on tone and feel and not on look, when all of those things are important. Some will focus on keywords, like it should be ‘friendly’ and ‘approachable’, but what does that tone actually look like? Style tiles don’t always deliver that.

Reading is Fundamental

Element collages (like this one designed for RIF) let Dan quickly capture early ideas on art direction and get more-focused feedback

So I started doing element collages for a client called Reading is Fundamental. At the kickoff, they kept using these really visually-packed phrases like “We envision RIF as being able to help kids turn a new page in the book of their life” and “We want people to be able to browse this stuff visually, almost like visual bookshelves on our site”. And their iconography had things like books as a heart-shaped icon. When I got home I wanted to start designing to visualize those phrases, not with the intention of them being on a web page yet, but just to get them out of my head and into Photoshop.

I started with a 2000x2000 Photoshop canvas – no grid or anything like that. I picked arbitrary sizes and typefaces and started noticing that in my mind these elements had an art direction to them already. They lent themselves to a certain type of typography and color scheme –all of that. And I just put them on a page as a collage.

I now make them for just about every project I work on. Sometimes they go to the client, and sometimes they’re just internal for my team to keep us on the same page.

So how do they help improve client feedback?

We talk about clients micromanaging our designs, but the truth is that we don’t set up our clients to give us the right type of feedback at the right time.

When we present page designs, often clients will say, ‘Can you move this to the left?’ or ‘Can we swap the position of these?’ and really what they’re talking about is information architecture. Or, they’ll say things like, ‘Make this headline larger.’ But I want feedback on art direction, not design. I want them to tell me ‘This feels too big’ or ‘It looks like there’s a lot of blue here’ or ‘There’s too much white space here’.

The more I did element collages, the more I found I was getting the type of feedback I’d always wanted in an initial design round. For example, when I did one for TechCrunch, they said “Well we like this, but everything just feels too open.” And that was great feedback to me, because that said they wanted things to be more dense.

Often the design that is paid for isn’t the design that’s ultimately implemented by the client. How do you ensure the integrity of your design will be maintained after it leaves your hands?

I think it’s ok for clients to modify what you give them. It’s their site, and if we don’t acknowledge that, I think we’re doing a disservice to the process. They should be comfortable playing with the site. That’s one of the beauties of the web and why I do web design instead of print or billboard design or things that are more permanent – that ability to mold, push and tweak. So I think it’s sort of weird to hand something off to a client and say ‘You can’t touch this. You have to keep it the way it is’.

A lot of people treat their clients as dumb, and they’re not. They’re just as smart as we are, and oftentimes (even most of the time) they’re smarter. They’re just smarter with their business and not with ours.

Instead, we tried to be as open as possible with them about the process and equip them with a framework to help them understand the decisions we’d made so they can think about those things in the same way in the future. They can make new and different choices. That’s okay. I think sometimes we’re too precious about our own work and think ‘Well if it’s not the thing that we handed off then it’s inferior’. And I don’t believe that to be true.

Can you give me an example of where you were able to build the kind of understanding and ‘decision empathy’ you’re describing?

From day one I wanted the Font Bureau’s Antenna for the site. I explained to them why I thought Antenna Condensed would work: its functional uses, its tonal uses, how it was designed. And during the later typeface exploration, I tried to explain to them what Alright Sans and Open Sans did well as we went through a whole host of typefaces. After a few weeks of this we were able to have a dialogue about typography on the same level, which is pretty amazing. They were able to absorb that amount of education and say “We like this because it allows us to set a long headlines in a way that doesn’t feel very long.” That’s a great dialogue as opposed to them saying ‘I don’t like that one’ and me saying ‘Well I like it’ and having to argue about differences of opinion. We were talking objectively about something that people consider subjective. We tried to do that through the whole process, from IA, to dev, to strategy.

We also tried to work with them very closely and eliminate this idea of handoff. Of course there was a point where we stopped working on files and they started working on them more, but as early as we could we got them working with stuff. We were all in the same Github repository working on the same stuff; there was a lot of overlap. And in every design and architecture discussion we had with them, we tried to explain what we were thinking and why we were doing the things we were doing

When we finally did hand things off to them, it wasn’t the first time they were working with it. It wasn’t ‘finally their turn’ to tweak what we’d created. It was something we’d all agreed upon together, so the need to tweak or modify wasn’t there as much.

Who do you think is setting the best web type at the moment?

Certain foundries that I’ve loved for a while are now making their fonts available for the web, and they’re doing some of the best jobs at setting that type to make it look really attractive. Two of my favorites are Commercial Type and Village. I love Commercial Type and use their Stag typeface on my site. Up until now I’ve always had to edit in Photoshop and do image replacements. This was the last step I needed to move completely over to web fonts.

Village just launched a new site and their specimens are some of my favorites. I’ve been combing through their site for the last two weeks or so, and I’ve just been absorbing and screenshotting and lusting over everything they set.

I’ve also been in love with Webtype since I used Antenna on the Star Wars site. They’ve got a lot of typefaces coming out that I’m really excited by and lucky enough to have the chance to beta test.

Type on Screen

Get more web type tips, interviews and design gems by email

Hook me up!

Comments

blog comments powered by Disqus