Should designers write content?


Web Materials

Episode 7 /

Designers are notoriously bad at writing content. But shouldn't we really write at least some of the words for our interfaces? In this episode we discuss the relationship between content and design and the beneefits of using real words instead of dummy copy.




Transcript #

[Intro music by xyce]

Espen: We should talk about another thing that our design tools don't teach us. And that's content. So my question today is, should designers write? And I'm not talking about code, I'm talking about, you know, words language, should we as designers know and cultivate how to write content? Go.

Vasilis: Well, the simple answer would be yes. But then. So yes, I'm not sure if designers should write themselves, but they should definitely think about the content. I mean, it's it's a, it's an absolute part of what the websites or what the design, whatever you make is experienced, like, right, the experience is also in the, in the text, if you have a, you submitted a form, and it says, The form is submitted. Or you say, fuck, yeah, that turned out great. I mean, this is a different tone of voice, right? And this is absolutely part of the design. Now, I'm not sure if it's up to the designers to the visual designers, or the interaction designers, or what they're called, to come up with the content. That depends on the size of the project, right? If you have a budget for a real content designer, or a content specialist, a copywriter, then hire one. If you don't have the budget then I guess, work with your team, try to figure out who's best at writing content. But don't leave it up to the developers. I would say, well, maybe they're really good at it. But it's not that it shouldn't be left to them to come up with what what the error messages should should look like.

Espen: No, no, I agree. I've just done that. I've had obviously experiences with that to where developers don't even understand what's wrong with the content. But then the message says, item destroyed. And you kind of go well, you know, to the to the person visiting this website, that's maybe not, that's maybe not a language that's recognised. You know, it will it'll create more questions than than answers perhaps. So we shouldn't leave the content to developers, but then on on, it depends on your team, right? If you have a copywriter or a content creator, great, but this is the same discussion, we have with say accessibility or even for photography, or psychology or UX, you know, there's a, there's a million roles that could be filled by a, by a competent professional. And I guess in a sense, if you don't have a UX expert on your team, there will still be a user experience, right? So so it is up to the designer to somehow try and do their best to create a flow or, or a layout or tell a story in a way that's, that's meaningful. And it's the same with content, right? If there's no one actually spending time writing it, is someone's going to do it at the end. And whether that's the designer or the developer, or the client or some intern, it's gonna it's going to be there, there's going to be words on the page. So personally, my experience and my opinion is, hell yeah, designer should write. In fact, in any other discipline, you would I think a lot of the time you would consider writing a part of the design process when it comes to say, I know, movie posters or, or brochures to a certain extent or magazines, there's, there's going to be a need for some creative collaboration between the visuals and the texts. And in the cases where someone is just giving you the words great if that person is a talented, creative, copywriter, fantastic. But there's going to be also cases where you have to come up with something yourself, be it maybe strapline for an advert or or or a tagline for a logo or something like that. So design, and content or design and words, I guess, are linked in many ways, and it's it's my job to make the words better, or use words to make the visuals better. You know, either way they should, they should reinforce each other. And I think also in our industry, we talk a lot about content in terms of form labels or feedback messages. or text in buttons, etc. But I also think there's a big difference between making sure that your buttons work, if you put German text into them, that's a very different way of thinking of content than it is to go these five words on the homepage is everything that stands between the user and clicking this button. How do I convince someone in three seconds that this is the right thing to do? And that content is a very different species altogether is more creative, it's more related to advertising than to, you know, user interface, I would say.

Vasilis: So there's when we started making responsive websites, about 10 years ago, maybe a bit more. Yeah—

Espen: I think the responsive web design book has a 10 year anniversary this year—

Vasilis: longer than 10 years ago, we started making responsive websites. And then quite early in that process. So at first we started, we had these big websites, and we tried to shrink them into small screens, which was hard. And then we came up with the idea of mobile first, small screen first. And then you heard people saying, no, it should be content first. Because that's the next logical steps have think about the content first and structured well. So this is more maybe a technical approach to this content thing that that you should think about the structure before you can design it. And this is the idea more with content management systems where you're not really sure what, what's exactly going to be in there? Would you know that there's going to be words with a certain length? And then, so from? Yeah, from a technical design perspective, it does absolutely make sense to think about the content and the structure first, and design that, because it's also it's the content that you design, right? It's not the you don't you don't put content into a design. Without if you don't know what it's going to be about, then it's just whatever, then it's just a theme.

Espen: Exactly, yeah. Yeah, you don't go don't go around casting actors for a movie and hire a director if you don't have a script.

Vasilis: Exactly. Right. Yeah.

