Becoming better icon and logo designer from Jon Hicks

This week on the Boagworld Show we talk icon and logo design with the legendary Jon Hicks.

Skip to the interview (18:36) or this week’s links.

The transcription for this week’s show has been kindly provided by the team at Template Monster. Meanwhile this week’s terrible joke is brought to you by Perch! Support the show

Paul: Hello. Welcome to boagworld.com, the podcast for those involved in designing, developing app-running websites on a daily basis. My name is Paul. Joining me is, as always, Marcus. Hello, Marcus.

Marcus: Hello, Paul. How are you doing?

Paul: I’m very tired.

Marcus: Oh. Have you been out? I know you’ve been out buying cars and vans, and things lately.

Paul: No, I haven’t been buying cars. I’ve been buying motor homes for my new luxury lifestyle of travelling. Basically, it’s my back up plan. When my new business folds and I can’t pay the mortgage anymore, it’s going to be fine.

Marcus: You’ve got a little house.

Paul: I’ve got a little house on wheels.

Marcus: Yes.

Paul: So, it’s all good. But why would that make you tired, Paul?

Marcus: No, I’m tired because I feel like doing two jobs at once at the moment. Because I’m trying to finish off Headscape stuff and I’m trying to make sure that I can feed the family whenever.

Marcus: Well, hey ho.

Paul: You’ve no sympathy for me, have you?

Marcus: None at all.

Paul: Oh. Do you know that the day this goes out –?

Marcus: Yes?

Paul: – is my second to last day at Headscape?

Marcus: Right.

Paul: So, you’re sad, aren’t you now?

Marcus: Ah, I’m quite sad.

Paul: You’re not really, are you?

Marcus: No, I’m a bit.

Paul: I know. I am a bit. It’s weird, isn’t it?

Marcus: Yes, so peculiar.

Paul: I don’t know whether Chris told you, but we might already have found a project we can work together on.

Marcus: Yes. Yes, he did mention that briefly, which sounds perfectly doable and good.

Paul: I know.

Marcus: The sort of thing we all do.

Paul: I know. I was very happy, happy-clappy when I found out that one, so that’s good. We are still friends and we still love one another. It’s good. Now it’s this mentorship thing I’ve been doing. Do you know about that?

Marcus: Yes.

Paul: Flat me. That’s popular. I’m not used to being popular. I haven’t been popular ever, not even when I was at school. I was the unpopular kid, not like you. I wasn’t in a band.

Marcus: [Laughs] But now you are. Now you’re rock n’ roll Paul.

Paul: I’m rock n’ roll. No, no. But that is pretty very popular. So, it’s good. I have to put link in the show notes too because that’s what I do now, just pimp stuff the whole time.

Hey. So –

Marcus: What?

Paul: – what have you been doing?

Marcus: What have I bought over the weekend?

Paul: Well, no. I mean, Headscape-wise because I feel out of the loop now.

Marcus: I’ve been sorting a lot of things out.

Paul: Have you been rationalizing? Have you been using my departure as a time to clean up?

Marcus: Well, obviously these times have lots of sorting out of forms and all of that kind of thing, and lots of serious phone calls and that kind of stuff. Also, along the lines of sorting out quite as to the tricky project that we’ve been doing at the moment. So I do feel like that last two weeks has been a little bit kind of tough.

Paul: Oh.

Marcus: Yes, poor me. But I’ve got a few interesting things that I’m talking to people about, which is very cool. Whether they come off or not, who knows? But yes, we could do a little bit of good luck as well losing Paul. So we could do with a bit of good luck to kind of –

Paul: Now someone argued that is good luck. I mean, the amount that you’re going to save in gadgets alone. I’d say I’ve already made that joke on the podcast probably.

Marcus: Yes, and all those people that didn’t want to work with this because of you, Paul.

Paul: Yes. Suddenly, you’ve got these leads coming in. Oh, thank crap I won’t have to deal with Paul.

Marcus: I don’t think that’s the case, no. So, it does feel like it’s been lots of – I feel like I’ve been doing two jobs, Paul.

Paul: Oh, I see you too.

Marcus: There you go.

Paul: It’s all too tiring. I will sit in that. It’s blooming January, does it. Everything seems harder work in January, I think. I think it’s a month that should be cancelled.

Marcus: I look out the window and there is perfect blue sky with not a cloud in it.

Paul: I know. I know.

Marcus: There wasn’t.

Paul: That is cool.

Marcus: So, I don’t mind it. But I went wandering down to the village yesterday in similar weather, and said, “I’ve not got bored of winter yet.” Normally, it’s by the time of my birthday which is the end of February when I’m thinking, “Right, come on. Warm up.”

Paul: Yes. But now, this is amazing. This makes me wish I have my new motor home to go away.

Marcus: It’s very cold out there though.

Paul: Yes, it is.

Marcus: Looks pretty, but very cold.

Paul: That’s true. I don’t like the outdoors. So, did you do anything exciting over the weekend?

Marcus: What did I do over the weekend? I did lots of nice eating and drinking. It’s my mum’s 79th birthday yesterday. So, she took us all out for lunch.

Paul: Oh, right.

Marcus: I’m not quite sure how that works, but there you go.

Paul: No. That’s very peculiar.

Marcus: So yes, went for a lovely lunch, wandered down to the pub later.

Paul: I think she’s setting you up. That is why I think she did it. By being really generous this year, she’s basically saying, “I’m expecting something pretty [expletive] good on my 80th.”

Marcus: She’s not setting it up. She’s actually spelled that out in no uncertain terms.

[Laughter]

Marcus: Yes, there’s no having to read between the lines or anything like that.

Paul: Ah, right. Okay. Fair enough.

Marcus: So, there you go. Yes, she doesn’t beat around the bush, my mother.

