eLA Podcast ?? | Ep. 10 | Design for Non-Designers (Part 3/3)

Find more episodes of the eLearning Alchemist Podcast online, on our YouTube Channel, or on your favourite podcast app.

< Episode 9 ... Episode 11-16 >

Enhanced Transcript

Welcome to the eLearning Alchemist Podcast. I am your host Clint Clarkson, and in this episode, we'll continue our discussion on graphic design for eLearning and PowerPoint presentations. Over the last two episodes, we've discussed designing with a grid, as well as backgrounds, fonts and colours. Today, we're going to get into some C.R.A.P. In Robin Williams is fantastic book, the Non-Designers Design Book, he introduces the acronym C.R.A.P., which stands for:

• contrast,
• repetition,
• alignment, and
• proximity. 

Source: https://www.flottmanco.com/4-basic-design-principles-every-business-owner-should-know/

Together these design practices make up the four pillars of great design and they're all really easy to apply. So in other words, good design is crap. You shouldn't have any problem remembering that acronym. Admittedly, these concepts can be difficult to catch through a podcast. When we talk about visual design it's nice to have, well, some visuals. I hope you find this podcast interesting enough to check out the enhanced transcript on LinkedIn, where I'll provide a slew of visual references, including images, GIFs, and screencasts. But, that's enough introduction.

CONTRAST

Let's jump right in with contrast. So what is contrast and why is it important? Contrast is the state of being strikingly different from something else, and it is a powerful design tool. We tend to think about contrast in terms of colour, as in black and white having the greatest amount of contrast, but contrast isn't just about light and dark. Contrast can come in a lot of different forms, such as size, shape, and motion. The fundamental principle of contrast, when it comes to design, is that what is different gets attention.

Imagine a completely black slide.

Now, if suddenly a white dot appears in the corner of that slide, there is immediately tremendous contrast.

That white dots get all the attention. Obviously, that's what you're supposed to be looking at. Even if you look at a different part of the slide, you're likely still to notice that white dot in your periphery.

If then the entire slide becomes filled with white dots, that one original white dot is not nearly as significant anymore.

But what if that dot now turns red, one red dot amidst a bunch of white dots suddenly has a lot more contrast. Now, not as much as the one white dot by itself, but it's still the most noticeable element on the screen because it's the thing that's different. 

Now, let's go back to that screen with just a bunch of white dots. What if one of those dots starts to bounce? Does it immediately command more attention than the rest of the dots? Of course it does. It's bouncing and nothing else. It's different.

What if it isn't bouncing, but it's a square, one square amidst a bunch of round dots is different and will be easily noticed.

Or what if that one dot suddenly gets bigger, maybe five or 10 times the size of the other dots. Of course, it's going to get all of the attention. That's the principle of contrast.

Contrast and Selling Cars

When I was 19, I got a job selling new cars. I quickly discovered that hawking cars wasn't for me, but I did learn a couple of important lessons about contrast. First, our sales managers would always tell us "You need to get the car out of the line." What they meant was we needed to pull the car out of the parking spot when we were showing it.

This, of course, makes it easier for the customer to walk around and see the car. But more importantly, it helps create contrast. A vehicle in a row of identical new vehicles doesn't look like anything special. But, if you can get that car out of the line on its own, it's suddenly more special. Bonus points if you can get it parked near their old car where it's going to look even more exciting. The second lesson was about the test drive. When a customer took a test drive their likelihood of making a purchase jumped from less than 10% to around 50%. What a difference, right? What makes that happen? Well, it's simple contrast makes it happen. No matter which car they drive, even a base model, there's a really good chance the drive is going to be nicer than their old car. The tires are perfect. There's that new car smell. The vehicle is spotless. Everything about the car contrasts with their old vehicle

So, let's flip this around and talk design. How can contrast be used for your presentation or eLearning design? The easiest way to think about contrast is where the learner's attention goes.

