Smashing Podcast Episode 1 With Andy Clarke: What Is Art Direction?
Email Newsletter
Weekly tips on front-end & UX.
Trusted by 200,000+ folks.
The new Smashing Podcast is the perfect way to take a little bit of Smashing along with you on your morning commute, when working out at the gym, or just washing the dishes. We’ll be bringing you a new interview with a Smashing expert every two weeks, directly to your podcast player of choice. You can subscribe in your favorite app to get new episodes as soon as they’re ready, or just listen using the player below.
To get things off with a bang, we’re launching the first two episodes today. Each episode will be accompanied by a post (just like this one) with a full transcription of the interview here on Smashing Magazine.
In this inaugural episode, Drew McLellan talks to designer, author, and speaker Andy Clarke about Art Direction. What is it, and how can it be applied to our web design projects? We dig into the topic and see if we can get to the bottom of things.
Show Notes
- We discuss Art Direction for the Web, a new book by Andy Clarke.
- Andy’s Inspired Design Decisions series of articles can be found on Smashing Magazine, and are available first with your Smashing Membership.
- We found some examples of the art direction involved in the Boddingtons Cream of Manchester campaign discussed in the episode.
- You can follow Andy on Twitter where he is @Malarkey or via his website Stuff & Nonsense.
Transcript
Drew: He’s a well known designer, public speaker and author of numerous influential web design articles and books and has recently released his new book, Art Direction for the Web, with Smashing Magazine. Along with his wife, Sue, he founded and runs a web design studio, Stuff and Nonsense, in North Wales where he consults with companies big and small all around the world. You may know of his passion for gorillas but did you know that as a school child he was Junior National Bassoon Champion for three years in a row. My Smashing friends, it’s Andy Clarke. Andy, how are you today?
Andy Clarke: Eee, I’m smashing, lad.
Drew: So, as I mentioned your new book, Art Direction for the Web, is now available but obviously this isn’t your first book. Hard Boiled Web Design, that I’m sure people will know, and way back in the day, Transcending CSS. When did the idea for this particular book come about?
Andy Clarke: This was an interesting one because, like you say, this is number four in terms of books. Sue had always said that she’d hunt down and kill anybody that asked me to write another one because I am such a bastard when I’m writing books. I’m just not a nice person to be around and so I kind of didn’t ever want to do another, kind of, major book after Hard Boiled. So my original plan was actually to write three little, we called them shots in the whole, kind of Hard Boiled theme. Three kind of little 80 to 100 page, little shots. In the kind of the style of, or the length of, A Book Apart type length. Art Direction was going to be the first one and when I started to get into it which was way back at the beginning of, I think it the beginning of 2018 when I started it.
Andy Clarke: The more and more I kind of got into it, the more I realized that this, there was no way this was going to be a short book. All the things I wanted to talk about were just never going to fit. So I kind of threw the whole three shots idea out of the window and we just concentrated on doing this one. So I suppose the idea for this one came actually quite a few years ago even before a lot of the stuff that I talk about in the book in terms of what we can do with design and what we can do with CSS and all that kind of stuff was even a possibility. But it’s been a long time coming this one, I think it’s the kind of spiritual successor to some of the other stuff that I’ve done in the past. That sounds a bit grandiose, doesn’t it?
Drew: No, not at all. I mean, like many people, I’ve come into this field of building stuff for the web without any real formal background in, well, I’m a developer. I don’t really have a formal background in programming. I’ve just sort of picked it up as I go along and I certainly don’t have a formal background in anything to do with design. I’m not really familiar with the terminology and the concepts and the, a formal training would instill, particularly in design. So for people like me, when we talk about art direction, what exactly is art direction?
Andy Clarke: That’s an almost impossible question to answer because it means so many kind of different things at different levels. But I’m going to give an example. Do you remember back in, I mean we’re talking 15-odd years ago now but do you remember the adverts? In fact, for the show notes I’ll send you some links. But do you remember, there was an ad campaign called “The Cream of Manchester” for Boddingtons Beer. One of the things that they did, there was some really funny TV commercials but one of the things that they did incredibly successfully was a whole series of graphics which went on posters and various other things which were a glass of Boddingtons beer with the incredibly creamy head, which was the most important part of Boddingtons Beer and they shaped the head into all kinds of different things. So it looked like an ice cream and it looked like a quiff and it looked like all kinds of stuff. And what that did was it told the story of what was important about Boddingtons Beer through the medium of design. So it didn’t necessarily just say Boddingtons has a very creamy head. What it did was it showed you that through the visuals but then with the, in combination with the words, you got this very, very clever idea about what Boddingtons Beer was all about. And that, in one level, is art direction.
Andy Clarke: Let me give you another example. I can’t remember which magazine it was, now it might have been Rolling Stone. I can’t remember exactly which magazine cover it was now but a couple of years ago there was a very famous magazine cover and it was a picture of Donald Trump and they’d taken the barcode which normally sits in the bottom left or bottom right hand corner of the cover of the magazine and they’d put it on his top lip and made him look like Hitler. That’s art direction. That’s using design to convey a message to tell a story, to communicate something to an audience but through design.
Andy Clarke: And when we think about applying those things to the web, it is exactly the same kind of purpose but what we’re doing is we’re using all of those aspects of design. We’re using a layout. We’re using typography. We’re using color choices. We’re using all of these kind of design ingredients to do whatever it is that we’re trying to do online. So we might be telling a story of…a story through an editorial magazine or a news story or we might be telling a story about why you should buy my brand of power drill rather than somebody else’s brand of power drill. And it extends even into user experience because we’re really thinking about what is somebody feeling at this point? How do we communicate with them? How do we try and cheer them up, try and cool down. Do we want to be kind of quirky and delightful or do we want to be sort of more serious and conservative. And all of those aspects of evoking an emotional response in somebody is art direction.
Drew: Like accessibility, we often say that that really is the responsibility of everyone in the team but then in practice there tends to be an accessibility expert who really knows their stuff and can sort of help everyone review their work and push things forward. Is it the same with art direction? Is it something that everybody in a team should be looking at? Or is it something you hire in a big bright art director like yourself to come in and tell everyone what they should be doing?
Andy Clarke: No, it is exactly the sort of thing that everybody should be paying attention to. Every decision that we make in terms of design is an opportunity to tell a story. And that can be a big story or it can be a tiny story. And even things, for example, the style and the wording of microcopy can help to tell the story. Now, what we really need is not just everybody kind of paying attention to what that message is but we also need to know what the message is to begin with.
Andy Clarke: And one of the things that I think has been lacking over the last however many years when we’ve been kind of evolving the web as a medium is we’ve kind of moved away from this idea of the web as either a kind of creative medium or as a great medium for storytelling. And that’s the kind of thing if you go to an ad agency, then you’re not going to walk far through the door before you fall over an art director. But that’s not something that you generally find, it’s not a job title that tends to happen at digital agencies. It’s just, you’ll find UX people and project managers and developers and all manner of different, in parentheses, product designers. But the overall thinking about what message are we trying to convey, how do we implement that through design? But then there’s that kind of, what you would think of as creative direction but it is slightly different. Where somebody is basically just checking that everything is on brand, is on message, is part of telling that story.
Drew: As a developer, if I want to start getting involved in the art direction of my projects, where on earth do I start? Is this something that I can learn or do you have to be born this way?
Andy Clarke: I can’t think about the way you were born. You’ve landed on your head. No, it is something that can be taught and it is something which takes practice. So you don’t need to have gone to art school or studied advertising or whatever. I never did. I didn’t even do a graphic design degree back in the ‘80s. I was a failed painter. But it’s the kind of thing where, I think it’s a change of kind of, mindset a little bit. In thinking about, it’s not just about the practical aspects of designing a website but it’s also the thinking about, “Well, what are we trying to do?”
Andy Clarke: So let me give you an example, right. So Smashing Magazine, I did some early conceptual work with them for the redesign that we see right now. And the way that we did that was to basically just host a bunch of workshops where we all got together and we sat around a big table for a week and we did this kind of three or four times where really what we were trying to do was to get to the bottom of what the Smashing message was. And how Smashing wanted to be perceived and that was basically a great big roundtable exercise which was basically designed to just get the Smashing guys, Vitaly and Markus and others, thinking about what the real purpose of Smashing was and how they were going use design to communicate the unique kind of personality and attributes of Smashing.
Andy Clarke: And to help that along, we did a load of, kind of early rough design stuff. And then from what they learnt, they then turned to Dan Mall and said, “Right, we’ve got these words, we’ve got these, call them design principles if you like, that we want to then pull out through the design. We want to be bright and bold. We want the experience turned up to eleven. We want to be quirky” and all these kind of words that had come out of our early design discussions. And then he would then produce designs that sort of fitted with that brief.
Andy Clarke: And the interesting thing about that if we relate this back to your question where you’re saying “Where do I get involved?”, it’s, is, if we were kicking off a project for Notist, for example. The very obvious thing is that it does some things. It hosts your slide decks. It adds your speaker profile or whatever but those are just, they’re the things that it does. But your aspirations for that product are much, much more than just the bunch of practical things that it does. So from a brand and from an art direction point of view, yes, you want to be designing a product which is streamlined and simple to use and reliable and all of the stuff that it, kind of goes with it. But there’s a bigger picture and I would be speaking to you about what that purpose really is. Is it to inspire other speakers to get onstage? Is it to share information more widely? Is it to make talks that happen at remote conferences much, much more visible to people wherever they are in the world. There’s obviously a bigger thing going on in here.
Andy Clarke: And then once we’ve kind of understood what those real, kind of, what our real purpose was, then we can think about how do we convey that message through the design. And that’s where a designer would come in with a creative brief and then we would look at, well, what typography style is going to convey that message? What kind of layout? What kind of color scheme? What kind of graphics are going to really tell that story because you can easily just say the world’s most popular slide deck sharing site as, what’s that nasty one? Not Speaker Deck, the other one. SlideShare. Dreadful, absolutely dreadful. What we would look to do is something like Notist if we consider an art direction point of view is to consider, how do you want people to feel when you’re using the product and how do you want them to feel when they’re making the decision to choose your product over somebody else’s. And that’s essentially what it boils down to.
Drew: So it’s very much about how the brand, in a sense, is embodied in every little detail and every part of the design, both the sort of visual design and the functional design. Would that be accurate to say?
Andy Clarke: Yeah. Yeah, absolutely, and that should be the case with anything that we’re making. It’s why I get so disappointed when I see stuff which is not a gajillion miles away from framework default in terms of layout or button styles or type hierarchy or whatever it happens to be, all of these kind of design things. Because, to me that’s like completely missing the point of the design. Yeah, it might be a functional thing to use but does that make it nice?
Drew: So obviously modern websites are mostly spat out of a CMS into identical templates. So if kind of one of the jobs of art direction is to invoke this sort of emotional response to something on a page, can that be done through spitting out content into templates or can it be done by machine?
Andy Clarke: Well, if I had the solution to that problem, I’d be a very rich man because it is actually the problem that a massive amount of the web is struggling with. Whether it would be news outlets or magazine outlets or editorial or whatever. And it’s a question which comes up again and again and again. And actually the people that have really solved this problem best of all that I took to my knowledge it ProPublica who I talk quite a lot about in the book. And our old friend Rob Weychert basically designed the CMS implementation for ProPublica. And the way that they did it was that they said, “Right, okay, these are our foundations style, this is what the ProPublica website looks like and an article on that website looks like if I do nothing. This is what it is.” But obviously they want to be able to customize that in all kind of different ways whether it would be type or layout or color theme or anything else. What they did was very simply they just had a field in the CMS that they could inject custom CSS. And because they understood the cascade and they understood how CSS builds they would only then be able to overwrite certain things.
Andy Clarke: Now, not everybody’s going to want to go to the extent of custom designing articles in the way that ProPublica do. And they don’t art direct or over design everything. It is only these really kind of special pieces that they tend to do a really great art direction job on. But there are ways in which we can do this. One of the great, we always talk about separation of, or we used to talk about, it used to be the thing where we would separate content and structure and style and behavior. Now it seems like everybody piles everything into JavaScript but moving swiftly on. One of the things that you can do, is you can separate out the CSS logic. And as long as you don’t bake in the style of the page into the HTML, as long as you keep things flexible, you can then do an enormous amount, particularly when we’ve got things like CSS grid, flex box, which are kind of, almost like content independent in a way, and CSS variables.
Andy Clarke: So I’m working on site with a French football magazine which will hopefully be finished by the time this podcast goes out and that’s a question that we’re trying to solve right now. So what I’ve done over the last couple of weeks is I’ve designed probably about half a dozen different layout templates. Now, some pages are fixed. They’re never going to change, they’re never going to be wildly different. If you think about something like a league table or a list of results from a football Saturday then you’re not going to do an enormous amount with it. But when it comes to things like player profiles and team profiles and some of the more, kind of, involved content, what I’ve done is I’ve designed about half a dozen different layout combinations. All based on exactly the same CSS. And what I’m doing is I’m then extracting out certain things that, for want of a better word I’m calling themes. Just in terms of right, in this design, Design A, and I give them all names. I give, I’ve given the theme, I’ve named them after French football players. So if you want to, if you look at the Cantona design or Cantona theme, what do the headlines look like? What do the block quotes look like? What do the table headers look like? What do the buttons look like? There’s a specific style that goes into that theme which is independent of the layouts.
Andy Clarke: And the other thing which is independent of that theme is the six different color schemes that I’ve come up with. So basically by the end of the project, you’ll have a color layer, a theme layer and a layout layer that they are able then to kind of pick and choose. And that can be automated, it can be turned into toggle switches in the CMS or whatever it might happen to be. So there are ways of doing that.
Andy Clarke: Now that’s not a particularly kind of appropriate thing for, in terms of pure art direction but the same mechanics can then be used if we want to be saying right, “Well, we do want to customize this so let’s introduce these new fields.”
Drew: One of the examples in the book, quite early on of a, sort of art directed site is the UK government’s gov.uk site, which is excellent as a user of it. It’s a site I really enjoy using it but it’s not one that I would immediately think of as being art directed, in inverted commas. It’s not very visually rich. It’s quite sparse and not sparse in a minimalist way but sparse in a utilitarian way. Art direction doesn’t need to be flashy, I’m taking from that?
Andy Clarke: Well, I have spent years joking about gov.uk and I’ve always thought of gov.uk as being the website that design forgot. I’ve often said gov.uk, not known for its creative flair. And it was interesting, when I was doing a series of podcast interviews for the book, I was talking to Mark Porter, who used to be creative director at the Guardian. You can’t read a book about editorial design without Mark cropping up at some point. In fact, he’d be a great person for you to speak to on this podcast at some point to get a different perspective. And I was saying to Mark in our conversation, “Look, I can remember great art directed ad campaigns on TV, in magazines. We’ve talked about art direction in newspapers and print publications, etcetera, give me an example of what you think is great art direction on the web.” And I was absolutely stunned when Mark said, “Gov.uk.”
Andy Clarke: And it took a while to sink in but actually he was absolutely right because if art direction is about making people feel in a certain way then gov.uk does its job incredibly well. It doesn’t need to be flashy. It doesn’t need to be overly designed. It doesn’t need to push boundaries or do any of these things that you might associate with newfangled CSS grid webby stuff because it does what it does and it’s, the design is absolutely appropriate to, not only to the audience and what they want to do but also how gov.uk want people to feel when they’ve left the site. When you’ve gone on there and paid your car tax or looked up when your bin collection’s going to be or whether it’s safe to travel to Cameroon or…I leave that site reassured that I’ve been given the information that I was looking for in a thorough and professional way. I don’t think to myself, “Oh, is that site trustworthy?” And not just because its gov.uk but because the whole experience has just been designed to leave no unanswered questions in my brain.
Drew: Yes, it’s so, sort of simple. It gives you real confidence in the information you’ve found is correct or the process that you followed, there’s a very clear way through it so you feel like, “Yes, I’ve completed that successfully because it was unambiguous.”
Andy Clarke: Now, would I design certain things differently? You can bet your bottom dollar I would but would I want to think about improving typography? Yes. Would I want to get more granular in terms of typographic design so that we can improve the way that numerals look or dates look or tables of data look or whatever? Yes, absolutely there’s some things that I would look at there and say, “I want to improve the design of that aspect of gov.uk.” But in terms of the art direction, no, everything that they, that you see whether it’s intention or not in terms of, I don’t know whether there is an art director at gov.uk, but everything that you see just contributes to how people feel at the end of the experience and that’s good art direction.
Drew: The book itself is really beautiful. I’d seen the ebook version of it early on which is absolutely terrific and I recommend that. But then I had the pleasure of picking up an actual printed version and I really recommend the printed version even more. It’s, every sort of spread is as you’d expect, sort of custom designed and it’s just jampacked with loads of inspirational examples. And it’s so heavily illustrated, I mean there’s hardly a double page spread that’s all text. It’s all illustrated with stuff. It’s really great. To be honest, it’s not the sort of book, not knowing anything about art direction before our conversation, and before looking at, actually looking at the book. It’s something I wouldn’t have picked up thinking it was for me but once I started looking through it, I thought, “Yeah, this is really good.” Obviously, you’ve designed it, you’ve designed every spread by hand. What was that process like?
Andy Clarke: It was a lot of work. I mean, first of all, I just want to say an enormous thank you to my son, Alex, who actually typeset that entire book from start to finish. What we wanted to do when we set out to produce the book was to show off some inspiring stuff but we also wanted it to be incredibly relevant to people at various different stages or different areas or whatever. And Sue would be quite, sort of brutal with me and say, “Don’t forget to explain it this way. If somebody’s using Squarespace or Shopify or Bootstrap Grid or whatever, then you need to talk to those people as well.” So what I did was, I actually spent about three months designing a whole ton of different examples. And me being me, I had to kind of, everything had to be perfect. There had to be a theme so I kind of came up with this hard boiled based London gangster theme for an app and a website that kind of goes with it. And then everything kind of just spread on from there. What was interesting in terms of the actual design of all those examples was what you learn how to design in one part of the book you then learn how to build in another part of the book. So there is this kind of balance to it.
Andy Clarke: But then, so basically what would happen is, was that I came up with about half a dozen different layout scamps for the main body of the book. I was much, much more detailed on the, sort of the examples I didn’t design, some of the other examples from elsewhere on the web. But the general body of the book, I just did half a dozen, kind of just very simple box layout sketches. Alex would then interpret that and chapter by chapter we would then go through it. So literally every single page has been tweaked. And I haven’t done, I’ve never done a book that’s got, had that much attention to detail.
Drew: Yeah, it really shows and the end result is fantastic and I’ve been learning a lot from it. So something I always like to ask people. I’ve been learning about art direction, what have you been learning about lately? Is there anything in particular in your work and your projects that you’ve been learning and swatting up on?
Andy Clarke: Yeah. I’ve been really trying to get to grips with more advanced grid stuff. That’s something which I’ve been really trying to sort of push the boundaries of. And along with this kind of, because I’ve been experimenting with, “Here’s a great, here’s a quirky layout. How would we build that?” And along the way comes things like SVGs and making SVGs responsive and I actually learnt today that you can’t use the picture element with inline SVG. You have to use an IMG element if you want to swap one picture for another or one source for another in HTML. So my main, I’ve actually been going back to really just learn a hell of a lot more about code. I think that quite, you go through phases where there’s a huge amount to learn or it seems that way and there’s something new that you want to get to grips with. And then things kind of plateau out and you churn through the same stuff or you use the same patterns or the same kind of methodology for awhile and then there’s another spike. And I’m kind of in one of those spikes at the moment.
Drew: Obviously the book is available now. You’ve also been writing a series of articles for Smashing Magazine around some of the same sort of ideas, picking out some bits and bobs which we’ll link to in the show notes. But you’re also doing a webinar series, is that right?
Andy Clarke: Yeah, well, the articles in the webinar is all the same stuff so I called it Inspired Design Decisions. And it came about because I was actually in Magma Book Shop, which is a brilliant magazine book shop in London, before Christmas. I was with our friend, Al Power, and we were kind of thumbing through magazines and I was geeking out and going, “Oh, look at this beautiful quote. That layout looks amazing. Coo, I love the way that they’ve tied this image with the color of the text and blah, blah, blah.” And Al said, “Well, I’ve never really thought a bit like that. I’ve never really thought about lessons that we can learn from editorial design or magazine design or other things. And you just talk about it in ways that just make sense. You ought to write about this stuff.” So I don’t want to write another book at the moment because well, Sue would hunt down and kill anybody that asked me to. So the idea came about was, well, why not do a series of articles over the course of the year where I would touch on a particular topic and a particular piece of inspiration.
Andy Clarke: There’s three gone out now, so far. There’ll be four, maybe five by the time this podcast goes out. Each one is the webinar content with Q&A. Everybody that is a Smashing member also gets access to a really, really nicely designed PDF version of all of the articles and all the code that goes with it. And then what we do a month later is we’ll put that article out for free on the public Smashing Magazine website. And what we’ll do sometime next May, is we’ll collect all of those twelve articles together and we’ll re-edit them and get the continuity right and that’ll be another book that comes out, probably next April, May time.
Drew: That sounds great.
Andy Clarke: It’s a lot of fun.
Drew: If you, dear listener, would like to hear more from Andy, you can follow him on Twitter where he is @Malarkey and find examples of his work and hire him via his website, stuffandnonsense.co.uk. Art Direction for the Web is available now through Smashing at smashingmagazine.com/books and I commend it to you. Andy, do you have any parting words?
Andy Clarke: (Beep) to Brexit.
Further Reading
- From Small CSS Tricks To Great Design Mysteries: SmashingConf Barcelona 2017
- Home Sweet Home: Meet SmashingConf Freiburg 2017
- Knip: An Automated Tool For Finding Unused Files, Exports, And Dependencies
- Designing Sticky Menus: UX Guidelines
(dm, ra, il, mrn)