Paul: So, we got a good show today. We got Jon Hicks on.

Marcus: I missed this one, too.

Paul: You missed this one, too. You missed all the best ones. No, that’s really insulting to people that you were on.

Marcus: I think I missed two or three maybe, and this was one of them. It was early on when I was busy doing other –

Paul: Important things.

Marcus: Yes.

Paul: Yes. Jon is always great to talk to, isn’t he? He’s just such a nice bloke. If you don’t know Jon Hicks, he’s an amazing guy. He’s basically the go-to guy really for icon design and logo designs. So, if you think of some cool start-up kind of company, chances are Jon Hicks has designed that branding.

So, MailChimp – He’s done icon set for Spotify. He famously has done the Firefox logo, which he’s never managed to live down.

Marcus: Famously, you did the Headscape logo.

Paul: I did it. Yes, he did the Headscape logo. We don’t really kind of fit into the same coolness level as most of his clients. I think he did it as a favour more than anything. So he’s very cool. So we’re going to talk to him. But I do need to talk about sponsors before we get into the interview.

Marcus: Yes, we must.

Paul: Because the sponsors this week again is Template Monster. So, this is show number 3. Yes, that’s right. And so, they have once again provided this week’s transcription, which is really lovely of them. And I continue to discover more and more things about Template Monster from looking around their site. They’re the largest template library on the web.

Marcus: In the world.

Paul: Unbelievably big. And it’s really interesting because when I asked them to sponsor, I said, “This is one thing you want me to kind of say about you on the show?” “No, whatever you want.” It’s just they’re so laid back. It’s so cool. So I had to do some research of my own, and I discovered all these kind of things about them. So, the largest library on the web; they do some very cool stuff. They even got some quite experimental template-y stuff that I can imagine would actually be very good for commercial project, but is very, very cool. So it’s worth having to nose around just to look at that.

And the other thing that really impresses me is they have 24/7 support, right? So, if you have problems setting up your template, you can get them to help you do it. And they provide basic training and all kinds of stuff. They’ll even customize a template for you. So if you want to buy a template, and then change it around a bit, they’ll help you do that. And they throw in stock imagery with the templates you buy. So, you don’t have the additional cost of having to buy stock imagery for a [ML 0:09:06.9].

So, they’re really quite – I didn’t realize how many added extras and stuff they did. I just thought you buy a template; you download it, away you go. But actually, they seem to have quite a lot of extra stuff as well, which is very cool. So you can check out them at templatemonster.com. And I’m incredibly grateful that they’re helping provide the transcriptions, which are scaringly expensive. But there you go.

So, next up is our interview with Jon Hicks. That’s what I said. Jon Hicks is an amazing guy. If you haven’t seen his book “Icon”, then you need to check it out. I’ll put a link in the show notes, too. It’s a thing of beauty. It’s one of those books that you want to buy just so you can put it on the coffee table and make yourself look design-y, right? Because it’s just a beautiful book. And I actually learned stuff about weird things like SVG, which is better to go for, web fonts or SVG, and yes, great stuff in there.

So, we’re going to talk to Jon for a bit. And then, we’re going to be back for the most exciting part of the show these days, which is Marcus’ joke.

Marcus: Yes, maybe I should start with a joke these days. And then, people would just – they’d get what they need. And then, they could leave.

Paul: I do think they come for the interview. I’m sorry to mention that, but I think that’s the case. And so, with no further ado, the interview.

Interview with Jon Hicks

Jon Hicks
Jon Hicks joins us on this week’s show to discuss logo and icon design.

Paul: So hello, Jon. How are you?

Jon: I’m all right, thanks. How are you?

Paul: Yes, yes. It’s that magical time of the year when you don’t want to do any work and just sit around waiting for Christmas.

Jon: Oh, I know. Actually, it seems about November, I just wanted to hibernate.

Paul: I know.

Jon: I’d just curled up into a sofa with some DVDs and just not work or not engage with life, and say, “I’ll come out in March.”

Paul: Apparently, there were French peasants that used to do that. Essentially, life was so hard over the winter in this certain part of France that they all but hibernated. They got their cache of food. They’ve moved into the house, and they slept and ate. And that was about it. So, I think we ought to bring this back. We don’t want to lose our tradition.

Jon: Yes, we do really have the harsh winters go with it. But yes, it doesn’t matter, does it? We could still do that.

Paul: No, not really. Of course, it’s somewhat relevant because by the time this podcast comes out, it will be 2015. So, you are actually in the future right now.

Jon: Oh, I’ve always wanted to do that.

Paul: Yes, I know it’s cool, isn’t it? So, there we go. So, as I seem to be saying every week when I do one of these interviews, this whole season of the podcast is a massive con. Basically, the idea of this season of the podcast is for us to get free advice and consultancy from very clever people about areas where we’re weak and a bit rubbish.

And one area we are – Well, we’re so weak and a bit rubbish in it that we just avoid it entirely is the kind of logo design, app design, branding kind of area. So, we thought who better than the man that did all branding, and obviously, did every piece of kind of logo and app design that – Basically, if you’ve heard of any cool app, Jon is the man that’s done the icon.

Jon: Oh, I wish. I wish [laughs]. But certainly, it’s helpful at conferences because some people say at conferences, “What do you do? What do I know you from?”

I usually look at the sponsors. And you got people like Shopify and MailChimp. And you think, “Oh, with them over there.” So it’s graceful.

Paul: At least we’ve moved beyond the you-did-the-Firefox-logo now.

Jon: I know. That was embarrassing for a while, wasn’t it? It’s a bit like that big-in-Japan or something, or one-hit wonder. It’s just like, “Oh.” And there were occasions where I had to bring it out. I was at a party in New York for a start-up I was working for. And I was really struggling with some conversation with some of these people. They were quite dry, and I had to bring out the – "Oh, yes. So I did the Firefox logo,” as a kind of last ditch attempt to try and get some conversation going. But yes, it didn’t work [laughs].