Espen: Yeah. But yet, that's what we do. For every every blog or content driven design out there. Most of the time, we don't have the content, and it will be extremely unreasonable to expect 300 article articles written before you start Sure. So then, you know, then you know something about the subject matter, maybe, or at least you know, the type of content, these are going to be blog posts, or articles or rich media or whatever it might be.

Vasilis: That you also think, I mean, you do know the company you're going to work for, right? I think Smashing Magazine, a fantastic example, about how to Vitaly did a talk about a few years ago, about how they did the redesign how he started with a redesign for Smashing Magazine for the website. And he started with the error messages. So the first thing he designed was, what should we sound like, when something goes wrong? I thought that was just brilliant. So when things don't turn out as you want them to, how do you talk to your clients? This is really important. This is such a it's a tiny detail, but I thought that was so clever. So what if something goes wrong? How do we talk to the client? So this is where he started. And so he first started designing all the possible error messages. And these are some of them can be funny as well. Right? So for instance, he noticed that so there's this, what's it called?, a coupon code where you can add a gold when you check out a book when you buy a book, and it gives you 10% off something like that, right? And he noticed that everybody, they would just search and paste some something in there. So or they would just type thing in there and try and then the error message would be, oh, that doesn't work. How about and then he just put in there a random word. And if they typed that word, then they would get 5%. This is so clever, right? So this is really his tone of voice that that the fun mean, yeah, things do go wrong, but then how do we talk to them. And there's another great example. I don't think that exists anymore. Maybe it does, it was the website, tone and voice or voice and tone that was made by MailChimp. So MailChimp was really, really good at how do we talk to our clients in different situations. So they had this big website, which was purely about the tone of voice. So if everything goes well, then we can be funny. But if things go a bit wrong, and people are maybe concerned, then you should take them seriously. Stop being funny and just be to the point. And then there's also because of this mailing programme, if people are abusing their software, then you can be just tell them to fuck off or something like that. It's not exactly. It was more subtle. I think there were 20 different stages of, of communication within that website. It was incredible. Incredible. So well thought out. Yeah.

Espen: They remember MailChimp. Was it Aaron Walter, who was the designer back in the day?

Vasilis: eah, I think so.

Espen: Who, he wrote the book, I believe, emotional design or something like that. Yeah. And in there, I think there's an example from MailChimp, where they had randomly some message when you logged in, it would say something Oh, hey, good morning, have you hope you had a good day or something? And one of the messages said, I love your haircuts. And obviously for most people, it that just passes you by you the I haven't got a haircut, whatever. That's a weird message. But for the people who actually had a haircut that day, how nice to get that from your, from your MailChimp. Software. Of course—

Vasilis: Yeah, I think they, they, they later on, when they grew they, I think they they did a few steps back. So at first they were funny. And then for many people sending emails is a very serious business. Or they send out emails about very serious topics, huh? And then it's not really in place to have a monkey making jokes at you, right?

Espen: Yeah, yeah, that can be 100 contexts where that's completely unsuitable.

Vasilis: So if I, if I remember correctly, later on, when they started really growing, they they they took a few steps back on being funny.

Espen: Yeah, that makes sense. Yeah, it's a it's a it's a good business decision. And also a bit sad for the personality. Obviously, that kind of thinking everybody would end up being completely bland. This is what leads to this corporate persona of not really being anything because you're afraid of offending people on one side or the other. But, you know, no, no bad word to MailChimp, I think they still have maintained a very strong personality and their brand.

Vasilis: I guess. So. Yeah, I haven't used it for a long time. So no. But But these, I think, are some very interesting examples. And the other thing that you you don't want to... Well, it depends. I mean, if you're a brand that doesn't care about offending I mean, if you're a punk rock band—

Espen: Well, you can be a punk rock band yeah,

Vasilis: there's fuck you in the content everywhere if it's up to me. But if you're a, that, yeah... Well, there's this other example where you have to think about what's on the websites or content wise. And it's what are people here for. So this is great example in this book by what's it called, Eric Meyer and Wachter-Boettcher. Sara Wachter-Boettcher, I think they're called. And they wrote a book I don't remember the title we'll find it out and they had to rush to hospital in the middle of the night. So I think their kid was in the in the ambulance and they had to drive to the hospital themselves. And they went to the website, and the first thing they saw was this photo of their, all the doctors together celebrating how fantastic they are. And this is not really what you're... I mean, when you're a hospital people often visit your website when they're pretty anxious when things are going wrong.

Espen: Yeah

Vasilis: And so maybe there is room on the website for success stories, I guess. But probably the homepage is not the right place for that.

