The Art of Slide Design: a Mozilla Tech Speakers Masterclass by Melinda Seckington. Livestreamed from Mozfest House.
The Art of Slide Design
Presented by Melinda Seckington
TRANSCRIPT STARTS HERE:
Melinda: So, for most of my life I hated giving presentations -- as a kid, as a teenager, as a university student. I was so scared and nervous in front of people that I tried to avoid giving presentations as much as possible. Because whenever I did try to do one I would basically be a bunch of nerves for the entire week before the event and often because of my nerves the presentation would really not turn out that great. I'd speed through all my slides really quickly and what was supposed to be a 30 minute talk would out often end up as a 10 minute talk, which wasn't great. At the time I didn't believe it was something I would ever do well and I really didn't believe it was something I would ever enjoy. So, for me the secret, the magical solution -- came from preparation.
I find that whenever I try to learn something. It becomes much much easier for me if I understand all the different aspects, of all the different building blocks of what I am trying to learn. Presentations, it was about understanding my emotions and how my face reacts and how my body and voice were all affected by nerves. It was about understanding how to tell a compelling story and how to keep the audience engaged. It was discovering how often I needed to practice until I feel completely comfortable with what it is I'm trying to say. And it was about understanding how to use the tools I have in the most effective way. And alongside our voice and our words our slides are basically the most important instruments our presenters tool box. And we should learn to use them as effectively as we can.
And so that is what this talk is about, how to create effective slides, but what does that mean? What makes your slides effective? Let's take a step back and look at why we are presenting in the first place. So, what's the goal of a presentation? And at first glance you might think, well every single presentation is different. Some will be about teaching a new skill or a new bit of knowledge. Some will be to convince people to use a specific product. Some will be to inspire, to motivate to change or do something specific. There are kind of endless goals of what a presentation is for and no 2 presentations will ever be the same. Yet, at the heart of it there is one thing that they all have in common. No matter what the motivation behind the presentation, your number one goal as a presenter is to allow your audience to absorb your information. Whether you are trying to teach, convince, motivate, frighten, sell, inspire - it's your responsibility to make that easier for the audience.
This all ties in to the concept of cognitive load -- the amount of mental activity required to accomplish a goal. With mental activity being perception, memory, problem solving, things like that. And this definition comes from this book, “Universal Principles of Design”, and I'll be referring to it quite a few times in this presentation. It's a great resource book covering 125 design principles and ties it all back to psychology, physiology and research. And in that book we would find this quote about cognitive load: “Design should minimize cognitive load to the greatest degree possible.” When we talk about effective slides we mean slides that help reduce that cognitive load. Slides that help rather than prevent people from consuming your information.
So how do you create effective slides? How do you create slides that are compelling and help your audience? And the answer I think lies in shifting that question to, how do you design effective slides? We can get a better understand of slide design if we look at some proper slide design theory. I want to share 4 principles of slide design hoping that you can all create more compelling slide designs and basically help your audience with absorbing that information you're trying to present to them. One thing to bear in mind here is that I don't really believe that there Is one true way of creating slides. This isn't about getting you all here to create the same type of slides that I do. Rather it's that you all get a basic understanding of design theory and applying that to your own style and your own way of presenting.
So principle number 1, maximize signal, minimize noise. This principle comes from the theory of signal to noise ratio. This a concept that in every type of communication we have there is certain amount of relevant information, the signal, and there's a certain amount of irrelevant information, the noise. With good designs we want to maximize the signal and minimize the noise. Ending up with mainly relevant information rather than irrelevant information. How do we do that in slide design? How do we maximize signal and minimize noise? How do we make sure that information on our slides is mainly relevant than irrelevant. I think there are a couple things we can do to achieve that. First, focus on one purpose per slide. This is about maximizing the signal. The moment the slide has multiple purposes it dilutes that relevant information that you are trying to get across. Rather than having a single slide covering multiple ideas or covering different concepts. Split them out over several slides. This is about making sure your slide is as relevant as possible to what you are saying at that point in time. So again, keep in mind that the goal of effective slides is to allow your audience to consume your information. Understand what the purpose of the slide is for your audience. This also means two things: 1), your slides are not your teleprompter because at that point they have 2 purposes. You're using a slide to get a point across to your audience and you're using your slides as reminders to yourself. If you really need something to help you remember what to say, use your presenter notes for that because that's what they're there for. It doesn't help your audience if you are constantly looking at your slides as a way to remind yourself. Second thing, your slides are not meant as notes or references for people after your talk. They don't have to be understandable as a standalone thing. Your slides are meant for the audience that are there with you. If you want to share something with people afterwards use a format that actually makes sense for that. Like a blog post or a video of the post anything else like that. Make your audience is your number one priority when you are coming up with the slides. Focus on one purpose per slide.
One thing I see happen a lot is using bullet points on one slide to cover multiple ideas on one slide. For instance take this slide: cat facts. If you're going to be talking for a few minutes about the history of house cats and a few minutes about why cats sleep 75% of their lives, and then a few minutes about each of the other points - you're basically diluting the signal of every point you are trying to make. Because while you are talking about the brief history of the house cat, your audience is reading and thinking about all the other stuff that you already have on that slide and they won't necessarily be listening to you. So it's much better to split out those ideas over several slides. Allow your audience to focus on that one thing you are trying to get across. What is the most relevant information for the people at the time. Now, I'm not saying you shouldn't be using bullet points at all, but use them to support the specific purpose of your slide. For instance, in this case the bullet points are used to list a set of names that all belong together. All the information together is what makes it relevant.
Another exception is when you are using it to recap or an overview of all the thing you said earlier. This slide actually has the same exact content as before, but in this scenario, you've covered each of those points already. The purpose here is to show what you've covered before in one single slide. The audience doesn't have to focus as much on each of the several points because none of it is new information. Because they have each been dealt with separately. With purpose, context matters a huge amount. Keep that in mind.
The 2nd thing we want to do is make sure our slides are not distracting. In this case we are trying to minimize noise - iinsuring we do not have any irrelevant information. One example of this is having way too much text on one slide. The moment you have a slide like this people stop listening to you because they are either distracted by trying to read all the stuff that is on there or they get distracted trying to read and listen at the same time. Question to anyone here, did any of you just try to read all the text that was on there rather listen to what I was saying? So rather than allowing your audience to focus on what you are saying by having that much text, you're basically kicking off all these different questions and thoughts that are going through people's heads when they are trying to read that type of text.
Think about what information really matters and just distill it down to the essentials. A variation of this is having too much code on a single slide. I tend to see this quite a lot in technical presentations. Where people just what to show everything that have, but most of the time it doesn't really matter. Most of the time you don't need all of it. Instead, focus on the part actually matters to the audience. What is the thing you are trying to explain. Because basically by trying to force people to read all that stuff you're only creating a situation for people to zone out and not listen to you. Another way slides can be distracting is when there is too much going on with them. This is a very extreme example, but I often feel that people want to use all the space that they can on the slide making things super busy and much much harder to process.
Keep your slides simple and clean, so that they are not visually distracting. This shows exactly same images we saw before, but because they are not overlapping and because there are no text laid over it It's much easier for the audience to process. You're reducing that cognitive load for the audience. To recap, maximize signal by focusing on one purpose per slide and you can minimize noise by reducing distraction on your slide. I only gave a couple examples of how these apply to each of them, but there are a lot of different ways your slides can be distracting or how you can maybe not focus on one purpose.
Principle number 2, make important information stand out. Again, let's go back to some theory - the Von Restorff Effect is a phenomenon where you're more likely to remember things that are noticeably different than things that are common. This is about making things look more unique or distinctive so that it stands out more and that people will remember them. This is basically what the definition of what contrast is. It is the state of being strikingly different from something else in juxtaposition or close association. We want to use contrast in our slides to make things memorable. A good example of using contrast comes from this book by Nancy Duarte, which is all about how to make good presentations. In it she explains contrast by this visualization highlighting how we can use contrast in our slides. In a couple different ways by using color, size, shape and proximity. In each of these examples you are automatically drawn to the element that stands out. I'll only cover 3 of them here and give examples for each of them.
I think shade in a way is a variation of color and proximity, I think isn't as easy to apply as the others. I'll give examples for each of these 3 areas, starting with color. First off, choose a color palette with contrasting colors. In the case of color contrasting doesn't necessarily mean exact opposites. It's more about having colors that work together and yet are different enough from each other that you can see they are noticeably different. I won't go into too much detail here about color theory because there are plenty of websites and books out there that already cover this.
One of them though, is color supply dot com with 3 Ys and I really like this website. It allows you to quickly try out various color combinations and it shows different variations of those colors. It allows you to play with colors that might pop out and appeal to you. It also has links to various resources explaining color theory and stuff like that. If you don't know much about it, it is a good place to start. What I really like though is it also shows you how colors look together in patterns and icons, so you can already get a sense of what type of contrast you might get if you're using those colors in your slides. It goes beyond just showing you the color palette. It actually shows you how things look together.
One way of using color contrast in your slides is to use it within a single slide to highlight the most important phrase or piece of information that you have. […].. You have noticed that most of my own slides have been following this exact pattern. We have a blue background with white text and then a nice piece do yellow text to highlight the key information on that slide. As I mentioned before, the colors don't need to be too opposite of each other. You can use the same color, like green and achieve contrast front the different variations, different shades of green. And besides using contrast within slides you can also look at contrast between slides. If you use keynote this is the light table view. Which basically gives you an overview of all your slides together. And I use it quite a lot to just get a bit of a holistic sense of how my slides look like as a whole.
This is an overview of one of my presentations from last year about lessons we could learn from the Marvel superheroes. And I basically use a red slide at the start of a section to highlight that we were switching to a different superhero. And because all the other slides are white. The red title slides just stands out much much more and it makes people stop and pay attention to it. Second way to use contrast is through shapes. Now traditionally when we think of shapes you think of things like, that example, circles, squares, triangles. Stuff like that. And well they can be used in your slides for contrast they aren't actually the shapes that we rely on the most in our presentations. What we rely on a lot are fonts, which are a form of shapes. One way of achieving contrast is through using different fonts with in your presentations. I tend to use custom fonts a lot because the fonts that are built into our systems are mostly designed for reading paragraphs of text, so they don't work quite as well when you see them on a slide. But also, people are already familiar with them. They don't really stand out that much and it makes it easy for people to kind of, yeah, it's easy for people to overlook them and not appreciate them as much as a font.
Which fonts you end up using though it's quite a personal choice and it will depend on your presentation style and what type of feeling you want your slides to exhibit. If you don't want to spend any money the first place I look is Google fonts. Almost all the fonts here are downloadable for free. The main focus of the collection is in providing the fonts as web fonts, but you can just download them and use them in your slide editors as well. If you're willing to pay for fonts I suggest taking a look at the bundles on these types of websites. Rather than buying a single font, you end up buying a bundle of fonts that kind of go well together. And they often include quite a lot of interesting selection for not that much money. And there will also be examples of how to use them, how to combine them. It's a good way to learn how to use these fonts. Most of these will also have free bundles or free fonts per week or per month, so it is a good place to just start subscribing to stuff and start learning what type of fonts appeal to you and what types of fonts are things you'd like to see more often.
You slowly well, you quickly get a sense of which fonts are the ones you like and might work well on slides. Once you have those multiple fonts you can start playing around with them to create contrast. I'll show a couple of examples, but again, this is by no means the only way you can create contrast. It's more just a way of giving you a sense of what type of things you should be thinking of. In this first example we are using different fonts within the same phrase or the same sentence. The contrast is used to highlight specific words within that phrase.
Second way is using different fonts for different elements in the slide. This is about making it easier for the audience to understand the different purposes of the different elements within that slide. For instance if it was all the same text it would just be much much more confusing for the audience to read and comprehend. It's about reducing that cognitive load again and making things easier for your audience to absorb. In this case, if we go back, one font is the quote and one font is the person that said the quote. The same is true when you are displaying code, if you've got multiple elements on your slide, which have different purposes. Use contrast to show they are different. In this case, we've got our code and we got some comments about what that code actually does. The 3rd way to use contrast is through size. The simplest way of using size is just grabbing a single element and making it bigger. Using it to make a statement about something. Or you can play around and make each part of the sentence a different size.
Again, you'll notice this is a pattern I tend to quite a lot within my own slides. What becomes really interesting though is when you start pairing different fonts with different sizes. It means you can really play around making a slide look quite graphic. And these types of slides will stand out more and make it more compelling to people. In the case, in some of these cases, contrast is both within the slide and outside of the slide making it more memorable in general.
Those are 3 ways that you can use contrast to highlight key information and make it more memorable for your audience. Through color shape and size.
Principle number 3 is show and tell. This principle comes from the Picture Superiority Effect, which states that information recall is better when combining text and images. Rather than relying on purely text alone, we should be using visuals to support what we are saying. People remember things better when they are absorbing both the text and visually.
I want to talk about 4 different ways of adding visuals to your presentations. First photos: Photos are the easiest ways of adding visuals to your slides. Making them more lively and more memorable. The thing with photos and also with GIFs is that they do need to be relevant to what you are saying. You can keep principle number 1 in mind. Maximize signal, minimize noise. The moment that a photo or a GIF isn't relevant or if the connection it too tenuous the photo only becomes noise.
The main place that I still go to to find my photos Flickr. Specifically, for their creative commons search. This means that you can easily search for images with specific licenses making it easier to know if you can use them in the 1st place. Another place I go to is Pexels. They have a huge collection of free to use stock images. Again, while they can be really really pretty, again, the main thing to keep in mind is that they need to be relevant. If they are not, it's better to use an abstract background or a solid color. Don't use photos for the sake of using photos, because if they are not relevant then you are only making it harder for your audience to understand.
I mentioned the design bundles earlier, but again some of these also have a collection of images and they are great resources for that as well. I recently go a collection that had a thousand abstract backgrounds. I am kind of set for life with my backgrounds for slides. The easiest way to use a photo is to use them to completely fill up the screen and then paid it with some text over it. Just to compare you can see that if you use the much smaller image it just doesn't have as much emotional impact. The image this way actually make the slide much more distracting. By using the image as the background image you're driving that point home much much more. And if you use the right image the audience will have a much more visceral reaction making the slide more memorable and easier to remember, which is the entire point of what you are trying to do.
Play around and experiment with different photos and with different fonts because changing can make a slide feel quite different. Keep in mind though that not all photos will work as a kind of background. Even though this is an adorable photo of a cute kitten. You can't really read that text quite easily. If you really want to use that photo, look at using things like masks to turn the photo into a specific shape, or size. It makes the image just stand out slightly more, and it makes it less like you've just plugged the image into your presentation, especially if you have a series of slides with photos on them. Make sure they all just have the same size of images, it makes them look much more coherent.
The next way to add visuals to your slides is icons. The easiest resource for icons is The Noun Project. This website features a ton of royalty-free icons of all different topics, and you're bound to find icons in there that you can use. I had to try, and they even have stuff for like synergy, and other words like that, you'd be surprised how many words they've got icons for. Again, I'm mentioning design bundles, because that's where most of the icons of this presentation come from, so again, I tend to use that a lot. The thing with icons though, is that they work as nice little highlights to cement the text that you're already showing. It's a lot less distracting than photos, but it's enough of a memory cue that it will help people recall information, and make your slides just that little bit more memorable.
The 3rd way of adding visuals is through shapes. In this case with shapes, I mean use the shapes that are built into your editors. You can make lines, triangles, circles, squares, stuff like that, and you can achieve quite a lot when you start combining them to create really interesting visuals for your slides. One example is a really simple pie chart, it just makes the stats stand out a little bit more, but in this case it's not actually that tricky to make. Looking behind the scenes, this is built up from 2 elements. A circle, which is yellow, and a blue square, which is the same color as the background image. It's not even a weird shape that you need to draw, it's just 2 images overlaid on top of each other.
Once you start getting the hang of shapes, you can start constructing much more interesting slides like this, so building diagrams that are much clearer than relying on text alone. For instance this type of graph is much more visceral, and memorable, than just having a simple list of items. It makes it much more graphic, and it makes it much more easy for people to understand what you're trying to do.
Finally, if you combine shapes with fonts, and photos, you can really start making your slides look more unique, and give them more personality. Find and combine these things into something that speaks to you, and kind of represents you as a speaker. The final way to add visuals is animations. Before showing some examples, I need to remind you not to misuse animations. Most presentation editors, they support a lot of different animations, and quite frankly most of them, like the one that you just saw, are super distracting. It kind of looks cool, but is it useful? Not really.
If you use animations, try to make sure that the animation that you're using makes sense for the purpose of the slides. If it is distracting, make sure the benefits of using it outweigh the downsides. One of the most powerful animations within Keynote is magic move. This idea is basically you grab an element like a shape, a font, a photo, in this example it's a small black circle, and then in the next slide you copy that same circle, but change it in some specific way. Put it in a different position, make it bigger, or smaller, whatever, and then Keynote will just automatically figure out what your animation should be. You don't really have to play around with like positioning, and trajectories, or anything like that, Keynote does all the smart stuff for you. All you're doing is having the thing in one state on one slide, and the next state on the other slide. You basically end up with something like this. You can use it to very quickly move things around, and give some movement to them. I mainly like to use animations in places where, by using them you're making it easier for the audience to grasp some idea, or concept.
For instance in timelines--you're using the movement to create this illusion of the timeline, making it easier for your audience to understand. When using animations, think of things that will make it easier for the audience to grasp. Either specific diagrams, or charts that might be easier to understand if you have that animation in them. If it doesn't have the purpose behind it, then don't use the animation.
Those are four ways that you can add visuals to your slides. Using both text, and images, or icons, or anything like that, it means that your audience will be able to grasp your ideas and concepts much, much quicker, and remember them more. The final principle is be consistent, so when we hear consistent, I think some people interpret that as lets make everything look the same. I'll use the same background, and the same font for every single slide, and that's not really what I mean here. In the slide, consistency is defined like this, the usability of a system is improved when similar parts are expressed in similar ways.
When we're talking about consistency in slide design, it's about making sure that those slides that are similar, look, and feel the same. I think slides are similar if they have a similar purpose. A bit of a mouthful, but use consistent designs for slides with the same purpose. This is all about identifying your slide patterns, so what are the types of slides within your presentation, and then trying to make sure that you end up following the same patterns for those slides. I'll use this presentation as an example, because for the past 30 minutes or so you've been exposed to some of these patterns. This presentation had the heading slides, they were bright, and yellow, and I tried to make them stand out.
We then had our design theory slides, a darker blue background, and a different type of font. We had our example slides, which are white with an example in the middle, and then we had all our other slides, which all follow the basic design of blue background, white text, and yellow text to highlight with different variations of it. One thing to note here is that all the images within this always were consistent.
They always followed that same pattern, that same size of, yeah, making that [UNKNOWN]. A handy thing of breaking down your slides in this way, it means that for future presentations, you have much more tangible building blocks to use. As you end up doing more and more presentations, you end up building your own library of patterns that you can reuse, and it becomes easier, and quicker to put your slides together. It also starts making you think about your presentations in terms of these building blocks.
What are the patterns that you're trying to get across to your audience? Identify your slide patterns. What are the types of slides that will be in your presentations? hose are 4 principles of slide design. To recap: Maximize signal, minimize noise, make important information stand out, show and tell, and be consistent. I hope that by applying these, you make it easier for your audience to consume the information that you're presenting, and create more effective, and beautiful presentations.
If you had told me 10 years ago that nowadays I would regularly be giving presentations, and actually enjoying, it I most probably wouldn't have believed you. At the time I assumed that to give a good presentation, I would need to focus a lot on me, making sure that what I say is good, and correct, making sure that I don't make a fool of myself, making sure that I don't er, and um too much. In reality though, the me part of a presentation isn't the most important thing. Good presentations are all about the audience. It's your job as a presenter to make sure that you teach, inspire, and motivate your audience. I'll leave you with this single quote, there's not much point in spinning a yarn if your audience keeps losing the thread. So thanks for listening.
Havi (Speaker 2): Is this mic? Yes, hi, sorry. Let me try it right here. We have a little time, I think for some questions from the audience, you in the audience may not know that there's also a global audience listening to this talk live-streamed in countries all over the world, where there are Mozilla Tech Speakers, and so I have some questions here that have come in from that audience as well. But let me see if we can switch back and forth a bit. If there's anything in the room, all right, I'll be the mic runner. Christos, why don't you start us off?
Christos (Speaker 3): Thank you. Thank you so much for the presentation, I have a quick question about the designs of the slide. You talk a lot about colors, and style guides, and things like that, but when it comes to a template that is handed to you by a company, or by a conference, and you don't have a lot of space to customize, or to work on, what can you do better?
Melinda: I think even in those cases, you can still follow those principles. I think a lot of templates that get handed to us, they're actually created with the opposite in mind, where there can be lots, and lots of information in one slide, and I think you can still distill it down, and make it simpler to understand. So even if there's stuff already on the slide that has to be there, you can make sure at least that the rest of what you're adding doesn't make it more distracting. I think there's still stuff there where yeah, just keep those principles in mind, and do the best that you can with it, but yeah, sometimes there will be cases where we really need to use the stuff that is given to us, and just yeah, try to make the best of of both worlds, does that make sense?
Speaker 2: Deal with it [laughter...] sorry.
Speaker 4: [UNKNOWN] for Melinda. So I know it's not about design, though I could talk about design all day, but you said that when you do your slides, you kind of go through them quite a few times, do you recommend that, because for example I don't practice for example, I kind of just know.
Melinda: I think it depends a lot per person, but I think especially when you're given a time limit, at least having done a rehearsal once, and making sure that you know exactly how long your talk is going to be, I think doing rehearsal is good. I think it also goes back to that idea of you're doing these talks, and these slides for the audience, so I think people owe it to their audience to rehearse, and make sure that they get the best of what your talk could be. I know this for myself at least, that if I just give a talk like that, I tend to ramble, and waffle on too much. So a half hour talk might now turn into like a 45 minute talk, or the other way around, where I'll forget what I want to say, and it'll turn out to be way too short. For me to practice, is to really make sure that I can get it exactly spot on.
Speaker 4: Isn't that, this is what I find interesting, because I see presenting like story telling, and so if you miss something, that's fine, because people get really pushy, when people do rehearsals they kind of go I need to make sure I include this, and include that, and that's why you look at the speaker notes, and they end up kind of regretting that you've just said something, because you have to look back, and you get into this frenzy of I need to try and bring that up again, where if you just kind of go, okay, I'm telling the story of what I need to tell you, then suddenly you're much more relaxed, and you're not kind of like [UNKNOWN] by it all.
Melinda: So I think it depends on personality types, because I think I have the opposite, where if I don't prepare, I won't be relaxed for the actual talk that I give. So the more often I do it, the more relaxed I will actually be, because I can almost go on auto pilot, but yeah, I completely understand that for some people the opposite might be true, and over-preparing might cause them to overthink things. I think part of it is just recognizing what type of presenter you are, and understanding what helps you, and following that pattern, but yeah, again, I don't think there's one true way for everyone, it's more about recognizing what that is for you, and following that for each [UNKNOWN] that you do.
Speaker 5: Yeah, thank you also Melinda, fantastic presentation. My question was more around say you were delivering training, or running a course, how does that cause the slide creation to differ? Because especially you know for example, even an online course, a lot of those now are essentially someone speaking, auditory over a visual presentation, but because there's always course content that absolutely must be delivered, does that then mean that's going to affect the slides in terms of the amount of text, or you won't have content required, or what are your thoughts on that?
Melinda: My thoughts tend to be that if there is additional material, then that should be provided in a different way. Like have a link on the slide that people can look up what that material is, or have a QR code in your slide so you don't necessarily have to have all that information in your slide, but make it readily available for people to have along side what you are presenting, if that really matters. Again, it's about that idea of what are you trying to do at that point of time, and is having it all on one single slide the best way of getting that across to people? I've had a couple of times where I've done workshops where I have the slides that I present, and I'll have the handouts that I give to people, which are two different things, because the handouts are the thing that people want in front of them while they're listening to the other stuff that I'm going over.
Speaker 6: Thank you for this presentation. I have a question about the principles, you listed them in a specific order, is it because the 1st one is more important than the 4th one, or is it just for another reason?
Melinda: I think, I presented them in that order, because I think they build on top of each other, so I think, if we go back to the, wrong way. I think you need to start with the 1st one, because that is, I think the most important one, and also the one which most people nowadays don't tend to do, but then once you understand how to apply that, I think the 2nd part is, well from the information that you have on your slide, and if the information that you have on your slide isn't distracting, well what from that could you make stand out? How do you use contrast within that slide? If you would flip it the other way around, you might have people putting way too much information on this slide, and then highlighting things, and only then to realize, well actually the stuff on here could be condensed.
I put them in this order because I think it's the best way to approach it when you're thinking about slide design. So even if you, let's say you're going to make a new slide deck next week, new talk, and you don't want to try to tackle all of them in one go, start with the first one, because that will have the most effect on your slides. Then for the next one, grab the next principle. So that's the way I kind of structured it.
Havi (Speaker 2): So I have a couple of questions coming in from the etherpad, and both Gabriel in Hungary, and Kalyan in India would like to know if you have any recommended best practices for showing code, or live coding doing demos within a presentation.
Melinda: For the first one, for showing code, I think one of the things I like to do is start out with the most simple bit of code 1st, and then build on top of that. Even if you end up with, so 1 of the things that you can do is like add more and more code each time, but grey out kind of the older code that you're doing. You're only highlighting the new bits of code, so just making sure again, that people aren't overwhelmed by having too much text at the same time on the slide. That's one thing that I like doing.
Then I guess make sure that you have a readable font, so make sure that whatever type of code you want to show looks right on your slide, don't just take a screen grab from your editor, and just plunk it in there, actually take time to kind of use different fonts, and different colors, to have the best, yeah, make it stand out in the way that you want. In regards to live demos, I haven't done live demos with code myself actually. What I have noticed that some people tend to do is record yourself doing, writing some actual code, and then put the video into your presentation, or turn it into a gif. Sometimes there's no reason why you need to be demoing live. So really think about what is the purpose of you doing that, is it just to show that you're an awesome programmer, that you can actually code live on stage, or is it about showing an actual example to people? So yeah. It kind of depends again, what is it that you're trying to teach your audience?
Havi (Speaker 2): Let me take 1 more from the etherpad, and then we'll go back to the room, and start wrapping it up. Gloria in Greece wants to know when it comes to using color contrast, are there any specific palettes that you know of that can work with possible color blindness issues? Tough questions here.
Melinda: So to be honest that's one area that I know, I'm not very good at I think. I'm aware of it, and I should be better at it, I can't quite remember right now, but there are a couple of websites that will help you with understanding color contrast for accessibility reasons, and kind of what is the best way to visualize that. I know there are a couple little browser plugins that you can use, to make sure that the color contrast that you have is readable enough, but yeah, that's definitely always something to keep in mind when you're choosing your palettes, of how that might look.
Havi (Speaker 2): I think we had 1 in the room, so let's go with that 1.
Speaker 7: Thanks Melinda. Actually just one question, I just want to know like, because sometimes we have to put a lot of charts in the slide, do you have any recommendations for better visual display of charts on a slide?
Melinda: For charts, yes. So I'm trying to remember, I've got a post it note on my screen right now, which has a website link to a, there's this one website which has a huge collection of different charts, and graphs that we can use, and explains where what type of information those charts are useful for. So you can really get an idea of what are the different types of graphs that are out there, and is it the best way to show my information? I just can't remember what it's called anymore. I will look that up, and share it with people afterwards.
Havi (Speaker 2): If you pass them along to me [UNKNOWN].
Melinda: Yeah, I will.
Speaker 7: Thank you.
Havi (Speaker 2): I'm going to take one more question from the etherpad, and then we'll call it an evening, though to tell you the truth, we could probably spend another hour talking about questions on the etherpad, but I think some of them have actually been covered in your talk. So folks who are listening to the live stream, go back and watch this, or wait until we've posted a transcript, and scan the transcript, and you'll get some of those answers, and there was a question about, from [UNKNOWN] about using Serif versus nonsarif fonts, and do you have an opinion or a recommendation on that? He says I notice you use , I always use Sanserif for projected slides, any thoughts?
Melinda: So I actually use both I think, if I remember right. Yeah, because my normal, the majority of my slides has one, and then the design theory one, I don't have a preference either way. I think it depends on you as a presenter, which one fits for you. I would suggest avoiding really, really cursive types of fonts, because those tend to be quite tricky to read. Other than that I don't necessarily think, yeah, there's a massive difference between them, I find, I think it's just a style.
Speaker 8: [UNKNOWN] so fonts are mainly for reading large blocks of text, they make it a bit easier on the eyes, where Sanserif is very useful for this is the heading, this is the [UNKNOWN]. So you can imagine books are usually , and then the headlines are Sanserif. So that's a general rule, but I'm not saying that that's [UNKNOWN].
Melinda: Yeah, it's more like I've seen both applied in slides well, it just depends on what you're trying to get across with the slide, and keeping that in mind I guess.
Havi (Speaker 2): So we, like I said, we could go on for a long time, but out of consideration for the speaker, and the folks in the room, thank you so much for coming, I will share the link to, with however this list is created, I will tweet the link to the recording when it becomes transcoded, and available, and thanks a million for coming out and giving this talk today, it's been great.
Melinda: Thanks for inviting me.
Havi: Thank you everyone.
The Art of Slide Design: a Mozilla Tech Speakers Masterclass by Melinda Seckington. Livestreamed from Mozfest House.