Paul: Well, I mean, the fact that I’ve been looking at your icon design only this morning, because I’ve been chatting with Dan on Skype right now. And he gave me a big-thumbs up, which will be thumbs up, I believe.

Jon: Oh, thank you. Yes, indeed.

Paul: So, you design them, and then someone else animated them. Is that right?

Jon: Yes, basically. When we’re working on the project, the idea was to keep the existing Skype style, so these really tiny, sort of bitmaps or pixel art icons. So we did them in that style, and then we did all the various sizes. And then, a guy, called Julian Frost, he took these original files and really brought them to life. He did such an amazing job. Sometimes I get the credit for the animation. So, I just kind of keep quiet.

Paul: Absolutely, the animation is lovely.

Jon: It is. And it’s particularly a good one, the ring dance.

Paul: That, I haven’t tried dance.

Jon: Oh, it must have taken him ages. But we got the kind of John Travolta type character in the white suit. But he brought it to life and did several different kinds of dance in it.

Paul: I’m setting you a dance now so I can see. Oh, very cool.

Jon: It’s just amazing work. And actually, with the new Skype now, they’ve got this option where you can have large emoticons. You’re just posting one by yourself.

Paul: Yes.

Jon: You’d actually see the detail in it, which is great.

Paul: That is brilliant. I love that very much. So, obviously this has become your area. Is it taking the majority of the time that you do now? What else are you up to? Do you still do web design?

Jon: Well, not really. No. I mean, I think the last website I did was about four years ago to be honest, apart from just like little side projects or my own one. But that’s not necessarily because of I’ve chosen that path. I would say probably about 75% of my work is interface design. So I’m still doing a little work with Opera.

Paul: Right.

Jon: And I’m doing a lot of work on stuff that generally doesn’t get seen. It’s kind of more experimental stuff. And we do a lot of mocking up of new features and ideas in CSS and HTML. And I would say the rest of that 25% is the occasional logo design, branding projects, or icon sets. It’s something that sort of happening really soon. It’s releasing the icon handbook. But people have actually said, "Well I should need an icon set.” It’s usually companies that – they’ve got a very sort of specialist’s need. So, they’ve gone to royalty-free icon sets, and they’ve not found everything they need. Like, I did a set for Cochlear – this company in Australia who make the hearing implants.

Paul: Oh, yes.

Jon: And they needed all sorts of things, like MRI scanner and what to expect from your first operation, kind of all these specific icons. So, they can’t get that from a royalty-free set. So that’s where I come in and I can create a whole set in the same style. So there’d be some that are very common like back-forward or menu. But then, we’ll be all the really sort of specific ones.

I’ve kind of found a little niche doing that, and also talking about it because it is quite a very small, specific part of the whole thing in websites or app design. Sometimes I think it’s a little bit like saying I designed a copyright line in footers. That’s my job, a little bit too narrow. It’s like, “Oh, great. That takes all day, does it?”

Paul: So, it was really funny because my son has started creating pixelot. So, I was sitting down with him yesterday going through your book, “The Icon Handbook” just showing him all the different things and how to do it. And so, you’ve doubled your credibility with my son because he already thought you were cool because you’re knowledge of Dr. Who. But now, you do icons. That just really sets over the top.

Jon: Oh, that’s nice. I’ve got to get on the right side of your son because I’ve seen what happens. Didn’t someone get him to punch you for him?

Paul: Yes. And it definitely amuses.

Jon: That was it.

Paul: Yes. And it definitely amuses my son as a remote punching tool. That’s it. It’s not good. I need to ban my son from Twitter so he doesn’t see Anna’s updates.

Jon: Yes, exactly. Lock it.

Paul: Exactly. So, there are kinds of different things here, isn’t there? Because you’ve got kind of culprit logo design identity stuff. Then you’ve got icon sets. And then, you’ve got kind of application icons, things like an OS Apple or whatever else. Do you do those as well?

Jon: Yes, yes. I mean, there’s less of it these days, I think. They’re all trend, especially when I was writing the icon handbook. There was this big trend for application icons to be big, photo-realistic, lovely icons. I remember when we wrote the book, we’ve got the latest files from Panic for the Transmit icon –

Paul: Oh, yes.

Jon: – and the Yellow Van. Basically, the maximum size you can show on a Mac is 1,204 pixels square. But they do their icon at work twice that size partly because it’s sort of future proofing, and also because it means that they can work on a bigger paint canvas and get the detail in. And the detail is incredible in those icons.

Within the last few years, there’s a real shift. And you’ve probably seen this, that now we’re heading towards – I hate to use the F word, but the flat icons. They’re very much simpler. There is still gradience but they’re very subtle and that’s that. You’re not going for any kind of photorealism. So, they’ve gone from these very high illustration jobs to something very simple. And again, its fashion and things will change and – But I think partly for that reason, the few application icons

I’ve done recently have actually been companies who’ve done one of these sort of photorealistic ones before and they want to come back and say "Well, now on iOS especially we need to have a different style because it just doesn’t fit. It doesn’t look a part of that OS. It’s that whole thing of you can tell when something was written in Java. It just doesn’t feel right and sitting there or harmonize. So yes, that’s one and a half of what I’ve been doing quite a bit recently, it’s just redoing old work, which is great.

Paul: In terms of your approach and your thinking and in the practical, kind of doing, is there a big difference between how you approach icon sets and applications and logos?

Jon: Yes. Basically, the two divisions there are logo and icons.

Paul: Okay.

