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.
We seem to live in a world of rectangles. Paper is rectangular, our computer screens are rectangular, our mobile devices are rectangular, photographs are rectangular. What happens with all these rectangles is we begin designing rectangles. The problem being that rectangles by themselves are not very good communicators. So we'll get better designs if we think literally outside the box.
Here's an example of a typical situation. We'll start with a rectangular field and put a rectangular photo on it. It looks benign enough, but when you put a rectangle on top of a rectangle you actually are creating more rectangles. Your mind probably filters these out, but your eyes see them and need to process them. We'll add a headline and in this case it's in all caps which also is rectangular. I will add a block of type, justified on both margins.
It, too, is a rectangle and finish with two more photos both of which are rectangular. What happens when we do this is that we're not really designing the story now. We're designing rectangles and arranging them, moving them around the page and so on to get rectangles to look good with one another. A better solution is to just completely ignore the rectangles. Let's take the eagle out of his box, lead him to the right and to the bottom edge of this, add at our headline back in, in this case very large in upper and lower case which is quite non-rectangular. Add our map back in but out of its box.
Then finally add the type and we have a far more handsome design. We're designing the elements now. We're designing the photos. We're designing the map. We're designing the text rather than designing rectangles. Great solution. Think out of the box. This kind of an interesting example. Angela Versari is a designer.
She is an Italian living and working in South Africa and she designed a business card for herself and sent it to me for a critique. Readers will typically do this when they're not entirely happy with their design. Angela sent along some commentary, though, that was very useful. She said she loves Times Roman and she loves red and black and she wanted a card that was not girly.
She actually has a great combination of things going on here, which you'll will see in a minute, but her card consists of her A-V initials, one in black, one in white on a red rectangular field, her name in a swashy calligraphic typeface centered near the upper left side of the card, and her contact information in a single line along the bottom.
I asked her, I said, "Angela, what's with the squiggle?" Well, the rigidity is coming from the rectangles. You have a rectangular red logo on a rectangular card with a rectangular line of type along the bottom, and it leaves kind of funny rectangular white spaces in the middle of the card. All of that begins with her initials that she put in the box.
Look closely at this and you'll see a Times Roman A in front in white. Behind it is a Times Roman V. It's actually Times Roman bold, which is not nearly as attractive a typeface as Times Roman, but it's larger and in the back you have Versari along the bottom all in upper case Times Roman with a shadow on it. So you have the A with both its serifs.
Basically, the A has--or should have its feet on the ground. It's sitting in a stance with these two legs. But it's floating. You have a light source coming from usual area, the bottom. The light normally comes from the top. But the real problem here is when you take all this and stick it inside a box, you begin immediately to create other shapes, because the letters now will begin interacting with that box.
In this case the letters are triangular, so it creates a lot more triangles. All of these things are non-communicating elements. The rectangle of the box, the triangles that are happening inside the box have really nothing to do with your initials. In this case the solution is very simple and that's just take everything out of the box, we'll start with the letter V.
Make it in red. This is Times Roman. Make a copy of this, turn it upside-down for the A. Now we've colored the A black, because it's the stronger of the two letters. It's planted on the ground. It's in the dominant position. So it gets the dominant color. Because we don't want the A, though, to dominate the V, we'll split it, and I've separated these just so you can see what's going on and send one of those legs to the back.
Suddenly, we have a very attractive image. It's red and black, very strong colors in Times Roman. There's no bold here. There's no shadows. There's no box. It looks very much like a Roman numeral which is appropriate, certainly in this case. We'll add her name and we have a great result, very simply using all of her original elements.
But it comes from getting things unblocked or unboxed. Now to make her business card, we'll just-- we'll center this on one side of the card, add her name to the left, her last name to the right in corresponding color. we'll put her contact information on the back. The design is the same. We have her name in upper case type, Angela in black, Versari in red.
Everything centered, same theme as the front. Crystal-clear design. You might be tempted to make the back of the card also red. That would be a little overwhelming. It's easier to read the black and the red when they're against white. So we're using this because the type is so small. But now we have a very, very handsome result. This logo looks great on a T-shirt.
It looks great on a shopping bag, just a very, very simple, very handsome, very focused design, and it all started with getting it unblocked. Another simple example that you can use all the time is with cropping your photos. Photos come out of the camera rectangular, but you know in this case the dog doesn't really live in a rectangle.
The solution here is a simple one and that's just to crop a piece of the rectangular background away. Let his ear poke up outside the frame. That's all it takes to sort of free him, free the dog, give a sense that he's in real life, rather than in a box. A more dramatic example is going to be with this jet aircraft. We crop half of the background.
In this case which is the sky, crop half of it away. We can have the jet flying into its background. It can fly out of its background. Add a small block of text in the upper left corner. It's a really handsome result. Now this is a result, this is not subtle. I mean, the reader is going to notice this cropping, but that's kind of what's cool about it in this case. So, great design by unblocking your design. Another example, this you'll encounter a lot.
This is where you have a brochure panel and a block of type to go on it and what happens because that type is justified and probably even it wasn't justified, you get kind of a rectangle inside a rectangle. An easy way to mitigate that effect is to just add line leading, or line spacing. There's still a rectangle there, but because there's so much airspace in there you don't have the sense that there's just a little block sitting on the page inside another block.
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.