 Good morning, still okay? Everyone still okay? Okay, so I'm Spencer. I'm a UX designer or a user experience designer. I work with TitaJC at Web Dev Studios, and what I do is design the websites that I hand off to the engineering team or the development team to where they do the coding for the website. So today, I'm just going to tackle a few simple concepts with regards to how you would design your websites. Just simple things that some would consider basic but are really important foundations that even professionals still use because it's a very important thing that affects all your design. So to start, I'm just going to try to make it simple because we have a wide range of ages here, but if you have any questions later or be it something more advanced or if you didn't understand anything that you want to simplify more, please let me know. But to start, does anybody have any idea what design is? Just how you understand what design is. Anybody? Gab, right? So most people equate art and design as a similar thing, but for the most part it is similar, but when it comes to art, art is more expression, whereas design is more, let's say, purpose driven in a sense that you are trying to achieve something or try to make things work better rather than just making things look nice or making things look pretty, although that is a big part of it. So in terms of, like I said, it's more than just making things look pretty, but it's also making things functional and easy to use. In our case, with web design, it's trying to make your website not only look attractive and catches the attention of your visitors, but also to make sure that they are able to use your website as long as you intended it to and then to not only make it functional but also easy for them to use and give them a hard time to look for the things they need to look for and the things they need to go to that you intended them to go to. So next, like I mentioned, I'm just going to go over a few basic things that are still very important foundations. To start, I'm just going to go over three basic things, which is color, space, and size. Let's start with color. So colors, this is in terms of what you'll be making later and something you can use later on as you advance in your design journey. But colors should have contrast. I'm going to explain more later because you also have to consider that not everyone has good eyesight or some people have vision problems such as color blindness or they can't see very well from afar. Also, there are exceptions. Although there are exceptions, you try not to use too much colors in your design. There are examples where in like Tita Jay's presentation where she used a lot of colors since this is intended for kids. But if you noticed earlier, there are still two or three main colors that are sending out and I'll explain more later. So in terms of contrast, what it means is like how your colors are different from each other. If you can see the chart here, there are color combinations that are marked good or poor. For example, in like with the color orange, who knows like what the color combination of orange is? Anybody? What color and what color makes orange? Yellow and red, very good. So as you see, orange is a combination of red and yellow. It's not very visible here, but there's a word poor here in red. And it's not very visible because the contrast is very low because it is still related to the color red. And that's why you had to make sure that the color combinations you use are different enough that you are able to read things or differentiate things that are in your design. And then when it comes to using too much colors, if you see here, this design is basically using all the colors in the rainbow. Although some might find it attractive, it's not a very good design in terms of you are not able to find the things that you need to find and it is very hard to read. So that's why my advice is, although there are exceptions, you try to stick to two or three color combinations so that aside from being not too overwhelming to people, it's also easier to remember. For example, what is the color of Facebook? Does anybody know? Exactly, because they're easier to remember because they only use two or three colors. How about Spotify? Exactly, so my advice is you try to lessen the colors you use. It's fine to use more colors, but you try to use two to three colors that are more of your main colors and make them stand out more. And then space. What do I mean by space? It's not after space or like rockets and spaceships. What I'm talking about here is the space between the elements of your website. So when it comes to space, don't be afraid to put space around your objects. Most people try to crowd things and not just with web design, but with most things, they try to put so many things in their layout. But you have to make sure you have enough space so you let your design breathe because space around objects help people focus and draw their eye towards what you're trying to make them look at. So this one is a very bad example of using space. As you can see, everything is very crowded. It's too many objects, too many colors, and you have a hard time looking at things and looking for anything you want to look for compared to the Google homepage. Everybody knows what Google is, right? So the main thing that Google does is for people to search on the Internet. So what they do is put the search bar right in the middle and put a lot of space around it so that when you go to their website, you immediately focus on the thing they want you to look at and what you are looking for. In a less extreme example, so this website right here, although there are so many things around it and there's a big picture in the background, most people will get drawn to the middle here with the text because they put enough space around it that you are still drawn to it, your focus, your eye is still drawn to the text right there and because the headline is big enough in both, that's the first thing you try to look at. And then the last thing is size. So the size of your elements in your website. So the first thing you have to think of is to make similar objects the same size. The human mind is trained to try to group or make, what's the term? Try to group things together that are of similar size and color so if you have a list or like a grouping of some sort, you try to make them the same size as much as possible. And of course, you try to make more important things bigger. So for example, which part of this layout did you read first? The big one, right? So of course, like I mentioned, make the more important things bigger. So immediately the first thing you see is the biggest text in the middle. And then the next one is the second largest and then so on and so forth. So when it comes to designing your websites, you make sure that the main thing that you want people to immediately see is the biggest thing on the website. But of course, you have to keep in mind the previous things I talked about, which is making sure there is enough space around it so that it's not too overwhelming. And at the same time, you have enough color contrast so that it is easier to read. So to review, the things we talked about are the web design foundations of color, space and size. As I mentioned previously, you try to use this together to make not only a better looking website, but a more effective design to make sure that it is usable and easy to use. Okay. Any questions? Questions? About questions? Okay. How about I ask the questions? What are the three things I discussed today? Anybody know? Prices? Very good. Okay. I think that's it for me. If you have any questions later that you are too shy to ask in public, please let me know. I'm always open to answering any questions you have. So thank you.