Jon: To summarize it, a logo basically, you’re looking for something that’s going to be unique but memorable. But with an icon you’re actually looking for something that isn’t unique. You’re trying to find the symbol to use or the glyph to use that everyone knew exists, so that you’re not trying to redo things from scratch. I think the home icon is always a good example because you could represent a home icon. You could do a very fancy, grand mansion-type house or you could try and do something a bit different like a welcome mat or something. But these all get away from the fact that you got to do the simple, standard home icon that everyone else does because that’s the point. You’ve got to be able to recognize it quickly. It’s not there to be different. It’s there to be recognized.

Paul: I know. And that’s a kind of classic mistake I often think that young designers make. They feel like, “Oh, we need to push things forward. We need to do things in a new way.”

Jon: Yes. Yes. And it’s difficult, because you don’t want to stump on that enthusiasm, but icons are definitely an area where being reserved and conservative works. It’s one of those rare places. But with logos, definitely, you’re aiming for something that still is recognizable and memorable but something that’s unique, something that you can own that other people don’t.

Paul: Yes. Actually, that makes me think of an interesting one in terms of sticking with conventions, one that’s a big more controversial, which is the hamburger menu.

Jon: Yes.

Paul: Because that’s become a convention but nobody seems to like it. What are your thoughts on that?

Jon: Well, that’s just it. I think it’s a case of whether you like it or not. I think the like is maybe aesthetic reasons, but we’ve actually had that menu icon since the mid-late 70s.

Paul: Really?

Jon: Yes. It’s one of the original – I can never remember, it’s the Alto or the Star. But there’s a Xerox machine that had the first graphical user interface. One of the icons it had was that three bar icon to represent a list item, a list of commands. And it’s something that now it’s very much relied upon, I think. I think one of the problems with it is the fact that people think “Well, what do we do about the navigation? I will just bung it in one of these menus that slides in from the left,” or something.

Paul: Yes.

Jon: But my point of view is it’s becoming recognizable. It’s becoming learned. You don’t have to think about a play or pause icon and you don’t always have to think about whether you find that aesthetically pleasing, having a play or pause. You just know it and you go to it. So I think that’s going to happen. We’re just in that phase now where everyone’s starting to recognize it and it will become part of our learned experience that’s what you go to. My biggest problem with it is there isn’t a burger. And I’ve said this loads of times before. It’s a club sandwich.

Paul: Yes. Yes. You’re correct.

Jon: Or a three-bar heater or something. But, yes, a burger’s got that kind of day one on the top. So it’s got a bit of – But it doesn’t look like a burger. I get that really anal way.

Paul: Well, I mean, that must be icon design all over. It’s getting really into that level of detail and obsessionism, is it not?

Jon: Yes, I guess so. It’s a really good example, there’s a guy who, I think, is actually one of the best icon designers. His work is iconwerk.de. He’s a German designer. And he posted this picture of a Bluetooth headset and it had about 40 different versions, all quite similar, but it was this hunting for the perfect, simplified Bluetooth headset.

So sometimes you’d have suggestions of little buttons or something on the side, and that’s basically what a lot of icon design is. You’re starting with an original concept, okay? It’s got to look like a Bluetooth headset. That’s fine. It’s a real object. And that’s what you call an iconic icon. It’s representing a real thing.

So you start by doing this simplified version. And then you copy and do a different version of it. And then you end up with this art board full of these different versions. And you can start to see “Okay, well that one works better than that one,” and it’s a lot of iteration, even though it’s a very small thing. It can only be a 16 pixel square, but you end up with a lot of time just going over it to improve it.

Paul: Do you tend to, in terms of icon sets, so where you have an icon at multiple levels, one presumes that essentially – multiple sizes, I mean – essentially you’re having to design each of those icons separately, because it’s not just a matter of scaling it down, one presumes, or scaling up.

Jon: Yes. Exactly. And that’s what happened with Spotify. As part of Spotify, there was this – We have about three or four different sizes per icon. Internally, what tends to happen is that the icon stays at pretty much the same proportions and scales but we do things like take stroke weights down.

Paul: Okay.

Jon: So you take a stroke weight of an icon at 16 pixels, which is just one pixel.

Paul: Yes.

Jon: This is the really nerdy bit. I tend to make it 0.8 pixels.

Paul: Of course.

Jon: Of course. It’s an Illustrator thing, I think, generally. But basically if you’ve got a circle and you make it one pixel, and you say you’ve got that stroke on the inside, it actually adds an extra layer of little sub-pixels, whereas doing it as 0.8, it just sort of crispens it up.

Paul: Ah.

Jon: So you sort of have those little fiddles like that. And then by the time it gets to 64 pixels, it should be like 4 pixels, if you’re scaling it exactly. But that looks too chunky. So you take it back to two or three. So there’s also the option of adding more detail in the larger versions. Just little bits of – You can play with it a little bit more. I mean, for example, again, in Spotify, we do these things called genre icons. So when you go to browse –

Paul: Yes.

Jon: – and you’re looking for all different types of music, we do these larger icons, which just have a little bit more detail in them. And it’s all to do with the size they’re being shown. But having said that, there is a case of if you were providing an icon that’s going to be shown at that kind of size – Now this is where it gets a bit difficult with the whole high density screens. But if you think of it as it’s going to be shown at 20 device pixels, it’s a matter of how high that resolution is. Then generally, yes, you would just create one icon, you’d make it a vector, if possible, like using SVG or an icon font. Basically that means you have to keep creating all these different bitmap versions.

Paul: Yes.

Jon: So it’ll scale and look good on anything. So –

Paul: I’ve become – So if it sounded like I zoned out then –

Jon: Yes, it did.

