Design tips for Website Design with Squarespace and Wix (no code) | Laura Isaza | Skillshare

Design tips for Website Design with Squarespace and Wix (no code)

Laura Isaza, Senior Designer at BMW

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
18 Lessons (60m)
    • 1. Welcome to the course

      1:21
    • 2. Advantages and disadvantages of creating the site on your own

      2:19
    • 3. What are website builders

      1:42
    • 4. Different website builders

      5:46
    • 5. Squarespace introduccion

      2:22
    • 6. Publishing your site

      3:14
    • 7. Wix introduction

      3:57
    • 8. Responsiveness

      1:04
    • 9. Alignment

      2:21
    • 10. Hierarchy

      3:19
    • 11. Working with images

      3:18
    • 12. Color psyhchology

      2:49
    • 13. Colors meanings

      3:32
    • 14. Color combinations

      4:55
    • 15. Typography basics

      4:13
    • 16. Serif and Sans Serif families

      3:16
    • 17. How to choose a good typography

      5:00
    • 18. Tools for working with typography

      5:06
18 students are watching this class

About This Class

If you are just starting your business and need urgently a website for it, but cant spend thousands of euros for a professional to do it for you, then this is your course!

I am  Laura Isaza, and over the last years I have built many websites for small companies and entrepreneurs. With this course, I want to share all my knowledge with you, so that you can bring your business to the next level.

This course is not about making you a website designer, but rather giving you the tools and all the tips you need to know  so that you dont have to hire a designer.

This course will take you step by step, through everything you need to know... what is a domain name and how to choose one, how to open a web hosting account, how to use website builders like Wordpress, Wix or Squarespace and then creating a web design that you'll be proud of.

The course is ideal for anyone who wants to do their own web design and quickly create professional looking websites.

From start to finish, all of the above is really easy to do... you just watch the videos and do it yourself. And just in case you need me, I'm always available in the course for further help, advice and support. Look forward to see you inside!

I look forward to seeing you inside.


Who this course is for:

  • Anyone who wants to create a professional looking website quickly

  • Anyone who wants to save 1000's on a web designer and do it themselves instead

What you’ll learn

  • This course has all what you need to know about webdesign for your business
  • You will learn what are the advantages and disadvantages of creating your own website vs hiring a professional to do it, and how to get started
  • You will get to know some of the best website builders like wordpress, wix, squarespace and to recognize which one is the best for you
  • At the end of the course you will understand what a domain and hosting is, and how to get them for your website
  • All of the basics of design, like color and what meaning do they have for your brand and site or typography and what it says about your brand
  • You will be show all the tools and pages you need, for example those ones where you can get free fonts and images

Are there any course requirements or prerequisites?

  • You will need a computer/laptop and internet connection
  • No prior web design knowledge or experience is required! - even if you're a complete beginner
  • Just bring your positive attitude and your desire to learn!

Who this course is for:

  • Entrepreneurs and Business owners who want to create website but don´t know how to code
  • None designers who want to learn about website creation
  • Webdesigners
  • Managers
  • Entrepreneurs
  • Business owners
  • non designers

Transcripts