Espen: No, I would that sounds like a user experience flaw in itself, right? Even if the photo wasn't of celebration, why would you even want to see a photo of all the doctors on the phone? The homepage, give me the address or the phone number or directions or, you know, I guess, something useful?

Vasilis: Yeah. This is also about content, right? What do you put on the homepage? What's there? And it does, actually, of course, it does touch design, it touches interaction design, it touches information architecture, it touches all these things. Yep. Yeah. But I think if I, if I look back at when I still worked at an agency, is that we content was always the last thing that so back then, we used to work very much in a strict, wonderful project management. Hell, first, it will be concepting. And there would be having fun, then the interaction designer would draw this outline of a website, and then the visual designer would do some colouring by numbers. And then that will go to the front end developer. And in all these stages, there was no content. Just a few, maybe labels for navigation, but not really well thought out. And then—

Espen: Then go and I would like to ask you, in these sketches that were sent to development, there must have been words.

Vasilis: Yeah, there were words—

Espen: Were they, was it lorem ipsum? Or was it another version of lorem ipsum, which is popular, which is, for example, this headline is quite long, and runs on two lines.

Vasilis: So the there was a once, this is a long time ago, maybe I even set this in the first show. Yeah, I guess so. So there was this guy who started a website. And he drew the heading, and then the header with a navigation and items in it. And then he drew the sub navigation on the left, and then he drew the the widgets on the right, and the footer at the bottom. And then he even do so well. That's most of the work done. Another thing No. He forgotten the most important part, that you didn't design what the people are here for. You designed all kinds of links that take them elsewhere, but people are here for that square in the middle that you left out. Right. Right. Yeah. So and this is something that well, that changed a lot, right, but 10 years ago, we would design the frame around the content first, so we would be really yeah, designing frames. And nowadays, I think we start designing the content first. What are people here for—

Espen: Absolutely.

Vasilis: So I think things have been changing a lot since—

Espen: the nature of doing websites is not not necessarily a process, but we do. For example, this design got interrupted here. We are back for service.

Vasilis: I am back Are you back? No, you're not back yet.

Espen: You there? Can you hear me? Yeah,

Vasilis: I can hear you again.

Espen: Oh yeah. Cool. Yeah, I was saying we design. Let's if we go to your example there of designing all the links, all the navigation, the footer, everything surrounding the content, and not the content in itself. Of course, now, with content first and a lot of focus on content, we do design that we spend time on the typography and how the image is going to be laid out, etc. But when it comes to this box in the middle, the wysiwyg or the you know, whatever is going to be filled in at a later date, by its nature, because this news content hasn't been written yet, right? We were left to designing defaults, headers, lists, paragraphs, image, captions, image left, image right, you know, whatever. There's a whole bunch of modules and maybe you have some call to actions in you created, I guess a tool set of creating these pages. Then you expand that, and you end up making related content widgets and big signup boxes. And suddenly you have a really nice, perfect design system and half your organisation is geared towards maintaining and, you know, facilitating this design system. And I think in that sense, you can only focus on layout typography, because you can't know the content itself. But prior to that, in the in the process of selling something to a client, or or doing something like a homepage, or a landing page, you know, these marketing pages to convert people to do something, I think you're suddenly dealing with a completely different beast, because it isn't, it's no longer a template, it is the actual thing, right? I want to I want people to donate to the Red Cross. I can't give them empty boxes, and then just fill it out themselves. Maybe if the marketing department, they need something flexible, because they're going to use it for 10 different campaigns. That's okay. You need to bear that in mind. But in my first initial, this is how I think it should work sketch. I need to put words on there. Are these I feel like that? Yeah. Agree with always challenge.

Vasilis: Yeah. And I really think that in these cases, you really need to work together with with a team it's not. Or yet well, maybe if you're a words, wizard like you are because you're really good at words you always come up with with excellent combinations of words. But I guess you need to discuss these things, right, with a client, at least what do we want to sound like? How do you want to approach people? So in the case of a Red Cross campaign, so what is the campaign about right? is this? So how do we convince people to start giving money? What's the target audience? I guess that matters as well, right? If it's a Red Cross campaign for young people, you probably want to sound a little bit different than if you want to make a campaign for older people in a paper magazine, right?

Espen: Yeah, absolutely.

Vasilis: So these are all things you have to consider. And this is very complicated part of branding, actually,

