How to design for credibility
(So you can reverse engineer beauty)
Taught by David Kadavy of Design for Hackers
Master Class: Design for Credibility
Master Class Toolbox
Andrew: This session is about how to build credibility with design. It’s led by David Kadavy. He is the author of “Design for Hackers”. Let’s bring it up on the screen. “Design for Hackers: Reverse Engineering Beauty”. Prior to writing “Design for Hackers”…. Let me bring him up now. David founded the design departments at two silicon valley startups and freelanced for clients including Odesk, PBworks, and Uservoice. My name is Andrew Warner. I’ll be here to help facilitate the conversation. David, thanks for being here.David: Thanks so much for having me. It’s great to be here. I love Mixergy.Andrew: Thanks.David: I’m very excited.Andrew: I’m looking forward to this because, frankly, I am always overwhelmed by design even though I know I need to keep improving it. What I like about you and what people will hopefully see throughout this conversation, you give practical advice for people who aren’t living and breathing design and don’t feel like design nerds. You actually even gave me a quick video showing what we could change on Mixergy. By the time this video is up, all those changes will be up because you make it so accessible.David: That’s great to hear.Andrew: Yeah so people will see the impact by the time this video is up. Let’s talk about some of the problems with design. One of the issues is something that you’ve experienced at an event that you were hosting. You sat next to a lady who said to you, “You know, it’s really important to be in a magazine so you know you’ve made it.” Something to that effect. And you were in a magazine. What did you think as she was saying that?
David: Basically that was at an award show that I was co-organizing. We were all just having drinks. She said that and it really kind of struck me. Being in design school, we’re constantly being told that we should be in these various magazines and that we should be famous designers. That was the thing to strive for and that was something that we did strive for. First print job out of college, I got in a really prestigious design magazine.
It was sort of a strange feeling because I kind of thought this was supposed to be really gratifying, but it just wasn’t. I couldn’t figure out what the thing was. I started to question whether this is what I was really working for. When she said that, it really confirmed in my mind. Yeah, this is what designers want to accomplish when something just doesn’t feel right about that to me.
Andrew: Yeah, I get what you’re saying. Before I talk about what does feel right, the purpose of this conversation and what we’re going to impart to the listener right now. This is how wrong you felt it was. This is something that you created. What were you trying to say here?
David: This was actually the poster for the awards event that I was co-organizing, the one that I was just talking about. Now I can look back on this and realize some of the psychology that was going on in my own brain. I used, sort of a prescription drug theme for the award show. We were using the prescription drug theme for the obsession of winning awards and having prestige and being high designers, while not necessarily creating something that meet business objectives. I can see, looking at that poster, kind of where my head was at that time. I hadn’t yet necessarily come to terms with it yet.
Andrew: So here’s what it’s about. This is BJ Fog.
Andrew: What is it about BJ Fog that’s important for us to know before we continue? What’s the study he did?
David: BJ Fog runs the Stanford Persuasive Technology Lab. He did a groundbreaking study where he basically put people in front of websites and said, “Do you trust this site? Do you feel like this site is credible? Why or why not?” Obviously, BJ is a scientist. He didn’t have any preconceived notions about what people were going to say. He went through all of the comments afterwards and found that 46% of the comments, the top category of the comments of why people trusted the site that they saw, found it credible, were related to visual design. People would say things like, “It has this high quality look and feel.” or, “It just looks more credible.”
Notice that they weren’t saying things like, “I really like this particular font or this particular color.” Blue makes you feel calm. It was like an emotional visceral reaction. They were able to pinpoint to the design, but they didn’t necessarily know why.
Andrew: I get that. The way it makes me feel is: they’re not even talking about the substance of the site. They are talking about the design of the site. I know they’re connected but it does kind of feel to me like when I was in high school and I would see girls dating these dopes and I’d go, You’re just dating them because they look good.
Andrew: And vice versa, right? And what about me? I don’t look good but there’s substance inside and I kind of feel that way sometimes about some of the content that I create some of the products that I put out online. And one of the reasons why I care about design is because of the study that you’re talking about. People will think that it’s credible or not based on the design. And they’ll decide whether they engage and continue or not and buy or not based on the design. And so with a limitation, me being not a design nerd and me not having a staff of designers and the same thing is true of the person who is listening to us, we still need to acknowledge the reality of the world, which is people do care about this. And so that’s why we’re here and we’re going to talk about how to get there, right?
David: Yeah. Exactly. I mean, we’ve all experienced that ourselves, where we download an iPhone app or something the moment we see it we feel disappointed or unsure and end up deleting it maybe…
David: Because it doesn’t look good.
Andrew: Yeah. Or feeling bad for the person who told us, hey, try my app out.
David: Or the opposite of just like, whoa, what’s this?
Andrew: Yes, right.
David: And being struck.
David: So hopefully, we can teach people how to illicit that reaction today.
Andrew: All right. Here are some of the topics that we’re going to be talking about. The first one is to eliminate competing elements. Again, some of these are really simple but clear and important to say. Others will be different for people and important guidelines that they could use for the rest of, I was going to say for the rest of their lives, but nothing’s for the rest of your life. But they are long-standing guidelines that will absolutely help you, you’ll see. Here is a site that you looked at when you were a mentor for it was 500 start-ups, right?
Andrew: Okay. The accelerator.
Andrew: What did you see here that made you decide to jump in and help out?
David: Yeah this is, first of all Fontacto is basically like Google Voice for Mexico, just to get some background there. And the thing that I noticed here was my first reaction when I see it is like, oh, this is a pretty decent design. You’ve got like a nice font; you’ve got a comfortable color scheme going on. But then you realize, what am I supposed to be looking at here? What is it that they want me to see on this site? What’s the action that they want me to take? And then you realize how much things are competing against each other.
You have this blue band up at the top. You’ve got the headline right below it. And then you’ve got these different sorts of bullet points. And then they have icons next to them and then there’s the illustration to the right. And then underneath all of that finally, we have our call to action. And then there’s testimonials below that.
Andrew: And you know what, and actually, that’s just a screen shot. If we take a look at the actual web site, let me bring that up on the screen here. There’s your site, of course. Let’s go over here. I think it would even move based on where your mouse was.
David: It did, yes.
Andrew: And so you can see how the images change based on what I’m mousing over.
David: It just changed.
David: So it was very unclear what they were trying to tell you.
Andrew: I see and so there, here you’re saying there were a lot of competing elements. You ended up moving them towards this. And I’ll bring that up on the screen. Actually, this is what the site looks like right now.
David: Yeah, now it’s, there’s a lot more, it’s a lot clearer. There’s like one main dominant thing which is this image of this person looking at the phone. And then, you can see there’s the call to action right there next to this dominant image that pulls your eye in and then it can very easily go to that call to action.
Andrew: I see the top bar is still there but it’s not a competing element you’re saying because it’s no longer blue. If I were to bring, in fact, here, let’s actually go back to the site.
Andrew: Here’s what it looks like now. The top bar is still there.
Andrew: You go over to archive.org. We can see this is what it used to look like. And it was competing in your, you’re saying it’s competing because it’s blue. So people’s attention goes up to the top and that’s no longer true here.
David: Right. I mean notice the real dominant blue is happening on this splash area.
David: Now the fact that it’s blue making it dominate is of course, sort of contextual but most sites for the most part are mostly white right?
David: And so when you put something bold and blue on it, then yeah, it stands out.
David: So if the opposite were true if it was all blue and there was a white band, then obviously that would be the thing that really stood out.
Andrew: All right, so the first thing for us to think about is to get rid of competing elements. What if those elements are important? You know, those bullet points are important. People want to know what the product does. People want to know how it changes their lives. What do we do about that?
David: Well then you actually, that’s when it’s good to step back and really think about who this user is, what they’re looking for, and the flow that you want them to have. What are your goals? What is the flow of everything? And you have to pick your battles there. Maybe those bullet points, if they are important information, are in some place that you direct that user to a different page, where they get a tour or something like that. You need to really simplify the way that you are moving them through the mental path that you want them to take, to be persuaded, and to do the thing you want them to do.
Andrew: Looking at their site and it looks like the bullet points have been moved down here.
Andrew: And they are grade-outs. They don’t take attention or overhear.
David: Yeah, you scroll down and then things, you know obviously you can’t see the whole page at once and things aren’t competing so much. You only see a piece at a time. Notice you always kind of see, there’s almost sort of a 1, 2, 3 going on. You got like a most important thing and then secondary importance and then tertiary importance, generally. Because our brains, you know, we can’t…that’s why numbers are…phone numbers or Social Security, credit card numbers…are all chunked in threes and fours. Because our brains, once you get over that, start to get confused.
David: We have difficulty ranking things.
Andrew: I do love, by the way, how Google does translation automatically and now I can get…because in English I’m just like…Cool, all right.
David: You need help on your Spanish, you know, you can do that.
Andrew: All right, back to the big board. Next big idea is “We Want To Focus On The Invisible Over The Visible.” Before I show screenshots of what you mean by that, can you explain it?
David: Yeah, it sounds like magic or something…you know keep in mind I spoke to 800 people at South by Southwest for an hour about white space.
Andrew: Okay. Did you really?
David: Yeah, I really did. So I’m pretty obsessed with this sort of invisible, these invisible aspects of design. This is a mistake that people run into a lot of times when they are trying to design something is they start to thinking about, “Well am I picking the right font?”, “Am I picking the right colors?”, “I need to have an image here, have some texture. Why isn’t this looking right?” And they start moving things around.
What they don’t realize is it’d all the invisible stuff: the way that the text is aligned says a lot about how things relate to each other, the sizes of elements says a lot, the white space between elements says a lot, the way things are organized, if they are organized on a grid. All these things can do so much to influence your design and that’s the thing that really gives things that clean sort of look that adds that credibility. But that’s the stuff that people overlook because they get distracted by all the visible things.
Andrew: You know what, I think then, let’s take a look at a couple of examples. In fact, before we show what you did with Mixergy, and these are small changes. Let’s take a look though at, how about Google. Right, you gave us a couple of screenshots here that we can see to help us understand your point. What are we looking at on the left and the right?
David: Right, Okay. So you know a couple years ago Google redesigned everything. Everything looks a lot cleaner. Notice on the left-hand size, they basically made the logo as big as they possibly could. On the right-hand side, they made the logo smaller and then they started to actually think about the units that are created by the logo. So you look at the height of the “o”, is pretty much the distance they left above the logo and below the logo to provide space for that logo to breathe. And to provide space for an “I” to be drawn there. Instead of thinking that, “Oh well, just make everything bigger!” they started to think about those invisible things.
Andrew: Okay, I see. By invisible you mean…the visible is the logo. The invisible is the space around it. By emphasizing the invisible, the space around it, we counterintuitively, we draw people’s attention to the logo, to what we want them to notice.
David: Yeah, and not only the space between things but also notice, for example, how the left edge of the “g” lines up with the left edge of the “s” in search. And also the plus which is actually hung out a little bit because the plus sign has a visual weight that’s a little bit lighter. So visually it lines up but it’s not a perfectly, mathematical line-up.
David: So the alignment of things, like notice also how it lines up with the search bar. All those things are important as well. The alignment in addition to the space in between elements.
Andrew: Here is another example, again from Google. Boy, that’s a little big, let’s go there.
David: Yeah, I love this example. They used to just have all these icons and all of these icons had all these different colors on them. It changes all the time. Now they just have…
Andrew: Just have a list of text. It used to be that in their search results on the left they would show you icons for each type of search you can do. You can use images. You can do a search for videos, news, etc. You would know you were doing a search for images because there was an icon of a camera. Now it’s gone. It does look cleaner, so what are we taking away from this?
David: We’re taking away the simplicity. It can be really important to getting the message across that you want to get. We have so much information on a Google search page. We don’t need to clutter it up with extra things like these icons that are essentially meaningless to our brains.
Andrew: So if I were to take a lesson away from this, is it to see what I can eliminate?
David: Yes. I would say that’s great advice, especially as an exercise if someone is trying to learn how to design. I encourage my students and people that I coach to use just one font. You can use one color of that font. Now, do a layout and see how that goes. It suddenly opens up your brain to all these other factors that aren’t present. If you start with something like that and then you start to say, “Well, I really do need to have a dash of color here.” Or, “I really do need an icon to get this point across.”
Andrew: So start with less and justify adding more, as opposed to adding what you think is important and then see what you can eliminate?
David: Yeah, then if you’re doing a redesign or something, then get rid of stuff.
Andrew: Let’s take a look at one more image here before we get to the… Oh, we actually have a couple more from Google here. This is the complete picture of both of those side by side. It’s easier to see how one looks much more cluttered than the other. The one on the left. You also give us Gmail. What should we be looking at here?
David: Oh wow! Look at the way the Gmail used to be designed. They were being very literal about… There’s a lot of information here that all needs to be separated in certain ways. They’re being kind of heavy-handed with it by putting a big blue box around the inbox. They’ve got heavy lines separating every Email. There’s the bulky check boxes on every single one. I don’t know if you happen to have an image of their newer Gmail design or not, but when you compare the two, that is when you can start to see that things are being lined up.
Andrew: I’m worried about bringing up my own Gmail in case I’ve got something personal. Let me see if I can do image search on Google for Google Gmail inbox. Every one of these is the old Gmail inbox. I don’t know why here [??] weird.
David: Some people prefer it because it’s what they’re used to and they used it for years, so they still use the old one.
Andrew: I don’t see… I’m sure it’s on there. Oh, there. This is one of the newer ones but it has a…You can kind of see it there with the…
David: That’s [??] the spam folder.
Andrew: Here’s another one there that shows… So now we’ve seen now that no longer heavy blues. The part that we’re supposed to pay attention to is just black and white.
David: Right. They’re just using pretty much a white background there to help you focus on the part that you’re supposed to be seeing, which is the Email. You’ve got a lot more simple interface elements going. The boxes are not big three dimensional check boxes, which I feel like they’re kind of left over from…
Andrew: The early days of the Internet.
David: Right. Well, people weren’t as used to the, “don’t make me think” sort of thing, which is still a great book. The people weren’t used to check boxes and things like that. They were [larger] population of people. This is what we call affordance in design. It’s visually expressing that you can click here, or you can drag here. Things like that.
Andrew: Yeah, I see what you mean. That was the old way of looking at things. It was the old way of presenting information, that if you wanted someone know that they could click something it needed to look exactly like a button, or else people who were coming from an offline world online wouldn’t know that this is a button, so it would have to look to like to the button. If you wanted it to be a checkbox you needed to make it somehow very clear that this is a checkbox, not a random square in a page. All right. Let’s look at one more. This is a sampler of what you did on Mixergy. This is what Mixergy looks like at this second right now.
Andrew: Here is what your change will make it look like.
Andrew: I wish I can show it side-by-side more easily. I think I can. Wait, I think I kind of could. Let me see if I can play with this. This would go right here and now I do another slideshow, yes, let’s do picture-picture slideshow. This will just take a minute. [laughs] Right. Now we have a blank slideshow and in this slideshow you’ll do this and we can move it over to the right and maybe even cut the, crop right, crop left, just a little bit, make it bigger. There. [laughs]
Andrew: That will kind of show it.
David: Yes. Perfect.
Andrew: I don’t know if I’d call it perfect, but that’s generous and I appreciate it. [laughs]
David: [laughs] Good.
Andrew: What we can see is in this version, here, actually before needs to always go on the left. Right there. There is a convention that we can pay attention to.
Andrew: Pop it up. And now the after can go on the right just like, where is that? No. [laughs] Wait. Come on, after. Oh, I see, I see, I see.
David: Just lower the canvas.
Andrew: There we go. After right there.
David: Well, that’s before.
Andrew: No, is it? Oh yeah, yeah, right. There we go. No.
David: No, you got them switched. I don’t know how that happened.
Andrew: I’m switched again. Wait. Slideshow. Over to the left slideshow. Image. Over to the right image.
David: All right.
Andrew: Well, before and after, now that worked.
David: Perfect. Okay. Now, good. [laughs]
Andrew: [laughs] I’m going to save this so I don’t lose it. That was a lot of work. All right.
Andrew: So what are we looking at? What’s the difference?
David: So one thing people are going to notice first of all is that the text is made bigger, but it’s not just made bigger. I’ve actually used what I call a varied scale. It’s a series of text sizes that are built up on a proportion, so 9, 12, 16, 21, 28, 37 are kind of the targets that I go for.
David: And so that ensures, one, it makes it way easier for me to pick the sizes I’m going to use and it ensures that they have a proportional relationship to them which makes them more attractive to our eyes.
Andrew: Wait, so what you’re saying is where I might just randomly say, maybe not randomly, but I may say, “Look, the headline looks a bit small. Let’s bump it up one. Let’s bump it up another.” You don’t do that, right?
Andrew: You don’t say, “Let’s take it from a 9-point font to a 10-point or maybe an 11.
Andrew: What’s the difference? How do you do it instead?
David: I always use the same size scale. So if it needs to be bigger then, if 9 isn’t big enough then I’ll make it 12. There’s no in-between for me there.
Andrew: You don’t go 10 or 11? It’s got to go to 12?
David: I don’t go 10 or 11.
David: Because, one, it simplifies the decisions and It also ensures that things have a proportional relationship to them, so it makes it a lot easier to work with. Another thing is that size is just one of the many factors that you can use to make something look more important or less important. You could always make things bold, you can use different colors, there’s so many different things that you can worry about. This helps eliminate some of the other factors that you can think about. Just [??]
Andrew: Okay. And we’re going to get to some of this later on about learning the rules and seeing the patterns.
Andrew: Okay. So what else? So you did include the headline of each post.
Andrew: This is from the home page.
David: Yeah, I made the headline bigger. Notice that the space between the lines on the headlines is made smaller because they’re pretty short headlines and they just look awkward, they have too much space in between them in the original one. And then I also, along with making those things bigger I realized well, I need to have a little more generous margin over on the left-hand side between our picture and our headline and the edge of everything. And another thing I did was the metadata words, just posted on November 2014. I made that not only be a size that is along with my varied scale, but I made it all-caps and I spread it out a little bit, used letter spacing.
Andrew: Why did you spread that out? Why couldn’t it be, here, this part, let me, we’re talking about, I get to use all my tools, this.
Andrew: Why spread it out? It’s so unimportant, the date. I would even get rid of it.
David: Sure. Well, yeah, you could get rid of it. That’s one thing you could do. First thing is I made it all-caps because it’s a different sort of information. Metadata feels different than a headline does. So it feels like it should have a different sort of character and just making it a different color or something doesn’t really have the same effect as making it all-caps.
David: All-caps feels very metadata. Now, don’t use all-caps for your body copy. That’s obviously not good. That’s screaming. But then when you make it all caps, you only want to do this with all-caps. You don’t want to do it with lower case. It’s one of those type rules. It’s complicated. But with all-caps you can spread it out a little bit and then that gives it sort of a lighter feeling. And yeah, if you feel like metadata isn’t important they could be a step smaller on the scale.
Andrew: Okay. Let me do this. You actually created a video for me walking me through how you did this.
David: I did. Yes.
Andrew: You said, “Look, I spent seven minutes here and I’m going to actually make the changes in real time and it’s up to you whether you want to do it or not,” and I said, “Hell yeah. I want to do it and we’re going to do it.” But with that you show how you did it, and can I just give this to whoever is listening to this right now?
David: Absolutely. Yeah.
Andrew: Okay. So we’ll give them a copy of that video and they can watch as you think it through and what decisions you make, and then they can also see how you pick the size of the text so that it doesn’t seem like an arbitrary decision.
Andrew: Here, I think people know, but this is what we’re talking about here. It’s the home page right there. We can make it a little bit bigger so we can see it on the screen, and that is what you’re changing, these headlines. All right. So we’ll get to see your thought process there. Let’s go back to the big board. The next one is, [laughs] I do have this, “Get over your font anxiety”.
And the reason I have font anxiety is because there are font nerds out there now who love to blog about fonts and they love to talk about what’s right and what’s wrong, and I don’t know what’s right or what’s wrong, so you know what I do? I pick Helvetica because Helvetica has a documentary that I saw and I figure, “All right. Great. No other font has a documentary. I don’t want them.”
David: Yeah, Helvetica is not a bad choice. It has a certain sort of character to it that’s appropriate for certain situations and then there’s other fonts that are better for other situations. But there’s really just like three kind of main categories of types of fonts and if you kind of pick a favorite within each of those categories and stick with it you’ve got plenty of other things to worry about.
Andrew: What are the categories?
David: So the categories are humanist, geometric, and rationalist.
Andrew: Let me write it down.
David: Or realist, realist.
Andrew: Because I think you kind of lost me here, but we can get me back.
Andrew: Humanists, okay, let’s make it bigger. Great. People see the big board, that’s secret. [laughs] Humanist.
David: Yup. And realist.
Andrew: Okay. By the way, this could use more space on the left, I know that much.
David: Yeah. This is the part where it little complicated because these are, they’re not the only type of classifications of fonts that are out there and they are not mutually exclusive either, but they are kind of the three main ones that dictate how a font is going to feel.
David: Humanist fonts, they’re really influenced by when people used to write, they used to scribe things like [??]
Andrew: What do I need this for? Do I need one humanist, one geometric, one realist font on every page that I create? No.
David: Well, yeah, I mean it can get complicated and I’ve got stuff about it in my book. I’ve got a [??] answer, you can Google about it as well. I do have a list called “All of the Fonts You’ll Ever Need” at Designforhackers.com. People who sign up for my email list get like a list of fonts.
David: The point being though, that if you kind of pick a few favorites, then you have plenty of other things to worry about. And, you know, there are some great new, high quality typefaces on Google fonts, places like TypeKit. There are some really great ones. There’s also a lot of bad ones.
David: In fact, most of them are bad, not very good, and they’re not going to help you out. And so unless you learn what you’re doing with them, then keeping it simple, worrying about the other things will get you well on your way to just worrying about something else.
Andrew: Okay. So don’t think about it too much, but do I need a humanist geometric and realist font? Or did I just take us down a wrong alley here?
David: Hmm. Well, it depends on what you’re going … This is where it gets complicated. You might have …
Andrew: So what’s the simplest thing that we can do to leave people with? And by the way, I do have the PDF right here.
Andrew: I always have it for some reason. I click on the guest site before I get it.
There we go.
Andrew: It’s the PDF. It’s available on your site.
David: And, you know, that’s not to say that literally nobody should use any other typefaces. There’s a lot of other great ones out there, but this is just to say that if you’re just stuck with these, you’d be fine.
Andrew: So just pick one of these, and I’m good to go. And I can see, oh here, this actually describes it, what the font is geometric realist. How do I link this to people so that they have access to this to…
David: I can give you access to that.
Andrew: Should I just tell them to go over to your site?
David: If they go to DesignForHackers.com and sign up, I have a free email course and the first thing that they get is this PDF.
Andrew: DesignForHackers.com. Where is that? I saw there was also available on your personal site, right here. Oh, actually I don’t even need to do that, it’s right there. I remember playing with the site, right?
David: Yeah, that’s something I probably need to fix.
Andrew: Cool. I do that and then I get it.
Andrew: Great. Cool. All right. Onto the big board.
Andrew: Oh wait. Let me see. You had an example of bad and good. Obviously this is very bad.
David: Yeah, I mean, that was so bad that I could hardly even take it seriously, but …
Andrew: This is good. What makes this one good?
David: Well, this is Shaun Inman who is a great designer. Lots of simplicity as far as what typefaces he is choosing, things are lined up nicely. He’s using white space in a way that is really intentional. You can see where white space is being used to separate these posts from one another as far as like how much white space there is. And there’s a sense of organization in the amount of white space between, say, the title of the blog post and the metadata beneath it.
David: Do you notice there’s like a rhythm to it, like if you look at the height of the bottom of the metadata to the top of the post title, that height is pretty much the amount of white space there is between the bottom of the metadata and the top of the next post title, for example.
Andrew: I see.
David: Right: There’s like a sense of order to it.
Andrew: Okay. All right. Onto the next big one. We talked about font anxiety. Now we’re going to talk about colors, and you say let’s just pick one color.
Andrew: Color is complicated.
David: And color’s very complicated and there are all sorts of different color schemes and color configurations out there that you can worry about but actually if you look, if you look really closely, say like the icons on your iPhone or something, you’ll find that most brands have like one main color associated with them.
David: Keep things simple.
Andrew: One color …
David: Like add that one color throughout where you need it, then you’re well on your way.
Andrew: You did that on your site which I’ve been bringing up a bunch.
Andrew: What happened?
David: So I mostly … Well, I’ve always had kind of an earthy feel to my sites. There’s a little bit of a texture to the background because I’ve always to emulate like natural paper, but blue, I’ve got blue in my headshot. Blue is a calming color. It enhances creativity, and I wanted that for my main color. And the rest of it there’s no black being used on any of the type either. The type is like a dark brown.
David: So …
Andrew: Let me understand. When you’re saying they’ll pick a color, it sounds like you’ve got, it looks like you’ve got three colors. This is one color.
Andrew: The entrepreneur cycle of delusion.
Andrew: This is another color, more blog posts. Here’s another one.
Andrew: I just clicked. I didn’t mean to click.
David: The more blog posts … That’s actually a lighter version of the color that I’m using for my main text. I’m just using Wes there.
Andrew: I see.
David: For framework I’m just using lightened 50%.
Andrew: You’re talking about this now. Now I’ve got my telestrator back.
Andrew: And this and this, all the same color.
David: Yeah. So I think using shades of, you know, tints and shades of like whatever your black or gray, whatever you’re using for text is good, and then having an accent color, or whatever your sort of main brand color is.
Andrew: For you that’s … this is the accent color.
David: And that’s the blue for me.
Andrew: Got it. And it’s also in here.
David: And yeah, do you notice I’m harmonizing with my headshot which has blue. I’m wearing a blue shirt in the picture. I’ve got a blue background. You know, that’s not a mistake.
Andrew: Okay. So pick a color and then have another color as an accent color, is that what I’m taking away from this?
David: I think the main takeaway would be to use shades of gray and an accent color.
Andrew: Shades of gray and an accent color.
David: And one color, just pick one color. Keep it simple. You have plenty of other things to worry about. You know if you gain confidence in like the alignment and all that stuff and then you start willing to play around with color more, you want to redesign for hackers or something like that, learn more all about other stuff, then cool. But if you’re starting out, keep it simple.
Andrew: Okay. But you then are breaking that rule, aren’t you by going with brown and blue?
David: Yeah, I mean, I have a degree in graphic design.
Andrew: I see. Okay. All right. Everyone else needs to stay with …
David: So I went a little [??].
Andrew: All right. It looks like that’s what he did.
David: I can drop that knowledge here, but we’re going to be here for a while.
Andrew: No, I don’t need to be here for a while. I mean, I’m happy to be here for a while, but I don’t want to get overwhelmed. Just give me a couple of basics. All right. You used shades of gray and one accent color, and that’s it. You’re done.
Andrew: Okay. I can do that. All right. Let’s go on to the next one. The next one is avoid column soup.
Andrew: Here’s what column soup looks like. What’s going on here?
David: So there is something that we used to see really often. People use frameworks such as Bootstrap which are great. It really makes it easy for you to communicate a site that looks pretty professional really quickly. Now because these frameworks are made for lots of people for a lot of different situations, they have what’s called a grid, imaginary vertical lines that you can use to organize things.
David: And there are 12 columns usually. By default Bootstrap is 12 columns. What people do is they start to feel anxious. They start to feel anxious so, all right, I’m using three columns here for the navigation and then I’m using nine columns for the splash, and then underneath I’m going to just divide up those nine columns into three. And then what about these other columns? I haven’t used all these other columns.
David: And then they start feeling like they need to actually use all those and organize them. A framework something like that has 12 columns. Let’s just pretend like you have four columns. Pretend like you have three columns and think about what you’re saying about your information each time that you chunk it up and the way things line up.
David: And then you don’t put this visual mess that we have in our example here.
Andrew: So go with either three columns or where is that? Right here. There it is. Just pick the number of columns that you want to use and be consistent with them.
David: Yeah, be consistent with them. Notice on the left hand side we have this navigation, and we’ve basically delineated that left hand side as, okay, that’s where navigation goes. And then we have, but we’ve completely ruined that by putting … see where it says complaints and death threats . It’s like spanning over this …
Andrew: Hang on. Let me bring out my telestrator here. Complaints and death threats. I think here’s complaints.
Andrew: It’s hard to see, and we also have death threats which is underneath here…
David: And then, yeah, draw a little vertical line to the left of where it says “Hey you” in that column that you’ve got there, because now we basically said okay, this is our main content and this is our navigation on the left, but then we totally broke that by getting anxious about using all of our columns.
Andrew: So what about this one? Here’s a site we showed from earlier. Let me bring up…
Andrew: The [??] again. It looks like this is all one. How about I use red? Red work? Yeah. This is one column.
Andrew: It looks like they’ve got … here’s a second column.
David: You mean at four?
Andrew: Yeah. So is that okay?
David: Yeah, that’s fine. They basically- but, I mean they’re still using the grid in the way that the grid is supposed to be used. The grid is basically just there to prove flexibility. It’s there to provide choices for you, and that’s working out fine here because they’ve got a splash that goes all the way across, and then they’ve got…
Andrew: But what about here? Now we also have…
David: Right. And then they went into three.
David: This is where we get into, you know, why design is so complicated for people, is that, you know, there’s these rules and guidelines and things that you can do that will make things a lot easier for you, but very skilled designers can go ahead and break these rules and manage to make it look fine. It’s like if you pick up a guitar and think you’re playing jazz, like…
Andrew: If we’re not at that level, we keep it like this. Where is it…? Like this. It’s okay to have this top section, and [??] it’s okay to have something like this, and columns like that, but then if we’re going back below then we want to come back to this one column, so go with one four one.
Andrew: Or are you telling me to even stick with one column or three but don’t change what I’m starting?
David: Yeah, I think one-four-one could be a good rule for a site like that. They can go ahead and do that. The way they get away with going down to three there is they experience such a clear delineation that this is like a new section.
David: That… it became okay. Where they go to three columns they’ve got a bright blue background and it’s very clear that it’s totally unrelated to the four columns that were above it.
David: And then they go to four again, see?
David: And then they go straight across, and then the three. Some of those things might be a matter of how many items do we have that we need to organize here, which they’re using icons to express these various things. It would be different if you’ve got larger amounts of text.
Andrew: Okay. Well, they’ve got this box here. I’m going to complain to them right now. “Hi. Why so many columns on your site?” We’ll get the answer by the end. Now I’ll troll on their site.
David: I do think they did a good job, though. They don’t have column soup.
Andrew: No, they don’t have column soup. All right. You’ve explained why it is that they able to get away with it by explaining the clear delineation, but you’re saying if we’re just getting started keep it simple.
David: Yeah. Keep it simple. Most importantly, don’t feel like because there’s twelve columns you need to use every single one of those vertical delineators at some point during your design, which is what happens to a lot of people who are starting off.
Andrew: Back to the big board. Next thing is to consider readability. Fifteen words per line or less, no more.
David: I’d say eight to 15.
Andrew: Eight to 15 is where you want us to be, let me correct it right now.
David: Yeah, you don’t want to have three words a line.
Andrew: Eight to 15 words per line.
Andrew: You did that on your site, right?
Andrew: This is… I’m bringing it up. What happened? What did it used to look like?
David: Well, on my site it didn’t… I’ve always been eight to 15. Actually, I made the text even larger since you’ve got that screen shot…
Andrew: Yeah, I’ve been zooming it in. It looks like that.
David: Yeah. Notice as you zoom in, you zoom out, if you change the browser size, it’s always going to be pretty much eight to 15 words per line. If you look at something like Wikipedia, for example, this is a problem with responsive design all over the web, especially with text heavy sites. There are these sites that have 50 words on a line.
I think Wikipedia has something like 50 words on a line if you bring it across a long screen. I don’t know, it’s like they figure,”Oh, if we make the window bigger we have to fill the whole space.” That makes it so hard to read because of your eyes following all the way along. It gets to the end and you’re so tired, and you have to go back and find what the next line was. If you’re in a long paragraph, sometimes that can be very hard. Optimal for reading is eight to fifteen words per line.
Andrew: I think that’s why people end up using tools like this one. Let me bring up Wikipedia here. Desktop… Chrome… Here’s Wikipedia. I end up just using this when I need to do my research. If I’m doing a lot of reading I can’t read Wikipedia style articles.
David: Yeah, when I redesigned my blog that’s something I thought about. There’s all of these readers out here. People are using instapaper, pocket, and things. Why not just make your site readable?
Andrew: When you did that did you see any change in your user interaction?
David: I’m glad you asked. I was actually just looking at this earlier today. It’s been more than a year since I redesigned. I look at that a year after I redesigned compared to the year before I redesigned. My blog before was a lot like a lot of bloggers you see, where over on the right hand side there’s this sidebar with most popular links, previous article, and next article. It’s like doing everything I possibly can to try to get people to just stay on my site and read more stuff. It has kind of the opposite effect. Instead, I wanted to make it all about the text.
I thought about what my goal was, which is I’m not looking to make ad revenue on my blog. I want people to come to my blog and read the content, to feel that content, and to be compelled to read more. I’m not necessarily looking to reduce my bounce rate across the board, I’m looking to get those people who are resonating with my content. What I found was that session durations, the length of time that people spent on the site, doubled.
Andrew: So people were spending twice as much time on the site, per visit, after you changed it?
David: Yes. This is over the course of a year, too. This isn’t just for a week. Year for year, they spent twice as much time. The number of people who spent three minutes or more went up 27%. The number of people who spent 30 minutes or more on my site went up 80%. These are people who come, read the article because it’s readable, and there’s not all this noise they’re trying to distract from.
Andrew: Here’s what we’re looking at. Let me bring it up. This is what the site looks like now, and this is what the site used to look like, right? [??] There we go. This is what it used to look like.
David: This is what it used to look like, and it’s a little bit embarrassing. I had certain goals when I started that particular design. Then so many things changed. The technology changed and then things started to be hodge-podged. The text was smaller. I was trying to get people to visit more popular posts. I ended up writing a book and stuff. Time just wiped the slate clean and make it about the content.
Andrew: I’m surprised, actually, that people stay on the site longer when you eliminate all these things that they could be doing on the site. I could imagine, someone’s done reading this post and then they might want to read this one. They don’t do that anymore. You don’t show them what else is available.
David: There’s a little bit of an effect of, if everybody made their site look like this, which has happened with things like media and stuff, it might start to have less of an affect. When people see this they’re like, “Oh wow, I’ve been having information thrown at me all day. Here’s this vast expansive of space and text that I can read, with quality writing.” Then they feel compelled to spend more time. In fact, the number of people who read five pages or more on my site would have 62%. Returning visitors will have 41%. So I could very easily have missed out on those things if I was looking for bounce rate. Bounce rate didn’t change, but because across the aggregate I didn’t necessarily move the needle on bounce rate.
The thing I was going for is what Austin Theon had a great book called Show Your Work. You want hearts not eyeballs, so I wanted to make fans. People who resonated with my work. I wanted to give them a great experience. I didn’t want to just try to get some kind of across the board aggregate great experience, but I did that. The people who really got a lot of depth out of what they saw there just went way up.
All right. Let’s go back to the big board. The next big one is, learn the rules. See the patterns to apply a framework. This is easier to understand when we talk about Shane.
Shane is a reader of mine who got designed for hackers for a Christmas present a couple of years ago and he emailed me out of the blue. I couldn’t believe how I got in touch with him. It’s like I couldn’t have made up something better. Shane is as much a software developer and he is a software architect. He’s been a software architect for 7 years. He’s colorblind. When he was a kid he was painting oceans purple and cows green and Shane was building various apps, it just really bummed him out to have things he would work on and people wouldn’t respond to it. He said it was not fun to make things that nobody wants to use because they are ugly.
So he read “Design for Hackers” which we are giving you the tactics today, but design for hackers is mostly there to give you a framework and understanding on how design works for you. How do all the different factors interact with each other to give a great design?
Shame did that and he learned about typography and white space and a lot of things we are learning about here, but a little bit more in depth. That way he had a framework that he could work with. That way when he saw designed that he liked or designs that he didn’t like he actually had something to look at. To find what he saw, to some sort of understanding, and through that process he just kept getting better and better and better.
The ultimate test, Shane started designing bootstrap frameworks and started selling them and he has made enough money on the side that I can’t show you Shane’s picture, I can’t give you his last name because he doesn’t want his employer to find out he is making this much money selling bootstrap frameworks on the side. Which is the ultimate test because people who are buying them because of what they look like.
He’s come up with little trick to get around being color blind.
The reason that we bring him up is because if he doesn’t have the ability to notice color and he doesn’t have a major chunk of what it takes to be a designer, he needed to be something else and that something else was he came up with a framework, a structure that allows him to do it. So how do we do that for ourselves? If we don’t have the design eye, if we don’t have the ability for colors, what’s a framework that we can use that allows us to do something like this.
Well the framework we are talking about is exactly why I wrote “Design for Hackers”. To give somebody some kind of vocabulary to understand everything that comes together to make a great design. Unfortunately, this particular tactic is a little bit more involved than the others in that it involves investing the time to understand everything that they’re seeing and the designs they like or don’t like.
Andrew: I see. It’s not that we’re giving people a framework within this point, but we’re saying, “Look, if you don’t have a design eye, you don’t feel you were born with it, what you can learn is some framework, some techniques that you can use to compensate for it and Shades is an example of what can happen when you do it.”
David: Yeah, exactly just to have some sort of understanding vocabulary of what is is that you’re seeing and to be a fan of design. Everybody that I talk to who’s leaning design, they all have some sort of inspiration folder where they just keep screenshots and different elements of things…
Andrew: What do you keep yours in?
David: What was that?
Andrew: What do you keep yours in? Delicious?
David: I actually don’t have one. My personal framework is the history of graphic design and classical stuff that I learned in college. I think that a lot of these people use Sketch and Evernotes to keep those things.
Andrew: I’ve been doing that. I now have a tag in Evernote. With Google Chrome and Safari you can easily save to Evernote. I have a tag there that’s called “Design”. When I do design something, I can say, “Look, I like that one and I like that one. Can you make mine look like that without copying it?”
Andrew: All right. You’re advocating that too?
David: Yeah. I think that if you have an understanding of that framework, especially, like the one I talk about in “Design for Hackers”… I don’t want to sound like I’m shoving my book down people’s throats, but I did write it because I felt that it needed to be written. People needed to know this stuff. If you have an understanding then when you tell your designer, “Make it look like this,” then you can actually then understand better why that particular design looks that way and how it meets the particular objectives that that company had. Through understanding that then you can understand, “Okay. Well, how are my objectives different and then how might that design be different?”
Andrew: David, you don’t have a design book or design tag or a design something to save it all?
David: What’s that?
Andrew: You don’t keep a design book or a design tag…
Andrew: Yeah. I’m surprised.
David: You might think that I would but I don’t. I just happen to have… I wrote a book that encompasses my entire understanding of design because for me it’s… I have that framework very well established in my brain.
Andrew: Do you feel like you were born with a gift? I remember in your book you saying that you didn’t even have good penmanship or even an understanding of why penmanship was important when you were going to school. Do you feel like you were born with that gene or is it something that you taught yourself the way hackers teach themselves how to code?
David: First of all, yes, my penmanship is still not very good.
Andrew: All of our penmanship stinks.
David: Right. We’re on computers all day. My mother was real good at art and drawing. When I was a kid I loved it. I just spent so much time in my room alone by myself, just skipping meals, just hours a day drawing. It was always clear that I was going to do something related to that at some point. I do think some people are maybe born with an inclination toward certain things. I still strongly believe that just because you aren’t born with that that doesn’t mean that you can’t learn.
Andrew: You can [??]
David: People like Shane, Shane thought, “I’m just not programmed for that.” People tell that story to themselves. “Oh, I just, I can’t learn this. I’m a developer. I think a certain way.” I don’t buy that.
Andrew: All right. On to the final point. I did promise you that we’d be done by now. We’re running a couple of minutes late, but we only have one left.
Andrew: That is to focus on one goal. We look a moment ago at your site at a before and after. You had to kill some babies in order to, that’s how you say it.
Andrew: I know it’s strange. I’m going to have a baby. It’s weird to say kill some babies. You had to kill some babies, you said, to get to…
David: I don’t have any babies so it’s easy for me to say.
Andrew: I remember actually when my wife was pregnant, I was listening to Iron Maiden to fire me up on my runs. One of them they sing about kill the unborn in the womb. It was such deft metal.
David: You’re like no.
Andrew: That means something different now that my wife is pregnant.
David: I need to change my musical tastes.
Andrew: You had to make some heavy design decisions, let’s say, some heavy editing here.
David: Yeah. We talked about that a little bit. I decided, “Okay. What were my goals here?” I had different goals back when I first designed it. That was when I was going to start maybe doing some freelancing. I kind of knew that I maybe wanted to write some kind of book someday. I wasn’t sure what it was and I just had a lot of different goals.
I ultimately decided on the latest redesign that I cared about, one: People connecting with my content. Really reading it and having, this is almost an exaggeration, but an out of body experience. They get there and they’re just entranced. They just want to read what’s there. And I wanted to give them a place to do that. And then I next I wanted to promote my book. That’s where the thing that pops up in the bottom announces my book, but it doesn’t really do that until you’ve read the whole article. You’ve got to the end.
Andrew: Oh yeah, let’s see if we can bring that up to show. That comes up.
David: I completely forgot about getting RSS subscribers. I don’t have annoying social media things up at the top. I really just cared about depth.
Andrew: I think I need to do that too, get rid of annoying RSS things at the top. But I feel like people need that sometimes. So what do you do with?
David: I feel like people who know how to use RSS know other ways to figure out how to do that. I’m not somebody who uses an RSS reader anymore.
Andrew: And I guess more RSS readers, you know what actually? RSS, you convinced me, you don’t really need it because most RSS readers now can just get the domain at the site and then they’ll find the RSS link, right?
David: Yeah. We have the technology to just copy and paste the URL. Now I do have the feed burner chicklet way down at the bottom. And then on the browsers where it’s available I have it sort of faded. It’s down there. It’s down there, you can grab it, and drag it, and stuff if you’re so inclined.
Andrew: The book doesn’t come up until right there where I hit the bottom of the post.
David: Yeah, I just tried to hide those things. And I just put the greatest hits down at the bottom. And that’s not a popular post plug-in, that’s just my hand picked, these are the posts that I feel are important.
Andrew: I have found that this is helpful in discuss.
David: Yeah, discuss does a good job with that.
Andrew: Yeah, they do pick out recommended follow-up reading that people actually do click on. I was thinking of killing that on the site and then I looked at the stats and I said, “No, people are actually using it.”
David: Yeah, yeah, one of the things I did in the redesign was go to discuss comments and that was good. They’re good.
Andrew: All right so get rid of everything. Focus on the one goal, for you that one goal was getting people to understand that there was a book there, and get them to understand and care about the book. You wanted them to actually read your posts, and that’s the goal.
David: Yeah, primarily I wanted depth of connection. And that’s why I was like, “Give them a place where they can read.”
Andrew: All right. I’m hoping you’re not too expensive after reading the book, after seeing this, and also after seeing what you did to Mixergy, very small but really significant powerful changes. I’d like to hire you to work on both Mixergy and one of the other sites. Frankly, first most important this site that I have for helping people do interviews. I think we could use so much there. And I hope you’re not incredibly expensive because I think I’m going to have to pay you, even if you’re incredibly expensive, because you’re incredibly good.
David: Well thank you. I would be really excited to learn more about those sites.
Andrew: All right cool. All right I’ll follow up with you on that. Anyone else who wants to have a follow up here is the way to do it. Check out “Design for Hackers.” I got it on the Kindle. You can get it in paperback, right?
David: You can get it on paperback, Kindle. It’s everywhere books are sold. And if you want a taste of the book I do have a free course at designforhackers.com.
Andrew: What sells more? The paper version or the digital version?
David: I wish I just had an answer for you for that.
Andrew: You don’t keep track.
David: I actually don’t even know.
Andrew: You know what? Because I read the digital version, I almost always read the digital version, and you had this interesting thing in there. You said, “Look, if any of the images are off because you’re reading a digital version I want you to complain to the publisher.” I looked I couldn’t find one. I wanted to complain. I thought that would be so cool. I said, “Let’s let the publisher know they’ve got to do right by the author.” All right here is the book again, “Design for Hackers.”
Thank you all for being a part of it. David, thank you for being here and teaching us.
David: Thank you so much, Andrew. Great to be here.
Thank you. Bye everyone.