Paul: – it’s because I’ve become hypnotized by the dancing guy in Skype. I’m just still watching it dancing away and it seems to be doing my head in. So, there’s all kinds of – Oh, thanks, Jon. That’s just wonderful. It’s just [inaudible 0:28:45.1] posted me a picture of somebody pulling their pants down. So that’s really nice.

Jon: Do you know what? When Microsoft took over Skype they removed a lot of the rude icons that we’d worked on, but they kept that one. I don’t know why.

Paul: That’s really interesting.

Jon: They obviously felt that wasn’t bad.

Paul: No, apparently not.

Jon: Sorry.

Paul: Yes, what was I saying? See now you’ve completely thrown me. I’ve forgotten. Oh! You obviously spent a huge amount of effort developing all these different versions of the icons. I’m quite interested in what you show the client. Because let’s say, for example, if you’ve designed 40 different versions of a Bluetooth headset, do you just show the client your preferred version or do you give them the choice? Don’t you end up having long meetings where you’re endlessly debating a 16 pixel square?

Jon: Not long meetings, but yes, I wouldn’t show the client that many versions. I would just show them one. But what I might show them are different approaches. So I just recently – What was I working on? For Spotify, there were icons like – there’s one for reggae.

Paul: Ah, I saw it. The little people versions that you posted on your website.

Jon: Yes, that was that. Basically there are different ways that you can do these like recently for reggae, we were looking at “What are the options? How can you represent reggae?” And you think you could do like a Rasta hat but that on its own could just be anything. It would just be a blob. And obviously it’s monochrome, so you can’t use color to help you.

So you start looking at things like, well, one option was the Lion of Judah symbol. Or we could have a spliff. But it’s very hard. With a lot of those genres of music, you could actually use an instrument to represent it, because instruments can be very specific to a genre. So what I would do is show them different approaches, different metaphors, as they were.

But, no. When it comes to that Bluetooth headset thing, no, that was for my own personal use, so I will do that process; and then, choose one that looks the best.

Paul: Yes, because I can imagine it would turn into an absolute nightmare, otherwise.

Jon: It would just come across as a bit of an indecisive designer, wouldn’t it? “Well, I don’t know. You choose one.”

Paul: Yes.

Jon: It’s very hard for the client to look at this – a contact sheet of like 40 icons and say “Well, I need them ready.”

Paul: Yes. Exactly. Talking about nightmares mind, can we switch to logo design for a minute?

Jon: Yes.

Paul: Because I imagine that that must be the most subjective picky, painful process that I can possibly imagine, because identities, a company identity, it’s possibly the most important and beloved of things for most organizations.

Jon: Yes. Yes, sure.

Paul: How the hell do you approach that process?

Jon: Well, this is the thing. There’s no process that works for everybody.

Paul: Right.

Jon: Sometimes, you’re spending a lot of time iterating on an icon or a logo, I should say. And it takes a long time to get there. Sometimes, you can do it right the first time.

Paul: Okay.

Jon: And it’s not an easy one. I mean, MailChimp is actually an example where there was an existing logo. So this happens a lot, actually. There’s some kind of – There’s been a startup and they haven’t had money at the start, so they just made their own logo. So in the case of MailChimp, they made this group quite nice. Actually, I thought, this chimp face is made out of circles.

Paul: Okay.

Jon: So what they said was “Can we develop this into an actual character, full character from head to toe?” So for that kind of logo design you’ve got a starting point. And basically the first sketch I did, I thought “Oh, actually that was quite good,” and I sent it to them and they approved it. I did the final vector version, and again, that was approved, and it was done.

Paul: Oh, tricky.

Jon: And that can happen. It doesn’t happen all the time, but I think Shopify is probably the only other example. But there’s one that’s an online video player and converter called Miro. We went through numerous iterations on that trying to find something. I think the problem, a lot of it, comes from is when people decide that they want to show a lot of company values or features or that kind of thing in a logo. They try to pack too much in.

Jon: And I remember this, when I was in my first job as a junior designer in Coventry. We had to do this logo for Coombe Abbey Country Park. So the country park had this nice, ground house. It was famous for having a lot of herons. So we went to the show at the heronry. It was an adventure park; it was all these things. And basically, what they wanted was something to show all these things in one go.

Paul: Okay.

Jon: So it became a really complex black and white illustration which, despite us saying “This isn’t going to work. This can’t be reproduced small.” And this was especially in this case because we’re talking about things like putting adverts in newspapers.

Paul: Yes.

Jon: So when you’ve got a small logo in a newspaper and the ink bleeds, it just becomes a blob. Basically, we need to choose one thing to represent it and not try and basically put a brochure into a log.

Paul: I’m quite interested when you talk about MailChimp because their logo – It’s almost not really a logo, is it? It’s a character that’s kind of representative of them.

Jon: Yes, and I get that a lot, this kind of what we call mascot design. Basically, you’ve got a – There’s one for WooThemes as well, that I did this whole character called Hiro, that is a ninja – a little cute ninja.

Paul: Oh, I know. Yes.

Jon: Not the kind of ninja that would kill you. Not the kind of ninja that would surprise you; and then, maybe –

Paul: Fall over.

Jon: – [crosstalk 35:09.8] massage. Yes, or fall over. But yes, it probably would. And that’s what’s popular. And I think that’s, again, the other direction. So rather than trying to crumble these things into a logo, what they’re actually doing is, basically instead of giving the company a face, giving it some way of humanizing it a little bit, I think. Basically, the logo is there to recognize the company by.

Paul: Really?

Jon: You wouldn’t know from the Apple logo what they make.

Paul: No.

Jon: But over time, you tend to relate those two things together.

Paul: Oh, I mean it’s essentially a signature almost, isn’t it? For the organization?

Jon: Yes. Exactly. Yes.