The easiest way to think about contrast is where the learner's attention goes.

When a slide first appears on the screen, where are they most likely to look. If there isn't any contrast, they're going to read the slide in a "Z" pattern. They'll start in the top left corner, move across to the right, then pan down back to the bottom left corner, and move across to the right again.

Source: https://theme-fusion.com/the-most-important-page-layouts/

This may be exactly what you want the learner to do. But what if it's not? What if you want them to focus on a diagram at the center of the slide right away. The easiest way to do this is to have only the diagram on the slide. In this way, the diagram has contrast because it's the only thing on screen that's different from the background.

Now, let's say you want the learner to pay attention to a specific part of the diagram. How do we do that? One option is to change the colour of that area. If the entire diagram starts with a single colour...

changing the colour of one part will automatically draw the viewers attention.

This could also be done by increasing the size or adding a subtle animation to part of the diagram. All of these techniques will draw the viewers attention where you want it. 

Contrast vs. Mechanical Devices

You may be wondering why we need to use techniques like these, when we could just add an arrow to the screen pointing where we want to learn look. Sometimes we need to use a mechanical tool like arrows to make it abundantly clear what the viewer is to look at. But the goal of using contrast is to draw the viewers attention and to allow that to happen naturally. If your slide is filled with so much information that the learner doesn't know where to look, you need to think about your overall slide design. A course that requires mechanical control to point out content feels more clunky. While a well designed course allows the learner to stay immersed in the content. 

If your slide is filled with so much information that the learner doesn't know where to look, you need to think about your overall slide design.

More Benefits of Contrast

Contrast, though, can be used for more than just drawing the viewers eye. Sometimes we want to make a particular topic or idea stand out and we can do this with contrast because contrast can also be used to communicate importance. Stop signs and stop lights are red because they stand out and they're crucially important. If there were red signs and red lights all over the road, it would be a lot harder to discern which of them were important. So by choosing a unique treatment for highly important ideas or topics the learner knows those ideas are important because they've been treated differently. This however, is most effective only when the rest of your course is consistent.

If the rest of your design is inconsistent the learn a can't recognize what is different.

If the rest of your design is inconsistent the learn a can't recognize what is different. The last point to make around contrast is that it can be used on a large scale, a slide or even an entire course that's treated differently can stand out from the others. So use contrast to draw the viewers attention, but also use it to emphasize importance.

Use contrast to draw the viewers attention, but also use it to emphasize importance.

We've covered that "C" now let's move on to the "R" repetition. 

REPETITION

New designers often struggle to come up with new designs for each of their slides. Here's the best part about the crap approach: you don't necessarily need to. Repetition creates coherence in your design, so every element of your design should be related to another element in some way. Certain elements of repetition are simple, use a colour palette, use the same font for all headings and keep headings in the same place on every slide. These simple pieces take care of themselves and give your course and immediate sense of coherency.

Repetition creates coherence in your design, so every element of your design should be related to another element in some way.

Other repetitive elements are taken care of by your grid, because when you use a grid, all of your blocks of content will be the same size or related in size, halves, thirds, quarters, etc. These repetitive sizes also create coherency but they're more subtle and won't typically be noticed by your learner, which is fantastic, because these subtle pieces of repetition that make up your design, make it seem professional, even if they can't tell why. 

Repetition & Imagery

Repetition should also occur in imagery. This is probably the biggest mistake that non-designers make when it comes to building presentations and eLearning their photos or graphics are incredibly inconsistent.

Here are some pointers to keep your photos and graphics consistent. 

The style of your photos should be the same:

• If objects like tools are isolated on a white background, keep all the objects isolated on a white background.
• If pictures of people are candid, meaning it looks like the picture was taken without them knowing or they were just doing what they would naturally do, then all pictures should be candid.
• If your photos were taken with a lot of depth of field, meaning that the backgrounds are blurred out, then all of your photos should have this treatment.
• Be careful to watch out for photo filters.

