Learn Great Design - Type, Color, Photos and Layout

1. Class Preview Final: join me for a class that teaches you solid design principles and elevates your understanding. A great design Indie review Typography basics such as font type, spot pairing and layout. What makes a compelling Adlai? What is this process like? Dive into color theory. Earn waste colors. Believe in, Create a social media trap using her newfound knowledge of typography. Color theory, locking in layout design. We'll also go over trends coming to design 2018 typography color, so let's learn together. 2. Typography and Font Basics: typography and design. There are two different types of box styles there. Serif in their San Sarah. Sarah's have these little tails at the end that accentuate the letter or the character Sarah's air helpful when there's a large amount of text that smaller, the smaller Little Saref Zehr accents on the characters helps the reader distinguish the letters much easier. Sands Arabs lack these little accents, and because they lack these little accidents, they make fantastic headlines. And without the accents, it can make these Boulder headlines pop out and remain clean and simple. 1/3 category of bond script fonts and they are everywhere. Script bonds have their own special use and design. They can help add and were natural. Look, they're smooth lines and lack of strict angles, and you have to be careful. He's in script fonts not to use them too much, because it can overwhelm the design piece. So you'll notice here that these two fonts pair very well together as because one is a Sarah font, and the other one is it. Sands Air rarely do to Sarah Fat's pair well together, as in this example, same way with two different types of San Serif fonts. It's really good to mix them and mix your different types as well. It's also a good idea to experiment with your fought mixing. In this case, the script bots works really well to San Sarah, but also looks good with a Serra Fonda's well, so just experiment a little bit. Have fun thought. Weights come in two basic sizes. There's usually lightweights, and there's bold weights. And then some ponds have everything in between, from thin, light, medium bold, a heavy railways, excellent thought that has a wide variety of front weights. Helvetica is another fine example of a haunt that has a wide variety of weights and the more font weight options that you have the the more flexibility you have in your design piece. And that's why I held that, because you so much in design. Gill sans is another example. When you use two different font weights and same font family, you notice they pair very well together and provide a balance to your typography. Spacing makes all the difference. There's default spacing, which is what you're seeing right here, spacing between the characters and if you wide in that spacing, you'll notice the characters in the text take a different look, and that could mean, in this case and elegant with wider spacing between characters. In this example, there's also tight spacing, which has its own use and design. If you want to be loud and bold, it could really get your attention when you reduce the spacing between characters, some bonds do not work well with certain spacing. Take, for instance, lower case lettering. Too much space between lower case lettering can look a little hard to read. The opposite is true for some space. In between all caps, they tend to be much stronger and look a little bit better. Script fonts look horrible with any spacing, tight or wide. The spacing between the characters are basically three different terminologies koerting, which is when you manly put the spacing between the letters. Tracking is when you do basically current ing, but the computer does it for you, which is what you'll see on most programs that you will use. And spacing is just another term that people use as well. Metallics are amazing, and they can make wonderful accent. Metallics work really well with multiple lives. In a longer headline to bring out a certain word or group of words anyway to break up my not It's a goal in design, lower case letters, having soccer, more gentle feeling to them. This can accomplish a certain feeling wants of you have been looking at your designs. All capital letters worked really well for headlines, but they tend to have a stronger, louder feeling to them. In some cases, this may not be what you want you to feel. In some cases, it's necessary for grabbing one's attention. But in the end, as with everything in design, a balance of lower case in all caps for headlines usually work better. Find ways to shake up your typography usage by using a beautiful combination of serif and sans serif fonts together, using a mix of capital, lines of text and lower case. Together, this mix insurers. Your design is interesting, diverse and unique, 3. Typography in Layout and Design: which alignment looks better to you? The tax using center alignment left alignment. We're right alignment. Each has their own place in layout and design. How do we determine which one to use in this layout, we have our subject matter, the woman off to the left. When designing layouts, it's best to follow. The subject matters direction. We can align to the left against the model. All of our text omits. This is going with the flow of design and makes for a compelling layout. In this example, I'm using center alignment for all of the text elements, including the website. You will notice this nice block of white space to get breathing room in between the different elements. Notice that the design commits to a nice clear alignment throughout the piece, striking a nice bounce that is pleasing to the eye. When you have a bold photo or subject matter in your design, it is wise to embrace that image and highlighted by placing the main headline text over subject matter. It is all about playing around with what feels right. This is where being subjective as a designer is really rewarded. It's not until I flipped the shoe in reverse and have the shoe tucked perfectly in the front to the left that I feel like the layout really starts to work. You will notice the shoe overlapping the E in life as the text and the photo become one. This is an extreme example of this in action, you'll notice the main subject matter almost jumping through the text and interacting with it in a dramatic way. Text and photos do not have to fight each other, but can blend to become one unified layout and design. We do not always have access to the perfect photo, but with proper fonts and typography design, we can make a design relevant and still have impact. Using color metallics to highlight words helps the type become the design it stealth, instead of having to rely on graphics and photos. 100% of the time bite space is so important. Do not underestimate its impact on the viewer's mood. Seeing a design piece, this is a great example of white space. Next one struggles to breathe, and their ward struggles to make the viewer Philip peace with beautiful guitar behind it. I'm taking this poster design and scaling back the font size to give more breathing room in white space between elements. It's already starting to feel better. I dare say that photography is one of the most important element of design today. 4. Typography Design Trends for 2018: typography in 2018 will seem like it's all over the place. With its broad range of styles, you're gonna see a lot of brush typography done with customs inks and watercolors. Beautiful hand drawn lettering will be the name of the game. If you're an illustrator, are a watercolor artist. You will definitely have a job in 2018 as it will be high demand skills for this type of work. It seems very intimidating at first hard style, the master and it is. But it was a little bit of practice patients. You can make it happen. Custom illustrated lettering. It leaves a lot of room for huge creativity and amazing design potential. That doesn't mean regular old computerized farms don't have a place in Design. 2018 on websites. A lot of standard all capital box will be popular. I think you see a lot of syrups and santeros living together closely and headlines I say. The continuing use all capital letters and the headlines saying it turned into a swell is the spacing between characters getting wider and wider and more dramatic. Typography and headlines having more angles 90 degrees, 45 degrees just something more than the straight left to right typography. We've seen a lot in the past. I think we'll start to see more Sarah fonts used to the digital space. I think it's important to have our typography interact with our other design objects, including our main characters, advertisements and photography. I think it's important to blend the two so they're not treated as separate elements. I think that's true but also continues seeing this a lot, magazines, any kind of publications. I also see it happening in the digital space more and on Web websites. Great news, ISS With the advent of better technology and better CSS html, we could do a lot more with type with space, and we're not so permanent. So what's your prediction for 2018? Please put in the community section waiting. Your predictions are for 2018. Design trims. It might be different from mine. Design is very subjective, meaning all have different opinions on what we think will be popular. Not, and I'd love to yours 5. Color Theory : analogous color schemes used colors that are next to each other on the color wheel. They seem to go well together and are often found in nature when creating color palettes for design themes or brands. Make sure you choose colors that have enough contrast, so colors do not compete with each other. Monochromatic colors followed one color all the way to the center of the color wheel, with a variety of shades going from light to dark of one color. A try attic color scheme is like its name, and these colors are linked together via triangle. This one could be tricky and design. It's These colors are far apart on the color wheel and can compete. Let one or two of these colors be accidents, while the other one is dominant. This one is the star of the show. I use his color combinations more than any other color. Will option will cover. These colors are the exact opposite on the color wheel on go very well together. Even the popular red and green color combo that you see during the Christmas holidays draws its inspiration here shades or different variations of the same color cube. They're created by adding a little more black to teach you to collect a nice smooth color palette. The color will has two major components. The warm colors with its vibrance and brightens, and the cool colors on the other side to give off vibes of calmness and serenity, using other prominent colors and photos for your design. Elements can really bring a design together, in this case, bringing out the purple of the flowers into our color choice. It's very pleasing to the eye. Way can also use their trusty complementary colors and go for the opposite color purple, which in this case it would be a shade of yellow. Of course, we may need to change your text colors to make sure there's enough high contrast for to be readable. Take a look at this black edge text. If I bring out a pop of yellow color and her T shirt, it really flows well together. When it comes to selecting the right color palette for design, let the photo lead continue to play with color options, keeping complementary and analogous color options in mind and finding the right color combination. This beautiful meant and navy blue color combo is corgis and has a nice harmony, since both colors are very subtle. But it lacks the punch at the advertising needs and that bright, bold pancake photo. So let's brighten the green a little bit to add a little more vibrant feeling. With this, show up better on your Facebook feed. When color is singled out, I must see a black and white. It could be very powerful and communicate a wide variety of messages. Colors do not have to be single toned. They could be, Grady insists. Well, radiance are settled transitions from one color to another. 6. Color Trends for 2018: adding color to photography and design elements is a trend that will continue well into 2018. And a distracting world color is a great way to communicate. Power command attention Print designers have been embracing the trends of radiance do of tones for a while, and Web design is really starting to catch up with it. First off do a tones or grayscale images printed or displayed in two colors. I'm demonstrating this effect photo shop right here. It brings out the highlights, mid tones and shadows of images to create a much more dynamic effect. You may have heard of radiance, but have you heard of color transitions? These air basically Grady INTs that are much more softer and slower in their radiation. You've seen this everywhere in advertising and photography, and this trend is not going to slow down. See this more and more in the digital space. You're also to see websites embracing this method with typography notice. On this website, you'll see a slow radiation from the top down to the bottom of a slightly different shade. You'll see this effect on buttons and interactive design elements. I see it used a lot by user experience designers as a way to help highlight certain things to the user. So enjoy using duo tones in color transitions to really bring out more in your design and to be trending in 2018. 7. Layout and Blocking in Design: How do you create a nice energy between font photos and design elements? What makes a compelling layout? I created a quick flyer, her gym with some generic promotions. What makes this layout work well? First off, it starts with a large, obvious headline or main attention grabber. It is a nice, clean Santerre bomb with a little spacing between the characters to add a little breathing room. It is obviously the main, and she'll draw of the flyers. It is white, so it has the highest contrast color against the dark background of the entire ad. Try to make sure your headlines air not too long. It's nice to break them up and put the remaining not as important part of the headline in a smaller sub line text. I brought out the green to connect it with the bottom of the piece. So it seems like there's one consistent color scheme. A powerful photo always works wonders. In this case, it's more of a dramatic black and white photo with a little bit of a three. You filter once again to tie in our colors. It is not larger than the headline, so it provides a nice balance for the layout. We have a good bit of information to deal with one small flyer. It is best to have a way to divide up that information, so it's not overwhelming. You're busy. I highlighted some of the text with Green that I thought was more important anyway, to help the viewer break down. A lot of information will help dramatically with the overall feeling of the design, and color is a way to do that. We have an obvious called action. It is their main theme color of green, with a nice high contrast black their spacing between the lettering. So as a chance to stretch further across the bar and have some breathing room, I have now shown the viewer where to go for their next steps. You do not come up with this kind of layout on your first shot. It takes him playing around with the main graphic elements. To find out what seems to click, I struggle with the right headline flaunt and placement for a while until I figured out that it was the photo that needed modified. Once I kind of tweak the the photo a little bit. The headlines seemed to really fall in place. This is another mock up advertisement for a local college notice, the nice, readable headline that seems to pop out on the white bar. I made sure the photos in the collage all had balance. Using the right combination, people shot on object shots, tight shots and wide shots and even use color to add contrast to certain things, too. Notice the even white spacing between the elements. I use the font from the college logo in the headline to provide a nice font things and to provide consistency throughout the advertisement. Also, as I mentioned, the typography lessons raised a strong fair. Fox compared it with sand. Sarah for contact information for those lines did not compete with each other. In the end, I decided to add a little angle to peace, to shake it up a little bit and make it a little extraordinary. The white space provided for the local on the bottom is really nice and helps accentuate the colleges name. In the end, this is the design that I would send my client. It also helps if I spell the word college correctly. I may be a good designer, but I am not a good speller or a copywriter. So run this stuff by someone else, always. Finally, I am showing you the process I went through to break this layout. As you could see, I really struggled with the right placement. On balance for the headline. I ended up making the headlines smaller, so it ended up not repeating with photos. 8. Photography and Design: one of the most impactful elements of design is the use of photography. Photography sets the tone for a design piece the way Lee Cropper images can change. The viewers focus as well as changing our moods. A photo with unique angles and subject matters could make opportunities to use that to our advantage, with headlines that seem to interact with their photos. Photos that draw your eye toward a call of action or headliner wants to look out for voters that seem to work together with typography and headlines work really well in advertising your design. This example. Using top down photography gives us a chance to use the white or blank space inside the photo as a way to draw the viewers eyes onto the important content in text. It also provides unique areas to place our content that would otherwise be playing or boring. A vivid and colorful photo can have so much to a dull design. Going from full color to black and white can have its own dramatic effect. Changing the tone from typical too intense. Adding a single tone or do tone color could increase his dramatic effect. This popular effect is often seen an instagram filtered. This is a great example of this effect in action. The full page ad a designed using that purple single tone shade against this bluish green really adds a nice contrast between the design and the photo. A full color photo used in this case might distract the user from another wise, more powerful product photo we want the user focus on. We want our photos to give the user an emotional response. Either be a positive negative. Calming are energizing your photo choice. Makes a huge difference on whether the overall emotional impact of your design will work with your desired purpose for your design, to see a product or to motivate a call to action. If a strong emotional response is required, then profit and help us achieve that response. Simply zooming in close on a human face can change the way we interpret that subject. Our photo choice contain what would be an ordinary image and make it much more extraordinary. Attention grabbing we confined collar inspirations and the photos we choose for our design , setting the tone for a nice color, Palin harmony or design, branding and even logos. So how will you use photography in your future designs 9. Let's Create a Social Media Graphic: right. Welcome. I'm in Canada today. We're going to do some basic layout blocking and good ish kind of show you. I'm gonna do a little social media graphic for a back to school sale. That's the client brief. They wanted Teoh have a promo to advertise their 10% off the entire store sale. So have all of these elements that I collected from the client email all the necessary ingredients or type that needs to be included in this ad. Everything is up to us in terms of finding a really good compelling layout. So I have our little elements here. So this is obviously the headline. Go and start stacking things or Headline, obviously be on the top and we're gonna have a promotion. Probably 10% off first. And we're gonna kind of shift that toward the middle and are fine. Print will probably be weighed out at the bottom. So I'm gonna go and make a smaller because fine print doesn't really need to be. Just needs to be eligible. You go ahead and slide that down to the bottom and let's make this headline much, much bigger. So let's go ahead. Increase the font size. I could increase that quite a bit, but it's a little too dramatic. It's all about finding the right balance. And your headline can definitely overwhelm any photo that we may use and 10% off. That's kind of our big promotion, So I kind of want it may be used some color and some different typography to highlight that a little bit. So let's go ahead and source. Um, photos have some photos have already kind of found of some school graphics. We contest out a few of those photos to see how we like it when we go ahead and drag the sin. So this is kind of photo option one we can have that would make this larger and put all of our copy in the middle center there. So is that so that maybe the the text can kind of be in the graphic, as opposed to the graphic being in a separate box. So let's see how this works out. I'm gonna need to make this black. Let's go and switch this to black to make sure has enough contrast. Um, this is a small circle space, so I made when I maybe, uh crop This photo we click on this, I'm gonna hold down, Shift on like this A little bit bigger. We'll see. You can't see all the items, so let's make it a little bit smaller. That'll probably perfect. However, I just did it. We'll drag that back and it's just an idea. It may not be what we finally end up with, but I'm kind of like in the overall balance and composition so far going up here, and I'm going to center align and what's kind of see how this is looking. So let's go ahead and shrink that, Um, let's make this a little bit smaller. The headlines little to out of balance ship this photo a little bit over to the right. Well, let me There we go. So just kind of doing elements that are. We make that 10% a little bit bigger. I think that's really important. That's kind of our called action, our motivation for the user. And since this is a social media graphic, you can't go to big with a called action. People were really gotta be able to see this in their news feeds. And, of course, our small print can now become two lines but a center align. Make sure I select it all center line. Most make that black and I'll probably make it, like, a little bit lighter of a color. So it doesn't at all compete with the headline. So you see how you could still read it? But it doesn't compete with the black. I want to make this a different color. Really want to make this pop? So what can we dio let me see? Let me make that all caps only put a little bit of spacing that spread out a little bit So we gotta figure out how can we make this pop? Will, as we saw in the previous videos about color, let's use a little color to make this pop out a little bit. So let me grab. I was gonna go to my elements. I'm just gonna grab a shape here. Let's do just your typical square rectangle. Let's go ahead and make up big banner across the top here and we're gonna put this in the back can. Now we're gonna highlight this and let's try to bring out one of these colors, which is pretty much the entire rainbow entire color wheel. So let's try was try a red, maybe a pink or purple. See how that's really popping out at you now? And I wonder if I make that a black Ah, let's make it match. And let's make this a little bit transparent so you can see a little bit of the graphic. So there's not such a sharp block. Um, sharp cut off of the photo in the block, so it's gonna go to transparency. Just reduce that a little bit. We just really wanted toe show up. Well, over the background, the the text that's a little too vibrant of our purple. I'm just gonna slightly edit that a little bit and maybe make it a little darker, maybe grabs and more blues. Yes, that's a much nice. That's a softer purple, and I believe it saved my thing there, this entire stores competing with 10% off. So I'm just gonna highlight this, and I am going to maybe find a different font. So let's see. Let's see if we could find the lighter phone here now we could play around with fonts because these they're just kind of the default fonts that we were left with. So OK, so this is there's not enough white space. So as we learned, White Space is incredibly important. Let me drag this down a little bit. And this is where all you know, it's just After 12 years of doing this, you kind of learned little tricks of the trade of no finding the right balance. It just takes a little bit of practice to find out what works, What doesn't work. Let's make this a little smaller. I'm not necessarily married to this Cooper Hewitt. Maybe. Ah, just experiment with some. Maybe that's the right one. I do believe maybe a. I don't think a serif font works very well. It's a little too busy. So let's find another Sand Saref Lon. That would work really well. Or maybe maybe that was the right one. So we're just gonna have this kind of a playful, youthful font. So let's see, you know, that might work for this type of ah, advertisement. Let's just try one war, and if not, I'll go back to Keeper Hewitt. But for right now, let's try this one league Spartan, and I wonder if we do in all caps. That might be a little much. I kind of like the lower case. It's got a softer our approach, and I might even make all of it lower case because it'll make everything a little softer, actually. Yeah, let's go back like that. Let's go back to the original keeper, Hewitt. I just wanted to experiment to see well would look the best. And I believe that's back back here. Keep here. Okay, We're gonna keep this, but we're gonna also make it a little smaller. There we go. So now it fits nicely in the space. Probably make this fine print one little shade darker. Just making a little darker. I don't think it's quite readable enough. That's perfect on. And they're still known enough white space, I think, between this top section and the 10% off and the same down here. So let's increase this and add a little more white space breathing room for everything to breathe back up. I'm feeling okay about this So far. Love to tweak it a little more, but I think just for kind of showing your basic blocking, I'm pretty happy with this overall look, We could experiment with other photos and have a second option to send that the client and or do a be split testing on social media to see which graphic tends to engage the person to click through the most. So there you have it some basic layout and blocking.