 Okay, our presenter today is Amber Hewitt, and she's going to talk about how to develop your web design skills. Amber is a graphic designer and web developer. She's been doing it for more than 15 years. She has a passion for good design and good typography, and she just recently moved to San Diego from Pasadena. So please welcome Amber Hewitt. Can you hear me? Yes. Okay, wonderful. Can you hear me now? Well, thank you for coming. I really appreciate you being here, and I think of you as all being smart because you all want to level up your web design. So give yourself a pat on the back. Okay, so how many people here are staying at a hotel? How many people here have ever stayed at a hotel? Okay, think about the choices you made when selecting that hotel. I know price is a really big issue, but there are other things too. One of the two hotel rooms has the same price, but maybe one had more amenities, maybe it was the decor, location, that sort of thing. It's the same with design. You have to think of what other people are looking at, so you have to come up with something special to entice those people to come to your website. So, for example, I'm talking about the Hotel del Coronado right across the bridge. You have a moment. I suggest you check it out. Now, what makes this hotel different? Location. It is on the beach. You literally leave your hotel room. 30 seconds later, you're on one of the top ten beaches in the United States. The history. The hotel was built in 1888, so it has a lot of old architecture as well as new because it's been added on. And also it has a lot of pictures and history. Also, if you're familiar with the movie Some Like It Hot with Marilyn Monroe, that was filmed there. So you can be laying on the same beach that Marilyn Monroe was at, with Tony Curtis. Architecture. It has a very, obviously, a very unique architecture. I don't know of any other hotel that looks like this, but I've never been to East Coast. And bonus, it has haunted rooms. Two haunted rooms. And those rooms are backed up for months to get in. Really cool. So that's what it has going for it. Those little extras for that hotel that make people want to stay. And I think right now it's going rates 300 and up for the lower rooms. If you want a bungalow, it's like a grand. So, what other details do hotels have? This was, I think, at Pack East where somebody posted their TD stamp. This is what you call frivolous design. It doesn't make any sense. There was no thought put into it. I might be trashing the person who thought of it, but really, it takes up space. It's not an exercise fight by any means. Not if you can't get on it. It is. So you have to be thoughtful with your design. And you want to stand out from the crowd. But not this one. So you have to think, will delight people. What will make the people happy to come to your website? It's surprise and delight. That's what will bring people to your website. People in the back, surprise and delight. So, let's start with a blank canvas. You're thinking of a brand new website. And this is what typically happens. All you people in here know that you're not going to do this. But I've seen it. And it's easy. But when you're in a hurry, you need to put something together. So, you have your nav bar. You put a color behind it. You've got your logo. It goes right there. Your navigation. Alright, it makes sense. Alright, you have a hero image of some cheesy stock photography. I took that photo. Yes, it's cheesy. And you've got to have a headline and a call to action. You've got to have a call to action before people can even figure out what you're offering. Like, buy me. Like, what am I buying? Sign up. What am I signing up for? Another headline. You start to explain things. Some verbiage of some kind. Talk actually getting into the nitty-gritty of what this website's about, what it's selling, what it's offering. And an email sign up. This is pretty much, I'd say, 50% of the book right now. There's nothing wrong with it. It serves its purpose. But you have to think, what is going on? Why were these decisions made? People are reading from right, sorry, left to right for the most part. Some of them you need to read the opposite. But for the most part, left to right. So you have to think of a hierarchy. I've got to put a box too. Alright, I'm going to talk about layout. So let's talk about reasons you want to lay things out. Now you don't want to keep things crowded. Now the designer showed you before had some breathing room. You don't want to crowd the information right here. This is a beautiful thing. And what's going on here, this is an option. You don't have to choose this option. But this is an option where you both have left and right sidebars full of information. You can put all your sign ups, your ads, your archival posts, categories. But then people are lost. They don't know where land first and they just are overwhelmed. Too busy. So this is from theoutline.com. And I pulled this out because they're a little more forward thinking in their layout. They're considering breathing. When you first go to the story, you see the headline and you see a subheadlight. And a nice image in the background. And under a second and you understand what's going on. And I know what this is, I think I'll continue to read it. Now when you scroll down, on their website they don't have sidebars. But they have one column. The type is at the right size at the right width. It's pleasantly designed. It gets people to engage. And they'll read and read. And this story probably will take 10 minutes to read. It's inviting and people are willing to spend that time there just for it. Like Goldilocks. This is the Washington Post. So I'm not saying don't have any sidebars. You've got to have a sidebar. And what converts better into that is on the right. Because people are going to read the main information and then they're going to move over here. They expect it to be on the right. And you have a headline easy to read. And the information is set up in a way where you see the headline first then the image. And then if you're interested, you know where to find out who wrote it. As you scroll down, you see a post on the side. Great, I find other things to read. Nice placement of the ad. Yes, it's in the middle of the text, but people can scroll past that. This is their front page as of two weeks ago. They're thinking a little differently with color and layout as opposed to the Washington Post or the New York Times. It's like this story, that story. It's just so informational. Yes, they are publishing a lot of stories, but it starts to get to a point where you don't know what is important. And the outline doesn't have that many articles, but they've made a few important. You start here and then you're intrigued to scroll down and see what else they have. And they experiment with color, but it's still easy to read. It's fascinating. You have little photo icons here. And this is how they lay out other story articles that are not that super important as you read a few of those. But you get the idea of what they're trying to accomplish. You're trying to do a little eye candy that there's a purpose to it. And another option for laying out other stories is what's in their golden section. These are ones that stand out to us. You might want to take a look. And if you go to their website, theoutline.com, you'll see that it has some nice animation. Nothing overwhelming. Nothing too flashy. It's just, it's nice. Don't be afraid to experiment. But make sure there's a logical reason for your design. Why is it red? I don't know. I like red. Come up with a better answer. Now we're going to talk about color. Now I'm warning you more about relying on color for information. I can talk to you about analogous tertiary colors and all that sort of thing. But we need to talk about what not to do with color. Don't rely solely on color. And for some of you, you may not even be able to read, but don't. So let's take PayPal for instance. And I'm also talking about a little accessibility here because there are people who are color blind and they can't rely on color for information. They have to look how things are laid out. And here, this is what they see in black and white. Now is there a warning of some kind? Can you tell? Yes. And that's because PayPal is using color, but as well as an icon of warning. Saying alert. This is what it looks like in color. And just an FYI, PayPal is a worldwide company. And their website has to be in many different languages. Or to skip having to adjust each and every warning, they just have an international symbol of warning instead of the English, like required, go back, that type of thing. So they can use this form and just easily change out the language. One thing of color that you can do, gradients are huge right now. But you have to be careful with gradients because if you use opposite colors, like a yellow or purple, and you blend them, the middle color will kind of look like mud. And you don't want that. You want colors that are more close to each other, like here. But we have a gradient where, at the top, where we use adjusted for the lightness. We have a darker, it's the same color, but one top is light and the bottom is darker. Now the darker color isn't so inviting, it's a little muddy. So what would make that button pop out more, is if instead of changing the lightness of the color, I should go back. Do you know what HSL stands for? It's the saturation. Perfect. So instead of changing the lightness, you can change the hue. So you're changing the color itself. So you have a darker color, so it makes that button pop out a little more. And I have a slight drop shadow over here. I don't believe there's a blur on it, but just a slight drop shadow to make that light text pop. So with this website, we have the typical layout, but something is missing and you need a little extra oomph to it. You can add a color bar at the very top. It's like a nice frame. Instead of just taking a poster of the wall, you put the poster in a frame and you put it on the wall. It's just a nice extra thing. And at the bottom in your footer, with a lot of white websites, you just have a very minuscule bar, and the bottom, they have all the links and stuff. It kind of looks the same as the content. You don't have a visual break. You can to make it feel more grounded, like a home is given a ground to sit on and to differentiate itself from the main content. And also too, this was greyscale. Greyscale text on color doesn't quite work. It's helpful if you use part of the color in the background in your text. It just makes it look a little nicer. It looks white probably here, but it's faded so it doesn't really compete with the main content. Now we're going to go on to three. Type. Use good type. Use good fonts. There are a lot of good fonts out there. And they're for freaks. I have a mix here. This is a list. By the way, I'll have a PDF of the slides available at the end. So you have sans-serif. I'm sure a lot of you've seen these before. These are good fonts to use. You can pair up these fonts very nicely. Or you can just use one font and use different weights. Maybe your tiles will be all caps. Use letter spacing to spread it out. It also saves on family too. 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 complete 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 text, the white text on a black background, that light is going to overwhelm the background and make it look thinner. 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 dimmed the color a little bit, so the contrast isn't so much, so now they're a little closer. Closer in weight. Alright, 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. So you're going 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, 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 room. 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? 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 words.