1. Welcome to the course: hi and welcome to the website development course for entrepreneurs and business owners, the course that will teach you how to create a beautiful website from the ground without having any coding or design experience at all. My name is loud Isaza and I'm a product designer but also a Web developer. I worked for a major automatic company, but also over the last few years I've worked together with thousands of companies helping them to create their websites, ford or businesses. So on these cores, I want to teach you all the insights about how to create a website from the ground, even if you have no prior knowledge on coding or design at all. By the end of this course, you should be able to create your own website for your business all from the ground. We will be able to addle the content to choose the images, and nonetheless you'll be able to make this website look as if a professional would have designed it. I will walk you through all the tools you need to know, and all the design concepts that are important to make a website look more professional. 2. Advantages and disadvantages of creating the site on your own: So what are the advantages of creating the site with a website builder? First of all, the personalization off the site will be way easier and way faster. Also, the templates that piece sites provide are usually very high quality. You will also not need any knowledge on coding, and it is usually way cheaper. Also, publishing your website after you've created it will be way easier and it will take very little time to do. But as everything nothing is oh juice purple color. So we also have some disadvantages while creating the website on your phone. First of all, many companies might be able to choose the same template that you chose as well, which will diminish originality off your website so you can find companies that will be having a very similar design depending on how you personalize it. Also, this personalization is limited, especially in website builders like weeks. I will tell you more about it later, but just keep that in mind. Also, it might happen that the content does not feed the template that you chose. Also, you can not choose your hosting options. We will learn about hosting later, and the export options are limited as well, but even with those little disadvantages, it is still worth it to create your own website because it will just save you so much money that usually you will have to give for a website designer in a website developer and the hosting and a domain. So with the help of the website builders, you will be able to create very low coast site for your project or your business. 3. What are website builders: So over the past few videos, I've been mentioning this term called website Builders. But what exactly is this? Well, is it all in one tools that are going to help us to create or west side from scratch without having to code anything at all? There are many off them and which one to use will depend on the priorities you have, the kind of Westside you're trying to create and the kind of company you have. It would also depend on how much traffic or how many people are going to visit your website . I'm gonna teach you three off the main ones, which are weeks squarespace and WordPress. And we're gonna talk about the difference between one or the other. And why to choose or not one for your project thes website Builders also have something really good. That is the tam plates. They have customized already styles and feels according to different topics. So whether you're trying Teoh, create the website for a restaurant or for a hearse alone or whether it's a portfolio or a business page, um Wake squarespace or whatever website builder that you're trying to use will already have pretty fine templates. so that you can take does and start personalizing them at your content. Change the colors and make it s your sis possible. But the advantages that you won't have to start from scratch, which will save you a lot of time. 4. Different website builders: So now that you know what our website builders, it is important to know which ones are during the market and when to use one or the other, because you can basically use all of them. But they do have some certain areas Werder special lives. So, for example, for general purposes, if you just want to show information about your company, then you should use squarespace or weeks. But if you have any Coomer's or an online shop, it is better to use big cartel and big commerce. Well, if you have a blawg or a content management website, then I would recommend you to use WordPress either dot com or dot org's. So the 1st 1 we're going to talk about his work bears, and this is one of the biggest and the most recognized website builders in the market. Because this is also the olders. The one has been the longest out there, and though it primarily started as a tool for creating blocks, it has evolved through the years into aside where you can just build any kind of websites. It also needs a little bit of coding. But the good news is that since it's so recognized. Many developers so dare have created a lot of plug ins that will allow you to just use WordPress to create online stores and whatever kind off website you need. The thing you need to know is that there are two kinds of WordPress. There is wordpress dot org's and work purse dot com and the primary differences that for the dot com version, you will need no coding know ledge, but it will also limit you a lead of it more so if you used his version, you will be hosted White by WordPress. You will also need to use a self domain, and the templates will be more limited. Also, you won't have the option of using the's plug ins that have been developed for WordPress. But if you use dot com at dot org's, I'm sorry you will need coding know ledge, but you'll give you more possibilities. You'll have access to more templates. You will have control of the code, and you will be responsible for the domain and hosting. But just does it say there are many programmers out there that have developed a lot of code forward, pretty for WordPress. So you just can use that and copy, paste it to your site and create a beautiful one that is adapted to whatever kind of need you have. Next builder we're gonna talk about is weeks, and this is also one of the biggest players in the market, and it's been there for very long, and it's very well known because of its capacity to create any single kind of websites. Whether you have a small business or restaurant or online store or whatever you have, you can use weeks. So what are the advantages? Well, 1st 1 it's that is very easy to use, and it also includes a free version just under a sub domain. You can also choose between many different kinds of templates, and you can also install third party APS. The downside, however, is the difficulty to migrate your website once you created it in weeks. Also as e O. Functions are not so good in it, and you also have advertising. And of course, if you do not use the free version and want your own sub domain, then the price and the web domain are a little disadvantage. But Justus Weeks, the older website builders will also have a price, so I wouldn't worry about this one so much. The last website builder that I want to show you is called Squarespace, and this one is justice. Biggest the other ones, but it has a particularity, and it's that is very curated in terms of design templates. So the advantages that you will have with it is that you will have a very good and very responsive design for older move out devices. It's also very good for sales and doubt loads, and you'll get an as a sell certificates for free and very good service and also very good analytics. So, just as I said, the curated can be an advantage but also a disadvantage because it would restrict you more . You'll also have less templates, and you won't have a free version, and you won't have widgets just as India other ones. So you really should use squarespace if you don't really want to worry about it so much. So with Ward Paris, you'll required a lot of just Googling for code and for plug ins, and so one with weeks you'll be allowed to do almost anything you want. But the disadvantages is that if you don't know so much about design, then you have the risk that your website might not look so good at the end. Well, if you have squarespace dan, you'll be guaranteed that you'll have a very good design already because a limit you much more. And the templates are very good, very pretty already. So you just have to check what are your real needs for your website before just choosing one or the other? 5. Squarespace introduccion: Now we're going to see how to build our first website with Squarespace and thes website is extremely intuitive and extremely curated in terms self design. So before we get started, I would like you to just check their website and seal the features they have all the kind of Tim blades. Um, the kind of topics said you can create the website for I mean, you can create it for any single kind of business, but they already have some pretty fired, pretty fine topics. Um, that you can just go and click around to see whether you have a restaurant or you have a photography website or whatever it ISS, or if it's just a block, you can just go click around. And once you check out a website that you really like, you can just preview it and see Oh, the features. It has like the pages and said more or less how it would look like if you would choose this one. And if you really like it and you're ready, then you're just gonna go and click ahead to get started, and it's gonna ask you to sign up to create an account. If you don't have one yet. It's going to be very easy. You're just gonna need your name and your email and off course. It will ask you for a password as well. So it's just very few information that they need. And Dan, once you're ready to go, you just can go ahead to create account, and it will immediately redirect to To there Tampa lead side. They also have some little tourist so that you can just click the name off the off the project or the website you're creating for, so you can just go ahead and type the name off your company or your business. You'll show you Merlis how to edit how to create pages, and it has, like a small tutorial off. How everything works is very easy. So once you've seen this, you're gonna click on ready and then you can go ahead and start editing, adding your own content and your own images, and you'll be ready to go 6. Publishing your site: so now that you know where to build your side, let's talk about the steps. It is really easy, but the first thing you need to have clear is what kind of website are you trying to build so that you can start choosing which kind of website builder will be adequate for your site . Then, once you have this one, you'll go sign up and choose a template. This temple it will allow you to simplify your design process. You'll have to personalize it and build the site, adding content in images. But all of these will be very easy, cause the's is a very easy tool to use. And last but not least, you'll have to publish it. And of course, just take care off, just monitoring it afterwards. Check that it's growing and improving. Now let's talk about the things he will need to publish your website well, the first thing you'll need is something called the domain, which is basically the address off your website, and the 2nd 1 will be the hosting. This one is the space in the cloud where your files will be stored, skipping to account that if you're using a website builder. You won't have to worry about hosting Adul. So the domain is this address off your website and therefore should be related to the name of the company or the product or even your own name. So the first thing you need to do is to brainstorm some ideas and then find a website where you can verify if his name is still available for use and how much is gonna cost you and then you can choose it per chase it and connected to your website. It's very important that you keep in mind that before buying a website, if you chose already your website builder, some of thes ones will include you a free domain. So just check the plan that your website builder has and choose to domain afterwards. As I mentioned before, you wouldn't really have to worry about the hosting scenes. We're creating our website with website builder. What means that all of our files are already gonna be stored on the server off his website builder. But just to show you, there are different kinds of posting so you can have your files on a shared one and this is really good when you have a small company when your website is not really complex. We also have cloud hosting, which will allow you to create different copies off your website and store them in different servers just in case that one goes down. Then you'll still be able to check your files and have your website online, and the last one will be the BPS server, which will allow you to have more control and freedom. But just as I said, this is only just for general purpose and general knowledge, you won't really have to worry about this one. 7. Wix introduction: So now we're gonna talk about how to set up your first website with weeks. Ah, but first, I would like you to go to the website and just check out all the different features that the editor has, what kind off, different functions they have. What do they offer to you and just read all straight so that you have a better idea and a better understanding before you get started? And you can also just go and click on templates and just check out the different kinds that they offer for the different businesses. So whether it's a photography site to video a design one a portfolio or whatever it is, you can find all the different kinds of templates classifieds, and also they support many different languages as well. So just go ahead, check out their website and read everything through um, before you get started and when you're set and ready to go, just go to the blue button and press on, get started and go to sign up, and it's gonna be very easy. Since you probably don't have an account, then you'll have to just register first till they are just going to ask for your email, your password and then you'll be set and ready. You just have to click again on sign up and then you'll be redirected to decide where you can just start choosing your templates. So weeks has this function before you choose the templates where they're gonna ask you what kind of website it is that you're trying to build and these will create automatically or suggest you like what kind of template is better for your site? But you're gonna have a little bit of more restrictions when it comes to editing this site so you can do it this way. But I would recommend your to just skip the 80 I and choose your own template. But I mean is up to you. You can try it. Um, in this case, we're just gonna choose a template. So here we go. When we click on it, we just get suggested, like every single kind for different things for businesses or for whatever is. And in this keys, I'm just gonna go ahead and choose a template for consulting and coaching. So I just have to click on it will show me the ones that are optimized for this purpose. And once I see one that I really like, I'm just can preview Ed to see more or less how it looks like and what kind of different pages it has already set up. So we're just going to click on view and check it out and see if we're happy with it. It's gonna ask us if we want to edit, decide or not. I'm just gonna close it so I can just go click through and check all the pages that they have. So they have us, you can see information about you and then they'll have different products displays that you could just purchase right away, etcetera. So I think I'm pretty happy with this template. So I'm just gonna click on Ed and start editing with it. And yeah, it's gonna take a little while until up loading, but basically is just gonna open the website editor and it's gonna be very easy. You can see that it has, like, welcoming tour. You can just check out Merlis how everything works, but it's gonna be very easy. You just have to click on the things and start editing and change the images and everything you need 8. Responsiveness: something that you really have to take into account when designing your website is to remember that your users will access to it from different kind off devices. Whether it's a cell phone, laptop or a tablet, you have to be aware that your website needs to adapt to de Steve Ice. This is called responsiveness on the website and the response of Web design is this ability that the website has to adapt to whatever kind of device that the user is accessing from an optimized the content according to this. So with our website builders, it's gonna be very easy because they'll just have a function which will allow you to visualize how your website looks on whatever kind of device and making adjustments in case off needed. 9. Alignment: next topic is something that many people ignore when creating their website. But it's something that can really make the difference in the professionalism off the site itself. So let's take a look at this example, and it's OK. But once we see the one in the right, it looks way better, and this is just because of the alignment. If you take a look at the left side, all the texts are completely unaligned to each other, while on the right, one is a little bit more visually appealing because all the things whether horizontal as vertical, are aligned with only one or two lines, and to create alignment, we have two different options, so the 1st 1 would be to have a side alignment or edge alignment. And this is when all of the elements off the website are aligned by the edges. So you have to make sure that one line cross path and torches all of the edges off the different elements. The 2nd 1 that will have is the center alignment, and this one is a swell us. The edge, like the name says it itself, is the one where you center the elements just by the media line, whether it's horizontal or whether is vertical. Another thing to take into account with working with alignment is the simplicity off it. So we have to make sure to have us legal alignment lines us possible. And you're going to see here an example off a business card. And on the first sight it looks very well. But we have way too many alignment lines. So if we change it a leader bit and just align everything to one side, we're gonna minimize the alignment lines. And these will be more visually appealing for our users and also easier to consume the information and therefore easier to focus and process it. 10. Hierarchy: in this section. We're going to talk about something very simple, but very important, because it's gonna have a huge impact in the design of your website and the way that your users and customers perceive and process the information. And this topic is her a key. So first thing you need to know about Hurricane is that our brain is wired in a way that we process information according to how it's presented to us. So we are wired to check out first the bigger thing, the boulder things first. So if you look at this example, you will immediately notice that your eyes will go to the first line of text, then to the 2nd 1 and then to the one where the topography is not in capital letters anymore. This is something that will help you organize your texts, um, to capture the attention of your users exactly where you need it. Now let's take a look at the second example where we have a bunch of shapes, so you'll notice that your brain will immediately go and get its attention to the square because is the biggest object off all of them also is the boldest one. So our brain is wired to just check out the biggest boldest and then passed to the rounder things that are in the next size. And then we'll go consuming all the elements until getting to the smallest and lightest one to know Listrik an example with websites. So if you would have a website that is looking like this where you have a bunch of text that is very like not just differentiating what any line from each other, your user will have a lot of more difficulty knowing where to concentrate first and what kind of information is more important don t other. So if we make a little change and ad, for example, some images, this is already improving the user experience, but it will still not be amazing. So what we need to do is justice in this last example to, like try to guide our user through our website. So if we have a heading than maybe make this one bolder or make it bigger, then if we have images we can, like, vary ate the size of them and the position also with subtitles and with big amount of texts , it is really important that we divide the information and just draw the attention off for users exactly where we needed. So if the most important is the imaged and maybe make this image bigger? Well, if the most important is just to title itself, then just make it Boulder, make it bigger and make some legal adjustments. So that you user um no. Where to concentrate first. 11. Working with images: another important aspect off our website design are what kind of images are we choosing for it? And in order to choose good images is important to take into account the quality in the size off the images, the resolution. You have to have images to have a good resolution so that when the user sees them on bigger screens, they steal work. Also, you have to be careful with the size because, according to the different kind of device this image might be or not so visible. The image has to be also related to the type of content that you're giving your user, so they have to be related because they have to send a message. And the last part that you have to take into account is the photography rules. You have to beware that there are certain rules that will make images elite a bit more appealing to the eye. So beware off this one's and use them on your favor. There are many websites where you can find images for free, and this is just a crap of those, but there's even more so just feel free to check them out and look for your images before you start to your website. One of these is pixels. We also have peaks, obey and splash gratis photography. Morgue filed it Calm peak, jumbo as well as stock vault. And all of these websites will have images that you are going to be able to use for free. And maybe some of them are gonna ask you to just contributed author or something like that . But this is gonna be up to you. And now the last thing to take into account when working with images is how to make them work. Well, when you also have text with it and for these, you're gonna have Teoh make sure the dick text that is on top of the images. If that's the case, it's readable. And for that, you can just make simple changes that are going to improve the readability off the text, such as changing the color background, um, or maybe underlying the text behind it or just controlling the background image, adjusting the contrast or making a little bit more. Paige. Maybe you can also put like a layer that overlays the image with just a little bit off a pass ity or make the image with, um, big ocean filter. Or maybe just put an overlay with radiant. That is a lead a bit darker. When the text is over, the image and all of this tapes are gonna help you make the text more readable. 12. Color psyhchology: So now we're gonna talk about one of the most important topics about website design and one that is gonna help you create certain behaviors in your costumers in your users. So dystopic ISS caller. And it's extremely important because color is something that goes directly toe arsenal conscious and activates certain parameters that we cannot control. But they work in their extremely effective. So I don't know if you have had this feeling when you come into a room and maybe you either start feeling inches. Or maybe it makes you just feel very relaxed, very calmed. All of this is because of the design, the elements that they're there, but majorly, it is because of the color. So, for example, if the room happens to be yellow, you'll start feeling very anxious. But if the room instead this color blue will make you feel very relaxed, very calm, very trusted so they can change our emotions, they can change how we feel and what we do so you can take advantage of this because it is a very powerful communication tool, and you can use it to signal eyes, some actions to influence the mood of your customers. or users or even influence psychological reactions. Many of the biggest brands already know this, of course, and they use it. Teoh create certain things within their costumers. So, for example, if you have a fast food restaurants, you'll notice the Dell used this very bright yellow red colors. And this is exactly because they're so bright that they'll immediately cost you the effect that you won't want to stay in there for very long, which will mean you'll go in there by your stop. It'd quickly and then go ahead, take your path away because they just want to get as many customers as they can, and they don't want them to stay long. So instead, if you check out like a spouse or something, you'll have very, very warm tones. Like Brown will have a lot of wide, maybe some blue, very light and colors that will make you feel very comfortable, very secure and will make you want to spend more time in this. So now we're going to check out the different callers in which, which one of them means and how can you use them to create more attention, or when is it wise to use one or the other and how to combine them? 13. Colors meanings: So, just as I was telling you in the previous section, the most important thing that you need to keep into account about the color theory is that every color has a meaning, but also that colors are attached to emotions and feelings, and depending on which one you use, or in which amount and which tone it can achieve one goal or deal the one. Also, it's important that you know that it is better to choose a color palette, so at least two or three colors that you can mix around for titles, Baden's and backgrounds and different things. And last, it is important that you know, what kind of brand are you working for or which is your kind of company. The values locations, the customers. All of these has an influence. So our first caller is a color yellow, a color that can be very powerful but also very dangerous if you use it for backgrounds, it evokes emotions like happiness, joy, attention also intellect, and it is used to call attention. But as you can not stare it for too long, it is not really good for being used for backgrounds, so just be careful when you use it the next one. It's the color blue, the color off comb, the color off piece, the one that evokes tranquillity, stability, confidence and trust. It is used for branches like medicine health, also for generating trust. So it's really good for working with money. Now we're gonna talk about the color red, one of the most powerful ones and the most calling attention justice yellow. It evokes love, energy, passion and power. Also emotions. This is why it's very used for things that are exciting. Intends for love, for sensuality. Now the color green a color that justus the blue is a little bit more calm. It evokes freshness. Security is related to nature and growth, which is why it is very used for services related with food, especially with things related to healthy and sustainable and environmentally responsible. Now color purple a color did invokes royalty, richness, power and community, which is why we use it for bank credits. Cause of distrusted transmits for addressing feminine public, also for exclusivity and luxury and justice. Purple. We have the color black, a very, very powerful exclusive one. It was related before with darkness, but now it's seen Maura's elegance power extreme, and it is used to create strong emotions but also just display purple to re percent luxury and exclusivity. And last but not least, we have the color white, which is used to represent purity, innocence, light and goodness sincerity, which is why it issues for brands that have to do with, um, spirituality with stuff nous with cleaning nous, it can also represent a new beginning. 14. Color combinations: Now that you know the meaning of the different colors, let's talk about the combinations that you can create with them. And these combinations will help you build a color Politte, which will allow you to have different options to choose for your background, your titles, your subtitles and so on. So for these, you're gonna need to take a look at the color will, which is this abstract representation off the colors around the circle that will show the relationships between them And depending on how you combine the colors on this will, you can have different kinds which are like the analog complementary sleet, tree, attic and monochromatic, and all of days will show different messages according to how you use them. So let's talk about the first combination, which is a Anna look one. So this one is the one that creates when you take one color in the wheel, and then you take the color right immediately next to this one. So if we take a look at this dark blue here, the analog ones will be the purple one and the blue collar next to that one. So these combinations that are created with analog colors are extremely harmonious and easy to look at, which will make them good to use for backgrounds and titles, or just for use them in using them in big amounts on your website justice you'd see in this example. Now the second combination that we're gonna talk about is the complimentary one, and this one is the one that is created when you take a color off the wheel and combine it with the color that is located on the opposite side. So if we take a look at the purple one, it's complimentary. One will be the yellow color right in front of it, and discriminations are really good to call for attention. But there are also extremely clash. She so they will stand out. But the bad thing about it is that you cannot really look at them forward too long, so they'll be good for loggers and stuff like that, but not for backgrounds. Now let's take a look at the so called split combination, which is the one that you create when you combine a caller with the two colors that are just actress end to the opposite one. So if we would take the color purple, for example. Then we know that the yellow one is the opposite. And then the two that are next to it, which is this kind of orangey or darker yellow one. And this very light green will be displayed combination. And these one will be a leader bit more balance, but also still very clash e Um, so it's also very good. Too cool for attention, but still not that good for backgrounds and stuff like that. Now we're going to see the Triad IQ combination, and this one is the one that you create when you have one caller and take the two ones that will make it to split the color wheel in ST exactly equal parts. So if we would take this dark blue done, the orange and the light green will be the try attic combination off this one, and this one will be a very Vallas and steel will call for attention. The we have to be curved Vulcan because it can also generate a very nineties look because in the nineties it was very commonly used for all the announcements and Lagos etcetera. Now let's talk about the monochromatic combination, and these one is the one that we create when you take a color in the will and then just combine itself with, um, different amounts off black or white. So if we would take a blue one, then we will just have to add a little bit of white to have a more lighter tone or a little bit of black toe ad to create a more darker tone. And this is a very modern combination and very, very harmonic one, so you should take it into account when creating your design. 15. Typography basics: in the section. We're going to talk about typography, and this is an extremely important topic, and it's gonna have a huge impact on what your users think and how they process the information off your website. Because depending on what kind of typography you use, you can send a completely different message even while using the same sentence. So just check his example where it's just a simple sentence. You'll always be mine. And if we write it like this, it can be perceived as very romantic. But if we just change the typography, then suddenly it can send a very, very creepy and d friend message. So one of the things that you need to take into account when talking about typography is that they're two different, Um, in terms that people confuse a lot. The 1st 1 is the type, and this is basically the variation off the weight. Whether is bold, italic or what is it? Well, this style is the different family. The type face is cold and, for example, arial Helvetica, all of these these are called the typeface, and you should be careful. Cause a lot of people tend to confused is both terms. So now that you know the difference, we're going to see some examples off different type faces and different funds. So our first example of type face it's gonna be the sounds Serif one. And this one looks just very simple and is one of the biggest families were gonna go more into detail. The 2nd 1 is the serial one, which is the one that has this legal things at the end off the characters. Now we also have this laugh serif. We have the script phones which are the most the curly er ones. We have a swell the Mona spaced ones, and we have as well d display funds, so you can see examples of each of them. And now we're going to check out the examples for different kinds off funds. So the 1st 1 is, of course, the irregular one debt, most basic, one off each typography. We also have the condensed one, which is a little bit of most stretched horizontally. And then we have the metallic one, which is also a little bit just more laying down to the right side. We can have the metallic also in bold, and we can have a swell the bold one, just the regular one, but a lead a bit more like strong. And then we also have the black one. Now we are gonna go a little bit more into detail with a lot dio d mean and what are they related to? Because this is a kind of message that your users are gonna perceive, depending on the type of topography that you're using. So the serif ones are very related to tradition, respect, reliability and comport, while the sun surf ones are a little bit more modern, more clean, more objective, more stable. This script ones are related to elegance, affection and create TV team. The display ones will look a little bit more friendly, expressive, unique and amusing, and modern ones are a little bit more strong, more progressive, Styler and more chic. 16. Serif and Sans Serif families: in this section, we're going to see a leader been more in detail. The two biggest families and these ones are the serif and the sound serve. So let's start by the 1st 1 And these ones are very recognizable because of the leader lines that they have at the ends and the extremes off each character. So these comes from the antique times where people had to carve the laterals on stone, and it was almost impossible to carve the letters out without leaving thes legal lines at the end. So since they come from this, antique times take even impression to be very traditional, very conservative. And examples of this ones are the times to Georgia, the garment and the career. Now let's talk about the four kinds of families that thesis ones have. The 1st 1 is the most antique one and is the old style won a big example for the stay. Progra fee is the adult Jensen. Now let's move on to the transitional. An example of this one will be the topography Bhaskar Bill. A little bit more modern. Let's look at this modern family. One example is dead topography deduct, and finally we have the slab serif ones, and these ones come from the times off the newspapers, where they used to print the letters into a bad quality paper. And these letters were very wet so they would leave this marks like they would split a little bit. Now let's move on to the San Serif family, and these family is very recognized for being seen as more modern, for it's approached. That is very simple, very minimal. And some examples of this apostrophe r the news Gothic, DLV, Erica, Jill Sands and Futura and these ones also just Aziz. The Sarah family are classified in four types, and the 1st 1 did we're going to talk about is the family grotesque and two, Thesis one. We can classify the topography news Gothic, for example. Now the 2nd 1 will be the neo grew tisk family, and to this one belongs topography. Helvetica, which is one of the most well known topography, is in the world now. We also have the humanist family and the Deal. Sands will belong to this one, and the last one will be the geometric family and two D's One belongs to typography Futura 17. How to choose a good typography: So now that you know the basics about topography and what each off the thief friend families represent, you can start choosing the typography is that you're gonna use on your website. And for these, you will also need to take into account your brand, your company in water, the values that you're trying to transmit. Maybe. Is it a more modern one, or is it a more conservative? Is it a playful brand or is it a more look, sir? Use more serious, more grown up. One you're gonna have Teoh take into account what kind off users are the young Artur on their fifties? I don't know. All of the's legal details are going to make an influence in the things that you want to transmit to them and how to approach them. So this is the first thing you need to take into account your brand and your users Also, maybe the location may be the kind of country you're in and what is considering considered there to be more than or playful. And so one now, another factor that you're gonna have to take into account when choosing your topography is the readability, and these is just the capacity that a tape longer if he has to be processed easily by the human eye. So this one will depend on tiny little factors like maybe the type of lines that the serif typography is have this one's are going to be a leader, been more difficult to process because it takes a little bit off more time for the human I to to just recognize them. And these is gonna make a huge influence in different situations. So if, for example, you're trying to make the user read a big bunch of text, you should have a typography that is very easy to consume. So instead of using a serif typography, you should use a Sand Saref, one, which is more clear and more easy to read. Also, there are situations where this will have a life or dead kind of influence. So, for example, if the users are on a highway and you're making an advertisement it in, you should be able to read that quickly because otherwise he'll get distracted. So for advertisements, then the Sand Saref type will be more ad equate while if you have a title than it's completely okay to use this serve typography. So just to make like a wrap up the TIFs for working with typography or for using different kinds is 1st 1 be where that it's better to makes two different kinds of families. So if you have ah, serif typography for the title, then you should take a sans serif one for the content. Also, just a site said the San Serif ones are very good for bodies because they're easier to consume now. Another thing that you can combine are the mood and the era. So if you have to modern types than this is a good combination, or if you have to antique types, then it would also be good to combine them to put them together, while the kind of family is something you have to contrast also, the serif nous and wait. So trying not to put too serif types together and to San Serif types together thes will make and not such a good mix. Also try to avoid using more than three typography is at the same time, and whatever you do, just please please avoid thes typography. Ease comic sons Kristen appears Viner, Kroll's and Symbol thes are topography ease that were very overused and that are not seen is good in the industry. So everybody will think that you didn't put any effort in choosing the typography off your website. So it just please please keep that into account. 18. Tools for working with typography: this video, I'm going to show you a couple of tools and websites that are going to be very useful for you when working with typography is, and with phones just suited, you can spy on what kind of typography somebody's using or you can just find different topography is if you already know the name and just go ahead and download them. The first tool that I want to show you is called what the fund or my funds and is a website where you can just I upload images, and then the software will just immediately recognize what kind of typography is this image using. So if you check out a website that you really like, but you don't know what kind of typography they're using, but you would like to use it for either your website or for your logo or whatever it is, you just go to this website, and as you can see, you can just drag and drop any image, or you can just upload. Any file is very easy to use, and then it will immediately recognize what kind of funds are using. It also has some recommendations and typography, so you can just click around and check out what they have, and I will show you just ah examples text so you can just go ahead and write up anything and I'll show you in the typography ease in the recommended ones. How would it sticks to look like in different environments so you can just take around and capital letters Or just It's normal regular letters and write whatever you want to see how it looked like. And then you can go ahead and download the front. It's very easy to use. It also has offers. It has a lot of things, so you can just click around, get some inspiration, or you can just use it to find out what kind of typography this, your image half another off the features is that you can just check around. What kind of price do these images have and downloaded directly so you can just check which one is free and get started? The next tool that I want to show you is a website called Fonts Girl and, he said, plays very similar to my phones or what the fund, or you can just find out different typography ease so they have them classified in different categories, and you can just go to this one if you already know what kind of funds you want to use, or what is the style did you want for for your typography? They also have different features, like they have been classified by languages so you can just find Arabic, Chinese and different type of characters. And Justus my phone's. It also has a fund identifier, so it works very similar. You just have to upload the image, and then they will recognize what kind of funded is, and then you can just go ahead, look for the name and buy it. So if you check, they also have, like, recent fawn stop deals and a lot of features. So you just have to go check of your phone and then click on it and immediately redirect you to the website, where you can just download it or buy it and they'll have to prices so you can find free ones. Or if you're really ready to give more, you can also do it, and I want to show you two more tool. So the first of these ones is called the Phoned, where you can just find different topography is and also download them or by them. So if you go to their website, they're gonna have many different styles already that are just, um, recommended to you. But you will also have all the categories and topics. So they have, like, different looks they have, like the Gothic topography is, or the more modern ones. And you can also just type your text and preview how it's gonna look like justice, the same US Skrill, and then go ahead and buy Your phone is very similar. And last but not least, we have the last two, which is called Sky Fonts, which is a chilled that will allow you to spy on different funds. So if you have a website where you really like the typography they're using, you can just go ahead to sky funds and install the app, and they will allow you to spy on two different websites and which typography they're using . They have also a lot of things that you can check around. They will also redirect you to my phone's. Just to go ahead and buy different topography is after you found out which one was the one that your website was using. They have news. They have becoming day shows, different styles and so on. So you can just go ahead and click a little bit of round and check out older functions. But it's a really cool one, so you should check it out.