Espen: Yes, may or no on a project like Red Cross, you would assume that there's been a lot of work done before the designer even looks at it in terms of the strategy of the campaigns and what they're trying to achieve. And brand guidelines, not least, good brand guidelines should have stuff about content as well about the tone of voice. So just as, as the designer knows which colours and fonts to use, they should also know which you know, what's the flavour of the of the of this website or this thing that we're creating. But I do think it's in so many cases, certainly in my career, there just simply isn't a creative copywriter idling next, on the next desk that I can just grab and say, Hey, can you write me a headline, and in the cases where there are copywriters or creative writers, they're, they're often busy that you could get unless they're working on your project specifically, it's like, you still gonna have to put something on the page when you're sketching. So thank you for your kind words about me and words, but honestly, most designers should not have the mindset of thinking it's not my job, they should be thinking, well, instead of Lorem, ipsum, what can I say here? Even if the headline says, cool headline about water and community. You know? Give give the flavour of what you're trying to communicate, I think would really help in most cases, rather than sticking to default words.

Vasilis: Yeah, absolutely. Yeah, I would also say that start with the error messages, this is a really good thing, because this is also always the last thing. So it's something that we don't think about. It's so we don't like designing forms, I think. So we don't design them. And then within the forms. The very, very last thing is the error messages. I really like this idea of turning this process around is starting with the error messages and thinking about that type of content first. And then from that point, working back to the homepage, which is probably another episode. Should we design the homepage first?

Espen: Oh, yeah. That's another easy question to answer.

Vasilis: Yeah that's too easy

Espen: That's a discussion around it. Yeah. No, it's it's true. There's, there's I think there's little stuff around our process and the order of things that that it makes so much sense to do it in a different way than what we're doing it. But our clients are so reliant on the way it's being done now that it's very hard to change, I found, it's even hard to show people mobile designs first. It's really hard to show people the content, you know, the article design, because that's going to be 80% of the website. That's where you should start. But it's hard to convince people because they're like, well, what's the website gonna look like? This? You know? Obviously starting with error messages you even, you know, in more dangerous territory, but luckily for Italy and others like him, when is your own project or product you can you can kind of do what you want.

Vasilis: Yeah, I do think that it is possible to have a good presentation, and you start with the error messages. I think you have a very good story about the complete design, if you start there, and then you show the but but it's complicated. Yeah, I remember all the all our clients wanted the homepage first.

Espen: Yeah and I think that—

Vasilis: And, like all that all the clients I tried to convince: No, no, no, it's the last thing. Yes, based on the rest of the website, it's it's just, it points in the direction of all the other stuff. It's not what people are for. But—

Espen: Yeah, and that requires, like you say, a good a good salesman, or saleswoman to to pitch this difference in process. Yeah. In fact, there's another episode for you about presentation and you know, actually communicating your ideas, not just showing some pictures.

Vasilis: Yep. Yep. So other other things we have to discuss? Well, maybe we have to discuss a little bit about international websites were. So I've done this, the worst example of this is that I've done a not the website, but the you have these kiosks on airports, right? Where you can check in. And I made one of these a long time ago, but not that long ago, I think 10 years ago, we made them. And so you would say okay, these are touch devices. So this is some very advanced technology in there. But it turned out there was a Windows XP Service Pack one computer in there, even back then, with IE six on it. Can you imagine that, that this these things they actually run on such old specs? And the reason why is I asked him come on we have really good browsers nowadays. And we have just operating systems that work. Why this? Is this is proven technology.

Espen: Yeah.

Vasilis: So back then that was a thing proven technology meant. We know exactly what all the bugs are. So we can work with this. All the bugs are documented. So it was horrible. And then so because it was IE, I had to make images for all the rounded corners, right. And so we made this thing. And it was tailor made for English because it was designed in English, but then it had to work in Portuguese and in German as well. And the whole design just broke because German words, as we know, are really long. So if you do international design, ask for the German and the Portuguese content.

Espen: Just have it under Portuguese. Yeah, yeah. No, definitely try it out. English is different. Yeah, it's a different way to think about content, isn't it? It's not coming up with ideas or communicating anything in particular, it's just do the are the parameters right in this design to hold all these different things. Then I could extend to just different writers as well. Long headlines are short headlines, or long paragraphs versus short paragraphs. Actually, just this last week, I had someone ask about fonts, because there was a creative team, they had this idea and you know, you know, they were throwing together art direction with a particular type of font and whatever particular words I guess, and then but then the font didn't have Norwegian special characters. Okay. So you know, luckily for them, they the content highlighted this issue straightaway, and they were actually asking designers to just add the special characters to the font, which the response was no.

Vasilis: Okay, yeah, yeah, yeah. Yeah. Think about that as well. Yeah. Part of the design process.

