From Blah to Aha! Canvas Headers with Impact


Speaker: Welcome, everyone. Thanks for coming.
I know we’re up on the hill in the back room, and second to last session. I’m happy to see
so many faces. Like Ryan said, I work at the Art Institute of the School of Chicago. To
give you a little background, the School of the Art Institute of Chicago is 150 year old
institution. We’re partnered with the Museum, the Art Institute of Chicago, which got a
really nice accolade recently. We just gave Kanye West an honorary doctorate. Always on
the tab of controversy. This is what we missed this morning, the Chicago Blackhawks won the
Stanley Cup. Yes, if you’re hockey fans. The picture on the right is from our office.
You can see how many people are there. This is the end of the parade route. This is not
nearly as many people as showed up. I think I’m happy to miss it, I’m not sure. I’m excited
to be here today. Today we’re going to talk about design. How you can create design for
your CANVAS courses. When we think about design we could think about imagery or headers for
your CANVAS courses, supplementary graphics to introduce your modules. This is an intro
to design for non-designers. It’s a very different, supplementary, CANVAS
course. It’s great because you can use this information for CANVAS, but you can also use
it to design headers for newsletters or emails, something like that. These principles can
be applied to multiple ares. I want you to ask yourself a question. Why is design so
hard, and what are some of the pitfalls that I’ve fallen into when I’m trying to create
something for my course. Two big things that come to mind are the programs to use. A lot
of programs are really expensive, then you have to know how to use them. That’s really a big stopping point for some
people. When we think about design, you can try to create something, and you’re like,
mine doesn’t look as good as something a professional would do. It’s because we don’t know why things
look good or how to put them together, so we’re going to talk about that, today. I’m
gonna help you through that. We’ve had a lot of great sessions about course templates.
A lot of what I’m going to talk to you today can go hand-in-hand with what some of you
may have experienced in those sessions, which is great. We may also think, how can design
impact my course. Here we have a regular course that has the
necessary contents for a student to get along, but it lacks oomph. With images, it can be
completely transformed. The information is the same, the content hasn’t changed, but
it’s perceived much differently. This is a screenshot from one of the courses that was
in a CANVAS template. It’s part of the community, which is great. We also have another one,
this is a nice header. This is borrowed from the CANVAS community. Here’s another one,
it’s neat to see how you can take a course and build additional modules to make it a
whole experience. Here’s the overall course, we have module graphics, and even graphics
to call your attention to certain items. A student can see those cues and know, this
is the next quiz item, or something I should pay attention to. This is also helpful for
those of you in the K12 sphere. You may have students that don’t know how to read. Why
not put some graphics in there to break up all of that text. It’s nice because if you
continue that branding throughout your course, on your course pages or in your quizzes, it
helps make this cohesive look. Let’s dive into why this works. When you go to art school,
you learn about the elements and principles of design. You can look at this as if you’re
looking at a recipe. The elements are the ingredients that you use, the principles are
how you use those ingredients. You beat the eggs, you sift your flour. Today
these are the main ones, we’re going to focus on these. I’ve added two additional ones that
are important for today, imagery and font, or typography. We’re going to dive in with
our first element, I’m going to start with imagery. When you think about imagery, it’s
important to keep it consistent. Quality and consistency is key. A couple tips with imagery,
it’s always easier to make a large image smaller, than to make a small image larger. This may
go without knowing, but the last thing you want is a pixelated image for your courses.
If you begin with larger images, you could always scale them down and it’s still gonna
look good. You’re not going to get minecraft-looking pixelated courses. A quick way to do this is if you’re in google,
for example, if you use the search tools. You can click, can you see my mouse tools,
okay good. You could click on the images and search tools, and right here you can sort
by size. You can pick the large ones to sift that out, which is nice. When you look at
and hover an image, you’re going to see what the size of the image is, here in pixels.
To give you a perspective, when you’re working with a CANVAS course, you’re working with
780 pixels wide. That’s the maximum usable space. You’re looking at this image, you can
see it’s plenty large. You could scale it down, but if you’re looking at an image that’s
500 wide and you want to stretch it, it’s not as good. Another thing to think about is which images
you choose and how they look as a whole, or cohesively. Choose images from the same image
family, or apply the same effect to different images to make them feel cohesive. Here we
have a photograph, a black-and-white illustration, and a vector logo. A vector graphic. They’re
all different, they don’t come from the same family. Family meaning, if I’m using an image,
it’s all images and maybe they all use the same type of lighting. Or If I’m gonna choose
an illustration, they’re all the same type of illustration. Whether it be black-and-white or cartoony
type images. You want to choose things that look similar or cohesive. If you don’t, you
can always put an effect onto these to make them feel more uniform. Right here I’ve applied
this effect. I’ve used the same elements, I’ve added a shape and made them all black-and-white.
It makes them feel cohesive. When you’re looking at imagery, Googling things, trying to find
images for your courses, you’re going to see a lot of file extensions. I’m not going to
get into all of the information. This presentation I’ve turned into a pdf that you can click
on to get these live links, which is great. You can look at that later, I’m going to put
it in the CANVAS community. Know that the main things you’re going to look for are jpeg’s
and png’s. You’re going to use those for 95% of the images you use. If you find an eps,
that’s great too, but that’s usually a vector file. Vector files are great because you can
scale them and they’re based off of mathematical things. They’re not gonna get pixelated, whereas
if you use a jpeg or png, and try to make it larger, it will. It only comes in a certain
size, you can make it smaller, but you can’t make it larger. If you wanna learn more about
the differences between file types and what vector versus raster images are, I’ve included
a great article for you. We don’t have time to get into that, today. Other resources, we have four great image
resources. I’m sorry this font is messed up, I really apologize. The first is [phonetic]flickr.
Flickr is great because users upload images that are usually high quality. When you download
it, you have to make sure the user gave you permission to download. It’s always best to
site which images you’re pulling your content from. FFCU is free for commercial use dot
net. Like I said, when I have the pdf, everything is linked. You don’t have to worry about remembering
that. With the media commons, and [phonetic]morgfile. Morgfile is great because it’s a repository
for free image sites. You can put in panda, and it’ll bring up all
of these places where you can find free images of pandas. That’s wrapping up imagery. We’re
now going to go to color. Big theme to think about with color is pick a scheme and stick
with it. If you’re a beginner, the easiest way to do that is pick one or two colors plus
black and white. Then you create this nice clean design that’s not overly-complicated
for you. Another option is to use variations of color to promote harmony. Here’s a nice
website. They started with this Kermit green, they added white to make a tint, and black
to make a shade. They used all of those colors on the bottom to create one cohesive design. That’s kind of nice, but you may ask great,
I picked this color I like, but how do I go about finding tints, shades, et cetera. There’s
a really great tool. I’m going to switch over here. It’s called colorhex. Colorhex is great
for people that do web development. Web development uses CSS and HTML which relies on hex codes.
Hex codes or hexadecimal codes, are these six-digit codes that categorize your color.
It’s important because we’re going to be using these end-designs for CANVAS for viewability
on the web. It’s important to know about hex codes, and how to find them. Here’s this green Kermit color. What’s nice
is I can scroll down on colorhex.com . I can find the shades, I can find the tints. I can
even find some cool color schemes that use that color. If I go to the top, you can also
see user pallettes, people upload cool color combinations. You can go to color names, and
this is nice you can scroll and it’s a whole bunch of colors. You can pick one. If I clicked
on this, then we have the same information. Colorhex, really great resource for you. Especially
when you’re designing for web viewing. Another thing to think about is what the current trend
is. As we saw in our talk this morning, we know
that flat, colorful design is in. We have the CANVAS cards now, we see that flat colorful
design is happening a lot in the Microsoft OS. Here’s a website for a speaker. What I
mean by flat, you’ll notice there’s no gradient, a change from one color to another. There
are no shadows, there are no interesting effects. It’s just color in a blocked pattern. You’ll
notice geometry or alignment is usually popular for this type of style. The next thing to
think about is once you have a color scheme that you’ve chosen, stick with it, follow
through. Here’s CANVAS’s website. I want to show you
that you see they’ve picked a color and they’ve carried that theme through multiple pages,
which is great. A couple of resources for color. In the middle we have colorhex, which
I talked to you about earlier. We have Adobe Cooler, which I’ll show you more later. Adobe
Cooler allows you to upload an image. Say you found a website and you love the colors
that are used. You can take a screenshot, upload it into Adobe Cooler, which is online.
It does a quick analysis of what colors are in the composition, and it gives you the hexcodes
for it. It’s a neat tool you can use elsewhere. The
last thing you can do, let’s say you’re in a Microsoft product, like Powerpoint. When
you choose this fill color option, and you click more colors, you can choose this magnifying
glass, then dot something on your page and it’ll get that color for you. That’s really
neat. That’s it with color, the next thing I want to talk to you about is fonts, or typography.
Again, keep it simple with fonts. Fonts can be really overwhelming. A lot of options out
there. I want to give you an introduction to font families. Font families are different
categories of fonts. You have serif and sans serif. Serifs are
the little feet. This is not a serif font. I apologize, something got switched. A serif
font is like times new roman. It has little feet over there, where a sans serif does not.
You have script fonts and decorative fonts. These are interesting because each font can
convey something different. I’ll tell you about that later. Something that’s interesting
looking at fonts, the space between fonts. The tracking, letting, and [phonetic]kerning.
A lot of these, even in Word, you have the power to change all of these measurements. Tracking is the space between the beginning
and the end of the word, you can change that. That’s nice if you do a nice header for your
class, you can spread out the bottom sub-header so it matches the width of your other one.
Letting is the space between lines. Kerning is the space between individual characters.
It’s important to know about these, because you have the power to change them with most
of the tools you already have. Avoid word art and stay away from default fonts. Think
about google. Google has a serif font, and they’re using a flat colorful design here. What kind of feeling would it have if you
applied all these effects to it. Fades, drop shadows. It would be very different. My advice
is to stay away, it’s better to be clean and clear, especially with modern trends. The
other thing I want you to think about is, limit your choices to one or two fonts. Again
it got messed up, I’m so sorry. The headers should be attention-grabbing. If you use a
sub-header, make it more simple. You can change the color, the treatment, if it’s italicized
or all-caps, for example. You may think, I’m not doing a whole webpage, I’m just doing
a banner. This can still apply. Your body text, that’s gonna be a bit different, because
CANVAS controls that. CANVAS controls what body font is used. You just have to worry about your header and
sub-header, especially if you’re designing graphics. Think about your overall message.
Here we have two very different messages, they use the same font. They just changed
the width of the font. This is interesting, cause thinking about your overall message,
each of those font families has a different feeling. For example, if we look here, stability
and strong look very similar. They’re both san serif fonts, but by changing the case.
Making one all upper-case and spreading one out, it has a different feel than the partner.
Some font resources for you. This first one is called whatthefont, and it’s a really cool
resource. If you find a font you really like, you can
take a screenshot, upload it to this webpage, and it’ll do an analysis and try to find a
match for it. Usually it gives you links on where to find the font. Sometimes the fonts
are free, sometimes they’re not. Google fonts, this is great for web development. The bottom
three are great if you’re going to download fonts. They’re usually free for you, and then
use them in another program. Be it whatever you want on your computer. Now that we’ve
talked about those elements, imagery, font, color. We’re gonna talk about how to apply
them to make a really good, cohesive design. The first thing to think about is space. It’s
important to give those elements space. Respect the space of those elements. We have this
nice header on the top that has your navigation. We have the nice call to action title that
you see right here. We have all these elements that can get busy, but they’re unified because
of the color scheme and their spacing. You notice there’s plenty of room in between.
Here’s another one, these are two more headers. You can notice it’s not overwhelming. You
look in one area, your eye drifts in another area, then it’s not bad. I know you’re not
going to be building an entire website. It’s nice to know about these principals and see
how they’re used in different ways. You can do that for your own graphics. Here are two more, again it’s just spread
out, not overwhelming. Your eye travels around the image, that’s the main goal. Respect your
backgrounds, the idea of white space, which doesn’t necessarily have to be white. It can
be an image, anything. Apple’s really good at that, they want the background to be nothing,
so you can look at the product, which is great. Pick a focal point, here’s a website, it shifts
your attention towards the car. Why, because it’s brighter than everything else, it’s a
different color, it’s larger. It’s using different elements to trick you to look there. Here’s another company that wants you to know
what they do. They did that by outlining their process with a nice bright color. Another
thing to think about is the rule of thirds, a lot of photographers use this. The rule
of thirds says that when you have a composition you can break it into nine equal parts. Wherever
there’s an intersection, that’s where the eye should go. We’ll notice that most users
look at this top-left one first. That’s because of our reading styles, we start with the top-left
and move down. When you pick an image or do your design, think about how you’re aligning
the elements in your image. Here’s another one, center-dominance. This
is great for long images. This is great for your headers. Again, the middle portion is
most important. You can see that here, the nice rock formation is aligned with the leftmost
bar, and the horizon, the busiest part of the image, is in that middle portion. You
can see this again, here’s the little header that I put into the CANVAS community page.
If I overlay the rule of thirds, you can see how it formed my placement. You may be saying
great, I have some elements, these resources, I know how to lay things out, how do I start. The best thing to do is find inspiration.
Keep your eyes out there. See what you like, copy it artfully. I have some great resources
here. There’s a wonderful book called Steal Like an Artist, which I recommend you reading.
[phonetic]Connie Malomet is an instructional designer that has a great blog. She has a
wonderful post, 21 ways to get visual ideas. There’s links to many different resources
there. AIGA, which is the American Institute of Graphic Arts, they have a wonderful design
archive. Their organization goes back to 1914, so they have a lot of material there, you
can see really good resources. Design for posters or advertisements, record
covers, everything, which is really nice. Let me show you how to practice this. I found
this website I really liked, it’s for the hunger games. I’m like, you know what, I’m
going to make this into a CANVAS header for my fake course. I put my image into Adobe
Cooler, this is what the interface looks like. You upload it, then you can see all the points
that it picks. Right here at the bottom, these are the hex codes, those will come into play
later. What I came up with was this. If we look at them side-by-side, you can see how
they’re influenced. I was definitely influenced by this. It’s very different, I can customize
it. You can say, how am I supposed to recreate that. If you look, it’s only three simple things.
You have a background image, a nice shape, your text on top. When you start to think
about dissecting complicated designs into simple elements like this, it’s do-able. Nice
transition there, OK. How does this look in your CANVAS course, you can put it in here
as your main header, take it a step further and put it into an adaptive table. I’ll show
you how that could come into play later. It’s better for flat design, not for image design.
You could also create cool graphics, you could outline your modules this way. Breaking up
so it’s not so text-heavy. Talk a little bit about adaptive headers, let’s say I have a
[phonetic]botany class, it’s a flat design. What’s nice is if you put it in one of those
frames, it can grow with the screen that you’re viewing it on. I have to remember, sometimes,
that I’m designing on a large Macbook, and people that have a small Air, it may not work
as well. To do that it’s very simple, you put a one by one table. Under the properties
you can make it the width 100%, so it grows as the student enlarges it, then you enter
your hex code under the advanced properties as the background color. I wanna pay special
attention to the resources we have under the CANVAS community. There are three great posts
about headers and how to make really nice home pages. It’s really good to look at that. The pdf
that I will share with you later has all of these linked, so you don’t have to worry about
it. You may wonder, how did I create that header, the hunger games one. I used [phonetic]canva.
Canva is another free resource, you can use it online. It’s really cool, I’ll show you.
Canva is kind of neat because you have different text things you can play with, right over
here. You could drag-and-drop, then you can change the color, if you want you can put
your hex code in, now that you know how to find them. You can edit this. What’s neat
is they have a bunch of Google fonts that you can pick from. This is a fun tool, it’s very easy. They have
preset sizes, you can also put in custom sizes. That’s wonderful, it’s great for individual,
supplementary graphics for your course. I think that’s it, I want to turn it to you.
What kinds of questions do you have. Yes. Female Participant: How do you translate this
to mobile. What is the translation between students who are looking at these on desktops
versus designing for mobile. Speaker: Good question. I feel like the best
thing to do for mobile is make sure you’re not playing with the width. That’s what’s
most affected when you’re viewing from mobile. We do not have a large mobile use case, I
would say. We don’t have to worry about it. By choosing, if you’re doing flat headers
for example, that putting it inside one of those tables that expands, it’s better if
you could start small, then work larger. You could also see how it tiles. Do some testing,
if you want you can insert a table. If I have my modules across, like four across, that
may look different than if I make it singular and go down. Female Participant: When you’re creating that
image you just showed in CANVAS. That’s just becoming an image that you’re importing into
CANVAS. Speaker: Exactly. You can download it as a
jpeg or pdf. The jpeg is nice, it’s 72ppi, which I’m not going to get into, but it’s
pixels per square inch. It’s pretty good output for what you need. You’re not going to have
people viewing your designs on HD devices. What other questions. We have one more question. Female Participant: [inaudible][27:00] Speaker: Very good question. She asked, did
I use the modules section in CANVAS, or did I re-link to it on the homepage. That’s what
I did. I made a really nice homepage, then instead of directing students to the linear
modules section in CANVAS, I created fun graphics that I hyperlinked to the proper module. That’s
the thing, these images you can hyperlink them, that’s what makes it fun. Again, it’s
great for K12. Female Participant: [inaudible][27:43] Speaker: Good question. She asked how do you
find the balance between making it snazzy and accessible. With accessibility you have
to think about who your audience is. We work in an art institution, so our faculty get
very creative with what they do. The important thing to think about, especially if you’re
an [phonetic]id or a teacher, is to see what is the mood of my course. How do I wanna portray
that in an image, header, overall branding of my course. With snazziness, I keep it more
simple and clean in my designs. Then it’s no fault, and it’s easier for those that may
have accessibility issues. Female Participant: [inaudible][28:37] to
be able to create the link on it. Speaker: Good question. She asked, I have
an image with little hexagons, were those grouped as one image, or did they individual
ones. I did it individually, because then you could have an individual image linked
to a specific thing. You don’t want it to be a group, because then why are they different.
How are they different. They can look the same, but they should be separate images so
you’re able to point to different areas. Does that answer your question. Female Participant: Either use the table,
or when I put ’em on there I couldn’t line it up like that. The way you had it in different
areas. Speaker: I did this in Powerpoint, with the
hexagons. That was not in CANVAS, just now. When you do that, if you wanna do an offset,
that would be harder. IF you wanna do a honeycomb effect. The best thing to do with that is
to keep it linear. Male Participant: There is a way to create
hot spots in CANVAS, but it’s really technical. My comment was, you could create a really
complex image and make the image itself the whole thing, then create hot spots in CANVAS,
but it’s quite technical to do. There’s a Youtube video. [phonetic]Utesta University
did a tutorial on how to create hotspots in CANVAS if you want. Speaker: Great resource, thank you. A couple
of last things before we wrap up. I want to remind you that I will upload a pdf of this
presentation with links to the CANVAS community course. I also have a link on my website that
you can get bonus content for this presentation. What the bonus content is, is I have this
image, what do I do with it now. It’s basically a checklist to make sure your design passes
some tests. I have a colleague here, Noah, who has my cards. I have some too, so if you
wanna come and ask questions afterwards, or chat, just let me know. Thank you guys.

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *