 It also saves on bandwidth, too. All right, readability. We're going to talk about how color affects readability. It's very common for black text on a white background. And then sometimes you have the opposite. But I don't know if this works here, but on a monitor of your screen, the bright color, the bright light is overwhelming the text. So it makes it look a little thinner. And then when you have the white text on a black background, that light is going to overwhelm the background and make it look thinner. So this will look thinner. Sorry, this will look thinner, and that will look more bold. And if you're trying to match, you might want to go with a semi-bold over here and a regular typeface over there. So I dim the color a little bit so the contrast isn't so much. So now they're a little closer. Closer in weight. All right, so we're looking at your main content window. And you have some text. And I know a lot of themes are pretty wide, but that is really long to read. Also, too, the type is a little too small. So text is too small. We want to keep it, I'd say, at 18 pixels. Set it there. So it's easier to read. And then we need to talk about the line length. It is long. You don't want to be reading your line. And then take a breath, and you come all the way back. And then you're, where did I start again? This is how newspapers are easy to scan. Well, print newspapers. Columns are so narrow that you can really read that story very quickly. So we'll make that narrower. And it'll make it easier to read. But the line height is too tight. We want to give it, again, some breathing. So we'll spread it out. And now we've added a title, Hello World. So this text is all in black. But we want it to be a little softer, but still easy to read. Yes? Is the title of the same font as the body? Yes. But it is bold. It is bold, but I was just noticing how close the words are. It's like the letting between them would better off a greater length. So you've got more space between the word. It leaves in the title of the text, but the paper in the title. Sometimes it would look like a letter. And if that. Just notice that. Yeah. And that's where you can adjust the letter space. Letting is the term used for letter spacing. Letter spacing is CSS. That's what you call out. So you can expand the space between the letters. And letting is the same thing in graphic design terms. Yes? Is there a recommended length rule? I think it's 72 characters, if I'm not mistaken. For general? Generally, yeah. I think general terms. Because each font is different. So its width and its height and also its letting will be different. So you'll have to. One rule doesn't work for all. So you have to adjust. So now I'm going to adjust the color. Now, do you notice anything different? Does it look OK? Does the color look OK? Yes? No? All right. Well, on this projector, it is hard to read. But I want to talk about there are different colors. I want the header, because it's bold and big. It's throwing more color. So it's going to look darker than the text. So I use a lighter color in the header to match the text down below. Now, you can adjust this. This is just a slide here. But if I make it the same color, you see the difference? That's the exact same color. But it feels a little darker than the text. Any questions about this? OK, we'll move on. Now we'll go on to details. Now we went wide. And now we're going to just little tweaks that will help your web design. So what we have here is another hero image with a header and a call to action. As you can see, it's a little harder to read. Because in the design, they didn't think about what kind of photo was going to go behind the text. Well, it works great if you have maybe something monochromatic or dark or shaded. This is something you can consider, too. If you are creating photos to go in a website, it might just be easier to go into Photoshop where your preferred image editor and make it all one color, and get a dual tone, darken it down. You also do this in CSS as well. If you're just throwing up images there, then you can guarantee that they'll all look the same in CSS. So what we should do here is maybe add a drop shadow. It's a little more readable. So we've offset it vertically and horizontally. So it's at a 45 degree angle. It's still not working. Do you want 45 degree angle? For a, it's probably a shadow. Yeah, the shadow. Yeah, the shadow is like the center over here, and the shadow is projecting. And I recommend don't use black or gray for your shadows. Always use a color of something. You can default to a dark blue if you want, which I did here because it matches the sky. If you have maybe a green background, use a dark green shadow. But still not quite readable. So now I'm gonna throw a little color behind it to make it pop. And once again, I didn't use black or gray. I used a darker blue, and I gave it about 40, 50% opacity. So now I can read the title, the subtitle, and the call to action button. You've gone to the WordCamp website, you've gone to many websites where they have authors' heads and boxes, and the photos are taken in various different ways. They're not bad. Maybe you took a great photo of yourself at the beach, or you had a professional photo taken in a studio, but they're all together, and it doesn't quite blend, and you want it to look even. What they've already done here is they put it in a circle, which makes it a little nicer, a little more cohesive. That's when Twitter switched to circles instead of squared. But also too, you can do this in CSS, where you take all the color photos and just make them gray scale, or give it a duotone color, blue, whatever, to match the website with some. So at least now, an iPhone photo is equal to a studio photo. What I like about Stripe, go to Stripe.com and see how they handle their information. It's vastly different from PayPal.com. They do the same thing in which they process money, but they have little things that delight you. They don't over, Stripe doesn't overwhelm you with information. They have a lot of information they have to convey, because they have to, they're trying to earn your trust, and they're trying to give you all the information you require. So they've thought about this, and they've laid it out. There's plenty of breathing room. There's nice little animations in their menu at the top. But what I like with the buttons is what with CSS, it just slightly moves up. Or the labyrinth moves up. Like it's reaching for that click. Like, please click me when you hover up. You know you want to use that. All right, little layout details. You've seen this where you have little icons that you can use. Well, the problem with this here is it's not very readable. People are kind of scrolling around to read the information. If you wind it up like so, it makes it much more readable. And also too with the icons, sometimes you have just an outline of an icon. Flip it around, give it a background, put it in a circle, and have that color match your website. All right, with drop shadows. Coming back to drop shadows for boxes. It is better to have it at slightly off than just directly behind. Yeah, it gives it more definition, but it's a little nicer. Got to have a little bit of a bracket. Anybody got a cat? I don't know. So slightly vertical off-shadow. And again, not black, not gray, but with a little bit of color. What color did you use on this? I think I used gray. I think I used gray. I think I used gray. I think I used gray. I think I used gray. I think I used gray. You caught me. But that's because your background's gray, so you're using the background. There you go. You're using the background. Thank you. I'll pay you after. So let's review what we talked about. We talked about layout, breathing room. Don't crowd your information. Make it easier to read. If you see a website where it's comfortable to read, look at what they're doing. See how you can mimic it. I don't say directly copy. Let's see what they're doing. Now we talked about color. Don't rely on color just to convey information, but use it in a more delightful way, but don't overwhelm people. And don't use opposite colors like green and red. I know that's really great for Christmas, but don't have a red background. Green type because it buzzes and it hurts. It gives you a headache. And we talked about type. Use good fonts. There are plenty of good fonts at Google that are for free. They're being used in all sorts of templates. You can also use Typekit if you have a creative cloud account. And you can buy or download other fonts and use those as well. And details. Take a moment to look at the details. What are other websites doing that make it a little delightful? I like visiting their website versus, ah, can't be away fast enough. And we always have to remember, surprise and delight, OK? Keep your users and your visitors in mind. Don't use a design that you just came off the top of your head. It makes you happy. Does it make others? The website's not for you. It's for other people, including your own personal website. Your design is for other people, not you, OK? Thank you very much. Spend right through that. There's a link to the other topic. I noticed you've lined up the icons. Yes. What about the treatment of icons? I was just wondering, what about the treatment of icons? Like, there's the put in a box or something like that. What about the treatment of those with shadows, with coloration, and you can somehow do that. I think if they're not enclosed in a box, enclosing them in a box or a circle is helpful. And you can use a drop shadow of that box to make it very subtle. Don't make it too dramatic. And if you're using a drop shadow on the outline, on it will just look awful, if you understand. It doesn't have a shape. It's just an outline. You can see clearly if you add a drop shadow, it just runs. Yeah, and with icons, this is a good question. Make the icon color lighter than your text. You don't want them to see the icon first than your text. Just to compliment the type, not to overpower the type. I think it is. It's just a gentle, hey, this is an alert or whatever. But you want them to look at the alert, not, oh, that icon. Any other questions? Yes. A lot of what you talked about having more space, now with columns, these things go into more pages or clicking. How do you minimize that? Not necessarily more pages, but maybe more scrolling. And now you have over 50% of your traffic coming from mobile. And it's just natural for people to use their phone. To use their phone, click, click, click, click. Think of Facebook. How long are people on Facebook, on their phones, scrolling through their USB? Exactly. So they're going to scroll. It's a good question. Thank you for bringing that up. Because a lot of people think about that. I've had that. Got to have everything above the scroll. I don't want people scrolling. People don't scroll. Facebook has eliminated that word. All right, in the back. So I noticed that a lot of the designs for web now have images that are horizontal focused. Do you have any resources or tips on dealing with images that are more vertically focused? I don't know if you've noticed this, but when you watch your local news. Learning this program. Oh, yeah. Do my best up the merman. They do. When they're showing vertical video or a video from Instagram, that square, they have to fill that extra space. And I've seen ESPN just put their logo on the side, which I think looks horrid. Because it's red. ESPN. But what they've done is that they faded the image, and they made it really blurry when they're looking through Vaseline. And it's moving along with the same video, moving with it. So it fills that space, and it feels vertical. So you can do that pretty easily in your image editor and add that to it. But sometimes, that's your only option, isn't vertical. The question is, using wax, no. Information. They want to throw everything out. But I want to sign up for my email. But I want to read my blog post. I want to see my products. But I want to have three items to concentrate on when they first hit your website. What do you want them to do? Number one, what do you want them to do after that? Primary, secondary, tertiary. And leave the rest alone. And space everything out. So if you want people to sign up for your newsletter, the minute they hit your website, put that at the top. Give it a bold color. And give them a reason. I said to them, hey, I'm Joe. Sign up. What am I signing up for? I'm like, hi, I'm Joe. I'm a graphic designer. I've been working for 20 years. I primarily do sports, graphics, sign up for my newsletter. Now you know where you're getting. Yeah, I want to sign up for that. I have to know my name, Joe. I have questions.