Paul: So when you do something like MailChimp Freddie, what do you deliver, because they have Freddie on absolutely everything you could possibly conceive of in every position known to man including, I think, it’s on their annual report where it’s showing its bum cheeks. All these different positions and characteristics, all the rest, yes; are they constantly coming back to you saying, “Can you draw Freddie with his bum cheeks hanging out?”

Jon: [Laughs] No, actually. No. Since doing the original one, they’ve kind of created their own new version. There’s this new work pond that’s like just the head of Freddie that’s winking.

Paul: Oh, yes.

Jon: And it’s sort of based on the one I did but it’s flatter, and again, there’s that kind of – It’s the fashion part of it, so it changed what was fashionable at the time and making it to work today because it’s kind of flatter or cartoon-y style. But no, I think they’ve maybe got their own illustrator now that can do Freddie and all his poses. But it is an unusual one in that – MailChimp is the only one I know that does that, that really makes the most out of it in that way.

Paul: I quite like that mind. I think that works well because it weaves that character into everything they do, which, I think, is incredibly effective.

Jon: Yes. For what they do, if you approach that logo in a very traditional sense, what would you end up with? Probably something with an envelope.

Paul: Yes.

Jon: And it’s very dull. So actually what they’re doing is – I mean, some people I know don’t like it. I think they find it a bit too overused, a bit too cutesy, especially if there’s something going wrong, they don’t want the grinning chimp face in it –

Paul: No, absolutely.

Jon: – greeting them. But I think for most people that it does do what it should do. It does give them a more human face, a chimp face, but it’s almost a warmer thing than some sort of corporate, envelope-based logo.

Paul: So, you’ve talked about already that trying to say too much within a logo, but what other common mistakes do you see people are making with logos? Because we’re surrounded by them everywhere, aren’t they? You can’t turn around without seeing a logo. And I can imagine, as a designer that works on logos, you must be constantly in pain as you look around the world and see these horrendous implementations. And I wonder what got under your skin the most?

Jon: Well, I mean, the thing is logos can be very much trend led.

Paul: Yes.

Jon: So there’s a site called logolounge.com. Every year, what they do is they sum up all the trends that they’ve been seeing over the last year. So in some years, that was like very – So you had to have some kind of swirly logo, because it was dynamic and something a bit different and – Sorry, I don’t know if you heard that but we’re right next to traffic lights in the office, so it is very loud.

Paul: Lovely.

Jon: A loud motorbike.

Paul: Have you got the window open or something?

Jon: No, no, no.

Paul: Not my word.

Jon: It’s just very loud. People are very good across. They’re sitting in the traffic lights revving until the lights go green; and then, they’re off.

Paul: Ouch!

Paul: Anyway.

Paul: Yes.

Jon: Yes. So LogoLounge does the logo trends. Say, for example, over the last year, there’s been a trend for hand-lettered type, things like diagonals, triangles, geometric shapes, all coming together with different facets and different colors and ways that are very popular too, that’s kind of like the Wi-Fi. So, it’s difficult because at the same time, for a logo to be accepted and for the client to like it, it always has to follow trends a little bit. So, the goal is always try and do something that will transcend those kinds of things a little bit, something quite clever, very simple, but still something that you can own, that people are going to say, “That’s us.”

I remember, we’re trying to do a new version of the Opera logo, and we’re thinking, “Oh, wouldn’t it be nice just to have a really simple, sort of thick strokes circle, just a really very simple “O” because it’s obviously minimal.” But the problem with that is it’s not ownable. You can’t say, “Oh, this circle now belongs to Opera.” Everyone can use a circle. So, that’s the difficult part.

In terms of what I see in other logos that I hate, not so much actually. I mean, I think I’ve seen a lot of logo designs like – one that immediately came to mind was the new ITV logo that was introduced a year or two ago.

Paul: Oh! I don’t think I’ve even noticed that. I don’t really watch traditional TV anymore.

Jon: [Laughs] Are you internets only, are you?

Paul: I am a little bit that way inclined.

Jon: Well, I don’t intend to watch ITV apart from Lewis because it’s all from then Oxford and that’s – You look like “Oh, I’ve been there.” And recognizing a bit where Lea and I had our first date and that’s kind of weeks ago, it’s that kind of thing.

But the ITV logo went from this very stage – capitals type logo – to one that’s actually almost like a script phase. The usually got a series of slightly transparent colour. So, whether you have a lappy getting that, different colors coming through. And again, that’s a very trendy thing in logos last couple of years.

I look at that, I was thinking, “Yes, that’s great.” And I see a lot of deep analysis on websites under consideration, which one looks at new logos and new re-designs. And they often sort of slogged off for a declined. “Well, it doesn’t work for me.” But actually, generally, I like a logo design and stuff’s that’s coming through.

Airbnb is another one. There was a huge poster, a company of the Airbnb logo explaining about the process they went through. And I can’t help thinking that a lot of that was sort of made up after the event because that’s the kind of thing I get asked to do. I say, “Well, can we show this logo but can we show the process?” And you cannot say, “Actually, I was to do the doodle while I was on the phone, just on one of the phones, “Oh, that’d be nice.”

[Laughter]

Because often, to be honest – and that is being brutally honest, that is often how it can work. Just the, “Oh, yes. It’s a nice logo.” So yes, I don’t really go in for that whole kind of the deep, “this is a story telling”, and that kind of thing.

Paul: But do you not do –? With design, I think a lot of it happens on a subconscious level. Like you said, you’re on the phone and you’re doodling. But that doesn’t mean – I don’t know. Well, I’m trying to work out how much of it – all the rationale do you add off to it is just BS, and how much of it. Is your subconscious processing all these stuff.

Jon: Yes. I mean, there are elements of that. Obviously, the more experienced you are in design, a design who’s been working for 30 years for a variety of clients, will almost have that kind of instinct, I think, of I know what kind of company this and what kind of thing will work for them.

