As far as visual design goes, the book that I find most useful is called Presentation Zen. There is a copy at the library. We have one at the writing center. It’s the shortest, and it is the best. It is less than twenty dollars on Amazon if you need to get a copy.
So what belongs on a slide? I think I have just given you a hint of what I think doesn’t belong on a slide. Seth Goden says no more than six words on a slide. Ever. Which I have violated with this slide.
I think he is right though. You have all seen presentations where someone has paragraphs and paragraphs of text up on the slide. Nobody can read it from the back of the room maybe not even from the front of the room. Furthermore, you don’t want to be reading it when there is someone up there also talking at you from the front of the room. You are trying to divide your attention.
Charts that show the point you make and nothing else are great to put on a slide. I’m going to show you some really bad examples of charts.
Photos. Images that evoke the concept you want to get across or the feeling you want to instill. In this case zen. You might find one that does excitement.
OK, things that do not belong on a slide.
Your entire data set. No!
This is a Microsoft slide. This was actually presented in one of their product introductions. They put as many bullet points as they could possibly get on the slide, and they are not even regular text bullets. They’re all logos, and they’re all different logos. Each one of these could be a slide, and it would still be busy.
Clip Art. Please stay away from the clip art. It is juvenile. It doesn’t look professional. It does not convey anything. It is just filler. Ditch it.
The author of Presentation Zen, his name is Garr Reynolds, He coins this word called “sliduments.” It is slides that are documents thrown up on a screen. Don’t do that.
Separate what you want your audience to have. There are things that they need to be looking at in the room, and there are things that can be printed that you give them to take away. We have given you a whole binder full of them. We didn’t try to put all of that information up here. We handed it to you. There is a difference between a slide and a document.
Ask yourself do you even need slides. Jennifer didn’t this morning. We went with one slide for the first hour or hour and a half that you were talking. It was great. We had a great discussion didn’t we? We didn’t need slides. Ask yourself, “an I just get up in front of people and talk about this subject, or am I hiding behind my visuals?”
The B key in both power point and key note. You can press the B key while you are presenting and go to a plain black screen. So you don’t have to create filler. Isn’t that a great trick? And some remotes even have a button for that to. You don’t have to create a visual if it is not appropriate to what you are saying. Just let it go black. I see a lot of people throw in filler visuals when they don’t have anything that is appropriate to the topic that they are speaking on, and you can just let it go. Don’t feel the need to fill.
This is great quote. I’m going to read you this story. This is out of another book called the Naked Presenter which is all about speaking without slides. This is from Guy Kawasaki who is a very popular speaker in the tech field. He says look, “If you need to put 8 or 10 point font up on your slide. It is because you don’t know your material. If you start reading your material because you don’t know you material, your audience is very quickly going to think you are a bozo. They are going to say to themselves, “This bozo is reading his slides. I can read faster than this bozo can speak. I will just read ahead.”
I think this speaks to the attention span problems we see in some classrooms and some presentations. It is not just that we have shorter attention spans in all cases. Sometimes we are sitting up here reading the information off the slide, which they have processed two minutes ago, and they have moved onto something else because we are boring them.
So let’s assume that you do need some slides. You aren’t just going to read things off your screen. You are going to have to do some planning. Think about what is best going to illustrate your point. Don’t just open up your application and start entering bullets. which is what I see a lot students doing. No, no, no. That is letting the software dictate what you are doing. Sketch some things on paper or on a whiteboard. This person has highlighted the important points. These other things can probably go into a handout or speaker’s notes or something.
There is a slidesorter view which is in Keynote it is called the slidesorter in Powerpoint it is called the light table. This is the one where you can move the slides around in a big grid. You can use this to create title slides for subject headings and then fill in with the other slides that you are going to use to illustrate those points.
You can insert blank sides until you are ready to fill them in. You can print six blank slides on a page from Powerpoint. I do that a lot when I want to sketch things out on paper. I will just print a stack of blank sides and start filling in the boxes. You can also do this with post-it notes on a wall. Anything that lets you move things around is going to work with this. You want to plan the whole thing before you get into the software. The software is going to teach you bad layout decisions. This is one of the default Powerpoint themes. One of the better default Powerpoint themes. It still isn’t very good in my opinion.
Because look at the contrast here. This is calling attention to itself down here. And whatever you put here is going to be fighting for the attention that is down here. This is drawing your eye this way. Here’s the body slide from the same theme. Again, a huge amount of space is giving to the title area. It doesn’t really leave you a whole lot of room to do your thing especially given what I am going to show you in a minute about the bottom of the screen.
It also has this incredibly high contrast design. Your information is going to get lost on this slide. You don’t need a fussy background. You can go with a solid color or a gentle gradient or a really really subtle pattern or a solid color. In a situation where you are going to be speaking in a dark room, I would go with a dark or black background. In a situation where it is really bright, white is okay. In a dark room, this would be completely binding to an audience. I always try to figure out what the light situation is going to be. I don’t want to completely blind people. They look like moles emerging from the dark when they see one of these.
Keep in mind that unless they are sitting in the very front of the room everybody is going to be looking at your slides over several people’s heads. Don’t put anything vital in the bottom fifteen to twenty percent of your slide area because there is a good chance that half your audience at least won’t be able to see it. You are designing for the back of the room. Not only is your slide not a document; it needs to be a billboard. I can’t even read that in this picture, and this is a fairly good camera. I can read the title, but that is it. The rest of it….no.
How large should your text be? Figure out the average age of your audience roughly and divide by two. In this case, I would say about 45. Some good fonts to use are the really simple ones that are installed on every computer. Caslon, Franklin Gothic, Garamond is the one that you see a lot of apple presentations. Helvetica is the old standby. What you don’t want are the fonts that have a really broad stroke in one directions and a really thin one in another because those thin ones will disappear. And the broad will take over. Also these openings, the counters in the letters, have to be big enough so they don’t get lost in the light because these kind of glow a little bit. The letters are a little bit fuzzy on a very large screen. Rockwell is not bad. This one is right on the edge of what I would use in a presentation because these seraphs are awfully strong and they start to run together in the middle.
I really recommend using one font for you entire presentation. I know people get a little crazy because they have 60 of them installed on the machine by default and they think I can use all these different fonts. Generally not a good idea. You really only need color, positioning, spacing, and size to demonstrate your hierarchy of information. You don’t have to go with fifteen different fonts, and it is much more reasonable if you don’t have problems with your drop shadows on Windows versus Mac and if you stick with one font.
This is a Steve Jobs presentation. The reason I named him when we were talking about people we admire as speakers is because I have been looking at tons of his stuff while doing this. Even when his slide is full of bullet points, there are no bullets. He is using the spacing to take care of the differentiation. We don’t need bullet points on this screen. Furthermore, he is giving you more than just text to look at. He is showing you the very thing that he is trying to sell you as he is giving you the technical details about it. So if you don’t care about the technical stuff you can still go oooooo aaaaawww. This is from the introduction of the most recent iphone update.
This is a color wheel from the Before and After magazine, which is one of the resources on your sheet (which by the way is the very last thing in your binder.) The trick to using color effectively, well there are a lot of tricks really. I’m not going to go into the whole psychology of color and how different colors create different moods because I think that is really less important than some of these other subjects when it comes to slides. We can talk about how blue is calming, red is exciting, and green can represent either life and freshness or illness and death depending on what shade you use.
Really what I am interested in as far as slide design goes is contrast. This is pretty high contrast. We got dark. We got light. There is a drop shadow on it which helps. Pops it a little bit. Not so much contrast. The colors go together. They look good together, but it doesn’t pop out into the room like the other one did. Having a drop shadow doesn’t help all that much.
Now that is bright. That is polar opposite. It might even be too much. It might start to give you a bit of a headache looking at these two colors on top of each other because they are exact opposites on the color wheel.
What you want to do is find the opposite because that is going to be the thing that stands out, but back off of it a little bit, or try one of the colors that are next to it. Maybe orange or a kind of mustardy color?
I am going to kind of move on and fold in some information about the color as we talk about charts. Because I think that charts and graphs are some of the most problematic things that we see on slides other than giant paragraphs of text. The idea that I want to get across is that this distorts the data. If you can, avoid those 3D constructions. They look cool and are all the defaults, but a flat chart shows much better. You can imagine if this is sloped, and you are seeing it on a perspective. That 23% shrinks quite a bit. Showing it flat gives you a much more accurate representation of the data. This is slightly cleaned up from what pasted in from excel. It had originally put all of the text at ten-point I think. Which was ridiculously small!
This is one of the default color schemes that it didn’t give me much of a choice about. So I’ve got white on a very bright color that you can’t read very well.
I’m going to start clean this up a little bit. So my first attempt is just to fix the fonts. It’s still not great. We’ve got better contrast, but it still looks pretty bad. Changing the color scheme completely and moving those labels out helps quite a bit, and now that I have the labels here I don’t need a separate legend.
Now this is better. If what I’m trying to point out to you is the Latin American number. I’m pulling that one thing out of the chart and fading the rest out into very similar colors that are also very similar to the slide itself that number really pops now.
I tried this. I’m not sure that loving the yellow, but this is our contrast at work again. I did want to point out a very subtle color change. Watch the text on Latin America versus this pie chart. There are very, very similar shades of yellow versus the identical shade. This is a trick from web design that I wanted to share with you. If you have text that is supposed to match something else on the screen, the bit of text usually looks darker than the big chunk of color even if it is technically the same shade. If you want it to look the same, lighten the text just a smidge. Text tends to look darker when it is the same color. This is one of those little tricks from the web design world that I wanted to bring in and show you all.
This is another chart from excel. In fact, I cleaned this up a bit from what it pasted in. The original one had really different fonts and a blind background which I took out. What I want to get across for you and for your students, is that working with graphs is usually a question of taking things out that Powerpoint and excel have put in for you thinking that it is going to be wonderful. You don’t need everything here. Start removing the non-essentials. Since we just have one data series, we don’t need a legend. We don’t really need a Y-axis either. We know that 4 is bigger than 3.65. We can dim these grid lines a little bit, or we can get rid of them all together. This is starting to look a lot better. Now we don’t really need this big border around this whole thing, and we can even dim this one that we have left. That’s not too bad. I think the numbers are still kind of hard to read, so let’s move them a little bit and maybe increase the final point that we want to make. All of that was just a question of deleting the stuff that Powerpoint had put in there and backing out until we had absolutely nothing left that was not essential.
Of course, we have to decide if a graph is really the best way to convey this information. Maybe not. I’m going to talk about images for a minute. Obviously, clip art very bad. Let’s talk about photos. A lot of the default photo or slide layouts will have these little frames that have borders, and they tilt the photo a little bit. That is okay, but it necessarily diminishes the photo. Where as if you get it full screen, you can really tell how in your face Elena was being when I took the picture. Right? She was right up in my iphone, and I went click. Which one gives you a better idea of her personality? This one right? Stock photos are great, and there is a whole list of places that you can get them. There are also different ways of illustrating the same concept. If you have the choice between a complicated photo and a simple one, which one brings that closer and makes you feel like you are part of that game? I think it is this one.
Certainly if I had text to super impose on it, I would want to do it here rather than try to cover up the player’s face. It is the same concept. It just brings it a little bit closer.
Special effects. I have no use for most of the transitions built into Powerpoint and keynote both. They are completely pointless. Animation calls attention to itself. It does not call attention necessarily to your data. It is a distraction, but I do think there is one effective of use of it. Here we are using a nice little photo to illustrate the five-year difference in the life expectancy of men and women.
I’m just going to fade him out.
Is that not evocative? It is so sad. You are like she is all-alone. All I did was take an eraser in Photoshop to get him out and move the water over a little bit. It does require a little skill in Photoshop. Probably something you wouldn’t do everyday for lecture, but it’s an interesting technique. And I think this is probably one of the only legitimate use for a transition in slide software. It is just a simple fade. I had two photos one with him and one without, and I set up a fade between the two.
Those silly little tiles that come falling from one side and go this way. I have no patience for that stuff. It is just a distraction. It is taking away from your data.
Let’s think about this little chart again. Is this the best way to illustrate the decline in the birthright from 1950 to 2010? Maybe or maybe we do something similar where we say you know in 1950 everyone was having three kids where as now they are having one. Again, that takes some time in Photoshop. For me, about fifteen minutes, but then I have been using Photoshop for ten years. This is one of those more advanced techniques. It depends on the skill level of the person you are working with.
I might choose a simpler image especially if I had some sort of qualitative data. Maybe, I have a survey that says we have talked to women to find out why they are not having more children and more of them are saying that they feel pressured to focus on their careers before they have kids. Then they might have trouble conceiving later, or they might feel that they don’t have time to have more than one baby. We have women who are becoming new mothers at an older age and just have one child. That look on her face might make you kind of feel awwwww. Maybe she wanted more? One simple evocative photo might do the trick rather than having to deal with these more complex Photoshop transitions.
It really comes down to what is essential. Don’t put anything on the screen that is not essential.
I have this wonderful story from Presentation Zen. It is called “The Fish Story,” and this is a letter that they author got from one of his readers.
“When you talked about reducing the text on the slides. I was reminded about a story from my childhood in India. If I remember right, it goes like this. When BJ opened his store he put up a sign that said, ‘We sell fresh fish here.’ His father stopped by and said that the word ‘we’ suggested an emphasis on the seller rather than the customer and is not needed. And so, the sign was changed to fresh fish sold here. His brother came by and suggested that the word ‘here’ could be done away with and was superfluous. BJ agreed and changes the sign to “fresh fish sold.” Next his sister came along and said the sign should just say “fresh fish” clearly it is being sold. What else would you be doing with a building full of fish? Then His neighbor stopped by to congratulated him and mentioned that all the passers by could easily tell that the fish was really fresh and mentioning the word fresh actually made it sound defensive as though there was room for some doubt about the freshness. And so, he changed the sign to just say ‘fish.’ As he was walking back to the shop after a break, he noticed that one could really identify the fish from its smell very far away and at a distance, one could barely read the sign and he knew there was no need for the word fish.”
I love the fish story.
It is all about taking things away until there is nothing left that you can take away. That is art. That is graphic design. It applies to everything: slides, the web, posters, research posters, billboards. It is all the same thing. You are trying to hold on to people’s attention while they are busy doing other things. Don’t let the software dictate your choices. You are the master. You are the one with the opposable thumbs. You can do this. Take away all the stuff that it throws you. Don’t start with its little templates. Do what you need to do and nothing more.
Are their any questions? Do we want to talk about visuals?
No, I don’t just go to Google and searching in Google image’s search because that stuff is copyrighted. It is not mine. The stock photo sites have their license terms explicitly laid out and say these are things that you can do with our photos and these are things that you can’t. On istock photo, unless it is one of the free photos of the day you are going to have to pay a little bit of money for those. I didn’t use an istock photo for this one, but it is a great site. They are pretty cheap. I think it runs about a dollar a photo for some of the lower resolution ones, and if you want to use the higher resolution for print purposes you can buy a more expensive version of the photo. The licensing terms will lay out what you are allowed to do with it and what you cannot.
Flickr has a creative commons search. So that instead of searching all of Flickr you can search just the photos that have a creative commons license. They tend to be more permissive. They have said you are free to use the photos as long as you attribute the source. I have down here a creative commons logo which is the very very bottom and then the source where I found the photo. Just the url of that photo. I have that on everything that I got from Flickr. If I have something in here that does not have something on it, it most likely came from stock exchange which is one of the other slides on there That is a free photo site that says you can use these free and clear.
Obviously Black on white is pretty good. White on black is pretty good. Dark blues with whites work pretty well. And then you get down to reds and greens especially for people that are red green colorblind that becomes gray and so It becomes kind of muddy. I stick with the very dark colors. Red does not work well with most projectors. That is a problem for a school like A&M that has a reddish color as one of its primary colors. Maroon really does not come across well on most projectors, and so I try to avoid it and maybe use it as the text color rather than the background where it doesn’t matter so much if it shades brown or red. Blues and greens work better on most screens. With yellows and reds, it depends a lot on the software and how expensive the projector was.
You know different monitors project things in different ways. And so one of the issues that we saw was that we had matched our color using the eye-dropper so that the text color the background color matched something in a photo. The photo stayed the same but the text rendered very differently when we moved it to different computers. And so it didn’t match anymore.
One of the most powerful presentations I have ever seen at a text conference was a guy who had a lot of statistics to talk about and it was not boring at all because he had a story about each one. He would throw up a large number taking up the entire slide almost. Just white numbers on a black background and so the bottom would say something like this. It would be a number like 73%. You would look down, and it would say, “Percent of students whose first contact with the university was the application.” Like they had never read a brochure, they never looked at the website. They applied. We were like whoa.
He had a lot of statistics like that. He had done a lot of research on high school students moving into college. He had numbers that shocked us and so he made the numbers huge. Then he did the explanation and talked about what that meant in terms of university marketing, how we needed to design our websites for this audience we were talking about, and how these numbers were changing over a very short couple of years. He had things like cell phone use. Even though it sounds dull to have white numbers on a big black screen. It was the most engaging presentation we say the entire weekend and the guy won the best of award for the conference.
I will say all of these principles also apply to web design, poster design, and all that fun stuff. If you are talking about presenting in different ways other than just speaking same principles apply.
Thank you very much.