In this section of how the web works, we'll discuss website design basics. Now, that you know how full stack development works, that's everything from backend up to front end or front end back to the backend, from creating websites that use HTML, cascading style sheets, and JavaScript to my SQL servers, Apache servers, file servers or content delivery networks, we're going to look at why and how you create a website. Why do you create a website? Well, a website is made to promote your business or service, whatever you want to professionally promote, or an organization, something that you might want to just say, hey, here's a website of my dog. Whatever you'd like to do, you can create a website for it. Now, when we create websites, we have to consider that this is a user interface, just as your smartphone has an interface on it, or your computer has an interface on it, the website isn't interface for your clients or your friends or those users. Of course, there's social media sites, which are pre-created for you. And all you do is put pictures on it or type some words here or there. We're gonna look at websites. These are things that you actually create. And if you're creating it, you'll need to think about the scale, typography, the visual style. If you want a grid, a hierarchy, navigation, the readability of the site and the flow. So first, we're gonna check out some sites that help you make sites, which is rather nice, but we're not looking at this site right now for how it helps you make a site, we're looking at this as UI design. So, user interface design. You'll notice at the very top what they've decided to do is put their products, templates and resources right at the top of the page. Everything you need to grow online, they've got enter your email right there get started. By making this the only option on this page and making it very bold, what they're trying to do is get you to put your email into their website so that they can follow up with you as a prospective client. And you can see that this site is doing that very well. If we click on over to another site, we'll see that get started is right there in the very front of the page. Now, when you choose get started, it's gonna ask you, hey, go ahead and log in with your email. And another one, start your website. And then over here, well, what kind do you wanna start? Let's go ahead and start one of these. So you can see that each one of these offers some way to capture the information and bring the user deeper into the experience. Now, the scale of the site. In this case, we're looking at about a 1080p scaled site. My system is running 4K. So, this site fits actually really well up in a corner. I can look through the site, and the flow is very natural, very clean, and very easy to read. So, the scale is just right. The typography, the way they're putting the words in the screen, the font they're using is very easy to read. And this is something to keep in consideration. Some people may have different conditions that make it harder to read certain types of texts. So, using a text that is most accessible might be the right way to go. Now, if your site is a particular artistic style, then maybe that won't work for you. Some artistic styles are simply hard to read, so it's by design. But when you're making your website, be sure that you consider design, the type of font you're using. What do you want the user to see, the very first thing they hit your site? What do you want? Do you want them to see an example, maybe a get started link, and or the email so they can follow up. If they scroll down, which most people don't scroll down very far, then as they scroll down, what kind of options are they gonna see? Also, what kind of style do you want? A grid, hierarchy, navigation. In this case, we have what looks like a grid layout. So we have each of the options well right over here. We switched from our grid, well, part of the grid over to navigation and hierarchy. So we might be able to drop down deeper and deeper in these little sections. And they're combining several different methodologies in the site. Great way to do things. Now, if we're looking at user interface design, remember, the scale of the text and the images should be appropriate for your user's device, whether it's a mobile device, a tablet or a phone or a desktop device, and that desktop device may be a lower resolution monitor. So keep that in mind. The typography, the fonts, how you arrange the fonts, that should be easy to read, as easy to read as works for you. And the visual style, whether you'd like to stay with a grid, a hierarchical approach, or just provide navigations throughout the entire website. Keep that in mind and design your site with your purpose in mind.