I mean, Paul Rand was a famous one for – He was someone who never gave options for logos. I mean, we did the next logo for Steve Jobs. He basically said, “You’ll tell me all about your company. You educate me. I’ll go away, and I will do what I think should your logo be. You don’t have to use it, but you have to pay for it.”

Paul: Yes.

Jon: And that’s it. That’s all you’re getting, the one logo. And it sounded like that was a good approach. But I also think that clients are the ones that know their markets. So, to an extent, I often do give options for logos, different ideas and approaches because I think the client will be in a much better position than I will be to recognize what would work for their particular market.

Paul: I think there’s also a degree that they have to believe in the final result. They have to have a sense of ownership over it because this applies with web design as well. If they don’t like it, if they’re not passionate about it, if they’re not there, they’re going to mess with it or they’re going to destroy it later. Or they’re going to stop using it. Or they’re going to be a bit embarrassed by it. And you can’t have any of those things at the end of the day, can you?

Jon: No. A lot of times, you can recognize in their feedback what they’re trying to make the logo into. I’m just saying that to them. You can say you don’t want to do this because it’s going to be dated or it’s too trendy now, or this isn’t going to work for your audience. There are certain things and you can recognize like that. And it does help obviously if the whole company is behind it, and helps even more if it’s a small company because then you can talk to – I did one recently for – that was a partnership, which is great because you can talk to both of them at the same time. And all of the stakeholders, I think, were involved, and we got a good result.

Paul: What about icon sets? Do you find the same level of pickiness over that? I’m guessing that they’re much easier to do.

Jon: Yes. I think there’s an element of that basically because those differences we talked about with logos and icons. I think there’s an element of the style so that even with a simplified logo. There’s still a style that you can apply to it. And often, that style maybe has to harmonize with what they’ve already done.

Usually it’s with an in-house team, like with Spotify. They’ve got this style that’s right around it. So, you can’t then produce an icon set that’s got all sharp edges. It’s got to sit and harmonize, and especially with things like the type size to make sure that it works with those things, like Spotify as it uses [proxy manoeuvre 0:47:00.7].

So all the time you’re looking at things like proxy manoeuvre for things like proxy manoeuvre, for things like the weight of the letters, certain curves and things just to get some ideas about how you can make it sit nicely with it.

Paul: So, it’s an all-constraining experience in the logo design in a way. That’s not a bad –

Jon: Yes.

Paul: We think of it as not exactly bad, but it’s not necessarily – But it is a more constraining experience, I’m guessing.

Jon: Sure. And I would certainly say I’d not provide less options. What we usually do is when a client needs an icon set, they’ve got a list of icons. They’ve usually done some kind of audit and got together a list of what they actually need. So, from that, we will choose six icons. We might choose a couple of really easy ones, like document or reload. Then they will choose some tricky ones, like MRI scanner or something that’s a little bit more unusual.

And what we’ll do is a discovery phase where we try out maybe a few different styles, different approaches, and then try them out in context. Usually, at that stage, I can get some kind of work in progress of a design layout. I can try these things out.

One I did for a bank in Australia. We also had to try them out in things like billboards, or etched into glass, the window of the bank, and that kind of thing. So, there are a few more ways of showing the icon that we needed to consider, or packaging is the other one. So yes, I think it’s more that kind of – just making sure that for the first six or so, we’re agreeing on a style, the final format because that can change how you actually create the artwork.

Paul: Oh, really?

Jon: A little bit, yes. For example, if you know that you’re going to be doing an SVG, then I’ll be designing anything that’s got a stroke. So, say for example, that kind of arrow that you get on carousels are very simple app too. So for that, if it’s an SVG, I would do that as a stroke that centres and rounded edges. And you can specify that on the SVG. But if it’s going to be an icon font, that’s got to be converted to a path on the outside. So, there are little things like that, and just be aware of how that’s going to be used. But generally, that’s – sorry, I’ve lost my original point completely.

Paul: I don’t care. That last bit, that whole bit when you’re talking about your process that you were going through with client, that’s what you were talking about.

Jon: Yes. So, you decide on that file format. Thank you.

Paul: I find that process really interesting of how many options you give them, the whole trying it in context stuff. All of that is different. Having to worry about what your work is going to look like when it’s etched in glass, that just does my head in.

Jon: Yes, yes. Well, it’s important to get this discovery phase right because then once you’ve got that, once you’ve got the style, the format, even things like the file naming – I had a project where I had about 200 icons. And they came back, and said, “Actually, we want these files named in a different way –" Thank you. It’s good to know that upfront.

So, once you’ve got that stage done, you can then go ahead and just create the whole set. And sometimes, for that set, you might get – there might be certain options. So you might say, for this, the MRI scanner or something, we might have to do a few different approaches. And they can choose what they think works best. But yes, once you get past that initial stage, just go for it. Just do all the icons.

Paul: Wow. Essentially, it turns it to a factory line of guessing after that. You must go crazy, surely. I think I’d want to kill myself.

Jon: Yes. I don’t know. There is something quite zen like about it sometimes. But you always get some rarely tricky action that you have to create an icon for. And often, it’s a case of, “This is so tricky to come up with some kind of symbol for. Do you really need an icon for it? Is the text label going to be the best way to do this?”

I can’t figure anything off the top of my head. But there are some really odd things you have to try and show. I think someone I shared in at the conference, asking me. I think they work for Clop Shoes, and it certainly had to involve a shoe box and a gift certificate, and all these other extra bits into an icon. And I felt, well no, I don’t think you can do it in an icon. Just do it in text.

