Lessons

Lesson Info

The Vocabulary of Design

We're gonna talk about the vocabulary of design, and by all means, this is not every single word that you will learn in our field, but it's just enough to get you started. Alright, let's start. First we're gonna talk about the vocabulary around typography. The first word you might hear thrown around is "serif." Serif is shorthand for a serif typeface, and basically, serifs is just a fancy word for these little feet on letters. Any of the short lines stemming from an angle from the upper and lower ends of a stroke of a letter. So it's these guys circled in red right here. Another example is what you see on the lower left. And an interesting kind of nerdy fact about serif typefaces is legend had it, the very first example of a serif typeface was what we now refer to as Trajan. And it was in all caps in marble, and people say we had this form because the letters were painted on and then carved in using a chisel. And what's a chisel? It's flat, right? So imagine you put that chisel in and ...

you start hammering it in. This is where people believe the serif came from. So you can impress all your friends when you open up a book and say, "This is a serif typeface." Next is sans-serif, and that just means sans means without. So it means without feet. Simple enough, but it refers to this whole genre of typefaces often referred to as grotesque or modern, so no feet. Next we're gonna talk about baseline. Baseline is just a fancy word for the line upon which most letters sit. So when people are saying, "Where is your baseline?" You could say, "Right here in red." Next is leading, and leading is the space between baselines. And kind of a quick tip is how do you calculate leading? Well, leading is usually 120% of the size of your typeface, so say it's set at 10 point, 10 times 120, or 120% of 10 would be 12 points. So that's usually how you calculate it, but leading can also be used very creatively and expressively. Sometimes you'll make it super tight if you want the text to feel dense, or you'll make it super wide if you want it to feel airy. Next is tracking. Tracking is the uniform spacing between groups of letters. And you see tracking applied to most when the letters are set in all capitals. Because usually letters aren't meant to be set in all capitals. You have the first letter being capital, and then the rest being lowercase. But what happens with all the letters being capital? It can feel really tight, right? And that tightness can affect legibility. That's why you often see words set in all capitals tracked out. In fact, that's considered a good rule of typography. Another quick tip about tracking. Usually the smaller you set all capitals, the more you have to track it, and that's because the smaller it gets, optically, that white space in-between letters start to get tighter and tighter and tighter, right? So you wanna actually track it a little bit more. Whereas when it's set nice and big, like what you see on screen, sometimes you can track it out a little bit less, but optically, the words have the same texture. Next is kerning. Kerning is the spacing between individual letters, and this is where you take you typographic skills to the next level, because any communication designer worth their salt is gonna kern their headlines. So whenever I see my students just, like, track it out, that's a good first step, but it's actually not enough. Especially, say, you're designing the mast head of a new magazine, and that's the title of the magazine, right? And you have a big gap between the A and the V. That is bad. You wanna fix that. And you fix that just by putting your cursor between the letter letters, pressing the ALT key, and the arrows either left or right to bring it in or out. And usually the goal of kerning is to have as even of a texture as possible. And letters are basically just shapes, so any shape that has a diagonal, like an A and a V almost always gets tracked in. It's just an optical tool. But anything that's round, like an O. Sometimes the O is like this. It can actually make it feel really close to the letter and you might kern it out. Next is layout, and most of you already know what this is. But layout refers to the way visual elements are arranged on a page. So here we have the Hilo Tribune from the 1800s as a good example of layout. But one thing to know about layout is it's usually not just done expressively. Usually there's some sort of logic or skeleton used to organize the content. And this skeleton that you see in red is called the grid. And the grid is one of the most important things you'll learn. It's literally how you sub-divide a page to organize content so it makes some sense and has some structure. Next is typographic hierarchy. And that is how you organize type in degrees of importance. And typographic hierarchy is so important because it affects how people read your content. So here we have Hilo Tribune, the name of the newspaper. That is the largest. It's the first thing you see. That is first on the typographic hierarchy list. Then you have the headline. That's second. And then third you have the body copy, which is the copy of the article. That is third. The designer made intentional decisions. He wants you to see it in this order: 1, 2 and 3. It would be terrible if you saw it as 1, 2, 3. That wouldn't make any sense. And so here's an example of why it matters. If there was no typographic hierarchy, it would literally look like what you see on the bottom. Hilo Tribune, this Kilauea. I hope I pronounced that correctly. Crater continues in eruption. Four days of activity. Another outbreak occurs. Honolulu gets appropriations for harbor and lighthouse. This makes no sense. And because hierarchy establishes the order in which you access content. And you actually see typographic hierarchy happening everywhere, and the most common way it happens is through punctuation, right? When you see a period, you know to pause, right? It's the end of one thought, the beginning of a new one. When you see a comma, you take a pause. But typographic hierarchy is established through both where it is on the page, the size of which it's set, right? And also, which typefaces you use. And it's both something that's very rational, but it's also an art. Next we're gonna talk about color. One of my favorite things to talk about. So first we're gonna start with CMYK. This is shorthand for the color model of four-color printing using cyan, magenta, yellow and key. CMYK is also shorthand for the color processing used for print, so people will throw it around like, okay, it's CMYK printing. This will make you sound like you're in the know. If you were to zoom in into the printing of a book, you would see something like what you see on the lower left-hand side. It's basically these four colors printed and stacked on top of each other to create a bunch of other colors. So that's CMYK. And a good way to think about it is that there's two ways to really experience color. One is through something you can touch, right? CMYK, this ink, it's actually pigment-based. But the next is something you can't touch. This brings us to RGB. This is shorthand for an additive model where red, green and blue light are added to create a range of colors. And you know what? This color is not something you can touch. It's made with light. And in some ways, it's the opposite of CMYK, because in CMYK, when you mix cyan, magenta and yellow you get like a dark gray slash black. But when you add red, green and blue on a screen, you actually get white. And so when you kind of zoom into a screen, what you see on the lower left is how colors are mixed, and what's so amazing about CMYK and RGB is that so few colors can create so many other colors. In fact, the human eye can see millions and millions and millions of colors, and while CMYK and RGB is not quite up to that level, we can see an awful lot, but the key takeaway is CMYK is for print. It's color you can touch. RGB is for screen. It's color that comes from light. And this is especially important when you start designing because it affects how you set up your files. If you're designing a book, you wanna set in design in CMYK to get accurate colors. If you're designing a digital product, you want it set in RGB. Next is monochrome, which is a fancy word involving or producing visual images in a single color using varying tones of that single color. So here we have the image. In the lower left-hand side as an example. I think sometimes monochrome is confused with grayscale. Grayscale is gray shades ranging from white to black. A lot of times people see a grayscale image and say, "It's monochrome!" But you know what? That's not actually the most accurate way to talk about grayscale. Grayscale is grayscale. Monochrome refers to varying ranges in a single color, but that color doesn't have to be black. Next we're gonna talk a little about the language that we use in digital work. The first is pixel, which is any of the small discrete elements that together constitute an image. And in general, on screen pixels are square. So if you were to zoom in again and again and again and again, you would get this effect here, right? It's a bunch of squares with tiny bits of information that overall create an image, and this is important because some software is pixel-based and some are not, so you wanna make sure, when you're doing screen-based work, that you have it set so that you're working in pixels. And this also applies to type. When you are working with type and print, you might set your font in .12. You can use points, but say you're setting that exact same type on screen. You don't say it's 12 point. You're gonna describe it in pixels. Next is responsive web design, which is basically design that responds to the user and adapts to the browser that they are using. And this is pretty big, because a long time ago, web design wasn't actually responsive. And you can imagine this is kind of a new challenge for a designers, unlike a book which has set dimensions. Right? It's never gonna get bigger or smaller after you print it. When it comes to responsive web design, taking that same content and moving it to screen, you have to think about how it responds to the user. What happens if a page were horizontally oriented? Or vertically oriented? These are things that you now have to consider.