Visual Design Principles
Foundational visual design principles for instructional design.-
Visual Hierarchy
01/22/2023 | 03:41Visual Hierarchy
Created: 01/22/2023Timeline
00:00 (Beginning of video)00:01 An important way to make content easy to understand is to make sure that the appearance of the things on the page – all of the visual cues – accurately portray the relationships between the things on the page.
00:10 This is called visual hierarchy.
00:12 A clear visual hierarchy saves us work by preprocessing the page for us, organizing and prioritizing its contents in a way that we can grasp almost instantly.
00:21 There are three big pieces of a strong visual hierarchy.
00:24 First, the more important something is, the more prominent it should be.
00:27 This can be done with size, for example, in the text on the right, you’re probably going to read the text in order of size, starting with the biggest then going down to the subheadings.
00:39 Importance can also be shown by position.
00:40 Generally, the more important things are near the top of the page and set off by more empty space, which is where the title of this postcard advertisement is.
00:50 Importance can also be shown by color and boldness, in the case of font.
00:55 For example, here the most important heading is bold and purple then each subheading is the same purple color but not bolded.
01:05 It’s still a little larger than the body text so you can easily scan the page and get the main ideas.
01:11 Finally, another thing that makes elements more prominent and therefore more important is distinctiveness.
01:15 Does it look different from the surrounding page?
01:18 For example, this webpage has the “Hello, I’m Kym” title done in a very eye-catching style, so it indicates it’s the most important thing on the page.
01:27 The second big trait of a strong visual hierarchy is things that are related logically are related visually.
01:33 You can do this by displaying similar items in the same visual style, like this page which has the same visual style for the different diagram labels.
01:41 Headings are also a good way to show a visual relationship between things that have a logical relationship.
01:47 Importantly, you do not want to let your headings “float.” A floating heading, which you can see in the picture on the top, is one that is equidistant to the preceding text and the text that it’s a heading for.
01:58 When your headings float, it’s hard to really get that visual relationship that we’re going for.
02:04 So instead, you want your headings to be closer to the text that they’re a heading for and farther from the text that they’re not a heading for.
02:12 Which is what you see in the picture on the bottom.
02:15 Another way to show that visual relationship is to put related items in the same area.
02:19 The most obvious example of this is navigation.
02:22 But things like colored or bordered boxes are the same principle, like this example here where related items are grouped into columns.
02:32 The third big piece of visual hierarchy that I’ll talk about is nesting.
02:35 Things should be visually nested to show what’s part of what.
02:39 These are some examples of visual nesting.
02:41 On the left, we have an example from our course.
02:44 The top heading there spans the stuff that’s below so you can clearly see what’s part of what.
02:50 Similarly, the picture on the right has section headers that span their contents so you can see, with the nesting, which pieces belong to which heading.
02:58 Finally, these are some examples of what happens when you don’t have a visual hierarchy.
03:05 On the left here, because everything looks equally important, we’re reduced to the slow process of looking at everything closely and then trying to form our own sense of what’s important and how things are organized.
03:15 It’s a lot more work.
03:17 When a page has a flawed visual hierarchy, for example, like the one on the right, if the biggest text on the page is not the most important thing, like this, where the title tells you nothing about the event they’re advertising for, well then people are most likely not going to bother continuing reading and trying to parse your content.
03:35 They’ll just move on.
03:37 And that’s the end of this video on visual hierarchy.
03:41 (End of video) -
Alignment
01/22/2023 | 02:06Alignment
Created: 01/22/2023Timeline
00:00 (Beginning of video)00:00 Alignment is, in my opinion, one of the biggest distinguishers between a polished design and a sloppy design.
00:06 Just take a look at these examples on the screen.
00:09 The image on the top shows misalignment.
00:11 The second textbox is just a little taller, lower, and further to the right than it should be, and it instantly looks wrong.
00:17 The image on the bottom shows proper alignment.
00:21 It looks right because everything is consistently aligned and spaced.
00:25 Let’s look at some other examples.
00:27 This is a mockup of an informational sign about bridges.
00:31 In the example on the left, no element is aligned with any other element.
00:35 Everything is randomly thrown on the sign.
00:38 The image on the right is rearranged using a centered alignment.
00:42 This would probably be more appropriate for wedding invitations or poetry than for bridges.
00:47 And I’ll say, unless you have a really good reason for center aligning your design (and there are very few good reasons), you should avoid the all-centered look.
00:57 So neither of these designs have very effective alignment.
01:00 Here we go again.
01:01 Same sign mockup.
01:02 We might be happier with full alignment on this sign, as shown on the left.
01:06 This design aligns both the left and right sides with a strong implied line.
01:12 It's more consistent with the solid concept of bridges.
01:16 The design on the right plays with aligning some elements on the right and some on the left, but all perfectly aligned with something else on the page.
01:23 You may not like this design, but you can see the structure.
01:27 It is deliberate; no random placement here.
01:30 And one more experiment, this time playing with the alignment of text.
01:34 Notice how the example on the left has a strong line between the right-aligned text and the picture, while the example on the right shows odd-shaped trapped white space between the left-aligned text and the pictures on the right.
01:46 But it could be easier to read.
01:48 These examples aren't meant to show "right" and "wrong" ways to lay out your designs, but to show you how playing with alignment can give you very different styles.
01:55 That said, if you’re ever in doubt about alignment, just use a simple grid layout.
02:02 Precise alignment makes a huge difference.
02:05 The end.
02:06 (End of video) -
Style
01/22/2023 | 04:08Style
Created: 01/22/2023Timeline
00:00 (Beginning of video)00:00 Let’s talk about style.
00:02 The two big things with style are consistency and feeling.
00:05 First, let’s look at consistency.
00:09 When your design is lacking in consistency, it just looks bad.
00:12 It’s chaotic, it’s distracting, and it makes us want to leave as soon as possible, which isn’t what you want your learners to do.
00:20 This is an example of an inconsistent style on some PowerPoint slides, all from the same slide deck.
00:26 There’s no consistent color, the fonts vary in color, boldness, and family.
00:31 The graphics are a mixture of photos and vectors, or clip art.
00:35 And finally, the only consistent element that’s repeated is, of course the slide background, which isn’t even used consistently because sometimes the line is in different places, and of course, the graphics and text are in different places on virtually every slide.
00:49 It’s not great.
00:52 Now let’s take a look at a more consistent style, again, on some PowerPoint slides.
00:56 This time, there’s a clear color scheme that’s repeated across the slides.
01:00 There are some different fonts, but they’re used consistently, and there aren’t too many, there’s only two different fonts in fact.
01:07 The main graphics that are on the slides are photos so they’re in the same style; it’s not a mix of photos and clip art.
01:13 And finally, there are these repeated circle shapes and icons that show up throughout the slide deck.
01:18 So this is a much more consistent style.
01:20 It’s a lot nicer to look at and easier to follow than the previous slides.
01:24 Here’s another example.
01:26 On the top, we have an inconsistent style.
01:29 Each of these elements may look okay in isolation, but together, they don’t work because there’s just too much going on.
01:36 On the bottom, we have a consistent style.
01:38 All elements share colors, fonts, and a clean, flat design with subtly rounded corners.
01:43 This repetition creates a sense of order and unity.
01:46 A course with repeated elements will look and feel cohesive, while one with new elements on each page will look and feel disorganized and chaotic.
01:54 Next, let’s talk about feeling.
01:57 Imagine… a flyer for a rodeo night.
02:00 You probably have a pretty good picture in your mind of what this looks like.
02:03 There’s going to be some western font, probably some horses, maybe a cowboy boot or spur.
02:09 Brown and earthy colors, right?
02:12 Maybe something like this.
02:13 But what if you saw a flyer that totally defied that style?
02:17 For example, what if it looked like this?
02:21 Same content, but now it’s a modern font paired with a scripty font, pastel-y watercolor colors, center alignment, and flowery imagery.
02:29 It invokes a very different feeling.
02:32 In fact, if you took the textual information out of the equation, and just used lorem ipsum (or placeholder text), and were just looking at the style, you’d probably say the one on the left still looks like a flyer for a rodeo, or at least something western-themed, and the one on the right looks like a wedding invitation.
02:49 Your goal is to have a style for your course and your content that fits with your learners’ expectations.
02:54 You want to set the stage appropriately for what they’re about to learn.
02:57 To do this, tap into your own ideas of what the particular topic or industry “feels like.” Ask yourself, what colors do I associate with this topic?
03:06 What types of fonts come to mind?
03:08 What do the characters look like and what are they wearing?
03:10 What kind of environment makes sense?
03:12 Are there props, scenes, or images that are common?
03:15 And importantly, what would feel most right for the age and background of my learners?
03:20 If you’re having difficulty with this and need some inspiration, you can browse Canva, Dribbble, or Awwwards.
03:26 These are some good websites.
03:27 And I’ll show you what those look like with just doing a search for something basic: “engineering.” This is Canva.
03:33 You can browse lots of templates for different kinds of materials.
03:36 You can see the diversity of styles here with the engineering search.
03:40 This next one is Dribbble.
03:42 “Dribbble” with three “b’s.” Again, I’m just searching for “engineering” and you can see a bunch of different ideas come up.
03:47 You might want to get more specific with your search.
03:50 Finally, here’s Awwwards.
03:52 “Awwwards” with three “w’s,” which is mainly for website design.
03:57 This is another one that might benefit from some more specific search, like just searching within websites.
04:03 As you can see, they’re not all winners, but some ideas to get you started.
04:06 Alright, the end.
04:08 (End of video) -
Color
01/22/2023 | 03:33Color
Created: 01/22/2023Timeline
00:00 (Beginning of video)00:00 This video is about color.
00:02 Like style, color evokes certain feelings.
00:04 So you don’t want to choose a color scheme that conflicts with your topic.
00:09 For example, the wedding rodeo flyer.
00:10 There are other things wrong here of course, but one big one is the pastel colors don’t communicate the correct message.
00:17 First, let’s look at choosing a color palette.
00:20 Of course, if you’re creating something that’s going to be branded, you’ll probably just be using the colors specified by the organization.
00:25 But, if you’re choosing colors, I’ll show you some tools you can use.
00:29 One of my favorite tools is Adobe Color.
00:32 So if you go to color.adobe.com, you’ll see a few different ways to choose colors.
00:37 On the first tab, you have the Color Wheel picker.
00:40 The color in the middle is the base color, so you’d start by choosing a color you think will work well for whatever you’re creating, or just one of your favorite colors.
00:48 I really like orange so that’s what I’ve put here.
00:51 And I’ve selected Split Complementary for the color harmony rule.
00:55 You can experiment with the other options.
00:57 I like split complementary and triad.
01:00 You can also upload a picture and get different colors from the picture, and in different themes, or moods.
01:05 For example, here’s a picture with both colorful and dark color moos.
01:09 This is a great way to create consistency and unity in your course, of course, assuming that the picture you’re choosing colors from is one that’ll be in your course.
01:19 These are a couple other tools for color palettes.
01:22 The first is colorhunt.co, which has some ready-to-go color schemes you can use.
01:28 The second one is coolor.co (all o’s).
01:32 With this one, you can generate a bunch of different color palettes until you come across one you like.
01:36 Alright, now some tips, or just general rules to follow when it comes to color.
01:40 Stick to 3 colors, or under.
01:43 I know a lot of the color palettes will generate more than 3 colors, but keep it to three, at most.
01:48 You can do less, but don’t do more without a good reason.
01:51 You can still vary the shade within each of those three colors if you need more options.
01:55 One easy way to vary color shades is, if you’re in PowerPoint, just change the transparency.
02:00 For example, let’s say you have these two main colors, an orange one and a blue one.
02:05 Going from left to right, I’ve just changed the transparency of each colored box, and you can see I’ve essentially created several different shades.
02:11 And this is not including black and white and the grays in between.
02:14 Shades of gray tend to go with everything.
02:17 Next tip, stick to light backgrounds for long text.
02:21 Dark text on a light background is much easier to read than the inverse, as you can see with the two examples on the right.
02:27 So I wouldn’t have more than a few lines on a dark background.
02:30 Also, dark backgrounds can look a little dated.
02:33 Check your text contrast.
02:34 If the text color and the background color are too similar, it’ll be hard to read.
02:38 Fortunately, there’s very little guesswork involved since you can just use a color contrast checker.
02:43 For example, there’s one on the Adobe color site.
02:46 As you can see, the white text on this teal-colored background has too little contrast for normal body text, but it’d be okay for large text and icons.
02:55 Additionally, it’s tricky to get the requisite contrast on text that’s over an image.
02:59 For example, with this forest picture, since there’s a lot of contrast in the background, when we overlay text on it, it’s pretty hard to read.
03:06 So instead what you can do is add the text inside of a slightly transparent box.
03:10 Then it’ll be much easier to read the text.
03:12 And it can be a dark or light background.
03:16 The trick is that it just has to be a solid color.
03:19 My final tip to you is: say no to neo.
03:22 I know some people are tempted by that bright green and black color scheme, but it rarely looks good.
03:29 So resist the neon urge and find some other colors.
03:33 The end.
03:33 (End of video) -
Typography
01/22/2023 | 04:16Typography
Created: 01/22/2023Timeline
00:00 (Beginning of video)00:00 Let’s talk about typography, or the style of type, font, text, whatever you want to call it.
00:05 First, let’s look at some type terminology that you’ll want to know.
00:09 The first is serif vs. sans serif vs. display fonts.
00:13 Serifed fonts are the ones that have the little line attached to their characters, that’s the serif.
00:19 A standard serif font would be times new roman.
00:22 A sans-serif font is one that doesn’t have the little line.
00:25 A standard sans-serif font would be arial.
00:28 Display fonts are decorative.
00:30 They come in many different styles, like script, blackletter, and just plain fancy.
00:35 Because of their decorative nature, display fonts should be used for just small bits of text, and only where they make sense.
00:42 Now there are some other type families, but these are the basic categories.
00:45 Next, font weight is how thick the characters are.
00:48 When type is light, or thin, it’s less thick, less weighty, then just your normal baseline.
00:54 When type is bold, it’s more thick, or weightier than your normal baseline.
00:59 And when it’s what we call “black,” it’s basically a BOLD bold, or super thick.
01:04 Finally, line height, or as it’s called in print design circles, leading.
01:09 This is the space between lines of text.
01:12 So knowing those terms will help you understand the rest of what I’m about to talk about.
01:16 And that is simple type rules.
01:18 There’s a lot you can do with typography and in fact, some of the most eye-catching designs I’ve seen use type in a way I wouldn’t have even thought of.
01:26 But I’m going to keep it simple.
01:28 First, don’t use more than 2 font families.
01:31 Here’s an example.
01:33 On the left, we the Roboto font family in different weights and then one that’s italicized.
01:39 That’s all one font-family.
01:41 You can tell because it has that root name, Roboto.
01:46 Compared to on the right, these are all sans-serif fonts, but they’re all different.
01:51 So we have roboto, open sans, arial, and poppins.
01:55 That’s four different font families.
01:57 Don’t do this.
01:58 If you choose to have more than one font family, just make sure they’re very clearly different.
02:03 For example, you might pair a serif heading with sans serif body text, like the example on the left.
02:10 You don’t want multiple similar font families, like the two examples on the right, because then it looks a little messy.
02:18 And messy in an unintentional way.
02:21 Which isn’t what you want.
02:22 Next, use all caps sparingly.
02:23 And I call this out specifically because there’s a trend on Canva, and some other build-your-own design sites that have pretty much exclusively all-caps text on them.
02:33 Though they are getting a bit better now.
02:35 But the problem with all caps is mainly readability.
02:38 All caps is harder to read when it goes on for more than one line.
02:41 Additionally, since capital letters take up more space, the font size needs to be smaller to fit where you need it to.
02:47 Smaller font usually means harder to read.
02:49 So just use all caps sparingly.
02:50 Finally, we’ll look at text spacing.
02:52 First, with body, text you generally want a line height between 1.2 and 1.7.
02:57 The exact number mostly depends on the font you choose and how much text there is.
03:01 But you should be able to pretty clearly see this first one on the left has too little line height.
03:08 It looks crunched and scrunched.
03:09 The middle textbox has too much line height.
03:12 It’s too spaced out, which makes it hard to read.
03:15 Finally, the third textbox has line height that’s just right.
03:18 When it comes to headings and text that’s all caps, you want a smaller line height.
03:22 Somewhere between .9 and 1.4.
03:25 Again, the exact number depends on your font choices and it’s a bit of testing and checking.
03:30 Same thing here, the textbox on the far left has line height that’s too small.
03:34 The one in the middle is too big, which looks particularly amateurish when it’s a heading.
03:40 The final textbox has line height that’s just right.
03:42 Finally, with spacing, you want to keep related text together.
03:45 The textbox on the left has some problems.
03:49 Each list item has about the same space above and below it as the line height.
03:53 In other words, it’s hard to tell where each list item starts and ends.
03:57 There’s also a problem with the heading.
03:58 It’s about the same distance from the text it follows and the text that it’s a heading for.
04:03 This is called a floating heading.
04:04 And you want to avoid it.
04:05 Contrast this with the textbox on the right where there’s a bit more space between list items than there is within them.
04:11 And the heading is no longer floating so it’s easier to tell what it’s a heading for.
04:15 The end.
04:16 (End of video)
-
Visual Hierarchy
01/22/2023 | 03:41Visual Hierarchy03:41 > -
Alignment
01/22/2023 | 02:06Alignment02:06 > -
Style
01/22/2023 | 04:08Style04:08 > -
Color
01/22/2023 | 03:33Color03:33 > -
Typography
01/22/2023 | 04:16Typography04:16 >