Paul: [Laughs] Absolutely. All right, Jon. We ought to wrap up. I mean, I really could carry on for ages because it’s just when you come across an area that’s a little bit different to what you do, but it’s kind of related and it’s fascinating to hear the differences, and how it all works. But thank you so much for coming on the show, Jon. It’s absolutely brilliant stuff. And we’ll get you back before too long to educate us some more.

Jon: [Laughs] Right. Yes, it’s been a pleasure. Thank you, Paul.

Paul: All right. Bye-bye.

Paul: So, there you go, Jon Hicks. If I can have anyone as my dad, it would be Jon Hicks.

Marcus: But he’s younger than you, isn’t he?

Paul: That’s a slight problem, I admit. But I’m sure he could adopt me, couldn’t he? Is that not possible? He’s into Dr. Who. He’s so laid back. He’s so talented. It should be the way things are. There you go. Also, I really miss – Do you remember his podcast? Rissington Podcast.

Marcus: Oh, yes. Cool, that’s got him and Jon Oxton.

Paul: Yes. That was so good. I used to love that show.

Marcus: But they kind of got bored at doing it, didn’t they?

Paul: Yes. They only did like 20 episodes.

Marcus: Yes, and then sort of thought, “We can’t carry on doing this because we haven’t got anything else to say.”

Paul: Well, no. They were really good. I don’t know why they gave up. It was very naughty of them. But they’re all still online. So, I’ll put a link in the show notes to therissingtonpodcast.co.uk, which is a shame. No, it’s not a shame that it’s still online. It’s a shame that they’re not carrying on. And also, they had a lovely website that apparently got corrupted, and they lost their original website. So their new website is not as nice. It’s just a shame. But it does have a lovely picture of them looking podcasty. So there you go.

Marcus: Maybe they’ve done the old one over the years, have they? I don’t know. That’s just ringing a bell with me.

Paul: Yes, there were big gaps between them. But I’m wondering whether we could persuade Jon to do a segment on our show. That’d be good, wouldn’t it?

Marcus: He might do the old one.

Paul: Yes, Rissington-mini.

Marcus: Yes.

Paul: The Rissington 2, because they’re not even a Rissington anymore. That’s where they were. They had their offices then. So it went wrong really. Oh, so sad. Marcus’ joke.

Marcus: Joke. Do we need to talk about our sponsor? Do we have a sponsor?

Paul: We do have a sponsor, but I’ve decided to do it different way around.

Marcus: Okay.

Paul: We only mention the sponsor if the joke’s funny.

Marcus: Okay.

Paul: Because otherwise, it damages their brand, you see?.

Marcus: Well, I’m still using up these good jokes I found.

Paul: Okay. So there’s hope then.

Marcus: Yes, there’s hope. Another one from Tim Vine. Last night, my girlfriend and I watched three DVDs back to back. Luckily, I was the one facing the telly.

Paul: Okay, that’s quite good. Would you know, we’ve even got – So this week, the sponsor for the joke is the guys at Perch again, right? I’ll talk a little bit more about Perch. You think to yourself, "Okay, so there’s one sucker out there that was willing to sponsor your joke, one organization with a sense humour that would be willing to associate their brand with your terrible joke. But no, there are two.

Marcus: Really?

Paul: We have another sponsor for you next week.

Marcus: It’s the pressure, it’s just building.

Paul: I know.

Marcus: I couldn’t cope.

Paul: I know. So, let’s talk about Perch really quickly. Quick recap on what we said last time, which is that, if you remember that Perch is a great WordPress replacement basically because a lot of people use WordPress as their content management system.

But WordPress was never meant to be a content management system. It was meant to be a blog. So, it kind of does it, but not in a particularly elegant way, while Perch has been designed from the ground up to be a great little content management system that’s [expletive] fast, that doesn’t involve complicated templates. You just build your HTML and CSS, and then drop in some tags for the editable regions. So deadly, deadly simple to get up and running.

But you could also upgrade from Perch to a new product they’ve got now, which is called Perch Runway. Now, Perch Runway is for bigger sites. So it’s kind of the next step up form Perch. So, it works in very similar ways to Perch, although not all things that you learn from using Perch also applies to Perch Runway. But now, you’ve got those kinds of extra bits of functionality that you maybe want a slightly bigger size. So for example, it supports Amazon S3 and content distribution networks, and that concept. It’s got back up functionality built into it. And also, you can have content elements tied to specific pages. So, if you want to kind of have content that is shared across multiple pages and different scenarios, you can do all that kind of stuff.

So, what I really like about the addition of Perch Runway, because that’s quite a new thing, is that you’ve got an upgrade path now. So if you start by designing some relatively small site for client, and then the client turns around and says, “Well, we want to be able to do this now, then you’ve got somewhere to go without having to completely start again from scratch with the different toll.

So you can check out Perch at grabaperch.com/boagworld. And thank you very much to them for being willing to take part in such a ridiculous exercise. So, that pretty much wraps up this week’s show. Oh, every time I forget to bring up who’s on next week. I’m sure they’re amazing whoever they are.

Marcus: Yes, they’re just great, whoever it is.

Paul: It’s got to be best show ever. That’s what we’re supposed to say, isn’t it? Right. Next time, it’s Jonathan Stock. Boring. Just skip it. Oh, he’s going to kill me. So, he’s talking about a couple of things. I’m sure we’re going to get him. Jonathan Stock is talking a little bit about mobile because he’s a bit of a mobile expert. But we also get into the subject of value-based pricing, which is really interesting as well.

So, join us for that. And you can learn about how you can charge your clients more money for the same thing. He hates it when I talk about it like that. I describe it value-based pricing to him recently as – oh, that’s just seeing how much you can get away with charging, isn’t it? He felt very upset. So he’s on next week’s show, which is great.

All right. Thank you very much for listening, and good-bye

Marcus: Bye.

Boagworks

Boagworld