I tend to avoid photos that use filters because it's almost impossible to find all of the photos you need with the same filter applied. Now that certainly doesn't mean that you can't apply a consistent filter to all of the photos that you find. But trying to find photos that all have the same filter and work for your course is incredibly difficult even when using a really large stock site. 

Now let's move on to graphics, the style of your graphics should be the same as well.

• If you use characters in a flat design, which are two dimensional characters with flat colours, think without any shading or details, all of your characters should use the same design. Don't use some characters that are lifelike, and others that look like glorified stick men, it's inconsistent. 
• Icons are another area that often get used incorrectly. If you choose line icons, that is icons that are a drawn outline, make sure all your icons look this way. Conversely, if you use a filled icon, make sure that all of your icons are filled.

The following screen capture from Icons8 - a free online resource for graphics and images - shows a variety of different icon types. Being able to recognize the differences between icons will help you keep your icons consistent.

Source: https://icons8.com/icons#

One way to avoid issues with icons is to use an icon set. There are lots of great and giant icon sets available online for free. I frequently use an icon font called Font Awesome which you can find at FontAwesome.com, it installs as a font, and has hundreds of icons to choose from in the free version. 

Some graphic elements are more subtle, but go a long way and ensuring your course has a coherent feel.

• Are the corners of your containers rounded or not?
• If round, how round are they?
• Do your containers have an outline?
• How thick is the outline?
• What about lines?
• Do you use divider lines?
• How thick are those lines?
• How large are your icons, containers and other graphics, they should be consistent.

Repetition isn't just the same thing in the same place over and over and over again. That's a template. Repetition is using the same elements consistently to create coherency in your design.

Repetition and Shapes

You can also create repetition using a consistent shape. One of my favourite shapes is the hexagon. It's an incredibly versatile shape. You can set icons in a hexagon. Use hexagons in your background. Make the edges of your containers, the angles of a hexagon. And, any number of other options. The point is, repetition isn't just the same thing in the same place over and over and over again. That's a template. Repetition is using the same elements consistently to create coherency in your design. 

Repetition and the User Interface

Repetition should also appear in your user interface. Your next and previous buttons should always be in the same place. Make all of your buttons the same style, so your user knows after the first instance, that those are buttons. An exception to this might occur if you wanted to create contrast on a certain button for some reason, again, when you're consistent, you're contrasting elements are more effective. So, again, it's consistency that allows your contrasting elements to be effective.

Repetition & Creativity

So, repetition is really just using the same elements over and over again, this doesn't mean that you can't be creative. You just need to be creative within the constraints you set for yourself. 

ALIGNMENT

Now, let's talk about alignment. When I watch someone work in PowerPoint or Storyline, it boggles my mind when the user doesn't use the alignment tools. If you're not familiar with the alignment tools, and what each one of them do, go find them right now and learn how they work (or just watch the videos below).

Using Alignment Tools in PPT

Using Alignment Tools in Storyline

This includes using the x/y coordinates using these tools will not only ensure that your on screen objects are aligned, they'll also speed up your workflow. I've gone so far as to set them up as quick access menu items and I'll post a link for you on how to do that in the enhanced transcript.

Edit the Quick Access Menu in PPT

Edit the Quick Access Menu in Articulate Storyline

The rule of thumb around alignment is pretty simple. Make sure that anything on your slides aligns with something else on your slide.

If you're using a grid, of course, this is ridiculously easy to accomplish.

Center-Alignment

There is an alignment technique that you should avoid, however, and that's center aligning everything on screen. This creates a very symmetrical slide. And while there are situations where this may be appropriate, it's rarely the best option and never the only option. Center-alignment looks amateurish. Just look at the next potluck poster at your office. Chances are if it's not the signup sheet, it's going to be centre-aligned. You're not designing a potluck poster, so don't make your course look like one.