Espen: Right. So that's where I'm at. Short and sweet, I guess, I guess we should think about content. If you have it in, you should try and write some content yet

Vasilis: So what I do want to talk about is not about content, but about the design process of our own website. How do you like it so far?

Espen: The only thing I don't like about it is that I have, I've struggled to find the time to do it properly. And CSS gets the better of me sometimes. But having said that, I love it. I think it's fun. It's, it's a surprise, every time you upload your design, and I love looking through it, there's always something in there that makes me think, Ah, that's a nice, that's a quite a nice idea. In the last episode, you had this weird landscape of sticky elements that would change the way the page looked, as the longer you scrolled, essentially, every speech bubble was got stuck to the top of the screen. And they were bedhind transparency and some sort of blend mode. So you know that the overall result would change, which I think is the perfect, perfect example of something that you cannot create with Figma. And it's not something Figma can just make available, either. It's something inherent with the technology and the materials that you work with, that you can't fake or certainly you wouldn't think of it naturally in figma.

Vasilis: And it's also something something that I think we forget a lot when we design websites is that it's not an image, it is something that people actually spend time on. So time can definitely be part of the design.

Espen: Yeah, that's actually a really nice way of looking at it. Time, time is an element. Yeah. And whether it's animation that just happens or like you've done there something that changes with interaction. It's, yeah, no, I really, really like it. And I'm also learning CSS, in a way that I haven't before. I'm working with the material in a way that I haven't before. And obviously, there's no pressure, there's so little pressure that anything can be tried out.

Vasilis: Well, there's pressure of the two week deadline.

Espen: That's true, that's true. But so far, I've almost made it.

Vasilis: I really like it as well. So if I look at so I really think what this what we're doing, what it shows is the the the the crossover between an artistic approach that I have, where I don't really care if it works, well, I do care a little bit, but I care more about what happens when I just try this. And the real design approach that you have where you just, it has to work and it has to be balanced. And it has to be just well designed. And this works so well. That so I take the stuff that you made. And then I work with that. And it's so much better immediately than anything that I do on my own. So I really liked this exchange of going back and forth between a pragmatic, maybe what could we call it a pragmatic and an artistic approach? I'm not sure if they'd say—

Espen: I think so. Yeah, yeah, I certainly don't have the, I don't know what to say to be honest, maybe inspiration or scale to go complete experimentation. I think you you have probably threads of thoughts in your head that you're just itching to get out and you want to try them. Whereas I'm more like, how can I actually make a what's I guess, for me, what, at the end of it, what's the best design for a transcript? Really that's what we're looking at here. And how can I make it as good as possible, whilst also referencing in some way, the themes that we're discussing. So in the last episode that I did, we talked about the hamburger or the lack of a menu in the top. And I just thought, well, what could the page look like if you don't have to worry about the top bar? Right? That's it. Whereas obviously, you you take it a bit further.

Vasilis: Indeed I do. Yeah. Yeah. But this is something that and I think it's also has to do with with our roles in our day jobs, right. So I teach CSS, and I don't teach them necessarily how to do stuff that other people do. I teach them what could be done with CSS, what are all the possibilities of CSS. So we go way beyond what the normal frameworks offer all one word you can do with, with with WordPress or something. So I am very much in this experimental, from from a professional point of view and there, from a personal point of view, I've always been more of an artistic person than a problem solver, necessarily. Where I think your day job is creating designs that work for real people, right?

Espen: Yeah, exactly. Yeah. How do we communicate better? Exactly.

Vasilis: Yeah. So this is a very different approach to design. Which I think is it works out really well. I cannot wait to see your design on this topic.

Espen: We'll see obviously, well, now we do know the content because I have the transcript.

Vasilis: It should show

Espen:Yeah, it should. The pressure is on now.

Vasilis:Okay, Espen was really nice talking to you again.

Espen: Likewise.

[Outro music by xyce]

Why does this page look like this? #

This episode's design reflects the archetypal expression of writing – a script. Still sticking to system fonts I've put American Typewriter at the top of my font stack, followed by Courier New. I hope that covers most visitors.

In terms of the layout I stripped out the text-bubbles from previous iterations and opted instead for a mix of center aligned and left aligned text blocks, the idea being to mimic the output of a non-design tool like script software or a word processor. I also moved the audio player to the left hand side – the cover – which means I don't need to cover the text column with a sticky black bar on larger viewports.

As much as I loved Vasilis' experimental landscape of sticky blobs in the last episode, I didn't keep much of his art direction. That said, clip-path proved useful in making organic ::before elements that look like they've been made with highlighters. Thank you!