Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Appearance may not be everything, but how something looks has a fundamental impact on how it's perceived, what it communicates, and whether it succeeds. In this course, author John McWade of Before & After magazine shares foundational graphic design techniques that will make your page, screen, product, or presentation look and perform its best.
These design essentials can be used by nondesigners as tips, tricks, and shortcuts, and by professionals as building blocks to greater understanding. Each lesson is a short, easy-to-understand how-to that can be applied regardless of the brand of software and hardware you use. This course was created and produced by the Before & After magazine team. We are honored to host this content in our library.
Type is art. Type designers spend a tremendous amount of time and effort to make their lines and shapes beautiful. Well, make artistic creations. We designers can take advantage of that. One way is to not be timid in our use of type, but rather to set it boldly.
Here's an example, you've seen this already, of a massive typeface called Giza in contrast with a smaller serif typeface all set in this rectangle. Very handsome. This design is carried by the typography alone. So, set type boldly. Another example is our CD cover. This is a cool, fun technique where type has been set boldly and has created a pattern, somewhat abstract pattern that nevertheless is easy to read by setting the type in a variety of sizes and coloring it a variety of tones and just running it across the center of the field.
You can use this technique for all kinds of things, create a pattern out of your type by setting it boldly. Monterey Classics Week is cool because of the huge contrast in type styles. Futura-Extra Bold is this massive sans serif typeface contrasted with this very light, airy, flowing script named Sloop. The bold type is in the bold color, the light face type is in the light color, and then the dateline below the bottom is the smallest and spread out so there is mostly air there.
But you see enormous contrasts all on a centerline that give this setting its artistic presence. Another example, this one would be commonly used in a publication on a page where you have two stories and you could do this with three or four even going into the same space. Set some of your type very large on a wide column in normal serif text type.
Then set your other article in a contrasting typeface much smaller bold sans-serif. So you have contrast in type style. You have contrast in type weight. You have contrast in type width, and you have contrast in type size. Easy-to-read presentation, but it begins with setting the large type boldly.
Taking text type that you'd normally set at a normal size and making it very big. Another magazine example. This two-page spread is made entirely of type. Whitespace also plays a key role here. Whitespace that we haven't filled the space with copy, but left plenty of white and that allows us to then move the blocks of type around. But the focal point of this spread obviously is the large initial letter B.
We have smaller headlines off to the left of it and then the blocks of text are set in justified columns in and around it. On the right-hand white page you can see that the two callouts have been set in green and they have been set in a rectangular area. So this whole thing has been constructed like Legos, like building blocks are making a very handsome layout using nothing but type.
You have a look twice to realize there is actually no image on this page, it's just all typography. A favorite technique of mine is to set two words with no space between them and differentiate the words in two ways. One is by an extreme contrast in type weight. In this case, we have four pixels set in Gotham Ultra contrasted to a superlight typeface.
Very, very bold, very lively differentiation makes for a very bold setting. Similarly, here we have names and titles all set in Gotham Ultra with no space between them. The differentiation here is in color. So we leave the four names. These are our four pixels in white on the left and the titles in various shades of color on the right.
Again, the design becomes lively. It's vivid. It's artistic. It's fun and very easy to do. Here is a way to set type that's bold and low key at the same time. This is a technique that you would use for anything kind of classic or classy. And that is to set your words normally.
Here we have the St. Philomene Shelter of Seattle, Washington, with a single image centered on the page. The type is two lines, upper case. Now, just add a lot of letter spacing to those words. That's an effect I think of as panoramic, just spreads the word across the page and gives it a sense of titling, a sense of importance, of grandeur, of authority, all while being very low-key.
Note that the OF SEATTLE, WASHINGTON has been reduced in size and made gray instead of black. So it recedes in importance. This is a simple technique, it's used often. You will see this is often used in the movies. Just set your type panoramically and thereby making a bold presentation. Here we are looking at two pages from an ordinary black-and-white newsletter.
What's a little unusual about these is how dense they are with type. I mean just top to bottom, wall-to-wall solid type. What's a little harder to see is that there are actually six editorial articles here as was too small advertising bits. But because the type is all so much alike, it's almost impossible at a glance to see that. Our makeover has almost as much density of as the before, but in this case you now can see the six articles, because there is more space. We added space in the gutter, between the pages and between all the columns, made the type slightly smaller.
But most importantly made the headlines bold. So here is a close-up look at those heads on the before, the type is all the same. It's the same style. It's pretty much the same size. We have a bold or a semi-bold headline in all caps. We have a byline that's in small caps and justified type, all of which runs together in a gray blur.
The solution to that was to create bold type contrasts. So the new headline is still in bold caps, but now it's bolder. This is ITC Franklin Gothic Heavy, and it's the in high contrast against the byline which is now set in every white face called Horley Old Style. Note the author's name is small, but in upper case and spread out somewhat.
There is some letter spacing added there. The University of Maryland is all obviously in lower case italic. So you have several kinds of contrasts. You have contrast of size, contrasts of style, contrasts of weight and contrast of spacing. Then there's a small underline, a short underline, and the text begins with a three-line drop cap, which really gives your eyes someplace to focus.
Note the first three words coming off of that dropped out are set in small upper case type. These are a little bit bigger than small caps and note, too, that they have been letter spaced, or spread out somewhat. So these bold typographic contrasts are a good solution on what is otherwise a very mundane, very routine project.
Make the stories stand out, give each one some distinction. So set type boldly.
There are currently no FAQs about Before & After: Things Every Designer Should Know.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.