To be clear. This doesn't mean that you should never center align any objects. If you have an icon that has a title directly beneath it, and then a text container beneath that, those three objects could be center-aligned to each other, but the paragraph text inside the text container should be left-aligned. Paragraph text that is center-aligned is difficult to read because the reader has to scan for the new starting point for each line. For this reason, you should avoid center-aligned paragraph text in all situations. This isn't a wedding invitation. I mean, unless it is, in which case, shoot me a message and I'll give you my address. 

There are a lot of subtle considerations about alignment that are difficult to cover in a podcast. One technique you can use to check alignment is to go to your favourite websites or just search great websites in 2018. And look at how items are aligned. You'll be amazed at how many lines you could draw horizontally or vertically that the objects on screen "hang on to". And if you draw those lines, you'll likely locate the underlying grid that was used to build the site. Finally, let's talk about the power of proximity.

PROXIMITY

Tony Robbins often says "Proximity is power." When speaking about design, we're talking about something entirely different than Tony Robbins, but proximity is still power. When it comes to proximity there are three basic relationships, near, far, and equal. 

Let's assume you have three icons, set in hexagons aligned to the middle of your slide, how close together are they? If they're equal distance apart, they are either all equally related to each other or have no relationship at all. At least that's the message that you're sending. Is that the story you wants to tell?

Conversely, if you take the icon in the middle, and move it towards the icon on the left, you create two relationships. The first is that the two icons that are close together are related in some way. You've also created a relationship with the icon still on the right-side of the screen by itself. That icon is either not related or less related to the two icons that are on the left. 

Where we most frequently see issues with proximity is with objects that are supposed to be related not being close enough together and or too close to other objects. When we discussed alignment, we use an example of an icon with a heading beneath it, and then a text container beneath that all center-aligned to each other. What if there were four of these on the screen? If the icons are set too far above the title and containers, they could look as if they are in a row on their own, which means they are related to each other more than they are related to the title and text beneath them, and that's not the message that you want to show. 

The fundamental approach to proximity is to put related objects closer together than unrelated objects.

Now, that's pretty straightforward. But in doing this, don't believe that you need to spread related objects apart just to fill up the entire screen. Relationships between objects should be obvious. Don't make the learner work just to figure out what the heck is going on with a slide. It's okay to have white space on your screen. 

Alright folks, let's wrap this up. Here's a rapid fire recap for your pleasure. 

1. Good design is crap. It uses contrast, repetition, alignment, and proximity to communicate effectively with the learner. When you use the crap acronym, you create a course that looks more professional and makes it easier for the learner to follow along with what you want them to see. 
2. Contrast can be used to draw the viewers attention and to emphasize importance. Contrast is a powerful tool that should be used intentionally. 
3. Repetition creates coherency in your design, make sure your colours, fonts, objects, shapes, sizes, placement, and anything else you can think of is consistent.
4. Alignment is largely taken care of by your grid, but the rule of thumb is to make sure that everything on your slide is aligned to something else on your slide.
5. Proximity is power. Make sure that groups that are meant to be together are together. And the objects that aren't meant to be together aren't so close together. 

What do you think? Are your slide designs crap? Or do you have some work to do? Do you find these design recommendations useful? Or is there something missing? Is there something else that needs to be included to help non-designers create slides that look professional? Looking forward to hearing your thoughts, put them in the comments section or email me at [email protected]. That's all for today. Folks, thank you so much for listening. I hope you'll listen again next week.

Take care until then,

CC

Clint Clarkson, CTDP  is just another victim who accidentally stumbled down the rabbit hole of corporate learning and development. He is the Founder & Managing Partner of eLearning Alchemy, a custom eLearning development firm. While he’s known for being upbeat, positive, and enthusiastic, Clint is still easily offended by comic-sans, bullet points, and the excessive use of buzzwords. Connect with Clint on LinkedIn or follow him on Twitter.