Complete Web Design from Figma to Webflow (New UI)

1. Class Overview: Two types of freelance web designers. First, are chronically overworked and underpaid, every day sending proposals on platforms like Upwork and not getting enough jobs. But you also have web designers who have a constant flow of clients, usually clients seeking them out instead of other way around. They can even fire clients that become not so fun to work with and work as many hours per day as they wish. And they have a freedom to work from anywhere in the world. I know, because I just described myself. Freelance web design gave me freedom to choose my own working hours, which is about 4 hours per day. Still shocking to my overworked friends. I can take days off and vacations without needing anybody's permission, which is my favorite part. And I can take an entire year of dedicating to a personal project, which is exactly what I did to build this course. And if you're willing to put in some work, I will teach you how to make that description true for you as well, or a chance to create your own personal description. Most people who try their luck with freelance web design fail to get there. There are three great obstacles that they face, and one at a time, each of these obstacles remove them from their journey. These courses actually is three and one. Three courses to tackle three big obstacles. The great obstacle number one. Learning to code just takes them too long. Hundreds of thousands of students enroll on web design courses, but only 10%, barely 10% make it through the end. I know this because that's what happened to me. Before I knew how to build websites, I was just a visual designer. I was designing the mockups, a prototype of a website, and I was giving this to my client, and the client then would give these designs to the web developer, usually a Wordpress developer, and that person then would build the whole website. I realized I was leaving a lot of money on the table. If I could also build the entire website, then I would take the whole cake to myself. So I decided to sign up for some coding classes and courses to learn web design in terms of building a website and started learning HTML and CSS and JavaScript and all that. Now, since I've already worked on real projects and I know what my clients real clients ask for in terms of functionality of the website, and often they ask for some complicated and complex custom interactions and animations. So I looked into that how that could be done with what I already know and how much do I have left to learn. When I looked at the whole picture, I realized this was how much I had learned so far. And I thought I had this much left to. To be able to deliver what my clients usually ask for. But in reality, that's how much was left. I put the whole coding thing aside until some indefinite future date. But then I bumped into a web design tool called Webflow and that changed everything. I opened it up, watched some video tutorials. Within a few hours, I'm building a full website from scratch with custom interactions, no templates and nothing. I was blown away, love at first sight. I started offering my clients the full package design and development. I was instantly making three or four times more money than I used to. Clients loved the fact that I was doing the whole thing, and they started flowing. That's something that never happened to me before. Soon enough, I was charging $5,000 for a website without knowing how to code. Webflow gets rid of the biggest obstacle you'll ever face time and dedication to learn how to code a website. Webflow, it's faster, smoother and miles more fun. You will learn how to build amazing websites as good as a pro web designer without needing to write a single line of code. And Webflow isn't one of those lame dragon drop builders like Wix and Weebly. Webflow is a professional tool made for professional web designers and not for regular people. You still need to learn it because you still need to learn how HDML CSS work. You still end up generating code, but Webflow writes it for you. There is a video after this title, What is Webflow. You can watch it if you need more info before enrolling into the course. After some brave students who make through the whole learning process, there awaits an obstacle number two. They can't actually design well. Because almost all web design courses, they're focused on the technical part, which is the coding, HTML, CSS, JavaScript, and all that. But the design itself is part of the graphic design field. Things like color theory, typography, photography, it's more art. And most of them, they never get to learn that crucial skill. And what do most web designers do, they use themes and templates. And sometimes that's a valid thing to do, but high paying clients don't want a template site. They are not going to pay thousands for installing a word press theme. Right? They want a beautiful custom design that's going to put them ahead of their competition, whatever their business is. And if you're a web designer who can deliver that, not only you attract high paying clients, but also your competition is slimmer because not many web designers know how to do that. So I'm going to teach you graphic design but only what's needed for web. So you can learn how to design beautiful and custom websites. You don't have to be creative or have any prerequisites. If you can move a mouse and see colors, I will teach you how to design. Design is quite simple. There are rules, guidelines, and a lot of hidden tricks, and it's fun as hell. To create these designs, we're going to need to use an interface design tool. You see, great websites are not built right away. First, you need to design a prototype, sort of like a non functional drawing of the side, and then you develop it. For that, we're going to use the best tool on the market, which is Figma. It's free, easy to use, yet powerful you'll have design exercises and projects. You'll design company websites, you'll design a blog. You'll learn the process of pro designers from writing a project brief to wire framing to designing the final prototype. In the third course, you'll learn how to do successful frequency because a lot of web designers they trip on this final step. They feel very confused. They don't know how to price themselves. They don't know how to write winning proposals, how to approach clients, and how to perform negotiations and all that. I will teach you secret tips and tricks of successful freelancing. We'll show you the mistakes that many freelancers make. You'll get a powerful proposal template that I've created for you. You learn the secret tips of Apwork the biggest freelancing platform, where I started my web design career. Lastly, I'm going to let you go with a gift. Awesome portfolio website that I designed and built for you. The moment you're done with this course, you're going to have a shiny, impressive portfolio site with portfolio work from this course that is already published on it. Most web designers actually don't have a personal website. You will have no difficulty impressing your potential clients. I'm acoshwll and I'll be your guide on this journey. Now all you have to do is enroll. 2. What is Webflow?: When Apple decided not to include the usual floppy disk drive on their new IMAP, stiff jobs quoted hockey star Wayne Gretzky's Maxim skate where the puck is going, not where it's been. If you're learning new tools, bet on technology that is going forward because by the time you're done learning current industry standard, it might be already dead. In this course, we're not going to learn industry standards like Photoshop and WordPress. Instead, we're going to learn tools of the future Figma and Webflow. It takes a little time for the world to catch up because most people they are reluctant to change. But they will catch up, no doubt about it. Just like there are no floppy disks on your computers anymore. In this video, I want to answer several questions you might have about Webflow. So what is Webflow? Webflow is a no code website builder that is unlike anything else out there. It helps you design and build responsive websites from scratch, like any pro web designer would, but without writing any code. Well, actually, Webflow writes it for you. You design everything visually while Webflow writes clean semantic code for you. You can then either export this code or keep it and host the website in Webflow. In addition to the web designer, it's a CMS platform, sort of like WordPress. Which means you can build full blown dynamic sites like blogs and ecommerce websites. And here is a really big one. With Webflow, you can build rich animations and interactions, something that no other platform has. And if coding, it's something that requires advanced knowledge of Javascript. But in Webflow, you do it visually without even thinking about the code. Learning Webflow feels like learning a new superpower. It's really a groundbreaking tool that is changing the industry, a Tesla of web design. And Twitter is filled with love from Webflow users, anyone from longtime developers to design director of Dropbox. You want site examples, built in Webflow, you don't have to go too far. Webflow's own website is fully built in Webflow. It's far from an average website with non traditional layouts, complex interactions, and animations. It's a great example of the power of Webflow. There's also a showcase page on their site where you can find projects posted by other Webflow designers. Just a couple of examples are enough to show how endless are the possibilities of what you can achieve with Webflow. But it's not without limitations. We cannot build web applications on Webflow, at least not yet. Web applications are sites like Airbnb, Facebook, dropbox, YouTube, basically, anything that has user generated content, where user logs in and creates and add some content on it. These are 100 times more complex than regular company websites. And they are more part of software and web development rather than web design field. We could definitely design the front end of all those websites in Webflow. For example, we could design it and develop it inside Webflow, then export the code, which is HTML, CSS, and JOScrit and give that code that front end code to the developers who then are going to connect it to the web application. Not going to touch on that in this course. Here we're going to learn how to design and build regular websites that make the majority of the web. There is another type of sites you can build on Webflow, ecommerce sites. It's a newer addition to their platform, but we're not going to cover those in this course. The demand for ecommerce sites are much smaller than regular website. So my recommendation would be to go and move to ecommerce site web design and web development once you gain a good enough real work experience with regular and general web design. It doesn't make a lot of sense to jump right into complex, a bit more complex web development, which is ecommerce rather than regular websites, which is much simpler and much more straightforward. One thing you might wonder if there is a demand for Webflow, and that's a valid question because sometimes clients ask for web designers who are specializing in specific platforms like Wordpress, Drupa, and many more. The answer is yes. Just like other platforms, there is also a demand specifically for Webflow designers. Although this demand isn't as big as Wordpress, but that's not much of an issue because majority and most demand for websites and web designers isn't platform specific because clients don't usually care where you're going to build their website. And if they trust you as a web designer, they will trust your preference and your judgment. Are times when you might need to explain why they should go with weblow. However, it's very easy to do because just one single weblow feature is enough to convince them to go for it. Easy clients need to keep their website updated. They need to create content, they need to update the text on the pages, they need to create new blog posts, and so on. In WordPress, they have to update that content in a very complicated clunky, not very user friendly admin panel, which looks something like this. For clients, this is not an exciting thing to use. It's scary and they fear they will break something. Now, in Webflow, clients edit content directly on the live side. No admin panels and weird text editors. They edit exactly what they see. They can change photos, update text, and no way for them to break the side. There are more benefits for clients, and other ways you can make the case for Webflow. I will teach you all about it influencing part of this course. Webflow isn't something that you just jump in and start using and start building websites. It's not as intuitive as something like maybe square space. It has a learning curve. Mainly it's because it is based on the regular code structure that regular web designer and developer would use. For example, you add HTM elements in Webflow and style them using CSS classes, just like what one would do when actually coding the website. If you have some experience with HTML and CSS, definitely it will come in handy. But if you don't have any, don't worry about it. You don't need to have any prior experience, I will teach you everything as we go. During this course, you're going to become a pro user of Webflow, ready to take on real paid website projects right after you're finished with the course. Webflow is free until you need to publish the website, and then you pay for the hosting, which is about $15 per month. But hosting is something that every website owner has to pay, even if they're using free platform like WordPress. But you don't have to worry too much about this. It's not your expense, clients pay for the hosting. In conclusion, Webflow has changed mine and so many other people's careers, and it can do the same for you. 3. Webflow Teaser: Course has six parts. In Part one, you will learn secrets of good design. In Part two, you will practice design on real projects. In part three, you will learn Webflow by building a company's homepage. In Part four, we're going to do a client project from start to finish. I'm going to take you through the same process that I go through with each client. We're going to start by white framing then designing the website in Figma, then taking the whole thing and designing and building inside Webflow with the blog, and finally publishing and delivering it to the client. In Part five, you'll learn the secrets of making money freelancing, and Part six has several advanced tutorials, both in design and Webflow. In the promo video, I mentioned Webflow first, but we actually going to start this course with the design because every good website project starts with the design first. Just like any great building always starts with the architectural plans first, and then comes the since we start working with Webflow only in the third part of this course, I wanted to give you a little taste before we go on. So go ahead and open up on Webflow so we can take it for a quick spin. You should already have the Webflow account from the previous lesson. If not, go to weblow.com and sign up. Use Google Chrome. The Webflow designer works the best in there. After you sign up, you'll get to some version of this page. Or if you're on a dashboard, click New Project button and choose blank site. This is where the magic happens. The website is built right in here. On the left, we have a navigator. It shows the structure of the page and all objects on it. Right now, there is only one object, the body. From the plus icon, we can add new elements. Let's add a container which we can simply drag on the canvas. As a first time user, you'll get this onboarding pop up. You don't need to go through it, but you can if you want to. Also, let's add a heading and a paragraph inside. And write something in it. Et's center the text. We can do that by selecting the container and pressing center alignment under typography. And we're going to add some spacing to move the text in the middle of the screen, keep the container selected, and with your mouse drag this top padding handle. You can toggle a preview mode to see how your page looks like in real time. If you go to Code Export on top of the toolbar, you're going to see the actual code that weblo wrote for us. HTML shows the objects that we have added like the container, heading, and a paragraph. And inside CSS, you will see the style changes that we have made the top padding and the center alignment. We could export this code and host it anywhere else. The page would work perfectly outside of weblo too. But we're not going to do that in this course. The best option is to publish our page on Webflow. So go to publish and click Publish to selected domains. A Once it's done, click the link to open the live site. Your first ever webpage built from scratch, ugly and useless, but still a webpage. Without knowing how to design, all our websites would look as unappealing as this one, even if we were pro Webflow designers. The design skill always comes first. We're going to put the Webflow aside for now and learn and practice good design and then in part three, come back to Webflow, so we can make the magic happen and design and build beautiful website. 4. PART 1: SECRETS OF GOOD DESIGN: I haven't started in in our school. I don't think I've been being inside one. My favorite subject in school was mathematics, and I didn't like to draw. Never in my life I would ever consider becoming a designer. My friend and business partner at the time was a graphic designer. Hey, went to an art school and then was a regular gaps for graphic designer. And one day I discovered that he didn't know how to draw. You couldn't drop and give him a strange low. What do you mean? You control your A graphic designer, right? It was like That's fun, isn't it? Explains them to be a designer, you don't have to know how to draw. You don't have to have some innate talent for creativity or be a flamboyant artist. Design has rules and techniques and guidelines, and you just need to learn how to follow them. I was shocked. I thought Wait a second. Like I felt like I just discovered some amazing secret. This world has been hiding from me. And in this part of the course, this is exactly what I want to take you. All those little tricks and guidelines that makes something look so designed and I want to teach you and show you how simple it is to turn something that is gonna just random content and turn it into a beautiful design competition. I will give you assignments and practice exercises so you can get your hands dirty. We'll learn how to use a design tool called Fig MMA. It's a simple two, and we're going to learn it in a step by step manner, so we're not gonna turn it inside out. We'll learn new features as we go and as we practiced for different designs, and as a matter of fact, design isn't really in the tool. You don't become a graphic designer or a Web designer just by learning photo shop, our sketch or whatever it's designing some mental scale. In reality, it's not that creativity that people really think about. It's obviously there is a lot of creative part inside, but often it's a mental skin, and the way you're looking at things sort of like the way the car mechanic looks at the car and here's the engine off the car and then understands just by looking at something, and just by hearing the sound. Where to? Tighten up the screws on where to listen. Listen them up going to teach you this exact design scale so you can take a blank canvas and create something very attractive out of it. 5. Getting started with Figma: We dive into design. Let's first set up FIMA. It's going to be a quick overview. I'm going to show you just a general understanding of how the tool works, and all the important features that we will need to design websites in FIPMA. I'll teach you them and show you them as we move through the material and as you need them, right away. First things first, let's download FIMA, We have two options, Mac and Windows. I'm on a Mac, but Windows app works and looks the same. So even on windows, you will be able to follow uttorials perfectly. If you're on Linux or some other operating system, don't worry you can use Figma directly in your browser. It's that awesome, but I strongly recommend using desktop app if you have a chance. Now let's install it. On a MAC, it just needs to be moved to the applications folder, and that's all. I don't know how the installation works on windows, but I'm sure it's not your first time installing an application, so just go with the usual installation process. This is the initial registration screen. Sign up with Google, if you want to make it easier or sign up with an e mail. It's going to ask you to verify your e mail address. You name, what kind of work you do design. Figma free version has some limitations, but nothing crucial for a Freelance designer. You can easily use it for free forever. And we're going to arrive on our home page, which is our file browser. All your Figma files will show here. Figma is cloud based, so you will need Internet when working with it. You can work offline, but only if you load the file before going offline. Then you can work with a file, and once you get back online, it will sync and update that file. It's okay, but I wouldn't recommend doing this. You don't want to risk losing your hard work. Let's start by creating a new file. We can do that from here or here. Now we are in the Figma editor. This is where everything happens. Nothing to be scared of. It's quite simple. Open files will show a tab like your browser. If you want to get back to the homepage to open another file, you can do that from this icon right here. Or if you're working from the browser, then you can either click the parent folder of the file right here. It will say drafts in most cases, but if you're working under a team plan, then it might say the name of the team or the project. Or under this dropdown, you can select back to files. To get back to the file, you just need to select the open tab if the file is still open. But if it's not open, then all of your files will show here on the resents tab. More precise locations for those files will be either drafts folder or one of the team folders. But the team is a paid feature and the free plan only allows three files. In case you ever get a message that you've reached the limit of files, it's just about the team files. Inside drafts folder, you can have unlimited free files. As a freelancer, the drafts folder will work for you just fine. Let's go through a tool bar here. As you can see, it only has a handful of tools, nothing like what you'd get in Photoshop. First one is a move tool, the default tool that is selected most of the time. It does exactly what it says. It moves objects and interacts with them. The next one is the frame tool. It's similar to artboard that you get in other design tools. All our designs will start with a frame. Depending what we are designing for, we need to choose a specific size, the screen that we're designing for. Either we're designing a screen for a desktop computer, a laptop, iPhone, and so on. As this is a web design course, we'll be designing for desktop and laptop computers. You can draw it, but better option is to choose one of the preset sizes. Can choose the screen from this drop down. There are iPhones, androids, tablets, even Facebook covers. We're going to choose one of the desktop screen sizes obviously. You're not stuck with these dimensions. If you want, you can resize it like this. By the way, this moving of the canvas that I did, the technical term for this is panic. I'm doing this by swiping with two fingers on my touchpad. If you are on a laptop, you should be able to do the same. If you are using a mouse, then you can use the scroll wheel to pan up or down or hold shift, and it will pan left or right. But a better option with the mouse might be to hold down the space bar that will activate a hand tool, and then you can click and drag the canvas as you wish. There's also zooming you'll need to do from time to time. On a touchpad, again, that's easy. Need to pinch with two fingers. Exactly the way you'd do it on your phone. With a mouse, you'll need to hold down a control or command on Mac while you scroll. Up next is a shape tool. When you click a tiny arrow, it will let you select any of the following shapes like rectangle, line, et cetera. Let's draw a rectangle. It's the first thing selected by default. On the frame, you draw a rectangle like this. Click and drag. Same logic for other shapes. Then we have a pen tool. Don't worry about this for now, we won't be using it that much. Next to, it is a text tool, pretty straightforward. The commenting tool, this is for collaboration. When you send it to your client or team members to review, they can directly comment on each element, very handy tool. Here we have actions menu, which is the home for many different features. All the Figma settings and options you can find from here, for example, Zoom, or dark mode. I actually prefer the light mode. You can open up the menu using a shortcut, Control K or command K on MAC. You can actually see all the shortcuts when you hover over each of these toolbar items. Inside actions, man, you will find tabs for assets and plugins. Assets are basically small components that we create in our file, more on that later. Plugins and widges that are created by the community. They're like mini apps that can make our work in Figma more efficient and more productive. Sometimes they're paid, sometimes they're free. And last but not, you can find Figma AI in here. If you played with Chat or any other EI tools already, then it basically works the same way. You give it a prompt, and it will generate either content for you, images, or even designs. Well, it's an AI. What do you expect? It's hit and miss. The fig MI is paid, so I'm not going to be using it much in this course because my goal is to teach you skills using free tools and free features, so you don't have to make any extra investments while you learn. Then we have a dev mode, that's another paid feature, which is not needed for this course nor for freelance web design. It's a feature for developers. It facilitates the design handoff process when the designer delivers the designs to developers to build an app or a web interface. The developers will be able to find all the necessary elements and information in a format and language that is more useful to them. That's all you need to know about the t bar for now. On the other side, we have the property panel. Fn thing about properties panel is that it changes based on an object you have selected. We select a act angle and we get all the properties for this particular act angle. When we select text, we get slightly different properties, font, text size, so on. We'll explore each of these properties later when we actually need them. No need to worry about them right now. Finally, on the left side, we have the navigation panel, which has a few different sections. There is the main menu. You'll see all the FICMA settings and options here again. File name and some actions of the file. File versus asset stab, that's the same assets that you find in the menu below. Pages because we can have multiple pages in our file, and the layer section. Every new element that we create will show up here under layers. Now, why is it called layers? And why not objects or elements or something like that? Because they lay on top of each other. They exist in the layered space. For example, if we want the purple box to go below, we just need to drag that layer and move it below the gray rectangle. All these objects are the children of our frame called desktop. That's where they live. And if we move any of these objects outside of this frame, you'll see how the layer spanel will update and will move the object outside of the frame onto the general Canvas. That's all you need to know about Figma for now. More features will come up in all the practice exercises that we're going to do. If you haven't been following along, stop pause and go ahead and do this right now, and then continue with the next lesson. If at any point in this course, you get stuck. You know, it's new tools. They sometimes update and, you know, different things change. And I might not be as quick as updating the screens and everything. Obviously, I will. But, they move very fast, hold these tools and they update screens and user interface very quick. So I might show you something and might be all of a sudden gone. Let me know. I'll fix that. But if you get stuck, you can always drop me a message or ask a question in the discussion forums. Either me or some other student will help you out. 6. Layout is King: take a look at this hero section design. This design isn't bad at all, but there's one thing wrong with it. See if you can notice individual. Each element is variable design, but composition together look somewhat off before were to draw lines on the edges off each element, you'll see that elements aren't really lined up. Fixing this is quite easy. We just lying. Things are as much as we can. A simple trick. Change the same design, looking from clumsy, toe, orderly and polished. Now, if I was to draw lines on the edges, you'd see a simplistic grade with two main vertical access. Why does aligning objects make a composition look better? It's exactly the same reason why this room looks better than this room. It's the order. We avoid chaos and seek order, and everything that is orderly, symmetric and organized will be perceived as more beautiful than anything that is chaotic and disorderly. Some of the most important design rules are about layout. It's a question of where to put things, how to arrange them, what comes after what and upcoming lessons will be talking about all the design techniques and rules related to lay out. This one is about alignment, probably one of the simplest, the most basic but one of the most powerful design rules out there. Just a simple alignment can make something look designed. On the other hand, misalignment will make it look sloppy and amateur work. How many Web developers who don't have a background in design will just drop elements of the page randomly wherever they fit. This makes a page look messy and not attractive at all, but we take every chance to align objects with each other. Then we create something that looks s statically, more attractive. There are six ways you can align objects left alignment. That's the most natural way of the lining things. Because the way we reading Western languages from left to right, it feels the most natural to our eyes to start scanning for objects from top left corner. Then you have the center alignment. This is frequently seen in weapons on last in print design. If you're designing for a rabbit, Hebrew and other right let languages than most natural alignment would be right alignment notches for tax. But for other objects to and there are three similar ways toe the line objects on the horizontal axis. Top lineman center alignment again, but horizontal axes and the bottom alignment. Almost old design software will have alignment action buttons, and they will use this exact icons to represent ege feed my uses three cycles to, and I will show you where they are. In this example, you can see that with a line objects on their left edges. Alignment is the first staff for a good layer. When you start lining things up, you'll see that the layout starts to form some sort of a structure. This is called the Great. It's the way of organizing elements on the page to put them in a recognizable structure. But what design really likes the greed that is divided in equal sizes? So if we were to draw eight equal with columns that are spaced out evenly and we took all our objects and align them with this columns, then we would get a layout that feels so much more balance and designed. And the final step in this process is to reuse the same values as much as possible. The vertical gas between objects are all 30 pixels, but the horizontal gap is 60 pixels. The right move here would be to make that horizontal gap 30 as well. Now we have a truly balanced layout. Why stick greed so important? It gives the audience the sense of clarity. The agreements aren't actually drawn right, you know, they're implied. And there that and audience sort of feels it. And when Ah, something looks predictable and familiar and because of the repeating creed, the audience and the viewer will trust the website more, and they'll understand. And they know this is the website that it's not going to waste their time. The group rule is flexible on always design inside the great Sometimes sometimes I do. Sometimes I ignore eight. Sometimes I have agreed. And then, you know, I let things sometimes go out of the constraints on guy know many designers to exactly the same, which is, you know, they might not use it, greet completely or they might somehow have it. But, you know, using more in a flexible manner. But for you, in the beginning, I want you to use the greed because for the beginnings and when you're learning how to design it just really amazing way how to kind of ingrained this great design habit inside of you, and then later on you can and cannot go about it a bit more flexible way. We're going to do a practice exercise after this lesson, and I'm going to show you how to easily create agreed Inside Sigma and how Teoh design within the grid. Most of the design rules that we're going to be speaking in this course can be broken, although if we're breaking a design rule, we have to do with an intention, because if we're not doing it with an attention in which we are not really thinking about, it, probably were being sloppy. One very common design Lee out to use in Web design is a center lee out, which doesn't really fall under a proper grid. Let's take a look at this example. There's no prominent grid on this section that artists free flowing, and the elements in the middle aren't creating any sort of grid. However, it still looks good and doesn't look sloppy at all because at least there is an alignment. You can break greed, but it can really break in alignment. We can feel the imaginary vertical line thesis elements are aligned with imprint design, the rarely use center alignment. However, unlike print, the website can be viewed on hundreds of different screen sizes anywhere from a tiny smartphone toe. A large TV screen. Because of these are upsides have become responsive. The content can shrink or expand, depending on the screen is being viewed on imprint. The designer would mold the elements to his absolute. Were Whatever is printed wasn't going to change shape or size. So you know he would achieve an optimal result. This is why you see crazy layout in magazines, but not in Web. So that's alignment and greed in theory. Up next, we're going to practice alignment in Great so you can make it as part of your design process. 8. Assignment: Alignment & Grid: This video, you're going to practice alignment. You're going to create a very simple design in Figma, and you're going to submit that in an assignment. After this, it's a follow along video, so fire up your Figma. We're not going to design anything useful. The purpose of this exercise is to practice alignment and gain some hands on experience with Figma. We are going to sketch a hero section of a web page. Sometimes also called a header or above the fold. We're not going to do anything fancy, no images, no text, just bunch of rac technical like a doodle. What's the first thing we insert when we start any design? Right frame. As I've showed this in the Figma ttorial, we can add a frame by selecting a frame tool and then selecting one of the presets from the properties panel. Let's select the desktop frame. Next, we're going to define our grid for this frame. Why? Because we want to structure our websites in a way that it looks neat and organize. Setting up a grid in Figma is very simple. Grids apply to each frame individually, so we need to select the frame and in the properties panel, we will get an option to add a new layout grid. Don't forget to select the frame, otherwise this won't show up. By default, we get this two dimensional grid that divides a frame in little squares that are ten pixel in size. But this is not the grid we want. What we want is a vertical grid that divides the page in several columns. The most widely used layout grid in web design is 12 column grid, y, 12 columns because it divides really well. 12 is a multiple of three and four, so 12 column can be split in half with six columns on each side. It can be split in three with each part being four column wide, or it can be split in four with each part being three column wide. Layout grades will offer less options. For example, ten or eight column grid can be split in three equal sizes. It's very limiting. To apply 12 point grade from the drop down select columns, and in the county pin 12. Now let's adjust some spacing of our grid. The content on the website isn't usually laid out on the edges. There are margins on the edges of any website and the content is laid out in the center. We can apply those margins to our grid right here. Something like 140 pixels should be fine. If we increase the margin, you can see how columns start to shrink. One more thing I'd like to adjust here is the spacing between the columns. This is called the gutter. By default, it's 20 pixels, but for me, it's not enough. I'd like to create a bit more sep separation between the objects around 30 or 40 pixels. All right. This is our grid. I'd like you to create the exact same grid with the same values. This is where we're going to lay out our website content. The grid is an overlay. You cannot select it with your mouse, and we can show or hide the grid right from here. There is a shortcut next to it. It's showing for Mac, which is Control G. On windows, it's probably something else, but you'll be able to see it if you are on windows. And there that's where our design will go. Next, I want to give this frame a background color for no particular reason just for fun. How do we do that? Remember, for any object that you want to add it, you have to first select that object. Property spanel instantly updates as you select it. And now we have an option right here to change the background color. This is a very standard color picker that you'd see on nearly any other design or non design application. Later, we will learn color in more detail, and also I will show you how to work this color picker like a pro. You can pick any color you prefer or keep it white if you would like. If your background color and the grid don't have a good contrast, you can always adjust the color of the grid. See. That's much better. Now, let's start laying out some general elements that we would have on a standard website. Remember, we're just doing a super simple wireframe, so we're going to use just rectangles. What do we have on top of every website, a navigation bar, which usually contains a logo and some links to different pages on the side. Let's draw a rectangle that's going to be our bar. You'll hear me sometimes use ward bar as a short navigation bar. I like being precise, so I'm going to change the height of this rectangle to seven pixels from here. The H is a value for the height and the W is the value for the width. Here's a quick tip. If you press your keyboard arrows up and down, while being inside this field, you can increase or decrease values just like that. If you hold shift at the same time, instead of increasing the value by one pixel, it will increase it by ten pixels. Okay. Let's give this navigation bar a slightly darker color. One more time, if we want to add in an object, we select it, and we will have all the properties in the panel right here, and we can change the field color of this rectangle from here. I'm going to make it black, but we'll make it transparent. This slider here changes the transparency of the color. This is commonly called opacity. You've probably heard this term before. Also, you can set the opacity from this percentage box. Let's set it to 20%. This is a little design trick to maintain the same color palette. You can use black or white overlays that are semi transparent. As a result, the background color spreads through it and you get a color that is part of the same color palette. Next, let's draw a logo on the left side. We're going to draw a rectangle as a placeholder for the logo. Here is where the grid starts to come in play. When we start drawing objects, we are going to place them within these grid columns. Our options are either to fit it in one column, two column three, and so on. For our logo, we have an option to go for one or two columns. Let's go with two. The grid makes our decision process much simpler. We only had to decide between two sizes instead of deciding between hundreds of different pixel sizes. As you recise objects, you will see the smart guides that appear when your object aligns to the edge of the grid column. That will help you size them precisely. Let's change the color, the color is up to you. Another thing I want to do is to make this rounded rectangle. To do so, we'll need to change what's called a corner radius. I want it completely rounded. This value will depend on the dimensions of the rectangle, so just increase it until it's fully rounded. Doesn't matter if you get a very weird value. That's our placeholder for the logo. Now we need navigation links. I'm just going to duplicate this box. There are a couple of ways you can do that. The most obvious ways to go Control C, Control V, or command C, command V on the mac. That's going to paste it right on top and then you can drag it from there. But my favorite way to duplicate something is to press out or option on Mac and then drag that object. That's going to duplicate the original object. Let's make this ten pixel smaller and fit it into one column only to make it look a little more like a link. Now, let's drag a few more of these and align them with columns. Red Quick guides help you with alignment. However, Figma can also do that aligning for you. First, we need to select the objects for aligning. You can just drag a cursor around your objects. Now we can align these objects with one of these options. You can probably recognize the shapes from the previous lesson. The first option will align objects to the left, but that's not what we want. We want this option to center objects horizontally. That's our n bar. Now for the rest of the content. What do we have on our hero section? A headline, right. Again, let's duplicate this rectangle and make it look more like a headline. After the headline, we usually have a paragraph explaining the company or the product. Let's draw a little something that looks like a paragraph. All right, that's our paragraph placeholder. And after the paragraph, we usually have buttons asking to us to sign up, learn more, and so on. And that's our heroes action. Let's see how it looks without the grid. That's a very simple exercise to get you started and comfortable with Figma and practice beginning steps of web design. We created nothing useful, but we took a very important step. Jeff Pazos, the CEO of Amazon, loves this Latin saying. Step by step ferociously. This is how we're going to approach this course. We're going to take one step at a time, leading us to the final goal ferociously. 9. Layout: Importance of Visual Hierarchy: meet links cars dot com one of the most terrifying websites I've ever seen. What does that make some websites so hilariously terrible? And what makes other looks well designed already covered? The first big reason that alignment this page hates alignment its anti ally. The second big reason is a visual hierarchy. Every object on this godforsaken page demands our attention all at the same time. We don't know where to look at where to start our journey, and that can be so overwhelming that we would rather close the page. Now this page there's a very strong visual hierarchy. What's the first thing that you looked at? Probably either that funky, colorful art on the ride or the headline. Then comes the rest of the elements, one by want. These composition took us by the hand and guided us step by step on what was the most important information First and second and so on. Check out the two buttons. There's a clear hierarchy, even between them. Obviously, the full button is the Alfa Doc. This is called a visual high rock, and it's a fundamental principle off good design. Visual hierarchy has a lot to do. The way our attention works. We simply cannot focus on more than one thing at a time. This is especially true off our vision. The only very small fraction of what we see what we look at is a high definition. The rest is a low resolution peripheral, er, peripheral blurriness. Do this, make a thumbs up sign, put your hand in front of you and look directly at your thumbnail. And that small some nail is the high definition is the only high definition that you see the rest off. It is low rez and quite blurry. The hierarchy in design begins with a focal point. Tom Hanks sitting on the bench is the undeniable visual target off this poster. It's the most interesting Hank. Think of a focal point as a spotlight on a stage. You see how this stage is not actually in late. It's dark and oldest, but lines are shining on Michael Jackson, making him the obvious focal point at this stage. If they had the stage completely lied, then everything else would be visible. But that is not their aim. Our visual interest is obviously on Michael, and the stage designers have made sure to give audience exactly that we could This design this graphic guys the focal point off this composition? He's the main hero in it. That's exactly why we're for two than main graphic on the pages. The hero shot was Do a little self critique off one of my early works this the lending page that up built for a real estate agency. I cringe a little when I see a design mistakes in South my early work. But what you gonna do? It's the learning process. The clear villain off this work is definitely a lack off proper visual hierarchy. The forms sort of these unsuccessfully trying to be the focal point. However, it's not supposed to be on top of that Iraq. It's not the main message of this page. So how come is trying to steal so much attention when there's a big background image like this? Usually it's because we wanted to be the hero for the audience to start there, but that's not happening here. It's dark, low quality, and it's not clear what the hell is happening in the image. Not to mention how the huge form and the taxes covering so much off it picks and wonder. What is this image doing? Terrible together? It has no value. It's just adding more noise to the composition. Playing background would be a huge improvement to this. Same with the copy. There's no clear hierarchy. It's hard to tell where headline ands and where paragraph begins, because they're so similar and style when we see good design, a lot of times it's a visual hierarchy that contributes to its beauty. What's there were designing a website or a made up lawyer called Vinson Schwartz. What is the most important thing on this page? Easy. The fact that he's a Boston lawyer or is it his own record? Or is his photo we don't know? Because there's no hierarchy. Everything looks like, Well, we can't really follow the narrative. This is a whole different story. It's 100% improvement, and I haven't done much. I've used a few design tricks to create a clear hierarchy between the objects, and I'm going to teach you all about this tricks later in this part of the course, so you can take something that looks like an amateur, placing elements on the page randomly and turn it into well polished war that you can get paid really well for. Let's break down the high ranking here. Do we have a focal point? Obviously, it's the photo of Vincent and how's the rest of the high regulated out? The second and importance? I'd say the name tag because how close it is to the focal point. It's part of it. So the viewer will glance at the image and the name in one quick oh than the Bold All Caps headline. Fourth is actually the button before the tax because it's ah, larger object with some white space around it. And finally, this up had text. So what exactly did I do here to create this visual hierarchy? How come this? And nearly no hierarchy? But this has a very distinctive vocal point and a clearly defined visual hierarchy among the elements believe this has to do with sizes and weights or elements. Size and weight is what usually defines the hierarchy. There are other ways as well, like collar contrast or images that draw a lot of attention and so on. But designers primarily rely on size and weight first. What I did was to increase the size of the photo. I made it the biggest element. That's it. Whatever is the biggest on the screen will attract the most attention. It's that simple. The purple rectangle behind the picture is also bringing more attention to the photo. Without it, I would have to make the photo much bigger. Then I have defined the hierarchy between the headline paragraph and the button. I made the headline Big, Bold and all caps. Not only Up made the fun size much bigger than the original, but also made it extremely ball thes. Boldness is what I refer to as a weight often element. It looks heavy in the phone families. You'll even see the style called Habit. The paragraph underneath the headline is significantly smaller than the headline. It's like David and the go Hyah! It's a regular phone wait, small caps and small phone size and the button I have made transparent with only the borders. This is commonly known as the Ghost Button. You don't usually want to use this as a primary button, but for secondary actions and in cases where you want to decrease its significance. It's a great use. And last but not least, I have used a batter alignment for the content before it was all just centered in the middle. I do open your center alignment, but often it doesn't do a good job and making the design look polish it and organized the left alignment with agreed definitely does a better job as a fun exercise. I want you to pay attention to the designs around you. Pay attention to the billboards and posters, flyers that people hand you and obviously the websites. And look, if the designer had used a good visual hierarchy or not, and up next, we're going to practice hierarchy, stick around. 10. Assignment: Visual Hierarchy: Video, we're going to practice visual hierarchy. We're going to take the content from that lawyer website and apply whatever we have already learned about visual hierarchy and alignment and practice it and apply it to our example. It's a follow along video, so fire up your Figma. Go to the Figma file that I have linked in the resources. The files that are linked should automatically create a copy in your account once you log in. If next to the file name, it says view only or locked, that means it didn't duplicate. You'll need to create a copy of the file before you can edit. Next to the file name, click the arrow and select duplicate to your drafts. That will create a copy of the file in your Figma account and you'll be able to edit the file as you wish. Now let's give this design another redo. We just need to apply what we've already learned so far. You'll see how thinking about hierarchy and alignment is going to take care of most of the designing for us. Let's start with our grid. Remember how to add that. We have to select the frame first and then the layout grid option will appear in the property spanel. Just like the last time, Columns 12 30 pixel gutter, but 60 pixel margin this time because we're using a smaller mac book frame instead of the desktop. The n bar fits perfectly on the edges of this grid because this is exactly what I was using when designing the n bar. For that reason, we can leave the navigation bar in this position. You'll see that links in the navigation bar don't align with the grid columns, but that's all right. As I said before, grid is a guideline and a forceful rule. We don't always have to take it literally. If we align the button and the links to columns, in this case, we wouldn't get the best results. For example, one column is too small for the button and two columns are too big. Let's think about the visual hierarchy. Remember, what's the name for the visually most interesting object, the focal point. Using the photo as a focal point is a good idea. When you have photos, especially of people, usually it's a great idea to make them the focal point. How do we do that? Last time, I use some tricks to draw more attention to it, but we can go simpler than that. Making it very large always works. Want something to be noticed, make it big baby. Simple as that. Because it's a vertical photo, as you can see, it doesn't make a good background photo. Instead, we can use it on the half of the screen. This photo is covering up the navigation bar. Remember the layers panel. Since it's a higher layer, it covers up everything underneath. We need to move it below the now bar. We can do that by either dragging it in the layers panel, but easier ways to use an option that does this for us. Right click on the photo and select send to B. This will send photo all the way to the back. Now the Navbar is on top. But because Na Bar tax is dark, we can't see anything. Let's fix this. I'm going to disable the grid layout so I can see better what's going on. We can turn that off for the entire document from here, but you'll see me often use a shortcut. Let's now make the Nabbar links white. Good. Let's do something similar with the button. It's not very visible. I could of course flip the colors, make the button white and text dark, but a better looking option in this case is to use either a button or anarent one. Change the background to whe and decrease the opacity of the to about ten to 20 to 20%. I really like the semi transparent buttons. They have a very slick look to them. You can see how our design is starting to take a much better shape with very simple modifications. We have an undeniable focal point of decomposition. Now let's organize our content better and create a visual hierarchy between them. First, let's align them to the left and fit them into a. Now we have to decide on what is going to be our primary message. Here, we have to start thinking a bit deeper about our goals of the website and the visitors. Being a designer isn't just making things look pretty. Often it's thinking about the goals of your design and how to achieve those goals most effectively. A hero section of almost every website has to answer three questions for the user. What is this website about? What am I going to get out of this website and how do I get it? The first question is, what is this website about? Well, it's about Vincent Schwartz, who is a Boston divorce attorney. Now, out of this two information, his name and Boston divorce attorney, which one is more important. This can depend on some other factors. For example, if he is a well known lawyer, then his name would be more important to show first. If he isn't known, then it's more important to show that this page is about Boston Divorce attorney. Let's say we know from the client that his name is an important information and needs to be displayed as the primary info. In that case, we're going to make the name big and bold. I'm going to go much bigger at this time because the focal point, the photo is so much more prominent that I can afford a bigger text. In my previous example, I couldn't go too big because the photo was smaller. For the headline fond, I have chosen a play for display font and use the Black style, which is its heaviest form. There is an entire section of this course dedicated to typography. It's a big topic in design, and you'll learn a lot on how to choose fonts in a way to make your designs look great. In this exercise, you can choose whatever font you like. But pay attention how you choose the weights and sizes of these fonts. The weight of the phone can be selected from here. How many options you get here depends on the phone family and how many weights does it come with? I have chosen a big and heavy style for the name, I'm going to do the opposite for the Boston divorce attorney text. I'm going to keep whatever phone it was and choose a light style and make it even smaller. The subtitle definitely doesn't compete for the attention. The name gets all the spotlight, which is exactly what we want. The hierarchy between the two is clear. Next, let's adjust the paragraph text. I'm going to decrease the size a more and that's it. The button I will live as it is, I will just make it smaller, and that's going to be enough to decrease its importance. That's all, it's looking pretty neat. How about the hierarchy? Do we have a focal point? You bet we do? How about the rest of the elements? We have our headline that is visually most noticeable text, and then the rest of the elements with different degrees of visual importance. That's it. If you haven't been following along, now it's your turn. Feel free to deviate from our version if you prefer it. The important thing is to reach two goals, which is a to have a focal point and B to have a different levels of visual importance between other elements. Set it up to you if you want to use different colors, no problem, different phones, different arrangement, or you can recreate my virgin pixel to pixel. Doesn't matter. The important thing is you start thinking like a designer and start noticing and have visual hierarchy in your mind at all times. 11. Layout: Beware of Optical Illusions: between these two horizontal lies, just the lions, not counting their own heads, which one off this lines is longer, Just like 8% of the people. You probably went with the bottom line, but the truth is that their exact the same length thes sort of optical illusions happen all the time. In design, you will take two objects, measure them and see that they are often exact size. But our eyes tell is that the circle is slightly smaller than the square. So what do we do in such cases? Do we go? What are ruler says, Or do we trust our eyes? Most of the time, we're going to trust our eyes. That means if an object appear slightly smaller than its counterpart, we need to compensate for the optical illusion and increase the size slightly until the both appear the equal size. Then we're going to have to objects that appear the same size. This is more important than their actual pixel sizes because audience isn't going to get out the rulers and start measuring. But if something looks smaller, they will find it ought. Illustrations are common graphic elements that you will use in your Web designs. A lot of times these illustrations, or Aikens, are going to have very, uh, shapes. It's gonna make equal size. Illustrations look very different from each other. In this example, Envelope on the Laughed looks bigger. It's overpowering the icon on the right when they are supposed to have equal hierarchy. Although their sizes are identical, they have both the same height and the same with, but the envelope has much fuller body compared to that tent. This is what designers usually referred to as the ways off the object, and heavier objects will look bigger. They will look wider or taller, so we need to manually compensate for the tense, lighter body by increasing its actual pixel dimensions. There is no rule on how much to increase. This has to be done by I increase it until they feel like equal size. Then you'll get balanced composition that feels aligned with matching sizes. These tiny little do tell us is what makes the page look like it was designed by an amateur or a pro. Most Web designers and developers who don't have a background in graphic design or anything designed related. They measure things by a ruler. And what happens is the results come out to be inconsistent and quite clumsy, declined or user isn't going to notice what is exactly wrong with a page. They will notice it, but they won't know what exactly is off with it, but they will fail that the page isn't quote unquote designed. Here's another very common optical illusion. This waas, one of the very first, is Unless is that I received from my design mentor. Whenever we need to put something, for example, tax inside of box, what does one usually do? Find the exact middle off the container in place there, element right in the center. The issue with this is that text feels like it's sinking. It even feels like space above the Texas larger compared to the space below it, sinking feeling isn't a good impression for any design. Instead, what we want to do is to notch the tax a little towards the top, so it feels like it's floating to remember easily. Think of it as a ship sinking ship. Not good floating ship. Great. This doesn't mean you should always nudge it up instead of aligning exactly in the middle. Sometimes it won't be necessary. It will depend on the typography, spacing and so on, just like all optical illusions. Either it appears, or it doesn't no need to fix an illusion if it doesn't exist. But if you see this sinking, the fact, then fix it. As a matter of fact, heavier looking objects will feel like they're sinking Mawr, and lighter objects will tend to feel like they're floating. It's crazy how accurate this is to a real world. 12. Layout: Proximity: one thing. Beginner designers tend to do a space out elements equally on the page. Mainly, they do these to fill them to space because all beginner designers have a fear of empty space. More about this in the later lesson. But what design actually likes is grouping elements closer to each other if they have something in common. This is a design concept called proximity. The basic idea of proximity is that thinks that are related should be close together, and things that are non related should be farther apart. In this example, I have moved all the navigation links closer to each other because they are related. They have a same context. Now the headline is closer to the text underneath because they are related. The buttons are a little farther from the tax, but two of them are close to each other because they're similar action batons. They both offer what to do next, and finally the little tax underneath the green button. I have moved much closer to the bottom because it's sort of a description off the buttons so it can even exist without it. Now what happens if you put unrelated elements close to each other well, this will imply of relation, which in fact doesn't exist. For example, if we put a slogan right next to the navigation links because off its proximity, users will easily confuse the slogan with a menu item and will think it's a clip clickable link, especially if those elements have a similar style. Proximity is a very useful design guideline. Not only it makes content easy to understand and digest for the user, but it also makes it pretty and design. And I guess you know things that are simple and easy to understand is quite beautiful for the users. 13. How to Use Typography Beautifully: every website out there has text on it, and a lot of design depends on how we select that taxed styles. This is called typography. Typography isn't just choosing the right phoned. It's about choosing the combination off those phones, the different styles like skinny and bold and regular and wait, choosing right typefaces and phones for the right occasions and bright contacts. Topography can make website grade and with outstanding readability. Or it can make it childish looking, or maybe out of contacts or look confusing and very hard to rid. You can easily have a website that is typography only and still make it look good and designed without any graphic elements. As a matter of fact, the world's most popular website is primarily just text. If taxes this important in design, then there must be some rules and guidelines on how to choose the and use them, right? You bet there are, and you'll learn all about them in next few less inches. Following the simple guidelines will make your designs look great. You'll hear me use the terms typeface type and fallen interchangeably type of short for typeface, and the difference between typeface and font is this in this case. Hello, Vatikai za typeface family that has many different phone styles in it, like light, bold and so on. Doesn't matter which term we use, not really, but it's still good to know the difference and not get confused. I remember I was confused in the beginning because everybody was using whatever they wanted and he had phones and types and typefaces, and I was like, Am I using the correct thing for my designs? 14. Typography: Typeface Comes With a Personality: each time. Face has a personality. Some are fun and playful, summer streaked and blonde, and some feel academic and fancy. The personality of a typeface is as important as choosing the right outfit for the right occasion. You don't want to be wearing cargo shorts on a date. In offensive restaurant, for example, a typeface called Proxima Soft would be very suitable for a winter holiday page but would be completely out of place on a page that sells luxury office space. Why is this the case? Because Proxima Soft has a casual and friendly personality, just like the name Heene's. The ladders are soft and rounded. They look sort of like they were made off snow. It would be suitable for websites that are related to holy days or Children. Casual food, maybe for websites that want to feel friendly and approachable. Why doesn't work for the luxury of real estate website? For starters, the photo tells us a lot. You see that streak rectangular architecture er, that is already dictating the mood off this composition. It's asking for some something streaked and straight, but more importantly, eats the context. Luxury is the key ward, and there's nothing luxury about Proxima Nova Soft. On the other hand, a typeface called Adoni would be an excellent fit for this page. It's a classic looking typeface. It looks serious, straight and fancy, yet modern. Exactly the words you would use to describe luxury office space. But how can we tell What's the personality of the typeface? Actually, it's not that difficult. There are certain classifications that each typeface falls under. Those already tell a lot of story about the time Let's go through them in our next lesson. And after that, let's do a small exercise to practise tiefest prototype phase personalities. 15. Typography: Typeface Categories: understanding the typeface categories will make it easier for you to choose the right type . Face right phoned for your projects because a lot of personality e sort of dependent on the category, the overall general category that they belong to. First of all, most of the typefaces fall under these two camps serif or sans serif. The difference is super simple. Those tails on the latter are cold. Sarris in French sons means without So Sand Saref means without sorry. Easy is that besides these two broad categories, we have two more display, sometimes called decorative and script. Let's go over each one. Served typefaces have three distinctive styles. Within them. They saw old style. The old style is the most popular style in Serra phones. It's a classics traditional typeface that goes way back. This is the most commonly used style in print, and most books will be sat in this type pace. However, in Web design, old style several phones are starting to appear only now. Print material has higher definition in general than screen tiny service and letters are harder to see on the screen due to lower resolutions and screwing flickering. This was the main reason why sans serif fonts became the dominant style in digital design, although today a screen start becoming higher and higher resolution, several phones are making a comeback, especially in blocks and Internet magazines. Old style typeface, just like the name says, has a very classic personality. They can be used for websites that want to show refined and classical Luke, for example, upscale restaurants, musical instruments, law firms, etcetera. But it can also be quite neutral and used for non classical websites, especially four paragraph tax, as it or for his great readability, modern serif typefaces can be quite similar to the old star. The best way to tell if the funding Modern is by the Flat Saref, as you can see, also has a slanted terry. But Modern has it flat. Another very distinctive characteristic is the dramatic contrast between fix and fence notice how first lag on the Army's seen as a hair, but the second is stickers up Paul. Modern types are frequently used for fashion on all the things off luxury. Although they're not limited to this, it can be used for anything where you want to portray serious modern and refined personality in the previous example, I have used exactly the modern serif type called Adoni. However, I would reserve modern typefaces, Onley for headlines and big tax. That's usually the main purpose they are made for. Andy. Don't have a good readability for long texts. You would have want to read an entire block post Britain in your Knicks. Slapped I faces are boxes. Serves are flat, and they don't have thick and thin contrast. Like the other two, slap phones are suitable for anything that feels mechanical or strong, just like modern style. It's not good for paragraphs. Reserve it for headlines only. Sensory family is going to be the main type that you'll end up using. In most projects, it's the most versatile. It can fit a design with a wide range of personality. It's the safest bat out of all the styles. It can work perfectly in both for small paragraph tax and big display text like headlines. There are a few different styles within sensor, a family like grotesque Joma trick and humanistic. But I'm not going to go over them in detail because there is not that off a significant distinction between them. For me to attribute a dominant personality with each one. You already have a lot of information on your plate, So let's save your brain power for most important stuff. When it comes to San Sarah phones, they had to be judged individually because they can cover a huge range of personalities from playful and solved. Too Serious and conservative have broken down served styles because they can be unified much more easily into a useful category. Like almost every old style, Sara will have the same classic traditional personality. If I really have to generalize the personality of son Serra phones, then I would say they have mostly modern, serious and neutral field display or decorative typefaces are usually the ones that have the strongest personality to that. But this doesn't mean it's a good thing. On the contrary, they have a potential to be quite silly. Their personality can range anywhere from the type that looks like a writing on a chalkboard to something that can be quite elegant. Most of the time, you would want to stay away from thes typefaces because of their unforgiving personality. But sometimes they do come in more neutral and elegant styles, and they can be quite handsome. Nevertheless, no matter how neutral it looks, you never want to use it for paragraph. Text on Lee for big headlines, script typefaces are based on handwriting, just like display very readily. You're going to use scripts style, although there can be times when they come in. Quite handy. Say, if you were to design a website for a child care. A playful 100 Taipei's can give the side a nice personality, but only for headline text. Same as displayed. Don't use scripts style for paragraph text. Most typefaces have been designed with the specific intention. The designer had an intention and the destination for this typeface, and usually they will put it inside the description or, you know, fun. Whatever the menu it comes with, depending where you get the typeface and you will have the sort of description of where you can use that. Here's a pro tip. If the description off the typeface, as that was meant for general used and that means it's safe to use for paragraphs and longer tax. But if it says it was displayed right, it was meant for display. Then that means, even if it was not under display, category. That means the designers intention was to use it for big headlines. So never use it for something like paragraphs or big long tax because they're just not going to be suitable for it. For example, this a Google phone called Railway It's quite popular. The about section says that the typeface is intended for headlines and large tax. But many Web designers have been using it for paragraph tax, making thousands off websites and themes and templates with poor paragraph readability this who could have been avoided if they had just read the manual? So many Web designers haven't had the design training at all. Learning this guy guidelines and following them will definitely give you an edge over those , even if they have years of experience. 16. Assignment: Typeface Personality: Here's a fun exercise on typeface personalities. I wrote out seven different phrases in this Figma file. I want you to choose the typeface for each phrase that you think is suitable for it. You can use either phones that are installed on your computer or Google phones that come with Figma. Google Fonts is a great repository of a lot of free yet beautifully designed phones. When you click the phone selector in Figma, it will give you choices of both the phones that are installed on your computer and also Google phones. Choosing funds right from this dropdown is not very useful. What we can do instead is go on Google Funds website and find the right typeface there. But before we do that, first, we need to understand what we're actually looking for. Imagine that we're building a website for each of these businesses. We need to choose fitting typefaces. We need to get an idea of what would work, look good and be suitable for each of these industries. Here's a simple process on how to get about this. I'll use the Fitness coach for the demonstration. I'm going to take the important keyboards from here, that would be fitness or fitness coach and Google images so I can find examples of what phones are being used for fitness theme. But just fitness or fitness coach is not enough. That will not give us examples of design. To get examples of actual design and typography, we need to add keywords like magazine, poster, brand, logo, website, ads, and now we can build a good idea on what sort of typography is used by other designers. We can see a lot of uppercase, big and bold phones, which makes a lot of sense because fitness associates with strength, bulky muscles, and symmetrical shapes. Combine that with what you've already learned about Typace categories, and that's it. For the fitness coach, I'm looking for a type phase that is symmetrical and bulky looking, something that looks good in uppercase. First, I'm going to type out my phrase in capital letters because that's the style I want to check. Using our actual text for the preview makes looking for the right phone much easier. Now I'm going to filter my search results. We have different filters here quite similar to categories that we already discussed. We have Serif, which has classic, refined and luxurious personality, obviously not very suitable for fitness. Slab Serif potentially could work for fitness. It has a mechanical and strong personality. Sensory, modern minimal neutral will work with fitness because works with anything. Display can have any personality depending on the font it may or may not work with fitness. The handwriting category is the same as script category that I've explained in the previous lesson. It's just a different way to call the same thing. Handwritten fonts are playful, silly, childish, and casual. Unless it's an old style script, then it would be classic and traditional. We have this extra category called monospace. Mono spaced fonts are those where each letter occupies the same amount of horizontal space. That makes each letter easier to read. That's why monospaced fonts are generally used for typesetting computer code. As you can imagine in programming, one wrong character can break the code. There is not much use for it in design, there are some potential uses like if you were to design a page related to programming, vintage computers, or typewriter since monospaced fonts were originally used on typewriters. Out of these categories for the fitness theme, Sans Serif or display are the best place to choose from. Sadly, I'm not able to see the bold versions of these funds directly from here. That would have been idea. Instead, I'm going to have to check the bold version individually on the font page. Monsat is an excellent option. It's heavy, strong, and bulky, just like muscles. I like how balanced and symmetrical each letter is. But before we choose this, remember what we need to do first, we need to read the manual. Let's make sure that the designer didn't intend this typase for something that is not suitable for fitness. It says it was inspired by urban typography. That's suitable for us. It even mentions the keywords like work and dedication. Well, isn't that just great? Work and dedication is directly related to fitness. Done. That's our font. Next, go to the assignment file and apply the font to the text. One thing to note, the assignment files that I share with you should automatically duplicate when you click on them. That way you get the copy of the file into your Figma account. But if you notice that the file is not editable, like in this case, then probably it failed to duplicate. One reason would be because you're not logged in into Figma on your browser. You'll have to log in and then try clicking the link one more time. If it fails still to create a copy, then go to my file and duplicate it from this little drap down. Now that's your own Figma file and you can edit as you wish. All those duplicates are automatically saved inside your Figma account under drafts. From the font selector, I'm going to select Montserrat. As a default, it will be in regular style, but I want it thick and bold. I'm going to select its boldest style, which is called black in this case. Also, I want it to be uppercase. Of course, I can type it out one more time with my caps lock on, but there's an easier way to do this. This link here opens up extra settings and there we can select uppercase. This way, no matter how I type my text caps or not, it will display an uppercase, and you can remove the percse by clicking this option. This is also where you have underlying option if you need it. In this box, I want you to explain your thought process on why you chose the font. In my case, I would write what I already described. Don't skip this last step. To become a designer, you have to start thinking like a designer to actually have a deeper understanding of every step and design decision that you make. I actually, clients, your clients will definitely appreciate this. I remember they always did. I would send this e mail with step by step of major design decisions that I would make. About typefaces or phones and things like that. And in the beginning, I liked doing it. But then I kind of got lazy. And when I didn't write these descriptions of my thought process behind it, revisions increased because now they didn't trust what I had made a choice, and they wanted to review and change phones or change colors or things like that because they thought I just picked them out of nowhere. So definitely practice this, and then when you work with your clients, show them how much thought process has been put behind the scenes. 17. Typography: Setting type: This is the opening title off the movie Gravity. Pay attention to how the type is set. Here's another one from the Dark Knight rises or this one from interstellar. Do you notice the similarity? All three have a very wide letter spacing. Other spacing is one off the attributes that can change about the phone and customize it to your needs. You can make it very tight and snug, or you can make it nice and airy. These sort of extra white spacing is called Panorama. It's a really cool design trick, and it kind of creates is nice, finished and refined. Look and adds an extra importance to the tax and makes it feel like it's saying something very important. If you're ever stuck with a very boring and bland design, you can set your type in Panorama and will instantly going Teoh. Give it a nice and refined look. For instance, if I need to add an extra title to a block off tax that already has a title, I can take that secondary title and set it in Panorama. Their secondary title now is very interesting compared to what we had before. This feels more deliberate it's secondary hands not competing with the original headline. It has its own specific style, so I'll be able to repeat these on other similar blocks of tax and be very identifiable. One big benefit off the Panorama typesetting is that it lets you shrink your phone to very small sizes without losing readability. I've removed the panoramic effect here, and the tax has become much less readable. This means I would have to increase the size of the front, but this now competes too much with the main headline. I wanted to be the secondary information, but it has almost become the primary title. One thing to note. When setting type in this way most of time, you should use upper case. This effect doesn't really work while in lower case letters. Okay, so that's about white space. But how about tighter spacing? When would we want to use that? One? Such cases, when dealing with large, heavy text on large text spaces between letters, are proportionately large. For instance, I was working on a website for a scooter sharing company, As you can see, amusing an enormous fun size that is quite bold and happy. The default letter spacing for these felt a little too spaced out for me, so I added a negative letters basic. If I'm using a very bold and large headline, I want to create a tax that looks bold, heavy and concentrating in one tight space. A refree letter Spacing is the opposite of what I want to achieve, so I tightened things up. In this case. Most of the time, you want to keep the default ladder spacing for your taxed. But in specific cases, you haven't ability to customize the phone to your needs to the rule of thumb. If you're ever adjusting the letter, spacing that increased spacing as phoned gets smaller or lighter and decrease basing, winning gets bigger and bolder. Let's compare these two identical tax blocks. It's same phone size, and the text is exactly the same. Their difference is in their line spacing or line height. The type is sat in aerial 25 pixel size. The left paragraph has a default line high, but on the right, one have increased it. The default line high value off area is very tight. This makes the tax harder to read and follow the increased line spacing on the second blocks. Mixed text mawr Airy. It feels less heavy, easier to read. And even though it's longer in size, it still feels less intimidating than the original. Intimidating taxes something to actually Wolcott for. People don't usually read text on websites. They scan. They're frantically scanning for keywords and phrases to find what they're looking for or to decide if the website it's relevant for them altogether. The text on the ride will help them scan tax easier and find what they are looking for. You can try it yourself positivity and try to read each tax as fast as you can't. You'll notice that you will have much is your and faster speed on the text on the right, The original line spacing will feel like running on a sandy bitch, a little draggy and slow. This issue gets extremely evident when we deal with wide text blocks. When you finish reading one line of tax in this block, jumping on the left to the find following line is a challenge. It's very easy to get lost, and you have to rely on connecting links with context or ah, finger or ruler. Old phones come with their own default lines facing and it changes based on the phone size . Some phones that are very well made and well balance will have better line spacing than others. This, for example, is one of my favorite typefaces, called Avenir. The default line Heidi's 34 pixels on the specific phone size. As you can see, it's not very different from the adjustment that I made for aerial. So in this case, I might even leave the line spacing as its default value. Now there are times when you need to shrink the lines facing instead of increasing it. And that's usually when dealing with large and very bold tax, especially in upper case the default line. Hide on these taxes a little area for me. I chose all capitals and heavy phone to make the headlines purples heavy and strong, concentrated in one place. So in this case, I am going to decrease the line high just a little bit. Now. This version is exactly what I was looking for. We can think of this as a gravity have your objects have stronger gravity, so they push bother closer and lighter objects? Not as much, so they're floating in space and Fillmore Airy, speaking of phone points, lie regular, semi bold, bold extra bolt having black skinny hairline and so on. This that was called phone weights or styles or thickness. Every typeface will have their own set of weights, some more than others. Things, for example, are phone weights off. A very popular Google phone called Open Sense has five different weights. Area, on the other hand, has only two regular and bold. The typeface that has this little weights is very difficult to work with. On a modern website, you have so many different places that you need to protect on paragraphs on buttons, navigation bar, drop down menus, headlines, secondary headlines, footer links and more. If you pick one high face that has only two weights regular and pull, you will struggle a lot when you need to create a hierarchy and contrast between a headline , an ESOP had you're basically left with the tax size to duel the heavy lifting regular white tax on dark background sometimes looks boulder To compensate for this optical illusion, you may want to use the lighter weight. The tax on these two cars now looks like their same weight But on the previous example, the right taxed looked heavier. Let me show you that one more time, light and regular, another situation where we might need to adjust the weight off the phone is on large text has increased the size off the phone. It becomes heavier both of this irregular weight in this case. But because the first is much larger, it's bodies thicker and heavier. Sometimes we wanted to look similar weight, just different sizes. In such scenario, we will have to pair the light and regular styles. Now the large tax and smaller text feel more like they are off same weight. You can do this in the other direction to by making the smaller attacks a little bolder, you'll need something like semi bald. In this case, if you're typeface doesn't have enough weights, then your hands are tight and you won't be able to achieve optimal results. Pick typefaces that are versatile and have sufficient number of weights. Most motor and general used tie faces today will have at least four ways, which is decent enough. Some complete tie faces will have nine different weights, like this typeface called Montserrat. You're not going to run out off waits here are you So we have letter spacing, line hide and phone waits. These attributes help us with two things mainly want is to make tax easy to read, especially on the body and big tax. And second, to achieve a really good visual hierarchy between different elements, text elements, obviously on the page and in the upcoming lesson, we're going to practice this exact type setting between line heights where you send all that stuff, stick around. 18. Assignment: Setting type: Topography is huge for web design, and learning how to set type properly is going to make you a superior web designer. In this video, we're going to do a little fun exercise on setting type, which basically means simply said it's choosing the right font size, right line heights, weights for the font, and letter spacing. That's all. It just combining all these four different elements to make something look deliberate. As usual, you'll find this figma file under the resources, either on the page that I have linked or under the resources of this video. And in this Figma file, I have arranged five blocks of text. Each one has a headline and a paragraph. Each of these blocks are set up in a different type faces, the same type face for the headline and the paragraph pair. The name of the type faces right here on the corner. Don't worry about the content. It's a dummy text that I've generated randomly. I want you to go through each of these blocks and improve the type setting for each pair. Your goal is to achieve two things. First, good text readability. This can be achieved by mainly adjusting phone sizes and line heights. All the text blocks are set in their default line heights for some of these phones, Their default line height might have pretty good readability like crimson tax here, but for others, it might be a little too tight. There are no specific rules for line heights. Just measure it based on your eye and increase it up and down and see what feels the most pleasant to you when you read it. The same goes for the font size. They are all set in 16 pixels, but as you can see, 16 pixel is quite different from one to another. For example, 16 on crimson tax is way too small. Second, your goal is to achieve good hierarchy between headline and the paragraph. Remember our lesson about hierarchy right, the visual hierarchy makes design easier to follow and more pleasing to an eye. You can achieve this hierarchy between the headline and texts by making the headline very large or very heavy or both. To achieve both of these goals, you are allowed to adjust one the font size. Second, the font weight. And the line heights. No need to worry about the letter spacing. Just keep them as they are. Also, don't change the type face or the color, keep it as they are. You're free to adjust the position of each textbox. In fact, you will most likely need to adjust it because as you start setting your type, things will have to be moved around accordingly. But I want you to keep the width of each textbox as it is. They're all 500 pixels wide right now. I want you to work within those constraints and set your type in a best way within those dimensions. The height of the box will adjust automatically. L et me demonstrate the first one. First, make sure that you have zoomed your Canvas to 100%. Otherwise, you won't see the realistic size. There are many different ways to zoom in and out in Figma. Two most common ways is either pinching your mousepd on laptop. This will probably work on on newer laptops that has the support of multitouch pinching action or another way which is with your mouse wheel, and while holding control or command on Mac. And with your mouse well, just go scroll up and down, and while you hold on control or command, then it's going to zoom in or out. Or my favorite way, which is just to heat the shortcut shift zero, and that's going to instantly zoom into 100%. You can see the shortcut if you go to the few options and then under the dropdown, you can see that Zoom to 100% has this shortcut. Most of your design work should be done in this normal state. Otherwise, you won't be seeing the realistic picture of sizes and proportion. However, it is okay to zoom in and out when you need for some reason. Once we've made sure we're working in a normal Zoom state, first, I will adjust the headline. I want it to be thin. Underneath the font name, you can select the font weight. As I previously mentioned, available options here depend on the font family itself, and if you have installed all the available styles on your computer or if it came with Figma. I select thin. Now to achieve a good visual hierarchy between the headline and the pyro graph, I should increase the headline size. Since I went with a thin headline, I should make it even bigger than what I would do for a heavier textile. I'm pressing an up arrow here, which increases the phone size by one pixel. As I'm enlarging my text, I'm also paying attention to where my tax breaks. Since the width of my text box is fixed, I can break the tax only based on its size or weight. The breaking of the tax is important because you don't want the tax to break on an odd place, like for example, at an article A and the word jumping on the second line. That doesn't make a good readability. In this sentence, that the best line break is when a telescope is on the second line or when buying a telescope is on the second line. I even prefer the second version because there is a logic break in the sentence, the basics of what? Buying a telescope. I quite like how the headline looks. Now I'm going to adjust the paragraph text. In most cases, I wouldn't touch the paragraph weight and keep it regular. Regular is usually the best option for paragraph text, but because I have made the headline quite skinny, the paragraph feels heavy in comparison and is stealing a lot of attention from the headline. Remember, in visual hierarchy, we clearly define what should be the most noticeable element, then second most noticeable, and so on. Now I'm going to increase the line height of this paragraph. The default line height of this font, which is Roboto Roboto. I'm not sure how you pronounce that. It's very tight. Doesn't make a good readability experience. I'm going to increase it from this line height field. All right. This looks great. The headline is thin and slick, but still grabs the main attention, and paragraph t is a and easy to read what an improvement to what it was before. Let me show you what would I change if I went with a heavy headline instead. In this case, I would actually decrease the line height of the headline text. Remember, as I explained in the lesson, when dealing with large and very bold text, we might need to shrink the line height. That's because the letters have gravitational pull and heavier objects pull each other together. In this case, I'm going to return the paragraph text back to regular weight. I generally avoid using thin weights for a paragraph text. On desktop screens that don't have very high pixel density, they can be hard to read. All right, that's it. Very simple and fun exercise to practice setting type and messing around with different values of heights and phone sizes and whatnot. And in the upcoming assignment, I'm going to check out your submission. 19. Typography: Two fonts only: Here's one important rule to follow when choosing typefaces for your projects. Use maximum two fonts for each project and make sure they look different. Let's discuss first half of this role lie only two, because deciphering too many font styles is overwhelming. And two will give you enough room for any specific personality that you want to portray. Say through some display typeface and have something more neutral for the paragraph and other texts. As for the second half of this rule, if used two typefaces that are too similar, you feel like you miss clicked and accidentally picked the wrong phone for one of them. The headline is an Open Sans in their paragraph is set in Roboto. The only contrast that is created is through their size and the weight of the headline. If we put them in same weights and sizes, you'll see they're way too similar, but not the same. If you're going with two very similar types than one, I just go with one of them. That's a perfectly reasonable thing to do. In this example, I replace Open Sans with Playfair display. This looks significantly better. So contrasts between these two typefaces is very high. First one is a modern serif, and the second one is a neutral sans serifs that has high readability for smaller text. Now this looks deliberate and intentional. You don't want the best ways to make these and look good. Make it feel intentional. Sometimes you can break the rules and ignore the guidelines and do something that is completely out of line. But if you, if it feels intentional, it will probably look at this why learning and practicing this design rules and guidelines that's going to make you a very good web designer because your ward will feel and look intentional. It's going to feel like you have put some work and start process behind it. And you weren't just throwing things around finding enough Open Sans and Roboto is very commonly used pairing. This just points to the fact that there are a ton of web designers out there who have no understanding of good design principles. And if you follow this simple typographic guidelines view will make your designs much more superior. This doesn't mean you can pair two sans serif typefaces together. When you do, it just has to make sense. For instance, when a pair to sensory types, it's usually because I want something with a personality for the headline texts and then something neutral with excellent readability for the body text, for the main body takes, I often use the same typefaces across all projects. Depending on what's my obsession for a certain period of time, I choose something that is neutral and has a lot of font weights like Open Sans Roboto or newly this way then I have a lot of freedom with airlines. I can use fonts with limited weights, but a bit more personality. And I will choose something that's most fitting with the personality of that particular project and the brand. 20. Typography: Where to find fonts: Ing phones online is quite simple, and you probably might have some experience already with downloading and looking for some phones online. There are many different paid and free options, so let's go over some of these options. Sites like defondt com have a big selection of free funds. The problem with free fonts is that they can be designed by amateur designers who created them for fun or to gain some font design experience. You could end up with anything from badly spaced font to something like a kitty font. Avoid these sort of refunds until you gain good experience in typography. And even then, it's just best to keep away and stay away from the sort of free funds. Often they are overused, which means there is a lot of different designs or websites that they have been using them, and they have been using them wrongly, and it just has a really bad reputation. Paid phones obviously are more superior option. One benefit of a premium fund is that it can give you your project more unique field because they are not as popular and they're not as overused. With individual paid phones, you pay for each style, usually around 20 to 50 bucks. So if you want an entire family with all the weights, then it can get costly. Also, you have to buy a license for each project separately. So best approach with individual paid phones would be to buy one or two styles for a headline text and as the main body text, where you need a lot of different weights like boats and extra boats and all that stuff, then you can use places like Google Phones and some other options that I mentioned. There's a cheaper way to get hands on a lot of premium phones, and that's by using subscription based sites. The most popular being Adobe phones. The old name is Type kit. Adobe phones is included in their creative cloud subscription. These are subscriptions to Photoshop, Illustrator, and other Adobe software. So if you subscribe to that, you get more than 7,000 Adobe phones with it. The cheapest plan is about $10 a month, I think, so it's a pretty good deal. Personally, my favorite place is Google Phones. It's free. No licensing worries. They are well designed. It's curated by Google, and both Figma and Webflow already come with it. So that just saves me from so much installation and all that headache. My advice for you in the beginning is to stick with Google Phones or Adobe phones. Two together provide more than enough phones that you will need for any project. One important note about phones generally is that phones are actually regular computer files. So that means they can be copied and redistributed countless times. So if you have a file for this particular phone, that doesn't mean you can actually use it. To use a font for a website on your project, either you need to have a license that you paid for, or the font itself has to come with a commercial free for commercial use license. Here's a cool browser extension that I frequently use. It's called Font Phase Ninja, and it lets you see the font that any website is using. I'm a type geek. I love the look of an attractive typeface. So when I see a website that uses a beautiful font and typography, I want to know what it is and save it as an inspiration for my future projects, which basically means so I can steal it and then use it on my projects later. Link in the resources. Install this extension and start noticing different fonts on websites that you visit. Getting curious is a designer's best teacher. Noticing designs around you and examining them closely will teach you a lot and will actually improve your design skills. 21. Assignment: Typeface Pairing: Alright, Piaf your Figma, time for another typography assignment. We're going to put everything you have learned so far about typefaces into practice. Just like in the previous assignment, I have arranged three text blocks. This time, they are all in single typeface. Your task is to pick two phone pairings for each text block. Plus, just like you did in the previous exercise, set the type for each text to achieve one good hierarchy and second good readability, just like you've done the last time. You will pick a total of six different fonts, three, four headlines, and 34 paragraph text. When you choose your type faces, I want you to use what you have learned about type personality. We watch the video about personalities if you need to. I want you to think about the context that you are choosing for and pick one of the type faces that shows the personality that is good for that context. As you read the headlines, you'll notice the first act is about travel and Hawaii. Second one is about cooking and barbecue, and the third one is about technology. Now here's a hint. The type with a personality should be for the headline. For the paragraph, you should choose something a bit more neutral with high readability. By the way, if you're wondering why the text doesn't end properly, I just didn't put the entire article in there. It just been excerpt from some random blog articles that I picked. Let me do a demo for the first one. The text is about travel to the islands of Hawaii. Now I'm going to think about what typeface can display that feeling of travel to beautiful sandy beaches. To get a better feel of style of such theme, I'm going to google some images of Hawaii and see if there is some style of a typography that is used locally in Hawaii. With a quick search, I can see that there are actually certain typefaces that are used in Hawaiian theme. I also search for things like postcards and signs in Hawaii. Look at that. Now I have authentic examples of topography that is actually in use on the islands, and that will remind people of Hawaii. It seems like the script handwritten typeface is the way to go. Let's see what I can find on Google phones that matches this theme. I'm going to filter only handwriting phones and we paste in our text to give me the exact demonstration. You can see that there are several phones that can be quite suitable. This dancing script, for example, looks good. Pay attention to the font name. A lot of times they will give you the hint on what's the theme of the font. Because I googled some images and real examples beforehand, I was able to get the right field for Hawaii. Now picking the font is much easier because I can recognize similarities in the postcards and signs. As a browse phones, I'm also looking for those that have high readability. It doesn't matter that it's a headline. I still want it to be reasonable. Difficult to read phones like this are going to be a bad choice, no matter how good they look. I think I have enough to choose from. Now I'm going to read the manual of these phones that I've selected to see what were they intended for. First is dancing Str. I already see a problem with this phone. On capitalized sentence, like in my headline, the readability was better. But on lowercase words, the readability is significantly decreased. Yes, I'm going to use uppercase for my headline, but what if I change my mind, it very limits my options. The second is Khan script Khan. The description of the phone is quite neutral. It doesn't look like it was intended for a very limited theme. It looks quite fun and laid back just the way I would imagine being in Hawaii, so I'm going to go with it. One thing you'll notice here is that headline isn't really aligned with the paragraph. This happens a lot with large display text. They have extra space and you will need to fix this manually. Otherwise, the design will look unaligned. Remember our lesson about optical illusions. Ruler isn't what matters in design, it's the eye. If something looks not aligned, then it's not an done. Now, it looks on the dot. For the paragraph, I'm going to go with something neutral. The obvious choice would be a sense Serfon. Open ces is an obvious choice. It's a very popular and an excellent font. Roboto is another very popular font. I quite like Latto. It's a very good font that I use frequently. It has a very nice style, even on headlines. And look at this, Latto means summer in Polish. That's certainly a perfect font for our Hawaii them. This was a lucky shot with neutral paragraph t. You don't have to go on a crazy search for the right font that was designed with exactly the same feeling. I'm going to make the paragraph more like a dark gray rather than a full contrast black. This is a great way to add airiness to paragraph t ex without using a thinner font weight. Avoid thin weights for paragraph because they have bad readability on lower resolution screens. There we have it two phone pairs for a Hawaii theme text block. It looks exciting, yes, it's stylish, and it's easy to read. Now it's your turn. One more thing. On top of each text block, I want you to write down your reasoning behind your phone choices. As you've already done in the type personality assignment, remember? Writing down your thought process is going to get you used to thinking like a designer. You'll start seeing things on deeper and more detailed dialogue. And also, you'll realize often that you made a choice for a phone without thinking about it because maybe it just looked pretty. 22. The Art of Color: This is one of my website project. It's a website for a scooter sharing rap. When I was designing this website of Picked a very vibrant green color. The name of the app is go green. The scooters are electric and eco friendly, so this particular green fits the concept really well. It's the right shade of green. But my clients had a different plan and they had me change into this green. This is forest green, not a good match for this product. Forest Green will work well with outdoor related businesses camping, hiking, outdoor clothing, fishing and so on, but not something that is electric and modern green technology. This cholera has made the website look at big nineties, but, you know, sometimes you gotta do what your client says. Clothes can make or break into design, were attracted to the colors that we like and quite repelled. Bio those that we don't beat Web design or other products like cars, closing ketchup bottles, whatever. We might see the best design product. But if we don't like the color, we're not buying it In the upcoming lessons. I'm gonna teach you how to pick and work with colors like a pro to make your designs look great. Stick around 23. Colors: Sampling Colors: well, we know that picking good colors is a very important thing to do in designs. But how do we know what's a good color? And what's a bad collar? You might be thinking? Oh no, I have terrible taste in colors. Don't worry, and I have a good taste either. But there is a trick to picking collars, and the trick is to not to pick the colors from your hat or directly inside sigma, but to still colors from some sort of inspiration. This can be other design work, like websites or illustrations or posters, whatever, or even from re award like photos. In this lesson, I'm going to teach you how to use the world around us as our inspiration for our colors simply colors from the real world. Like people, nature, animals well, almost always give you create results. Why? Because most of us already agree that an orchid looks beautiful, but a cockroach, not as much. Picking good colorist is only half off the job. The second half is actually matching the right colors together. Using real world is our inspiration solves this problem, too, of because most of the time natural world provides great color combinations. These photo of the line looks beautiful. If we find a color palette that is already on this image, we can be sure that most of the time these colors will really go together. Otherwise, we wouldn't find a photo of this line as appealing. Weaken simple. A few dominant colors from the image. And now we have a color palette that is natural and harmonious. Here's where it gets interesting. Let's say we are designing a section that looks something like this. If we get this photo and use it in our design together with our new color palette, we're going to get some really good looking results because we're not just matching cars together, but we are actually matching colors with our image. We can then play around and use these colors for text or backgrounds, or create very interesting color combinations. Look at that. It's like a magic. And I was in the one who came up with this colors. Mother Nature did 24. Assignment: Sampling Colors: Let's do a fun exercise on sampling colors from images. I've prepared a Figma file for this assignment. It has three frames with the same layout. This is a very common web layout having a split screen. 50% of the screen is the image and then 50 is for the content. It's a very simple layout to make and can be quite effective and beautiful. It will be good for you to practice this layout as we practice our color sampling. Are three frames in this file. On two of them, I have prepared images for you and one is empty. I want you to sample colors from these images for each frame and paint the left side of the frame with a color palette. On the empty one, I want you to pick your own photo. You might discover that not all photos are good pick for the color palette. Also, I want you to use what you have learned so far and apply that to the left side of the frame, the hierarchy, and every thing about the typography. Let me do one as a demonstration. I'm going to use an empty frame. First, let's go to unsplash.com and find a good photo. Unsplash is a great source for free photos. They are free for commercial use, not just personal, and they have a wide variety of different photos. They're not very they don't look like stock, so they're quite natural and nice looking, although because they're free in designs, they are used a lot. But more about the photography later. Okay, so I love mountains. I'm going to pick a nice photo with a Mountain view. This one is a good choice. It has a lot of colors in it, so we'll be fun to work with. First, I'm going to create a placeholder for the image. I'm going to draw a rectangle to make this exactly half of the frame. Let's check the size of our frame. It's 1,152 pixels. Now I'll make the rectangle the half of that size. Here's a figma trick. I'm going to type in 1152/2, and then he'd enter. Figma will do the math for me. It's exactly the half of the frame. Now I'm going to place my image. You can directly drag your image in Figma, or you can choose place image option from the shape tool. Here are a few things to look out for when working with images in Figma. The photos that you get from Splash or other stock sites will be quite large in size. Give it a little time for Figma to think because it's uploading the image to its servers before you can place it. The image will be placed in its original dimension. Since this image is very large, it looks super zoomed in like this. But because it's part of the frame, only this is visible. As it's huge, we need to resize it. When you select an image that is filling the entire space of the frame, instead of selecting the image layer, it selects the entire frame. I find this a little annoying, but it's not a big deal. To select a photo layer, the obvious option is to select it in the layers panel, but the better way is to click on the image while holding a control or command key. This is a very handy trick. Keep it in mind. To resize the photo to some useful dimensions, let's zoom out so we can see the borders of the image. You see those blue lines, those are the borders of the image. The image is really big in comparison to the frame. That's why the borders are so far from the frame. We can grab the handles and resize our image. Hold shift while you do this to keep the proportions of the image. An image element in Figma is basically a rectangle with an image as a background fill. You don't have to hold the shift. It's not going to distort the image, but in this case, I want to see the original image, so I can choose exactly what part of the image to display. If you place an image on a rectangle, it's going to become a fill of that rectangle, instead of being an independent image. One last thing to look out for. When you place an image or anything for that matter, make sure that the layer lives on that frame you are working on. Because besides that frame, it may be accidentally placed on other frames that are close by. Or it can be placed on the canvas independent of all the frames. If it's not on your frame, it will not behave the way you expected to, it might drive you crazy until you figure this out. This is why I want to cover all the possible ways that something might go wrong and not behave the way you expect it. This is usually what causes the brickest frustration in learning anything new, not understanding why something isn't behaving the way it's supposed to. If it's acting we'd have a look at the players panel and make sure it's on your frame. To drag it on the frame, your cursor, the mouse has to be on the frame, overlapping the frame, then it's going to drag it inside, and if it goes outside of the frame, then it's going to drag it outside of the frame and put it on the canvas or somewhere else. One last option we have to import an image into Figma is to import it as an image fill. Select the ect angle, click the color fill settings, and from this options, select image. You'll get this checkered placeholder image. Then click, choose image and just select your image file. It will fill your layer with that image. The fun part about this option is that you can do this with almost any layer even with text layer. This opens up a lot of creative possibilities to using your designs. Now, which one of these options you use to import your image doesn't actually matter. The result is always an image fill. That is what always happens. Even if you just place the image on the Canvas, Figma just creates a rectangle and puts the image as a fill. In this particular case, my preferred method is to upload the image right into our rectangles fill because it's the most controlled way in the specific case. We know that we want this image to be half of this frame and we already created a placeholder rectangle for it. Might as well just drop the image inside it. Now, chances are that your image and the placeholder shape you created for it aren't exactly the same proportions. When you fill your shape with the image, you will get image cropped at certain places. You might not like this cropping, so you'll need to adjust it to get the ideal position. Luckily, we can do this by selectic cropping option from here and then just moving our image around to position it exactly the way we want it. This cropping tool works pretty much the same way you would crop an image on your phone. You can move the image around, position where you want, and if you need to enlarge it or shrink it, you can do that too. Just one important note, when changing the image size inside the crypto, the resizing doesn't lock the aspect ratio right off the bat. You may get a distorted image if you are not careful. An easy solution to this is to hold shift while you resize. This will lock the aspect ratio while you resize, you end up with an original proportions and not some pancake version of it. Excellent, our image is ready. Now I'm going to style my text a little. You can place your own text in the headline when you pick your image. You don't have to worry about the paragraph. I've used the dummy text, the infamous Lorem Ipsum. Already have the phones in mind. I'm not choosing them based on images, but you can if you'd like to. The display is a beautiful type face in modern service style. Gives a lot of class to the page. And Latto is an excellent sensory tie for any general kind of use. Now, let's align our elements to the grid. Do you remember how to apply the grid to the frame? First, select the frame. In the property s panel under layout grid, click plus icon. By default, it's a two dimensional grid. We want columns. Enter 12 columns. The gutter space is flexible. You can usually put anything 20-40. I prefer 30 pixels. Let's also apply the margins. Margins are necessary because the content on the website doesn't start from the edges. Every website has some a content margin on the sides. What are the best margins depends on the width of the frame? If we're designing on the large descop screen, then our margins will be compared if we were designing for the phone. For this frame size, 60 pixels is pretty good. One thing you might notice is that my image place order doesn't align with the grid. The one might think, wait a second. Isn't that grid important and don't we align our elements based on our grid? Yes, that's true, but in this case, our image is part of the cannabis. Our Cavas is the background color and background images of the page. They have their own fabric of space and don't abate to the rules of our grid. The grid is usually for the content and for things that lay on top of your background page background canvas. One thing that I don't like on text is what's called orphan wards. You see that single word on the last line, that's called an orphan ward. In design, we try to avoid such orphans. They make the paragraph look a little clumsy. It's not a big crime to leave them in, but it's a nice extra detail to polish up your work. In such a case, I will break the alignment with a grid. It's not as strong anyways on the right side of text because text is already jagged. It's okay to break the grid a bit in favor of fixing an orphan ward. Just need to shrink the text box until at least one or more word jumps on the last line to give that word of rind. This paragraph now looks more balanced. That's what you want to go for as a rule, and more bunched up and rectangular text block with the lines of text being more uniform as much as it allows it. Now that we have prepared our frame, we can start sampling our color palette. To sample a color from our image, first, we need to blur our image. What this does is that it averages out the adjacent pixels and gives you a more accurate color palette. Close to what our eyes are perceiving, because we don't actually see those independent pixels. In real life, we see an average with its shadows and gradients and all that. The color picker tool on a computer is super precise, so it grabs the color of individual pixels. Individual pixel is not the most accurate representation of the overall picture. Select the image in the property panel, you'll see affects option. Add a new effect by clicking the plus icon. By default, this will add a drop shadow. Click on the drop down to see other effect types and select layer blur. By default, this is not usually enough blur. We need a bit heavier. To increase the blur, click on the icon and then start increasing and stop before colors start to mix too much. 24 is pretty good in this case. Although this isn't an exact sign. Sometimes you will need much less blur, sometimes more, especially if you want to sample a color from something small, like a blue eyes, red lipstick, then you will need smaller blur value. Otherwise, the color will mix too much. Notice how the color palette is very noticeable. We have the blue, the light brown colors, and the dark brown. Figma can pick out these colors for us with an eye dropper tool. Draw rectangle, and then click on this field to change the color of the ct angle. Then select the eye dropper tool. As you hover over the image, it will pick the color from that exact pixel and paint the rect angle in that color. Repeat the process for all the other colors. How many colors you will pick will depend on the image and on you. You want to pick the dominant colors, those that are undeniably visible and make up the most of the image, and any smaller colors that are quite prominent include some neutral tones as well like grace. Now that we have our color palette, disable the blur effect on the image and start painting the left side content in these colors and see what works and what doesn't. Let's add another rectangle on the left side as our background f. Remember why it's this covering our elements because the layer is higher in the list. Just move it down below so it's arranged as a background. You can also write click and select Send to Back, that will send all the way to the back. Now let's try some background colors. Let's write these neutral colors. And let's see the color that goes the best with this dark brown. Oops, I forgot to remove the image fill from the text when I was playing around with it. The blue does contrast very well and it can be useful for some exciting design. This bright sending color is not bad either. There, I think this one is the best. Really bad at color names, so I usually look it up on color sides. This one is called Tumblid. As for paragraph, I can pick white color. Although it's popping too much and competing for the attention with the headline. In such cases, what I do is that I decrease the opacity of the white text to around 80%. This will decrease the intensity of that white color and also the background color will permeate a little since it has some transparency, and that will suit the background quite handsomely. We can also try that same tumble weight on the tax, which is not a bad result at all. Although I would never do something like this. That just creates a mass out of colors instead of intentional and natural looking color combinations. When it comes to paragraph, never go with a vibrant color option. That just looks super amateurish. Color for paragraph text is very hard to pull off correctly. With headlines, colors work great because they are big and color pops properly. But with small paragraph text, intense colors just look weird. Often they are hard to read and look like a sales manager making a PowerPoint presentation. To be on the safe side, just use white or black and plate with the opacity. Don't even have to try any of these options from the colors you sampled. It is a bit risky for a beginner. It's easy to go wrong. This tumble wit option does work But it's a bit of a lucky shot because it is a muted color and it's exactly in the same palette as the background. It's also the headline color. Given all these conditions, it works. Remove one of these conditions and it might not work. This opacity track is a perfect and safe option. Designers across all levels of skill just love using this a lot. Stick to it for now and once you gain a little more experience, you may start experimenting more. In this case, I did white, but on a very light background, you start with a black paragraph and decrease the opacity from there. Let's check other color backgrounds. Oh, yeah, this looks gorgeous as well. This one feels the most organic to me and let's the beauty of the landscape really stand out. Plus the color is quite suitable for outdoorsy theme. All right. Very fun exercise to get you started with colors and play around with them. After you submit your work in the assignments after this, you'll find a link to a file that has a solution to it. Don't worry if the solution isn't exactly same as. There isn't just one solution to this exercise. 25. Colors: Fine-tuning Colors: Let's take it up a notch and make a color proud of you. You have already learned how to simple colors from the world around you. Now let's learn how to fine tune those collar samples. Ability to find tomb colors is a very handy skill, and we'll let you nail those designs. A good chunk of design magic is in color, so we want to make sure that you learn all the secrets and become very confident when working with collars. Let me show you how and why we find tomb collars. This is a gorgeous photo. I like the color contrast between the bird and the background. I say bird because I have no idea which birth this is. Is it a hawk and eagle? A falcon? No idea. Let's simple these two collars. But do you notice how the collars, especially the brown, don't really hit the mark? These colors look dull compared to the image. The thing is, feathers don't have a uniform color. Some parts are lied. Some parts star. The light reflects also differently on different parts. So all these gives a different perception than sampling a color from a single spot. But the colors on the bird are lighter, more vibrant and overall look more exciting. This is what we can do to make the best out of our color in vig Ma or any other designed self fair. For that matter, we have this color picker tool alerts learn how to work this thing real quick. This year is a color spectrum on this packed room, we peak asks you. A hue is the main ingredient that makes the collar. As you can see, the hue for this collar is right here, where the slider handle is on the spectrum. Two other ingredients that make up our color are the brightness in saturation. Brightness is the vertical axis. On this map. It is exactly what it says. How bright the cholera is is remove off vertically on the map. Brighter, the color gets. And as we move down, the darker the color gets. You can think of this like the way how much light falls on the color. During a sunny summer day, you can see a collar a specific you fully as there is a lot of light falling on it. But at night, in your room with the lights, all when it's pitch black and you don't see anything than everything is black, even the brightest red color. That's why the bottom circle is completely black. On this scale, 0% light means we don't see. Not the saturation is the horizontal axis on this map. It's that intensity off this particular Hugh in the color. As you move to the right, the saturation increases and the collar becomes more intense. And as you move towards the left, we call this de saturation than the hue starts to fade away until it's completely removed from our collar. Then we got a grayscale at black and white. Photo is a fully saturated photo on this color picker. There's drop down that lets you switch between different color management systems by default. It's hacks, meaning hexi decimal code. Change this to HSB. HSB means exactly what I just talked about hue, saturation and brightness. All three values can be seen right here. 1st 1 issue second saturation in the thirties. Brightness. The last percentage values the opacity. Let's go back door Burt to fine tune the color. We keep the qs today's and play with saturation and brightness. It's important to keep the same hue value otherwise, to get completely different color that won't match the original image anymore. First, I'm going to increase the brightness because it's too dark. The brightness value before was 78. End up increased it. It's 95 the scale both on brightness and saturation and goes from zero to home, 100 like percentage. And now decrease the saturation just a little bit. And we'll get a result like this. This is more like it. It feels closer to the collar off the bird than the original. The same thing we can do with the blue. It's a bit dark. I'm just going to increase the brightness a little bit, and that's it. This way. Both colors are vibrant and bright. Such an improvement of what we had before This is more suitable for today's Web design. Look, these are exciting colors that contras with each other very well and overall looks fresh and modern 26. Assignment: Fine-tuning Colors: In this assignment, I want you to go back to the Figma file from the previous assignment. Go over each frame you have designed and fine tune the final color combinations that you have used in your design. Let me show you this on the same example that I've done myself. This was the final result that I have settled with. I think it can use some fine tuning, especially with a dark brown background. It's a little too dark and the transition between the image and the background fill isn't as evident. It can certainly use some brightening up. Here's a prote. Duplicate your frames when working on a new variation. Design involves a lot of exploration and revisions, get in the habit of having a lot of versions of the same screen. I didn't do this in the beginning for any new variation, I'll just keep on editing the original frame. Sometimes after 20 minutes of tweaking and changing things, I end up with an option, that wasn't better than the original version, but I had no way to compare. And going all the way back was too much trouble. If you don't keep your variations, changing your mind becomes difficult, and you will often settle for a lesser option. To duplicate a frame, it's done as you would expect with any other element in Figma, either select the frame and press control C and control V or drag while pressing out or option. Okay, select the background layer. Click Fail. Make sure you have HSB Color management selected and not HX or something else. To make fine tuning simpler for me, I have a personal rule. I increase or decrease the values in increments of ten. This is just to limit my options. Otherwise, I might spend the less amount of time on comparing 32 brightness with 33. Hold shift and press on up and down arrow keys to increase or decrease values in increments of ten. There you go. That's much better. Let's see if fine tuning the headline color brings any good results. Most of the time, I have no idea what's going to work and what not. Design is a lot of playing around and comparing options. The brightness is really good, so I'll just play with saturation. Oh, there, that's beautiful. Let's see the before and after. Look at that. The original wasn't bad, but I've got even better result. The text is easier to read on the new version. The transition to the image is much more evident and headline and background look like they were made for each other. So much fun. I love playing with colors. Design is supposed to be fun. Go crazy. Have fun with it. If you find yourself struggling with something, post your questions in Q&A and I'll help you 27. Colors: Color hunting: Here are two other methods of finding colors. First one, and my favorite, stealing. There's nothing wrong with stealing colors. Unlike other creative work, colors can really be owned by anyone. So designers borrow colors from each other all the time. This is basically sampling colors from other people's work instead of the photography. It's also more simpler approach to finding colors than sampling colors from the photography as we did. It's more out of the box option that you can start applying to your work right away. There are a lot of websites that create design work and inspiration. I have dedicated a special lesson to this. Later, we will dive deeper in the topic of inspiration and its importance in your workflow. For now, let's look at one place to find color inspiration, dribble.com. You can find excellent inspiration in here. Most of the work here isn't even for real projects. It's designer show and tell, a lot of exploration, ideas, and practice by other designers. Let's say we are working on a finance related website. We will search by the Finance keyword and get a lot of inspiration for our work. When we find colors that we like, we can either sample the color in exactly the same way as we did with photos. Just save the image and place it inside Figma and then use the eyedropper tool or use a separate eyedropper tool that can sample colors from anywhere on your screen. If you're on Mac, then it already has an eyedropper tool. It's inside utilities called digital color meter. If you're on PC, you can use browser extensions. ColorZ for example, is a pretty good chrome extension for this. The second way to find colors is through color generator sites like coolers.co. You can either generate palettes from scratch or you can paste one or two colors that you want to use and generate some other matches that will work with that color. Here's a pro tape. Avoid raw colors. Raw colors are those that have 100% saturation and 100% brightness. This is a mistake many non designers make when they, for example, design presentations for school or work or Facebook covers and whatnot. They often use row colors like this. We generally like colors that are present in the natural world. And rarely you get such colors in nature. Even the most extreme examples like Nemo here don't have raw colors in them. However, that doesn't mean you can never use them. There might be times when there's like trends going on, or maybe deliberately and intentionally want to use something like a very bright fluorescent green, not a problem. As always with design, if it's intentional, it's probably going to work, and if it's not, it might suck. 28. Colors: Brand Colors: I love it when I'm working on a project that doesn't already come with brand colors. That means I can find the perfect color palette for the project in my hands won't be tied with existing brand colors, and I have been more freedom to explore. But often we don't get to choose our own colors. This is good news if the project comes with good brand colors, but not as monetary. If the color sound as nice. How do you know if you have to use brand colors on the website project are not easy. If the project already has a logo, that means that you have to use the brand. Colors were to get the colors from director from the logo. But the best thing is to do is to ask your clients for the style God or the brand guidelines that came with the logo. You look something like this. This is a guide that a logo designer usually provides to decline whenever they deliver final logo designs. It will include primary, secondary and neutral colors. It might also have some guidelines on topography and other brand elements. If such document exists that you have to stick with their colorists and typography provided here. The existence of this guy depends on how much the client was willing to pay and how good off a designer they hired. If they went cheap and got a logo on Fiverr, then they might not have a style guide at all. Or if the logo was designed 10 years ago by the owner's nephew, he knew how to click few buttons on photo shop. Then they definitely don't have one. Ugly colors are very difficult to work with. And if the client's saved money on logo design that I can almost almost always bat that the colors on the logo are going to be terrible. Bad logo designers have a unique skill of time traveling into the past and borrowing colors from the nineties. In times like this, I sometimes suggest clients ah, brand refresh the color of a fresh off their brand. They can keep the logo in the shape off the logo, and once I designed the website and we settle on the new color palette, then they can go ahead and refresh the existent logo with the new colors. If that's not possible and the colors are complete, junk. Then I'll limit the use off their colors on the website, and I will use MAWR neutral colors like whites, greys and, uh, blacks because they can be used with any color palette and then use ah bit limited options and limited versions off their brand colors. This a good middle ground between needing to stick with the brand color is about not using them so much so they don't make the whole website look terrible. 29. How to Use Photos to Create Mouthwatering Websites: photos are something you'll be dealing a lot. As a Web designer, it's a major ingredient to making beautiful designs. When many attractive websites you'll see the beauty mainly coming from the well chosen photo. With the right photo and the well placed topography, you can achieve truly stunning results in the upcoming lessons. I'm going to teach you a few design tricks on handling photos to create mouthwatering designs. 30. Photos: Image Overlays: a great photo can do wonders for a design. I love this photo. It's beautiful. The colors are amazing. It's simple, yet looks like our fairytale. But we do have an issue in this composition. There is not enough contrast between the background and all this objects on top of them. The contrast is so low that most taxes completely unreadable. Producing a design like this is the final result is a terrible job, even though everything else is spot on and images so gorgeous. How do we fix this by using overlays? Basically, Putin color fails on top off the image. The most common one is to put a dark overlay on it in fig ma. This means adding a black cholera fell on top of the image and adding transparency to that feel until you get good contrast. But before it gets too dark, another method is called tinting. It's taking the photo and giving it a different color tent. To do this, you take the image and dis ach aerated to turn it into a black and white photo, and then again we add a color field. But this time, instead of black, you pick a different color. This will give the image attend off that color, but this is especially useful if you want to use brand colors in the design. It's a very handed trick. You can also apply the fix to specific places instead of the whole page. For instance, In here I've put the dark, transparent box behind their content, and I've also added the dark, transparent Grady in behind the navigation bar. Do you notice on and off and on again there, although just as a side note, I'm not a big fan off those black rectangles just randomly behind the content, so I avoid using them if I really know how to using big background, and it just is a very easy designing. There's not a lot of designing actually involved, like Airbnb is home page. You find an impressive photo and put your content over it in white Color creates a very attractive looking design without a lot of effort, and in my experience, clients love it 31. Assignment: Image Overlays: In this video, we're going to practice applying overlays to our images. So fire up your Figma and let's get cracking. In this Figma file, I have prepared three frames. The content is all designed and ready. Your task is to find photos for each frame and apply image overlays, so the content is well visible. Let me demonstrate the first one. So we have this hero section for a meditation app or something like that. Not sure exactly. I grab this content from random websites. First, we need to find a photo. So go to splash.com, and let's try searching for meditation photos. It doesn't need to be the exact meditation. You can search for whatever you think is suitable, so perhaps Calm lakes, waters, nature, sky, basically soothing and calming images. When looking for photos, we don't need to go too literally and have the image describe everything in action. What about techniques of finding photos later. This photo works just fine for me. You can use the same or something else up to you. Download from here. Now let's place the image in Figma. You can drag the image directly in Figma if you want or you can use a place image option from here. Select your file, and then once you get this thumb nail on your cursor, click somewhere on the frame and it will place the image. The image has been inserted in its original dimensions, so it's super zoomed in and let's shrink it. Zoom out so we can see the handles of the image and then just grab the handles to recise the photo. You'll see FIMA doesn't distort the photo if you shrink it weirdly, which is really nice. You don't get this in other design softwares or many other softwares usually. But this means some parts are being cropped. If you don't want any of the parts to get cropped, then hold shift while you shrink the image. That's going to lock the aspect ratio. Now, we need to send the image layer back so it's behind the content. Two options, either use a keyboard short card of control or command plus a square bracket. One little thing you might get stuck with, when you click on the image, Pigma selects the whole frame instead of the image. So use Control or command click to select the photo directly. Left square bracket sends it backward and the right bracket brings it forward. And second option, right click the image, then select, send it to back, and that's going to put it behind in one single move. Same goes here. You got to select image first with the Control click and then press right click. Control plus right click, and it's not going to work. I really got lucky with the image looks great. But as you can see, the content is very hard to read, so let's apply our overlay. Select the image layer and under fill options, add another fel by clicking the plus icon. Make sure you have the image layer selected and not the frame or it won't do the job. And then start playing with the opacity control. How much transparency we need is going to depend on the image itself. Ideally, we want as transparent as we can get until the point when any of the content becomes hard to read. I think somewhere around 30% is working fine with this photo, and that's all you need to do for each frame. Now I'm going to show you the tinting option so you can use it on one of the frames. First step in tinting, we need to make the photo black and white. This is super simple to do in Figma, click on the image fill and decrease saturation all the way down. Remember from the color lessons, saturation is the amount of hue in the color. 0% means the hue is completely gone, so no colors. That's what's happening here. The next step is to add a color tint. That's going to be added to that overlay fill. We will change black color to something else. You can play with opacity too, so you get the best result. You can also adjust other content on the page if they're not working well. For example, that sign up button on top is too pale, so I would increase the opacity a little bit. Also on tinted overlays like that, a common practice is to use brand colors. That's where tinting really comes in play. Otherwise, there is really no point, and it's better to use the original photo with a vibrant colors. For example, whatever the brand colors are, we would use them as a tint and as a button color maybe. If you need to move the content around on the page on those frames, you can do that because sometimes you have something on the background image that is interacting with the content. If you need to let's say take that content and make a center alignment, you can do that if you need to shrink a headline or make it bigger or smaller, you can do that. It's up to you definitely. Now, finish the job with other two frames and submit your results of all the three frames in the assignment after 32. Photos: Cropping Techniques - Extreme Crop: I'm a big fan of movie poster design. Most of them have a great design work. It's intriguing, exciting and often mysterious. I haven't have this habit of staring at movie posters in the streets and then boring my girlfriend with details on what sort off typography that were using. And what did they do with the photo and with sort of design trick they used on it. As you learn fundamentals of good design, you will never look at the movie posters the same way again. Here on these two posters, I want you to notice the similarity in how the photos are used. Do you notice how they're full hat is invisible and it zoomed ing very closely to their face. This is called Extreme Crop. In this and following lesson, I'm going to teach you several ways how to crop an image. How cool was designed. There are even tricks on how to crop a photo. Let's start with extreme crop. Remember this example from the color lesson? The original photo off the line is actually this, but this layout isn't as impressive as the previous one, despite the fact that we Seymour of the Lion compared to the full view. Her look now has become much more intense and a little unsettling. It adds more emotion and drama to the image. There are two things happening here. First, there is more focus on the most important part of any being their face and especially the eyes. This makes a shot more intimate. The eyes are sort of talking to us like they're trying to give us a message or demonstrate some sort of emotion, makes us more curious and interested in the second hiding. Parts of the subject reads Mystery. The story that is on the poster now doesn't end on there. Just off the poster, it feels like there is much more to read, then what we see, which means we want to find out. And we want to solve the puzzle off that mystery. This is how you make interesting design. Extreme cropping isn't just used on humans and animals. It can be used on objects. To this, a great example of extreme cropping. I came across on some website cropping out parts of the bicycle makes the section more interesting. The key to nailing extreme crop is to not go to fire and make the object unrecognizable. The audience has to understand what start. Check instantly without squinting or pausing even for a second, until the object remains obvious. Then you have a freedom to go Pretty extreme. For instance, say you are designing a website for a guitar store. Instead of using the full shape off the guitar, you can zoom in and crop to the head off the guitar. We can clearly see it's a guitar. Absolutely undeniable. But this is no more interesting this way. We're teasing an audience a little. We are dangling a little information in front of them, but none revealing the whole picture. We're making them finish the puzzle at your content. Simple of color from the guitar. Make the body text that big lighter so it doesn't compete with the headline and Bam! You have an excellent section. It's interesting and intriguing. Remember the last thing about typography and how to match the personality and mood of the type Pace with the context. Take a look at the headline it says classical guitars without knowing anything about guitars. The ward classical already dictates what choice we should make with a typography using a modern geometric tie face like Futura would be so out of place in here. But a script typeface like Apple Chancery, is a great match. Often you'll need to design for a very narrow spaces, for example, Ah, horizontal banner for newsletter sign ups in a narrow space like these, when we place an image that drama and power within the images decrease because how small it is disagreed image with a lot of emotion in it, But it's lost. There is a great solution to this. We can find a frame that tells the story. In this case, it's the faces and zoom into that frame of these frames still portrays the story of the image. The face of the kid is in focus, and the parts of the mother's face is enough to demonstrate the motion of the photo like love and happy vibes at the content. And that's it. Now we get a more effective banner than Motion is still there, and we don't have to screen to understand what's going on in damage. This trick is quite handy for Blawg Hatters and article pages find a frame that tells the story on its own cropping to that and Now you have a very interesting hander for a blocked page. One graphic design professor called this technique peeking through the blinds. Think of it not as a cropped photo, but more like the parts of the seeing that you see as you're looking at it through the blinds. 33. Photos: Cropping Techniques - Soft Crop: Another type of cropping is called a soft crop. Soft crop doesn't have a hard edge. The image gradually fades away. This is usually done by adding a fading overlay on top of the image. When it's the same color as the canvas, especially white, it looks like the image is just fading away. It feels natural. Now we have an excellent space on the left where we can add our content. The result looks fantastic. The content is laid out on the wide part of the composition. This gives it a healthy amount of breathing space. The content is airy and free, it's natural, merging with a background image without blocking it and creating extra noise. Are we using the design concepts that we've learned so far? You bet we are. There's a clear focal point, which is the mountain peak emerging from the clouds. The rest of the content is arranged with a proper visual hierarchy, starting with a large and bold headline, and there is a clear grade and alignment. This is a very simple yet, super powerful trick. It's one of my favorite go to techniques where now I'm working with images. Desktop and laptop screens are quite wide. Yet sometimes you find the perfect image, but it's vertical. Not a good solution to use it as a background for a wide screen section like this. Most of the image is oddly cropped and loses its meaning. It's too confusing and easy to look at, and there is practically no space to lay out our content. Nearly never, ever, you want to place a vertical image as a background for a full width section. With a soft crop, we have a totally different result. The photo maintains all its important aspects, and we have a perfect space to place the content on. This layout has a clear focal point, which is the guy, obviously. The content has great readability because it's on a white background. If I use a vertical image as a full width background, I get a very chaotic result. The content is merging with a focal point of the image. There is not enough visibility for the text. It's hard to read and the whole thing is just very noisy. With a soft crop, on the other hand, we give each piece of this composition its own space giving us a nice clean look with high asibility. Photos that I have a uniform black background is even easier to work with. Just sample the color from the very, very last pixel on the edge of the image. Fill the space with that color. Arrange the image in the position that is the most suitable, and you get easy lay out with a lot of space to place your content beautifully. Extending the edge of this image like this can work on other colors besides black, but it needs an extra fix. Okay. On an image like this, if we fill the space using this method, we'll get a result like this. There is a strict separation between the image and the background, which is an evident flaw, and we never want to have a design with evident flaws like this. Hopefully, you can see that hard edge between the sand and the background color. Maybe on your computer, because of the video compression, it might be blurring out that hard edge. But it's This happens because real life objects are never single color, not even uniform objects like sand. So when we sample a single color from the object, it's only that one single color. One way to fix this is by applying that same gradient fade. And in this game, instead of using white, we will sample this exact color from the image. De now, the sand is smoothly and naturally merging with that background color. On the green side though, there is a lot of texture and more color mix, so the result doesn't look as natural. It's not bad at all. It can be used just fine. Although, unlike other three examples here, the green appears as a gradient overlay over the image. It's more like a fading curtain on top of the image. Which is perfectly fine thing to do, and you can definitely use it. However, there's one trick that I use in such cases, which gives us more pleasing look. Let me show you. If our image isn't wide enough to fill in the entire frame, we can take the part of the image that is simple without any complicated shapes and stretch it to feel the remaining space. It's important to stretch only that part of the image instead of stretching the whole thing. A part that is simple doesn't have a lot of details and isn't in focus. This way, the important part of the image is crisp with its original proportions. You can't do this with all photos only if the photo has already blurry background that can afford extra stretch. At the copy, and we have a very good looking section that feels natural and the content is easy to read and the pose section is really well balanced. This is how simple and fun design can be small tricks that give you great results. The knowledge of the tricks is what designers get paid good money for. My clients usually refer to this as magic, and they will tell me, Oh Vaca, we need a new design for this page. Can you do your magic? But it's not magic. It's science. 34. Assignment: Photo Cropping: In this assignment, you will practice cropping techniques that you have learned so far. Inside the assignment file, you will see three frames. Each one has its own content and an image. I want you to apply different crop for each frame. I'll demonstrate how to apply these image croppings in a bit. On the first frame named extreme crop, I want you to apply exactly that extreme crop to the image of the boy. In terms of the layout, you can do this in a split screen layout just like you did in previous assignments. As usual, style the content accordingly, choose your phones, sizes, colors, and align elements to the grid. On the second frame, I want you to apply a white soft crop. I'll explain how this is done. On the last frame, I want you to apply a color soft crop. Same as the white version but using the color from the image to create that smooth transition. I'll show you how to do this too. All right. Let's start with an extreme crop. Extreme crop is very simple. You can pretty much guess how this is going to work. I'm going to create a split screen and crop this image directly inside it. Now, let's make this rectangle exactly half of the screen. We can have Figma do the math for us. The frame is 1,152 pixels white. Type 1152/2, and we get exactly the half. Align it to the right edge like this. Open crop tool. Now find the handles of the image and resize it to create an extreme crop effect and drag image around to find your spot. Here are a few tips when doing this crop. You don't necessarily have to crop all sides eminently. You can hide only one side of the face or of an object. The goal of the extreme crop is to create mystery by hiding parts of the subject or picking a small slice of the entire image and tell the story only through that slice. In this case, I prefer centering the lines phase. This works better with split screen layouts like this. If I was using a full width layout, then maybe side crop would suit better. Another tip, when you're cropping out a person or an image, this has to happen on the edges of the frame. If you crop an image and place it away from the edges, then this trick doesn't work. You actually get a very odd result. This is just an oddly cropped image that is placed on the canvas. Remember what I said before, an audience has to wonder what's beyond the borders. The fact we're going for is actually like looking through a window. So it's not that image is cropped up, but that's all we can see through the window. When image is cropped on the edges, then audience can feel that image is going beyond its borders. And this is exactly the visual curiosity you're creating here. Okay. Now for the soft crop, this is quite simple as well. What we need to do is to put a white fading rectangle on the edge of the image, so it smoothens out that final edge left edge of the photo. This is done using a gradient fill. Draw a rectangle. Go to the fill of this rectangle. Under these tiny boxes, select the one that says gradient. Linear, radial, angular, en diamond. These are all gradient fills. You'll notice that the fill of the rectangle starts from one color on top and fades to a different color on the bottom. We want this to be white color. Inside the color picker, we have two colors, start and the end color. This shows the same thing. We want start color to be white with 100 opacity, and the end to be white again, but with 0% opacity, meaning transparent. This will then create that fading effect. This here is a start color. On the color map, drag the dot to the top left corner because that's where the white is. If you accidentally click on this gradient line, it will change the location of where color start and end, just drag them back to their corners. The extra stop can be removed from here. Do the same thing on the end color. S. Change the opacity to 0% for the end color. Now we have a gradient fill with fading white. But this is a wrong direction. We want it to start from left and fade on the right. To change the direction, go back to the gradient tool and click this little icon that says rotate gradient. Click on it a few times until you get the desired direction. We need the 100% white to start from the left edge, and then fade away to 0% towards the right. Now we have a correct direction of the gradients. Now we position this fill right at the edge of the image where it meets with a white background. And there we have our soft crop. You can also stretch this gradient fill to make the fate more smooth. As you can see, the transition here is a little sharp. If you extend the gradient fill, then it spreads more evenly and makes a transition smoother and more natural. Now, depending on the image, sometimes this will be enough, but sometimes you will still have a little abrupt transition like this one. In cases like this, I duplicate the gradient fill two more times, so I have a total of three fields. You can see how it already improved, but we can still do a little more. You can take each rectangle and shrink or extend them, basically creating three fields with three different widths. This gives you a bit more control on fixing any sharp transitions. There is no exact role here. You basically play with their positioning and sizes until you find that sweet spot of the transition. A choice of an image matters, too, some images work better than others. With white soft crop, you want to go for an image that has a lighter background. For instance, a daylight sky in a background makes a good transition. On dark backgrounds, the white fade isn't as effective. You see here it feels unnatural. A black background and Black fade does much better job here, as you can see. But the ideal solution on a background like this would be to pick a color from the edge of the image and use that as a background for that fade. Let's do that on this example. Here's a cool figma trick that can come in handy in the future. Right click on the image and click flip horizontally. It basically mirrors the image. This comes in very handy often. For example, when I want to put a content on the left side, but the image has a model on the left and empty space on the right, I can reverse it and done. First, we have to sample a color from the sand and use it as our color for the background and the fade. Select the frame. Click background and then sample the very last color pixel of the image. Zoom in real close to get a better handle and pay attention to the pixel zoom here. This shows which pixel will be sampled exactly. The reason why we are selecting the last pixel is to create as smooth transition as possible between the image and the background without the gradient fill. Now we are going to use the same exact color to create a gradient fill. Copy the hex code of the color from the background and insert it as a start and end color in the gradient fill. Change the opacity to 0% for the hand color. Now go ahead and apply those crops accordingly to each of the frames and then submit your results in the assignment after this, and I will have a look at them. As you notice, probably, I haven't included the stretch crop and stretch photo tutorial in this video, but I have put a photoshop tutorial in the advanced part of this section, which you can learn how to do and practice once you finish this course, because you don't really need it right now. It's not that necessary to know it, but once you finish the course, and you can go through this main material, then definitely have a look at it and give it a. 35. Photos: Rule of Thirds: have you ever noticed how in movies actors are often positioned off center in the frame? After you learn these, you'll never be able to not to notice, and you will be obsessed about it Every time you watch a movie, movie makers and photographers use a technique called Rule of Thirds to add some visual interest to the shot. It goes like this. If you divide a screen in three equal parts, both vertically and horizontally, the intersection of those lines will be the visual in most interesting spots to place your subject. If the object is big, like Angelina Jolie here than you'd place her across that entire vertical line, and if it's an image off landscape like this, then you would position the horizon on one of the horizontal lines. Putting a subject in the debt center is something that is expected. It's symmetric has equal space around it. It's safe and comfortable. That's also what a non photographer would usually do or a non designer. You would grab a camera and point directly at the subject, and that's usually boring. But placing your subject off center creates tension. It's unexpected, yet looks intentional, like there is a specific hidden reason behind this, and we want to know what it is. A camera app on your phone probably has this option. I know. I found us. Turn it on and try it. Your photos will significantly improve by doing so, to demonstrate this point, let's take a look at this simple example. We have a box that is placed in the dead center off the canvas. The distance between the address of the cameras and the box are identical on all sides. The result is symmetrical stationery and box it at rest. It's not moving. If we move the box a little off center, it instantly adds tension. But this is not a good kind of tension, because it looks like the box is supposed to be in the center. But it's not. This looks like an ever that a designer Miskell ate or didn't notice. But if we move the box quite far off center than the result looks intentional, it doesn't look like it was meant to be in the center, but that it's deliberately out of parents. This creates a good kind of tension, giving as a visual interest. The rule of thirds is in a law, it's more of a soft guideline. You can sometimes go quite far from those intersection points. This rule comes super handy when you work with faces. Take a look at this example. The face off this model is in the center, off the frame, and this makes it appear like he's too low in the frame. The empty space above his hand is sort of pressing him down. To fix this, we moved the model on one off the top intersection points use Always the eyes as your guide ice are the focal point of any human face. That's where we always look at first. Now this is much better look, and the space above him is small enough, so it's not pressing down on him. And another great news. This works no matter the size off the face. The person can be far in the frame or in extreme close up. As long as we keep those eyes aligned with that intersection point, it will always look correct. Watch what happens when we zoom in. Still looking great. Let's zoom in more looking great. No doubt one last time still looks good. No matter how far resume in. This is the beauty of rule of thirds. It's a super simple guideline, yet can make photos look way better. Now. The rule of thirds is a soft guideline, and it has exceptions. There are a lot of cases when you will have better results. If you don't follow this rule on an image like this, the center is the best position, and you shouldn't use the rule of thirds. Why? Because the central point of view is the intention here. The photo is in the first person perspective. We are seeing the view from the guy's eyes and with his perspective. Obviously, the most natural placement is center because it wouldn't make sense for him to see things sideways. There are more examples of central position being the correct choice. For instance, when the subject placement and other elements in the image actually create the visual interest in the center, the road edges the yellow road marking in the middle that gap between the palm trees. All that is creating visual interest in the middle. Keeping this ruling mind helps you pick out good, better photos when you're searching for them on stock photography sides, for example, if you're looking for a photo for a split screen like in our exercise, then in those cases, a photo with the model that is in the center is a better choice because in cases of a split screen, you get this narrow portrayed mode off the photo and in the narrow photos. It's not the best option to use the rule of thirds. But if you're looking for a background photo, especially one where you're going to place a content on, then off center alignment will be the best bet. So this way you will look through the photos and you'll find a while where there is enough room for you to move a subject to wards one off the lines off the rule of thirds. 36. Photos: Unbox it!: photos always come in a box. That's the original format when you exported from your camera, or even if you downloaded from our website. When you take a boxed image in, place it right on the canvas, it's often not very impressive. It's a separate object, not merging with the space, and it creates extra boxes around it. You don't notice this consciously about our eyes do, and they need to process those extra boxes that have been created between the image and the address off the canvas. Let's use a real example from one of my landing page projects that have done for a dental clinic. I've used this exact image for that project, and this is sort of where I started. So how can we improve a section with an image like this? We need to think outside of the box, literally unbox the image by completely removing the background, put her on the bottom right edge, and now, instead of it being a boring photo slapped on the page, that model is sort of coming out of the page. The white background isn't really working with this image. Can you guess why? Because the model is wearing a white top. It makes a terrible contrast, and if not for her red hair, she would be fading away. Since the image doesn't have a background anymore, we have more freedom to put our own background color on the entire canvas. This gives us more freedom to experiment and choose interesting color combinations and make the design of more exciting. This color complements her red hair, the contrast well, and make a very good combo. Also, this bluish color is a right pick for the dentistry theme. Blue colors, Fillmore Clean and sanitary. Good feeling to create for dentistry and many other colors would be a red flag for a dental clinic like red and pink. That would remind us off blood, not a good feel. Often I like to add a shadow behind the motto. This makes her look like she's standing in front of a wall. He'd adds more dimension to the space. There are now two separate layers. There's a wall, and then there is a model standing in front of it. You don't necessarily need to apply a shadow. You can still get good results without it. Sometimes it won't even Borg this time. It works and renders a very good result because it's a direct shot off the model and she can easily be standing in front of the wall. It the headline. See what I did with the type? It's heavy, wide and upper case. That's to match their context off this page. Wide straight teeth at black skinny phone wouldn't be as effective here, would it? We should always keep the topic in mind when designing everything we do on the page creates associations with people. The calls were used shapes that we choose all that is going to create certain feelings in people, just like what we discussed in the typography lesson about Taipei's personalities. This is designed thinking, and it's a one very important scale in the designer skill set. Okay, now add the rest of the copy at the navigation bar, and we have a beautiful hero section for a dental clinic. Do you notice why I made the button orange? Because I sampled it from the girl's hair. It's not the exact color. As you can see, I've done fine tuning on it this way. It's more vibrant and suitable for modern Web site unboxing. The image has given us more freedom and control over our composition, it has added the depth. Every object seems to exist in one shared space, but on different layers, just like the real world is in. These has given as a very good looking and interesting hero section. You don't necessarily need to unbox an entire image. You can achieve an exciting result by taking a small part of the object out of its frame. For example, that's what I've done for this website. On another project for a roofing company. I wanted to emphasize the roof somehow. But the's layout isn't really cutting the mustard. The roof is lost in the design, so I took the tip off the roof and lead it poke outside of the frame. Now the roof has gained a spotlight. It's a point of interest, plus the images and as separate thing anymore. It's interacting with the canvas and other elements on it. That's all it takes to free and image from its frame and bring it to life. We can't really create this effect in fig MMA. We will definitely need a photo shop for these in the advanced part of the scores. I have put a photo shop tutorial and an assignment on how to achieve this effect and how to cut out a subject or a model from of the image and remove the background out of it. It's not an essential effect, but knowing how to make this effect work really opens up your options in design at once. You remove the background from the subject. It opens up a lot of different design options, just like what happened with here, because now we can change the background. We can move, let's say headlines and tax behind objects, and we can create a bit more three dimensional layers in our designs. So when you reach the advanced part off this course, definitely don't miss this tutorial and practice it because it's really gonna come in handy when you start designing. 37. Photos: Pick photos Like a Pro: all these photo techniques are going to be useless if you don't know how to choose the right photos for your designs. In this lesson, I'm going to teach you how to pick photos like a pro. The photos that you'll be using for your projects are called stock photos, which you download from free stock sites like unspool, ash and paid ones like I stock. Now the big chunk off stock photos. Airplane Terrible. I'm sure you have visited websites that use photos like this. What exactly is the problem with this photo? Models are looking good. They are dressed well. They're smiling. The photos, good quality and taken in professional setting. Everything on paper seems correct, but the photos still lame. Why's that? Because it's clearly fake. It is clear that these aren't actual business people. It's models doing a silly pose with fake smiles on them. Now all professional photos are made like this, and model that is acting a specific role in the photo wearing clothes is that's not theirs , portraying a specific emotion and getting paid for it. That's fine, but if the photo is done well, we shouldn't be able to tell what's happening In reality, I think of it like movies. We know that this are actors. We know that they're not actually standing on a ship in 1912 they're wearing costumes and acting a scene. But when the movies made well, we can't tell. We forget that it's actually fake and that these people are just pretending the same is happening here. They're wearing costumes and pretending. But unlike good actors, this guy suck it. Do you know what happens when you use a photo that looks fake? You're sending a very bad message to your audience. If the photo is fake and pretending, then the website is going to feel fake and pretending No real people behind this website. If I call them or email, I'm not gonna get a response from real people or worse. It might even be a scam website. It takes a little practice to tell good stock photos from bad ones, but here are three questions to ask yourself when you're looking at photos. He's the scene. Rio. Would something like this happening a real life scenario? So would people who work in the office stand in front of a camera and hold hands like this . If you have ever worked in the corporate office, you know that last thing you want to do is the whole hands with your co workers and stand in front of a camera. So the answer is clearly no fake for these photo. For example, what do you think? Is this seen real? Obviously not. For starters, the doodle in the glass is a complete gibberish. It's random charge and arrows. It makes no sense. And what's with that report? It? It's such a cliche way to describe an office seen this foot, on the other hand, is a different story. It looks like a realistic meeting, and people are wearing clothes that you'd actually seen modern offices. Today. They're talking with each other, which is what happens in meetings, not holding hands and staring at a glass board with nonsense doodles on them. Fake second way to tell a bad stock photos by cheesy fake emotions. This doesn't look like a genuine human emotion of excitement. Neither is the scene anywhere close to real world. In this photo, have you ever held fake money in one hand and a magnifying glass in another? Oh, this guy was just so excited about some fake good news on his fake leapt up. Nice try, buddy, acting out genuine human emotions in front of a camera in a photo studio. It's a difficult thing. That's why so many of these models are doing a terrible job at it. Don't reward their poor ward by using their photos in your project. And also don't ruin your designs. But such photos It's not difficult to tell if acting looks genuine. This is what a genuine excitement looks like. Not this even subtle emotions, like a regular smile, can look very unnatural. And fate like this photo, and when it's done right, it looks genuine and inviting. Ask yourself if the emotions filled, really, you'll probably be able to tell quite easily. Besides what models are doing inside the photo, you can also easily tell a bad stock photo from a good one by paying attention to the set design by set, I mean everything. Besides the model where the photo was taken, objects in the shot, even closing the model is wearing a lot of stock. Photos are often quite old. They have been taken ages ago but are still being sold and used on websites. You really don't want to use a decade old photo for a modern technology startup website. By paying attention to clothing, you can easily identify dated photos. You don't have to be a fashionistas for this. Use your common sense. It's not difficult to tell that no girl of her age would wear something like this today. This doesn't actually mean that photo was taken a long time ago. Sometimes photos are new, but photographers have reused same wardrobe photo studio, save their caution from the chutes, and they reuse them with other models. And new scenarios years later, Closes that Don't Fit are a clear indicator that the scene is faith, even if it was modern, like these poor girl here, Photo studios will also try to use neutral closing that can be reused two years down the road so they don't have to buy new order of every year. So you'll see this very blend closing, devoid of any personality, and that's another indicator to. But I think these photo has another clear tell that computer screen in well designed sets like here, you'll see people wearing modern clothing and a lot of times quite suitable for their personality. They look like real people. Id like a computer simulation. Pay attention to the objects in the set. Ask yourself if they look realistic, like this magnifying glass and fake money. Nothing says fake better than fake money and stay away from everything. Abstract, for example, Lightbulbs. God, I hate lightbulbs. People love to use a freakin lightbulb to represent things like Dion. Creativity or thinking it's over years makes me nauseous when I see it. Once, I was working on a very premium website, and as a suggestion, my client send me a light bulb to use as a background for a website and nearly barfed on the computer screen. Abstract objects are generally a bad idea. Most of them look exactly that abstract, confusing and often cliche is they're overused. Your design should given audience sense of understanding inauthenticity. Anything abstract will do the opposite. Off this cliche. Puzzle pieces and clouds over people's hats 38. Photos: Where to Find Photos: All right, So where to find good photos? There are free and paid sources. My favorite free stock side is on splash dot com. You have already used this in the assignments. There are many size that offer free photos, but they're not fully free. They come with some copyright rules, like you must credit the author or only for personal use, but for commercial use on splashes truly free. You can do whatever you want with the photos, and you don't have to credit that author. Photos on on Splash that come are very realistic looking. A lot of times they're submitted by individual photographers around the world and not buy stock photo studios. For this reason, you get very realistic scenarios and people that look genuine and real well, at least most of time. Another decent free website that uses pack cells dot com pack cells is fully free as well. New limitations, their concept and photo styles are very similar to on Splash, but you get a bit more diversity here. Every photo sides have a downside, though everybody uses them, and a particularly good looking photo will be used by a lot of people around the world. So the photos that using your Web designs can easily be used by a lot of other Web designers for their websites. At some point, when you go through a lot of these freeze photos from on splash or pack cells and other places, you start recognizing them in many different websites. If the audience sees this photo being used on other websites to, it sort of cheapens the website. It's not that unique anymore, although the same applies to the paid stock sites, but because they're paid significantly less amount of designers will be using for using this photos for the website. Plus, the stock sites have way bigger selection of photos than the free sites. So for this reason, on well paid projects out definitely recommend you to use paid sources instead of free photos. My favorite from paid stock sizes, I stock they have one of the best quality photos with realistic looking models and scenes. But, of course, you get fake looking photos here, too. It's unavoidable. As long as people are buying that graph, I can really put an exact number on how much a photo coast on a stock side because it all depends on how many you by subscription plans and sometimes another on the image itself. I still gives a little on the price, your side and in much year coast between 9 to $24. But then, with bundles and monthly subscription, you can get a pretty good discounts. Another good paid sources shutter stock, and it's much cheaper than I stock. With their prepaid plans, you get an image for $10 tops. Prepaid means buying a pack like $50 for five images. For heavy users, you can get a monthly subscription. You'll get certain amount of free images per month that can come down to $3 per image and less one of the troopers but decent options. He's big stock dot com here. The maximum should be about $3 per image with package bundles. Unlike others, big stock has a seven day free trial that gives you 35 images for free during that trial period. Keep in mind, though, they ask for a credit card details, and you have to cancel it before the last day or you'll get charged. Take all this pricing information with a grain of salt because this are independent websites and their pricing can change very often. And also it will depend on the country where you're from or where you're checking the prices due to the taxes and be 80. But in the ballpark, this is how the pricing works for these three websites and many other paid stock sites. I have put the links to these websites both free and paid and a little more in the resources page, so you can feel afraid to check them up. 39. Assignment: Finding Photos: Now, let's do a fun exercise where you go and hunt some stock photos. In this Figma file, I have prepared three frames with headlines and descriptions of three businesses. I've actually grabbed texts from real businesses and their websites. I want you to find an appropriate photo for each frame, imagining that you are designing their home page and you need a photo for the heros section. You're not designing in this assignment, so don't worry about the format. Doesn't matter if the image is going to go on the background as a split screen or any other way. The goal is just to pick an image thoughtfully. You can choose photos from any of this free or paid photo sites, be it Splash, Paxil, Stock, or any other side. Finding the right photo for your project actually takes time and sometimes you need to look on several sites to really nail it down. Sometimes can spend a couple of hours searching for the right photo just for one hero section. You can use pad sites too and just grab samples from there without paying for it. You can screenshot or download watermarked image. Big Stock, for example, has a download previewing, and you can use that sample image. Don't worry about the quality format or the size of damage. But I do want you to use only stock photo sites and not Google or any other place where they have strict copyright rules on their images, like flicker or grabbing someone's photo from Facebook. And for each photo that you pick, I want you to explain why you chose the photo. This is how you get into habit of design thinking. You will do much better job and have your employers happier when you put thought behind each of your decisions. I'll do an example right here. First step is to understand what is the business about and what is it that they are offering. Then think about what sort of scene we want to set on the website, given the business and the text. This business helps other companies measure their employee happiness. This gives me an idea that showing happy employees would work well for this frame. Let's head to our sides and start by searching quite literally for happy employees. All three of them returned quite diverse results, and as you can see, BigStok, being the paid side has returned significantly more number of results than unsplash and Pixels. Also, the results are quite different. Bigsto, though having a lot of results has a lot of the trash photos like this business people here. Unsplash actually doesn't have a good s and keyword mapping. As you can see, it has returned a lot of irrelevant stuff. Pixel seems to have done a decent job. When you do the search, experiment with different keywords. Sometimes literal key phrase like happy employees will work, but often it's going to be better to use and mix and match single keywords. For example, in this case, I do want the scene to be set in an office environment. That's a hard keyword that needs to be present in the scene, so I can just use office and then some secondary keywords with it like smile, and so on. Here's a protap. When you see a photo that has a quality that you like, but it's still not exactly the right scene or the model, find who is the contributor and search within their photos. For example, I quite like the quality of this photo. Under copyright, there is a link of the contributor, meaning a photographer or the photo studio who uploaded this photo on the site. If you click on this link, then you'll see all other photos from this contributor and now look at this. Much better results than a generic search. All stock sites have their own ways to display contributor photos and where to find the link, but most of them do. Their own ways to search through the images of one contributor. On Big stock, just insert your keyword in front of this short code that it automatically inserted. This will refine results within the contributors photos. Without this trick, I would have to go through thousands of terrible photos. This is a pretty good option for happy employees. Click download preview and then just place it inside the Figma file. That's all. No need to design anything, leave it as is. It shows happy employees, which is the goal of this business. The photo is modern, the atmosphere feels relaxed. Smiles look genuine and overall the photo films warm and inviting. And done. That's your task. No design involved. Have fun. 40. 6 Design Tricks Every Designer Should Know: design is like magic show. There are tricks that make a work look beautiful and exciting and something people want to pay for, just like a magic trick. Good design can make you feel amazed. But once the trick is revealed, you understand, it's actually quite simple, and you start to realize that old designers are using the same tricks in the upcoming videos. I'm gonna teach you several design tricks that will help you create beautiful and very interesting desires like magic. 41. Design Trick: Contrast: take a look at this page. This is a very simple design, yet quite effective. The descent trick that is used strongly in this composition is called contrast. It's this contrast between the gigantic headline and smaller paragraph text. Also Contras. Between the heaviness, off the headline and the lightness off the paragraph contrast between black part off the headline with blue and contrast between the life background and the big blue button. I got to say it's a little sloppy on the alignment, though the contrast is very widely used design trick. It also helps us create visual hierarchy between the elements, and it can be expressed mainly in three ways. Contrast in color contrast in the size big versus small and then contrast in weight like heavy vs light. Let's take a look at another website. Do you notice the contrast in the color about You do wide phoned and book on a bride red background to him. That's one Bulls, in contrast, see the contrast in size and weight between the headline and the text. Above and below. It contrast in the design achieves two things, Usually first, it helps us establish visual hierarchy on the page and second it creates interest. Put two identical squares together, and it says nothing. It's boring, but blow one of them to extreme size in comparison, in thes large contrast between them creates interest. Now it seems like there's a story behind it or create a contrast in collar, and it becomes instantly more interesting. Contrast in color is created by using complementary colors. Purple and yellow. Here are complementary colors, and last but not least, you can create contrast using weight. So how would you create weight Contras between these boxes by removing the feel on one off them and living it with outline stroke Full box feels heavier and empty box looks lighter. Let's see how it works in practice. Say we're working on a website for bicycles and we're designing one of the sections. The client gave us a headline, a paragraph of text and a photo for one of their bicycles. Say we don't know where to begin, but we remember that contrast trick. Let's see how we can use it. Let's start with a contrast of weight. What can we may have a looking and what can we make light? Why not the headline versus paragraph. Let's create a nice contrast between them. We can make the headline extra bold and all uppercase. We don't have to stop here. We can actually add await contrast, even within the headline. Excellent. This has made it even more interesting as we apply contrast to the elements. Yours notice how visual hierarchy starts to take shape. Okay, up next. Let's do the size contrast. Let's supersize the first part of the headline and see what happens. Go big or go home right. Aligned the elements properly, All right. It's starting to take shape. We can use it extreme crop that we have already learned and crop out some parts of the bicycle. It's looking pretty good last night, but least we have color contrast. There's already one color contrast, of course, since background is white, dark tax than dark bicycle. Contrast very well with it, but we don't have to stop there. We can add an extra color in a part of the headline, something that will contrast well with the dark text weaken simple. The orange from the bicycle sit this way will kill two birds with one stone, one great color countries between orange and dark headline. And of course, you already know they sampling the color from the bicycle helps us tie the design together . That's all by applying a simple contrast rate, plus one photo propping technique. We went from this to this. You don't even need a design software for this conduce this in Power Point. This is my favorite. Go to tricks in design. If you ever stock on struggling with making design look interesting at some contrast, star beat color Wade size, and I guarantee you it will instantly improve your designs. 42. Design Trick: White Space: This is a poster from BMW Spare Parts Advertisement campaign. It says B W am instead of BMW on the bottom, it says, use original parts. You get the joke crime. It's a very clever at, but that's not the reason I'm showing it to you. I want to demonstrate a huge design concept called White Space White Spaces, Empty space around elements in this case around there be Emma not be W am title Whitespace draws attention to the object. It's not just easier to see the object, but it becomes much more interesting and important. That's Yahoo's homepage. There's not much white space here. It's hard to tell what's important on this page. This one, on the other hand, is a whole different story. The importance of white space isn't just in attention and simplicity. It's also your design achieving its primary goal. If your websites primary goal is for people to search, then you better make sure all attention is directed towards that. When we arrive on Google, we instantly know where to Clegg on where to direct our attention. It's much less demanding to search on Google than on Yahoo, and much more likely that relations are going Google than being distracted on Yahoo and forgetting what we came for in the first place. Why space doesn't have to be white. It can be any color. It's any unused space that is in between the elements. The worldwide is a left or from the era when graphic design used to take place on Lee in print and on a white piece of paper. Let's have a look at this example say you are working on the taxi APP website. You could put a photo is a background, and there's nothing wrong with it at all. Or you can use white space to bring more attention to the message and the button. By the way, remember tinting with image overlays. Sometimes you don't have to make the photo black and white. You can keep the image colorful and still add color attained over it. Like in this case, You know, a long time ago, before I knew anything about a graphic design, I worked as a marketing manager and as a market here, you do need to create a lot off graphic materials design materials like flyers book. Last magazines were posters, advertisements on Facebook or Google Edwards or Facebook covers or whatnot. And I used to work with this Exxon graphic designer who later became became my design mentor, basically, And when we would sit down and I would look at his design iterations, I always had this comment that I would look at his, uh, whatever composition were doing. Sometimes it would be like a booklet for our company, and I would say, Oh, you know, why don't you feel the space that is like too much, too much empty space? And I always and I never liked the empty space when he was making the designs, and I would always push him to try to feel that empty space with something because I felt it was empty. Oh, man, I had no idea back then. This is quite a common reaction with beginner designers or clients who don't have any design training but are looking at the work from a kind of sort of wearing the designers had, or from a designer's perspective, they have this insecurity about empty space, and they always try to fill it with something for them. It feels like if it's empty space and it's not designed enough, keep this in mind, no user will ever complain about too much empty space. However, they will be annoyed with too much clutter on the page. My personal portfolio side uses a lot of white space. I wanted to bring all the attention to me first, a person behind the work. So I removed all the distractions and pointed the entire focus towards May. EP always does this masterfully, using a lot of white spaces of very bulls, a design that Mac book looks super important and much more valuable when it's displayed. Like that, wide space improves almost everything, even on paragraphs. Remember what we learned about line spacing? Increasing line spacing is basically adding more white space between the lines. And guess what? Designing with a lot of white space is actually easier than designing without it. Deter Rams Is this industrial designer best known for his work for Brown? He has coined these popular 10 person pose for a good design. The closing 10th principle is this. Good design is as a little design as possible, so don't be scared of white space and doing less. That's just good design. There is an exception with white space for items that are related and are part of the same context should be closer to each other, putting white space between them. We'll disconnect them and will feel like separate unrelated objects, just like we learning the lesson about proximity. For example, the headline in the paragraph on this page white space will disconnect them from each other . This does and more focus on the paragraph. But now it's an independent object, adding to the amount of elements the viewer has to process in. The original version that had line in the paragraph looks connected due to the proximity and will be perceived as a single group, sort of like those links in the navigation bar. Because of their proximity and grouping, there will be identified as a single group. Instantly. They sort of grouping makes it easy for a viewer to process the elements on the page, and it's more organized and meaningful. 43. Design Trick: Repetition: This is Andy Warhol's work because not really a Web designer, but he's a very influential pop artist. In these Warrick. He uses a popular design trick called Repetition. It's when you take one item that might not be interesting on its own, but repeated several times. And now we have something that's more interesting. This is a page from Zendesk website. You can see here how repetition off square profiles in the same style has created a very interesting layout. The repetition trick doesn't just apply to identical items. You can be applied to nearly everything, like color style spacing layout. Her petition off color is one that it's used quite often and can really tie the design together. You see how the colors from the headline repeat as background colors from profile pictures . If we move below the pictures, you'll see those colors being repeated in that paragraph as well. Thes page would look much less appealing and interesting if those clothes were not repeated anywhere else. Do you know it is one more repetition that is happening on this page? It's in the layout. Off profile shots, the position off a person, how they're edging towards the ride and their names place on the top left corner. That's a repetition of layout. I'm actually a little disappointed that esta and deep ash aren't corrupt on the right side . Like the rest, they are glitch ing the repetition a little Because of that detail, let's have a look at another layout. Repetition. This is very common in Web, and you'll see it on so many websites. You see how the layout is being repeated. An illustration on one side had line and paragraph the line on the other side in as exactly out. That's exactly to the repetition. Let's apply repetition into practice. Say, we've got this content from our client. It's the benefits off their services because each paragraph, with their headlines, are part of the same contacts. We can create a repetition in their layout. We can use a split screen layout splitting the screen and exact half. So on the 1/2 placing the copy and on the other, placing a full image at some images and repeating colors and it can look quite handsome like this have repeated several items here they lay out, obviously, the repetition off collars. I'm sampling colors from the photos and repeating them on how to headlines and final the repetition off the photographer style. Old photos are in the same style, the shot from the top of some item that is laying flat on a colored background. How about other design concepts? Can you notice them? The contrast. Did I apply in contrast here? Definitely. You'll see the contrast between the headline and the paragraph in their size, weight and color. Obviously a huge contras between left and rights plaids, one being white, another being bright color. How about white space? There is white space everywhere, each white block where the copy Seitz has a healthy amount of white space around it to bring their tension and to the content. There's even white space within those photos. Whoever took those photos, they did a great job there from. I can sate good source linking the resources. But the reason why repetition is so powerful in design is because the way we look at the world as humans, we tried to recognize patterns on everything that we look at, and when we recognize a pattern, our brain goes a little excited. Luke Luke. It's the same flu that I saw earlier. Yeah, I am. Smart design is strongly linked to human psychology. It's not that there are some laws of physics that govern design. It's completely human centric in reality, always our designers. We are the ones who demand this repetition and white space and contrast and all those design approaches because we already like them. You already know what looks good and what looks about. It's sort of like food. You already know what tastes good and what taste bad. You don't have to go to a culinary school, Teoh. Learn what? What tastes good and what not. And if you learn for your recipes and practice them when you cook something good, you're going to notice it, and so will everyone else. 44. Design Trick: Consistency: What's the easiest way to tell good design from bad one. It's through consistency. Looking at the website and noticing how consistent the layout, typography, colors, and all that is. Inconsistency is very easy to tell. We are wired to recognize patterns in everything we look at, and noticing breaks in those patterns is very easy for us to tell. Breaking the pattern is like a glitch in the matrix. Sometimes it's hard to tell exactly what's breaking the pattern, yet it's always easily noticeable. Often it's better to use poor design and be consistent with it, than have nice design and be not consistent. Consistency isn't really a trick, but more like a design principle. So I'm cheating here a little bit by including this as one of the design tricks. Consistency applies to everything, but I've broken it down in several categories for easier understanding. First and most obvious one is layout consistency. This is exactly a purpose of the grid. The grid is a great way to create consistency in layout. When alignment repeats on the page, users notice it and start expecting things to be laid out in a certain way. When this expectation is met, the users have a joyful experience of the site and they trust the site at more. One way I see web designers often break layout consistencies by mixing different text alignments together. All three elements on this frame are aligned in the center with each other, or at least they're containing boxes are, but paragraph text is left aligned. This is breaking the layout consistency and making the design look sloppy. We have to choose one style of alignment and stick with it, either we center align everything or left align them. Either of these options are fine as long as we stick with one alignment. This is an evident example. More subtle and non evident example is when we have inconsistency between different sections of the page. For instance, the middle section has the content left aligned, but other sections have its center aligned. This would be completely fine if this was a different type of text, a secondary headline or other, but it's the same headline, but with a different alignment. This is quite subtle as it spread between different sections. As we scroll through a page, we only see one section at a time, so such a subtle inconsistency isn't too big of a crime. But it's a good habit to stick to one style across different sections and even across different pages of a website. Creating consistency in typography is quite simple. We just need to create specific font styles for each occasion and then stick with it. A website has several different types of texts. There are main headlines. Those are usually the biggest size. Then you have smaller level headlines like titles and subtitles. You have obviously a paragraph text, and you have buttons. You can have more, for example, tiny captions and footnote texts, menu Links, and so on. The key is to define a single style for each occasion and stick with it. For example, having one paragraph style and keep with it across sections, pages, and everywhere on the side. In Fig Mine and Webflow, this text styling is actually one of the futures, so we will practice creating text styles in our real projects. Color consistency almost doesn't need any explanation. It is the most evident and simplest to see. Most of the time we are working with the existing brand and a logo. This means colors have been defined for the company, and these colors have to be consistent not just within the website, but across its all representation, flyers, business cards, PDFs, front office, and so on. In times where we don't have defined brand colors, then we do this ourselves. We usually choose one or two primary colors like the blue and green in this example, and the rest of the colors are monotone, blacks, grace, and whites. One way we might break consistencies by mixing different shapes on the page. On a page like this that has this smooth rounded wavy edge, introducing an angle shape like this would break the consistency, making it look very odd, but keeping with the same smooth shapes would create the consistency across the page. It doesn't have to be same exact shape as long as the shape has similar characteristics. This inconsistency with shapes can actually happen in very unexpected places. For example, when we use cutouts like this, they create smooth edges on the page. They're not evident, but they're there. When we place a non cut out regular box photo on the next section, we are introducing a new conflicting shape. All of a sudden from smooth natural edges, it went to very strict straight hard lines, and it even created this new shape that wasn't there before. Just like I mentioned in optical illusion lesson, placing objects and shapes on a black canvas will affect that canvass and create new shapes. This is especially true to straight lines and rectangles. But if we use cut out again, then those hard lines and foreign shapes disappear and the section becomes consistent with the above hero section. When it comes to photos, we have to be consistent with the style of photos as well. By style, I mean a photographic style, like colors, filters, the way models, look, and so on. In this example, for instance, I didn't do a good job at choosing same style photos. The left one has more polished look, whereas the second is more natural. The camera work seems quite different, too. I'm not a photographer, but I can notice that this is not taken in the same studio nor by same photographer. Most of these photos will have very different style between because they are taken by different photographers and in different scenarios. It can be quite tricky to maintain consistency, but there is a way. One way is to pick images from the same contributor. I've mentioned this before. Many stock sites will have this option to see photos from the same contributor, meaning from the same photo studio, photographer. If we pick photos from the same contributor, then we will more or less get the same results because Same photographer will have same style, same camera, and same habits of taking photos. Although not 100%, it's the same because sometimes they will have just different shoots and different ways of shooting in different scenarios. Also their styles can change from year to year. This is a very simple and excellent way to make your design consistent and show that it's a high quality design. I know this sounds like an insane detail to pay attention to, but when it comes to design, devil is in details. Attention to this tiny details is what differentiates a mediocre designer from a top notch one. One final place I want to discuss consistency is icons and illustrations. Web is full of icons and illustrations. They are an excellent way to show different actions demonstrate some complicated concept or simply to give a design a unique look. Just like photography, combining icons with different styles will create a very inconsistent and unpolished look. No fun. As a matter of fact, icons and illustrations are even more unforgiving than regular photos. In this example, the third icon is a different style than first two. It's the same color palette, similar round the shades, but it still looks out of place. The difference is only in one small detail in fact. First two icons have outline stroke on them. It's that black line that outlines each object in the drawing. But third one doesn't have it, and it creates a completely different look. In this example, all three icons are from the same pack and have the same exact style. Although the same size, the first to have thinner lines when the last one is a little thicker. Third icon is poking my eyes. Non designer client won't notice exactly what's wrong with it. They might not be able to put a finger on it, but they will pick up such inconsistencies and will not feel like the design is very good. To avoid such inconsistencies in icons and illustrations just like with stock photos, pick them from the same source. My favorite place to get icons is flat icon.com. Icons here and elsewhere are usually organized by packs. All icons within the same pack are going to have the same style, sizes, thickness of lines, and all that. When picking icons for your projects, look for packs rather than individual icons from different packs. This will give you a look that is consistent and polished and will have you designing like a pro. 45. Design Trick: Overlapping: here's a little advanced but very cool design trick. This trick will actually make your designs look very solid. Beginner designers that usually scared off it and very, very you'll see amateur work using this trick. So if you use that, your work will certainly appear like a pro design, the trick is to take different elements and overlap them. Do you see how the hand off the statue is overlapping National Geographic title and also the yellow frame? It makes the design more interesting and adds an extra dimension to the composition. The execution of this trick is quite simple. You take two separate elements and overlap them. It ties to otherwise disconnected elements together, and it also creates drama in the design. Something interesting is going on in our eyes now interested to solve the puzzle, making an old design and tied together rather than just placed on the page randomly. The trick is very common. In prison design. You'll see headlines overlapping with people, images with each other, attacks with tags, you name it in Web design. It's a bit more measured and less extreme as you see it in print. As you can see overlaps in These examples are more subtle on the ride. You have images that are overlapping with each other, but they don't create any complex overlap with text blocks and on the left text overlaps for the background image. Quite simple. One reason I love this technique is because you can add to an otherwise bland design and nice flair of excitement was recently working on his pricing section. Usually, products have several pricing plants right, and that has some wiggle to play with and create an interesting design. But this one only had one. My initial design was something like thes, which looked very bland and boring. There was no excitement today. Send felt like it was just randomly put on there. I've created a new shape and overlapped it behind the box. Instant improvement. Now this is a non traditional shape. If you introduce something like this on the page, you have to repeat it again. Remember the repetition technique. So I used the same shape and overlapping trick on the other places on the page, which made a pretty good result. Let's see how we can apply this into practice. Say we have a section on the page where we want to show some images. We could arrange this images to something like this, which is reasonable but a little boring. Or we can overlap them and create amore. Interesting visual. You've seen this sickening 1,000,000 to self times with photo collages. Well, okay, we do have something toe overlapping here about what to do when we want to use only one photo. Simple. Let's draw box and overlap it with the image. And now we have an interesting design. Plus photo doesn't look like it just hanging in there randomly, but feels like it's laid where it belongs. The color of the box is important. In this case. I have just simple the color from the image. But in other cases, this a good opportunity to use brand colorist or repetition technique to repeat the colors across the page. One thing to note. Overlapping trick. A lot of times breaks the grid. That background box isn't aligned to the great overlapping and the create our sword are opposite concepts. Overlapping Trick is intentionally trying to break the alignment and bring some funding. The composition Breaking the great intentionally is not a crime, as I've already mentioned the intentional is the keyboard. Every design decision has to be intentional, and if it is then breaking and bending the rules, a little is welcomed. In this case, we're actually not messing with agreed that much. The boxes in the background. It's sort of part of the background canvass the image tax and other elements sit on that canvas, which in itself doesn't have a great It's the elements that are on it that leave on the grid. The same goes for full with background images. They are part off the cameras and sit on the background layer so they don't need to be aligned with the great. Let's do an exercise so you can practice this overlapping technique. 46. Assignment: Overlapping: In this assignment, you'll practice both overlapping and a bit of repetition. In the Figma file, I have prepared one frame with three text blocks inside. You'll be designing a benefit section for a travel app. Based on the way I have laid out the text, I think you can guess that I want you to create this alternating layout. Text on one side and image on the other side. But instead of illustrations using regular photography, and I want you to find photos for each text block. This way, you'll practice finding photos too. For the overlapping style, I want you to choose one style and use that with all three blocks. You can either use a photo colage type of overlapping. This will require you to find several photos for each block. Or you can use one photo and use a background box behind the photo. As usual, use other concepts you have already learned, use the grid, choose the phones, create hierarchy, and so on. I'm not going to do an example demonstration this time because you already know how to do all of this. Have fun. 47. Design Trick: Tension: design shares a lot of similarities with music. Just like designers. Musicians also use contrast trick, which can be contrast between high notes and low notes between going fast and going slow. They also use repetition, which is the rhythm off the sunk. They even use white space, which are pauses and silent parts off the music. One more technique. These two field share is called Tension in Music. That's when melody starts to pick up. Ah, and it's kind of adds to the momentum and then becomes a bit more dramatic and at some point kind of explodes in this kill me nation in, for example, and techno music. It's kind of going to this very heavy rhythm. Attention is something that makes any creative work interesting, and it's used in other fields besides design and music. For example, in fiction, tension is called suspense. So how is tension created in design? This a square laid flat on the surface, in complete balance and in central alignment? There's no tension here at all. Nothing is happening. No drama. It's solid and grounded. How about now? This is a different story, isn't it? The square is not laying flat anymore. it's standing on its corner, which seems like either it's going to tip over or fullback on the flat side with a simple tilt, we have created a lot of tension. Tilting elements is one way to create attention. There's more. You can move elements to the edge of the frame or move elements out of balance or high parts of the object. This is something we've already played with as part of the extreme cropping. The tension is one of the reasons why extreme cropping is such an interesting trick to use . And if the extreme crop is uneven, like this movie poster, it increases the tension even more. Remember the rule of thirds Tension is exactly why this rule works really well. When objects in debt center feel stable and a little boring. Off balance placement can create more visually interesting look. Overlapping is another way to create tension. Overlapping does have other merits, like adding extra dimension because objects are layered on top of each other or because interlocking elements tie the design together. But it also adds tension because two objects are now interacting with each other in a very interesting way. One way to create tension and movement in design is by using diagonal or angled shapes. These sort of tension is very useful when you want to portray speed and movement in your design. Why do diagonal shapes create tension and movement is very easy to demonstrate? This is still image, but we can feel that circle about to roll down. That's how angles at the feeling off movement in design. 48. Assignment: Tension: In this assignment, you're going to practice tension. Nailing down tension method does take some practice. I want you to relax and just play around. Don't worry if you're not too happy with the result, just have fun with it. That's how usually tension works out. You mess around for a while and at some point, one of the version looks quite all right. There is one frame in this figma file. I want you to design the section in a way that you create some tension in the design. As we already discussed, there are several ways you can create tension, for example, by use of angles. How do you use angles? Well, remember that classic split screen layout that we usually use for such sections. Instead of having it straight and erect angles, we can make them slanted. To edit any shape inside Figma, just double click it or click edit object in the tool bar. Now you'll get this sort of view. The points on the corners of the rectangle can be dragged around. Drag them to your liking to make a slanted rectangle. When your dunk heat enter, Don't forget this because the screen is now locked in this edit mode of the shape, and you won't be able to actually click on any other element and do anything else on the page. I sometimes accidentally double click on shapes like this, which then puts me into the edit mode and I'm not able to actually click on anything else, and I'm wondering what the hell is going on, and it's not very evident in Vikma that you are in the edit mode. Keep in mind if you're not able to select some element, that means you probably in the dit mode of one of the shapes. Now we can use the shape to crop our image. We can either fill the shape with an image, the usual way just by placing the image inside it as a fill. Or since we already have the image on the page, we can just edit the shape of that image. Remember, the image in Figma is just a regular shape with image fill inside. Anything you can do with a rectangle or any other shape, you can do with image two. We can just select the image, click Edit object, and change the points of the shape to create an angled shape. If you need to change the position of the image inside or change the size, you can do that using the crop tool. By the way using such shapes to creatively crop images in design is called masking. That shape we just created is called a mask. Now enlarge position the image inside the mask just the way you want to. And there with a few clicks, we already have a layout with a lot of tension. You can then change the color of the background if you like. Or change the angle and position of your mask. Another way to create tension is to align an object on the edge. This, you can only do with certain objects. For example, you could do this with a headline or some text if it's large enough. Doing this with a paragraph text will make it look like it's a mistake. I sometimes use this sort of edge alignment when I'm numbering steps or something like that. Also, you can create tension using off balance layout or by overlapping some elements. For example, overlapping headline with that photo or putting some elements of balance. All right. Now it's your turn, you already have enough ideas how to create tension and don't forget to style the headline and the text and the button. Most importantly, have fun in this exercise because when it comes to tension and overlapping tricks, the best work if you're having fun and playing with it. So have fun and play around and see if it works out. If it doesn't, don't feel too bad about it. It will come with a little bit of practice. 49. PART 2: PRACTICE DESIGN LIKE A PRO: you have finished part one of this course, give yourself a pat on the bag. That part was a handful. Great job. You have learned the secrets of good design and how to make your work look beautiful in this part. We're going to get a bit more serious. Ain designer home page from start to finish, Let's go. 50. The Mimic Method: I want to share with you a dirty little secret off all creative people. Every designer, every artist, every inventor. Every musician that has ever lived has used this method to achieve mastering their skill. This method is called the mimic method. You see the beginning steps off. Learning any new craft is mimicking the experts in that field. So if you want to learn how to cook, you grab Gordon Ramses or John Oliver's cookbook, and you start practicing some recipes. You don't start by inventing food from scratch. You start mimicking those recipes and then practicing them. And once you gain a little bit of experience and a little bit more confidence in whatever recipes have been cooking, then you start tweaking them a little bit. And then at some point, you start re inventing and creating your new recipes. If you're learning how to play guitar, you don't start by writing new songs, Nor you start by mimicking other musicians, meaning you start playing their songs. And like every other beginner guitar player, you start by learning wonderful. Many beginner designers get themselves trapped because they think the moment they start designing, they need to start creating new or an original work, and they get discouraged when this doesn't happen. They think that they don't have talent for it, but they skip the most important stab, mimicking the experts by mimicking experts. Not only you get experience and confidence, but you also practice very good habits because every good design work is full. With all the good design habits that we discuss in this ah course, be typography and layout consistency and all the tricks of white space and tension and overlapping all that thing is in good. I good design work, and you're basically practicing all that while you're mimicking somebody in sort of copying and replicating their work and inspire using their work is an inspiration. And once you start creating your own original work, you already have very good design habits ingrained in you. Mimicking has three stages. Stage one is coping. It's taking someone else's working, just copying. Get pixel by pixel it sort off like playing somebody else's song or you cooking lasagna using a recipe. This is done for practice rather than for real projects. When you're learning by copying your learning a lot of human design decisions that were made by a pro. This is where every creative person begins. Be pulled McCartney or Picasso In stage two, you're remixing. It's taking somebody else s work in giving your own twist to it. Just like food recipes. You start tweaking ingredients. Little by little. You change that phones, you use your colors, tweak the shapes a little bit. Now you've created something different. However, if you put two works together, the inspiration is clearly visible. In this stage, you can already practice working with real projects in the final stage three. Now you are drawing inspiration not from one particular work, but more like several different works or different styles and maybe even like trends. And here you add even more personal touch. So the final result doesn't resemble any one particular work anymore. And you want couldn't say that it's a remix off this particular website or this particular design, although sometimes you could say that there is clearly an influence or some specific style or some specific trend in design, there is no level beyond. There's something like truly original work, because if things aren't really based on reality and influence by reality and existing styles, then it just becomes irrelevant and quite confusing for regular audience. Sort of like the bizarre high end fashion items. Too much originality will lead to products that people don't understand and don't want to use. That doesn't mean that people don't like new things. They dio. People do little enjoying your websites that look fresh and your fashion stylist technical crash. But they enjoy these things because most of the time they've resemble something from the past and something existing, but looking at it from a very new perspective and new outlook. So it's refreshed look of something familiar. So the taste of the audience really matters for a particular work to be appreciated or rejected. This strange looking jackets, sweater or sponge ball spans is and familiar to you and me. But it might be drawing inspiration from some other Warrick and particular audience off. That show might be familiar with that inspiration, so they might easily understand it and appreciate it. You today start to say that with a straight face. Also, the stages are like a volume knob, not clear cut transition from one to another, but more like smooth increase off intensity, with different levels within each stage. We're going to practice all these three stages. But before we do that first we need to learn how to find the right inspiration and based our work on that. And make that instead off Trecia once. So let's do that up next. 51. The Biggest secret of designers - Inspiration: Pablo Picasso was looking for an inspiration for his next work. He got fascinated by African art. He used Dogon Tribe mask as his inspiration and launched himself into the Kubi style that he's most celebrated for. As you can see, the resemblance is incredible. His work was actually quite different before this period. Good inspiration can be equally transformational for your work. Let's say you're working on a project to design a website for a financial company. Your first instinct might be to go in Google and look for some examples for other finance websites. But what you get here are data templates that look the same, and there's nothing inspirational about that. Why is Google bad place to search for design inspiration? Because Google isn't a website that curates good design work. It has a very different purpose and it searches and ranks websites in a way to show content that has been there that has authority that has been there for ages and has been visited by a lot of people. And that's exact opposite of what you want in design inspiration. A keyword search for Finance website inspiration, led me to an article that featured websites like this, and the article called it innovative and inspirational website designs. No wonder it features such data designs when the article is from 2016. That's way too old for web design inspiration. Add to the fact that the mentioned websites have probably been built a couple of years prior to the article. Also the fact that the author might not be a designer at all, and you get terrible website examples. So many beginner designers make this mistake, they look for web design inspiration in wrong places, and they start mimicking very outdated or ugly web design work. Using quality inspiration for your projects is going to set you up for great design results. And I'm going to teach you my favorite places to find great and beautiful web design or an other design inspiration. One of them is dribble.com, that's Dribble with three Bs. Let's do that same finance website search here. Here are some of the results up close. This is miles ahead of what we saw on Google. The design style layout and Carls look fresh and modern here, not 90s. Dribble is basically designer show and tell. To contribute, you have to be invited by an existing member, so it creates a level of checkpoint to keep the bad work out. The search algorithm is different from Google two. Here, one of the sorting parameters is number of likes, meaning how many designers have liked the work. That's a better way to tell good work than a random finance blogger picking sites based on his taste. Many of this work are just designers playing around. That means that they haven't even been turned into real websites yet. That's an inspiration that is ahead of its time. After a while, you start following designers that you like and build a very good personalized inspiration for yourself. You pick designers that have a stem style that you like and feature design. I also use these two websites to find my inspiration. These sites curate live websites and landing pages. If you don't know what a landing page is, it's a page on a website where a visitor lands. This can be a home page of our website or a special dedicated pages used for marketing. I really like these sites because they are really well curated. The screenshots are well displayed, and I'm able to see the live website and check it out in more detail. There I can even see phones that they use sizes animations and interactions, and even see other pages of the site. Really an excellent place to find inspiration. My third favorite place to look for inspiration is actually Pinterest. Although on Pinters, you have to be a little more cautious, it's not curated content by designers. So just like Google, you can get quite a bit of bad apples. But I look for inspiration on Pinterest for one reason. They have some amazing search algorithm where whatever image you are looking for, they can find similar styles with amazing accuracy. For example, if you find a design style that you like, click on this icon. And look at that. Without even me specifying anything, it's surface designs that are very similar in style. You see how the examples on the right have wavy smooth, rounded shapes and edges, especially in this particular design. It's so similar in style, it's uncanny. Here, another example for a totally different style. This time, no vibrant colors or rounded shapes, but more photography heavy designs. This is a very powerful tool for a designer. A lot of times, I'll find a specific style that I want, but I'm not able to see other examples of the same style because I can't put them in words properly. By coming on pinras, I can find many examples of the same style and collect several different examples for my inspiration. Just like because one great but a bit advanced way to look for inspiration is to look for it outside of the web design field. For example, I was working on this project that was a charity website, and I wanted to build something and design something premium and a bit different and not looking like other charity websites. Anywhere I looked for inspiration, all I would get is this very common theme of sad looking African kids. That just looks very cliche. Sorry, kids. Instead, I went and looked for movie posters, because movie posters are designed amazingly. They depicted a lot of drama and tension. I found this poster of sicario, and I really liked the style. I was doing this on Pinters, which gave me more suggestions that look similar, and then boom, this poster showed up. This gave me more concrete ideas that I could merge a photo of a person with something else, just like Peter Dinklag's face merging with the background scene. This led me to create a hero section that looks nothing like a template charity site. 52. Assignment: Mood Board: When designers gather different work for their inspiration, they arrange what's called a moodboard. It's basically putting together any of inspiration that you think will be useful for your project. This, for example, is a moodboard from one of my client projects. There are screens of different home pages that I found on the sides that I mentioned before. You can even draw inspiration from your own personal work. For example, one of these shots that I put here is my own work. Inspiration doesn't have to be a website design. You might gather illustrations that you like, app screens, art, architecture, photography, movie posters, or you know, Do gun tribe mask just like Picasso. There are no rules. It's basically setting the mood for your project, just like the name says. In this exercise, we're going to practice creating a moodboard. Your goal is to go on those inspiration websites that I mentioned previously and gather inspiration for a website for a Uber kin R sharing app. The app itself is not your project. The project is basically a website, like a home page for the Right sharing App. Let me demonstrate an example. I'll moodboard for a team collaboration website or a landing page. You know, like Slack and Trello, if you're familiar with it. I have my inspiration sites open here. But first, I'll start looking at websites, I already know. I'm going to check Slack Asana is another one that I know in Trello and see what they're doing. When you like a website or a section or any parts of the page, just take a screenshot. We will organize all screenshots and images later. Okay. Let's now check on other inspiration websites. Dribble search with keywords, isn't that good, so try using as little keywords as possible and s in different words. This one isn't bad. Often on dribble designers post the screen of the full page, which you can see in the attachment right here. This way, you can see the full page in more detail. I'm just going to save the entire page. Here, I like these overlapping interface elements. This is nice because it gives more idea of the product. Let's check other inspiration sits. I usually spend about an hour gathering inspiration. It's an important part of the design process, and if I do this part diligently, I have more easier time designing. I I don't, I often need to come back and find more inspiration. A. Pinterest is actually where I save random inspirations outside of projects. Like if I'm randomly browsing the web and I come across to some interesting design, I will save it on Pinterest for future in reference. It's a great place to have your own personal collection. You can create your personal board on Pinterest then install the browser extension and save screenshots and images from the web to your private collection. Then you can come back to the pints later when you're looking for some inspiration for your project. Now I'm going to look off topic, not necessarily for team collaboration websites. This isn't bad. This section is very lovely. I like photo overlapping with those graphics. La Paninja, or Landbook are excellent because we can see live sites, which can give us ideas on animations and interactions and all that stuff. I think we have enough, and now we are going to create a moodboard in Figma and place all those shots in there. Draw a basic frame in Figma and pull all your screenshots on it. I use dark background because most websites are on white, so they will have better visibility on a dark frame. It doesn't really matter how you arrange them here. You can scatter them as you like. I. And that's all there is to it. That's our moodboard. Later we'll learn how to actually draw inspiration from all these things that we collected and how to use them in project while we're designing it. Now it's your turn. Go ahead and collect inspiration for our website that is for R sharing app. 53. Assignment: Figma Homepage Design: Know how to gather inspiration for our projects, and now we're going to learn how to use that inspiration for our designs. As I mentioned before, there are three stages to the mimic method, which is copying, remix, and the final stage creating. In this lesson, we're going to practice first one, the copying. You're going to fully recreate Figma homepage. Objective is to match their design as closely as possible, pixel by pixel. By doing so, you'll gain valuable hands on experience. You'll practice designing very common website elements such as navigation bars and different components and footar and all that. And do all that while you don't have to worry about colors and typefaces and fonts and layouts and all that design stuff because you're just copying what's already there. One small step at a time, just like learning how to cook or play a guitar. Okay, so open the Figma file link to this video. Here you'll find the screenshot of Figmas home page. It's not a full home page. I've removed some of the sections to keep things simple. And it might not be the current version of their actual home page, but that's okay. We don't care about that. It's a pretty simple and timeless design, so it's perfect for this assignment. On the right, there is a blank frame where you will recreate this exact homepage. When you work on this assignment, I want you to notice all those design principles that you've learned so far. Notice how are they using hierarchy and contrast, how are alignments made, notice things that you think they've done well, and those that you think might be improved. With what you have practiced in Figma already, you know enough to complete this task, although I'll get things started and demonstrate some of the parts. First, let's prepare some guides so we know where to align our objects. It doesn't look like they're using a strict grid here on their website or at least I couldn't figure it out, but I don't think they are. We're going to have to draw guides manually. This is quite simple in Figma. In the menu you search for the ruler, so you can enable it. Once you click on it, you'll get this vertical and horizontal ruler on the page. To draw a horizontal guide, click and dag from the horizontal ruler, and you'll get this horizontal guide, which you can position anywhere on the page or on the frame. The same thing goes for the vertical guide. Now, where do we draw these guides? On this frame, I have included the screenshot of the home page. It's hidden now. If you enable it, you can use this as your helper when comparing your design with the original. While you have this enabled, draw the guides on the edges of some of their elements so you can define the container where they have all their content put together. That should be enough for now to delete a guy, just select it and hit delete. You can hide the screenshot now. Next, let's paint the background. L et's insert the hero image, I have actually saved all the image assets in this file, so you can easily insert them in your design. They are inside these components tab. Components in Figma elements that we can create and reuse later. This is a cool feature, and we will talk about it in more detail in a later lesson. But for now, all you need the components for is to grab the image assets. You can also find these images in the components page. This is actually where Figma is grabbing the components from. If you delete something here, it's going to disappear from the components panel as well. So find the hero shot and drag it onto the page. The same thing you can do with every other image, including the logo. Now, let's insert the text. The typeface that they are using is a paid phone. Instead, I found a free alternative on Google Phones that looks similar. It's called Carla. It's not an exact match, but a pretty decent substitute. They're using a bold style for the headline. Let's add the paragraph underneath. It looks like it's 18 pixels in size. I have included these texts in the page here so you don't have to type them out manually. S. Now, let's add the button. Buttons are just rect angles with text in it, so we draw a angle and just sample that color from the button. Their buttons have rounded corners. To do the same, we can change corner radius of our rectangle from the properties panel. Not sure how many big sells they are using, so we're going to have to do that by eye. Four seems like a good match. Lastly, we need to add the button. It seems like the text size is same as the paragraph. We just have to center align the tags with the rectangle from this alignment panel. There's just one more thing I'm going to show you how to do, and the rest is up to you. We haven't had a chance to design a field like this yet with a border. As usual, this is just a rectangle without a fill color, but with a border. In Figma, that's called a stroke, which you can add to any rectangle from the stroke settings on the property panel. Remove the fill of the rectangle by clicking minus on the fill or just change it to white. Changing the color of the stroke happens just like anything else. And you can change the thickness from here if you need to. That's all now you know everything you need. One last thing, this section right here has a longer text. I have included these texts in the page here so you don't have to type them out manually. That's it. 54. Chat App homepage design: Part 1: These and upcoming videos we'll practice remixing, and this is going to be your first full project from design to development. First, we'll design a home page, and then we'll take that home page and we'll build it and develop it inside Webflow. We're going to take an inspiration. And instead of copying git just like we did with Figma home page, we're going to remix it, and we're going to use our own content, our own photos, and our own colors and change some things if we want to, and if we can. I found this really nice design by Philip Oustich and Balcomb Brothers on Triple. We're going to use Phillips Designs as our inspiration, remix it a little and design a new home page based on it. This time, I'm going to demonstrate the full process so I can show you new things that you will need to learn in Figma. It's going to be interesting. This demonstration is long and it's split in four parts. It's best to follow along, so fire up your Figma. As always, the Figma file is in the resources. First, let's set up our frame. You'll see that the width of the screenshot is 1,440 pixels. This is the same size as a desktop frame in Figma. Now, let's add our grid to the frame. I'm not sure what exact grid they are using on it, but we're going to use our own 12 point grid with our usual settings, although let's match their margins on the edges. Not the margin on the top now bar, but the one on the content. To measure anything in ma, just draw a rectangle and then check the dimensions of that rectangle. It's 140 pixels, so we will use this as our margin for the grid. There, now it's a close match to their layout. There are some differences in their layout like the bar sits outside of the grid, and some other elements seem to have different logic too. But for us, we're going to stick to our grid as much as possible. Good. We're going to start designing the hero, first, the background. Pulling in our own custom colors is a great way to remix a work. Let's find some color inspiration on drivel. For your designs, I want you to source your own colors just like I'm about to do. I'm going to grab a couple of options. Just screenshot your inspiration or save the images by right clicking and save S. We'll place them into Figma later. I really like this. Blue yellow or blue orange combinations are exciting color pairs. Now, just place your screenshots into Figma so we can sample colors from there. What I like to do is to put one color as a background and another as a button on it, and then see how the combo works together. Some colors might work well next to each other, but if you put one on top of the other, they might have very low contrast. They're both quite nice, but I'm going to go with the blow option. You can lock the background layer from the layers panel so it doesn't get in the way when designing other objects on top of it. Now let's add the content. First, we have to choose our fonts. The fonts like Colors are a good place to do an easy remix. But sometimes we might really like the typography that they are using, and we might want to use the same or similar fonts. If we know the font they're using, great, but if we don't or if it's paid phone and we don't want to pay, then we have to find a similar alternative. That's what I'm going to do here, so you can learn how to look for font alternatives. I don't know exactly what they're using in their designs, but let's head to Google Fonts and see if we can find something similar looking. So I'm going to narrow down the results. It's clearly a Sansari font. I'm going to use the same tax as a sample because that's going to make it easier to find similar fonts. Notice how symmetric are the letters. The letter O is a perfect circle instead of a usual oval, and that's a good hint. The biggest tele is the letter A. It's not that usual A that you get in most phones, it's a handwritten style. Those are enough hints to find similar phons. Look, Monsat is quite similar. The O is circle as well, but the As are different. I can use this if I don't find something closer. But there, Poppins is a really close match. The O is a circle and the A is the same style as well. There are some differences, but this is good enough. In your case, you can either use the same phone, pick your own, or source the phone from another inspiration up to you. L et's match the style. It seems like the weight is something like semi bald. The line height is tighter than a default value, and that's a great design decision. On big headlines like this, you need a tighter line height. Remember what we learned about the gravity of font weights. Also, if you look closer, you'll see that letters stand closer to each other. This might be the default value for their particular tight phase, but it's highly likely they dec spacing. This again is a good idea. Have a big font like this looks best with a tighter space. We can decrease letter spacing from here. As for the body text, if you zoom in, you'll see that they're not using the same type face as the headline, and that's probably a good idea because the same phone might not be the best choice for paragraph text. It's too symmetrical. The paragraph text looks more neutral and generic, like Roboto might even be the same, so we can use that. 55. Chat App homepage design: Part 2: And we're back. I'm going to use rounded buttons as well. You can feel free to remix here if you want to and use rectangular buttons. To make buttons round, just increase corner radius until they are completely round. For the phone, it looks like they're using smaller paragraph text, but a thicker style. That looks about right. The second button is what's called a ghost button. This button combination is a great approach because remember what we talked about in visual hierarchy, you want to guide your audience visually from one element to another. If you have two buttons next to each other and use the same style on them, the audience won't be able to tell which one is the primary button, that leads to the primary action of the site. To create this ghost button, we need to remove the color fill and add a stroke to the shape. Then change the color of the stroke. Let's check the grid. The buttons aren't aligned with the grid, but that's not a big deal. Buttons and tax elements are flexible and they shrink and grow based on the tax, so we don't have to squeeze them into a grid. Sometimes it's better to. But in this case, it's quite close and shrinking buttons. I'll snap those bad boys to a grid. Let's move to our hero shot. It's quite an interesting collage. Do you notice one of the design tricks where you covered the overlapping trick. Let's create a similar art. We need to find and add a couple of similar photo shots like those. This should do. Some of these images work, but some don't. When you combine images, always remember the lesson about consistency. Combined images that are very similar in style. Like these two are similar. They are not facing the camera or looking at it and they are proportional to each other, meaning the photos were taken from a similar distance. You don't want to match these two together. Looks like they have nothing to do with each other. The right one is looking into the camera, facing straight, and she's closer to the camera, making her face bigger in size. All right. These two look good. Free photo options are quite limited generally, and finding the matching style is a little more challenging. So keep that in mind. Now let's create that dotted background shape. Just draw a circle, choose ellipse from the shapes or just heat. When you draw on apse hold shift to draw a perfect circle. Then just start duplicating the circles horizontally and vertically to create that dotted. Select them all. Right click and group selection or use a shortcut control or command. When you position your dots behind the image, make sure to not have an odd overlap with an image. See how the dots are neatly sitting around the image and try to use equal spacing. You don't want to create an unnecessary tension by doing something like this. Now let's find some mock up screens for our imaginary product, just like they have it here, and also something that we can later use down below. What we're going to do is find some free mockup. A good way is to find such resources for sketch, which then can be imported into Figma. Of course, we could search for Figma resources directly, but as this is a relatively new tool, the resources aren't as plentiful. Sketch p sources.com is one such place, and also sketch is a good place. I'm thinking to use some sort of chat or team collaboration application as our product. Doesn't really matter anything that will fit our designs will do. I found this one previously, which is pretty good. Download and zip. Now, go to Vikmas dashboard. And click this import file and once it's not important, just open up the file. Before you import your file, make sure that you're not trying to import a Zip file, because that's how usually most of the resources that you download from Internet will come in as a Zip file. If you try to import that, and this is going to happen because the only files you can import in Figma are sketch files and Figma files. So if it's not either of those, then it's not going to work. So what you need to do, You need to first extract the file from the Z file in MAC. This is pretty easy. You just double click on it, and you will extract right away and you'll get this file here. In windows, I believe it's you right click and then there is an extract here option or extract all, something like that. Then you double click on it and it will import and transform into a Figma file, right here, and then you just double click on it and you'll open. And this is how you can import any of the sketch resources inside FICMA. And to be honest, at this moment, I'm doing an update on this video and Actually, a lot of Figma resources have been increasing lately, so you might not even need to get sketch files anymore and you do explore Figma resources, which you can find in my website that I shared a page, which is vacas filly.com slash resources, and I share there are many different sites that have Figma resources directly, so you can find different websites that provide free, completely free, do anything you want Figma resources that you can import right away with a link. So when you open this file, there is one thing also that can happen. You're going to get something like this. You're going to get this banner, and it will say missing phones, and then you'll get blank right here. If you're not getting this pop up, you might be under right here, maybe you clicked away, missing fonds. What you need to do here is just replace these missing phones with something. You just select whatever is missing, select some phone from F M right away, for example, roboto, just do that and just continue doing that for all of them, and then click Replace fonts. And all the tax points will be replaced to roboto in this case. That's it. That's how you import a sketch file into Figma. I'll save this screen in the Figma file on one of the pages. If you're going to reuse the same chat screen, then you can just grab it from there, so you don't have to go through the process. I think this chat bubbles will be nice to use in our hero shot. Let's copy it in our document and see how are we going to use them. I think I'll grab a couple of smaller ones and sprinkle them around to create a sort of chat experience between these girls. I'll use yellow here because I'm going to put it directly on the blue background, so blue won't work. And also change the profile photos to the girls. M. M. M. M. M Mm hm. I came out quite nice, actually. I'm not going to add that dashed line. It's enough like this. To many elements can add to the noise. One thing I don't like though is the yellow button. It was nice and prominent before, but now that hero art has yellow in it, the button is fighting for attention and sort of trying to visually connect with the art. The shape doesn't help either. The button is rounded, and those message boxes are rounded too, so way too much similarity. Changing the color to white should fix this issue. That's much better. Now, the art looks separate, and the content on the left seems like its own thing. It was sort of merging before. 56. Chat App homepage design: Part 3: We're back. Finally, let's add the Na Bar, and we're done with our heroes action. Let's create a logo for our fake chat application, and let's give it some original name, something like chat app. We can use Poppins as our talk face and create that similar contrast of thin and thick, just like they have it on their logo. Remember this trick from the contrast lesson, combined thick and thin and bam. You have an interesting element. Let's add some navigation links and the button at the end. Here's another cool Pigma trip. Select all links and in the alignment panel, click tidy up. This will usually distribute objects equally between them. But we can go a step further and set exact margin between the elements right from here. Let's use 30 pixels because that's our default margin of the grid. We need a button. Let's create a button out of one of these links. When we put a button in the Navbar, it's usually best to use the same tile as the nag link. Looks better. Let's use the same 30 pixel margin from the top. I'm pressing out or option key here to see the distances between objects. And we're going to align everything in the navigation bar horizontally in the center. Always check your designs in 100% view because those are the real sizes and dimensions that are going to go on the actual side. Now for the middle section, I'm going to do it a little simpler, just with a headline paragraph and just one screen of our chat app that we already have. I'm going to use exactly their font color. It's what you'd call of black, black, but not as saturated and sharp as a usual black. I'm going to add that black to our palette. It's a good choice for our palette as well because it has some blue inside like a blue hue. You can see that inside the color map. Let's remove the letter spacing because this headline isn't as big and heavy anymore, so we don't need as much tight space. Let's do the same for the paragraph text. I think they're using light version here, but I'm not a fan of thinner paragraph phones because they are sometimes harder to read on lower definition screens. On phones, tablets, and retina display laptops, it's fine, but on desktop screens with less pixel density, they are not going to be as sharp. Do you notice the visual hierarchy they have created here? The paragraph is smaller, thinner and lighter color. I'll do the same with the color. We can just decrease the opacity of our te. And that's enough. 70% is good. I won't bother filling this one out with real text. Let's head to Google and generate some dummy text. There are websites that can do that for us. This is one website, for example. We can specify amount of text we want and it can generate it for us and then copy the text and paste it in our designs. Center and let's snap it to our grid. It's a little t. Let's give it a little more line spacing. That's about right. I'll skip the button and add the mockup of our imaginary chat app here. Now instead of copying this whole thing in our document, I'm actually going to export it as an image and place that image instead. We'll make it easier to work with and we won't overload our page with unnecessary elements. To export anything from Figma, select it and in the properties panel, go to Export and click plus You can pick different file for much. JPG is good for us. This year that says one x, lets you change the size of the export. If it says one x, then it will export in its exact dimensions. If it's two x, then it will double. If your designs are 200 pixels by 300 pixels, the export is going to be 400 by 600 pixels. What's this for is to make our assets looking nice and crisp on HD screens. More about this later, let's not get ahead of our cells, for now one x will do just fine. Let's place our mock up in our designs. As you can see here, they are using this browser bar on it and also a shadow behind the. Let's pass the browser bar, but add a similar shadow to our image. Shadows are under effect. Click plus icon. The first thing is usually the shadow. It added this small shadow. This doesn't look very nice. Click the icon to edit the shadow properties. Let's use our black as the base of our shadow and it has this little blue in it which will make it look more like part of our designs. When you add color with 100% opacity, you get this weird shadow. Never do this. This isn't really a shadow. Figs default 25% is generally the maximum opacity you'd want to use for your shadows. Blur is basically how the shadow spreads, how it feathers out. Play with it so you understand how it works. They're using a heavy blur and low opacity on their shadow. I quite like that and we'll do something similar. X and y is the offset of the shadow, meaning which way the shadow falls. X for horizontal offset and y for vertical. When they are on zero, it falls equally on all four sides. If we add horizontal offset, notice how shadow moves towards the right. If we add a vertical offset, it moves down. Or if you go negative values, then it moves up. Good design practice is to add positive vertical y offset because light most of the time comes from the top, be it outdoors in the sun or indoors the ceiling lights, and if the light comes from the top, then it will cast shadow pointing downwards. This just looks weird. It doesn't even look like a shadow. Often I see websites use no offset at all, and that's not very natural. That means light source is coming directly from the front, like someone is pointing a flash light at an object, not a very common scenario. Adding horizontal offset isn't very common. Some designers do it, but it's not my thing, and I don't think it's a wrong thing to do, but for elements that are part of the interface, like this image, the buttons, cards, and so on. Shadow with only the vertical offset looks the best. Keep x to zero and add some vertical offset only. That looks about right. I'm eyeballing here, not using any particular guidelines with shadows, just looking what looks the best, most natural and nearly unnoticeable. That usually is the best thing for shadows, that it doesn't feel like it's there. Otherwise, it creates extra shapes that our eyes need to digest. They're using rounded shapes on their mockup. It's quite nice. Rounded shapes are usually the nicest sin web design. They feel like finished object rather than unfinished. Of course, strict edges have their benefits as well. Again, no rules with the rounding the corners, but if we match it with the roundness of the shapes within the mockup itself, we'll achieve a more consistent look. And that's quite nice. Let's add those dotted patterns behind it. Using shapes like these dots or other shapes are a good idea. They add an extra level of dimension. All those other benefits we have learned in the overlapping trick because that's what this is overlapping. It doesn't have to be the dots. It can be circles, rectangles, triangles, or any other of shape. But obviously, it has to make sense. Then when we repeat these dots across our pages, we get the benefits of repetition trick. It creates this rhythm of the design just like a beat in a song and ties the whole design together. A. Okay, I'm going to pass the boxes here. I'm not going to do them and go to the next section right away. 57. Chat App homepage design: Part 4: And we're back with the final part four. This here is a call to action section. It's where you directly tell the audience to take some action. Sort of summarizing the entire page. It usually has buttons on it or directly the sign up form. They're using the same purple, but with decreased opacity, let's do the same with our blue. It's quite nice. 10% looks quite good. Lock the layer so it doesn't get in the way. I'm actually going to shrink this headline here, so the word small jumps to the next line. It will look better. They're using a white button here, but I'm going to stick to the ghost button. I'm pressing out or option key here to see the distances between objects. I like the stars rating and a small copy here. This is called social proof. Great idea to include something like this on call to action sections. Ms de siding easier for the users. We need a star icon. Let's go to flat icons.com and search for a star icon. We can download it for free from there. Icons here are free for personal use, but if you're going to use it somewhere, then you credit the author or buy their subscription. We need SVG format, which is editable in Figma. We're going to be able to change color if we want to. On sites like flat icon, we typically have two file formats in which we can download an icon, PNG and SPG. Whenever possible, you should use the SPG file format for items like icons and illustrations. Why? For two reasons. First, SPG is a vector based image. This essentially means you can scale the image infinitely. You can enlarge it 1,000 times and it will not lose its quality. It will remain perfectly crisp. The file size won't increase with a larger image either. So it's the ideal file format for web design, both for image loading and quality. PNG, on the other hand is a pixel based format, so you can't scale it up. Whatever the original image size is, that's what you're stuck with. That's why the P&G download option here offers different sizes, whereas SPG doesn't need to. The second reason why SPG is batter is due to its editing capabilities. A SPG C can be edited inside Figma like a regular shape. This is useful because we often want to change colors to use our custom color palette for the project. PNG is not editable, so you're stuck with the color it came with. In this case, I want to change the color of the star and use the yellow color from our project. Unfortunately, SP G download is a premium feature on flat icon. This is usually the case with large icon provider sites like this. However, we do have the option to edit the color directly on the site and download it in P&G with our custom color. You just need to register for a free account. Once you log in, you'll be able to edit the color, paste in the hex code of our custom color. And download the icon in PNG for free. Besides flat icon, we have other options from which we can download free icons. Sometimes even free SPG formats are available. I have linked such sites on the resources page, so you can find them there. One such option is Google's material icons. Look for the star, enable the toggle to make it filled. Change the style to rounded and download in SPG. We can change the size and color in Figma. No need to do it here. You can also just copy it from here and then paste it in Figma using Control V on PC and command V on Mac. Now, here's the beauty of using SPG file format. I want to use our own yellow so I can simply change the color like with any other shape in Figma. Remember that tidy trick. I can adjust that spacing from here. M. H. M. A All right, looking sharp. Instead of a desk with computers, I'm actually going to use a photo here. Maybe photo of a team office or a small business owner to represent what the headline says. This photo looks quite good, sort of like a start up with a team that works in different places, so they need a good communication platform. I'm just playing around here to see what works. We could put this image like a split section background like we've done in other assignments. But also, I can stick with the same style because consistency will be rewarded and do something like this and add those dots behind the image. Mm hm. M. M. Mm hm. That looks pretty good, actually. The footer and that's it were close to the finish line. Let's copy the logo and give it a blue color. There is some microcopy underneath the logo. We can do the same. Their footer is divided into four columns. We can easily arrange a similar layout for us using our own layout grid. We have 12 columns in our grid. If we divide it into four, we're going to get three point blocks. Given the small links, three columns might be too much, so let's use two columns for each block, splitting it into six blocks. We'll even fit more in one line. That's the beauty of using 12 point grid. It divides into many flexible variations. I'm going to leave these two columns empty, having this gap between footer links and logo and looks very good. It creates this visual separation between the two, which makes sense because the logo is different than the footer links. All right. Now, let's fill out these links with some random text. In places like this, it's always best to use realistic example text rather than Lorem Ipsum dummy text. Because depending on the text lane, you might end up needing to re arrange the layout a little. Also repeating the same text just looks ugly. Let's keep the social icons and other links on the footer. We've already done at. Let's just add the copyright tax, and that's all. H There, now, let's just fix those empty gaps. Mm. Mm. I'm using 180 pixels as a margin. There is no rule with this, really, it's based on how it looks. But the important part is to be consistent when you can. For example, I use 90 pixel margin on the mid section, so I'm going to try to reuse the same value with other margins. But sometimes it's too much or not enough. In such cases, I'll try to use multiples of the same value, either half it or double it, hence the 180 pixels. If that's not right, then I'll use a new margin. Sometimes we might need to be a little inconsistent as long as it feels right. Now, let's trim the excess space on the bottom. Don't forget to hold control or command while you do this or it might distort the content inside. Once you're done, select the frame and press the play. We can now see the presentation of our design. Looking right. A quick note about the preview mode. Sometimes you might have your preview looking like this, which is you're not seeing the whole frame. If this happens to you, that means that your screen on your computer is not as wide as the frame, and our frame size is 1,400 for 50 pixels. So if your screen is shorter, smaller than that, usually that happens with laptops. Then it's not going to show everything on the screen. But there is a solution to this, just hover on the top here, the bar will appear and go to the options and then change from here, which is 100% now, change it to fit width. Once you do that, then it will fit the frame will fit your screen no matter the size of your screen. Now, This, in rare occasions, another issue can happen, which this might not help, and that is if you have selected something different from the prototype settings. To go to the prototype settings, don't have any frame or any layer selected, click on the canvas. Everything is selected, and then go to prototype, and from the prototype, make sure that none is selected from the device dropdown. If there is like iPhone or a custom fit or something like that. I will have weird iPhone screen or something weird will be showing here in the preview mode. Make sure that none is selected. And when going to the preview, and if you have some other layers here, I have some other layers and frames on the page. It might try to preview some other frame, make sure to select your desktop frame, and then click the preview, and then it will preview the correct frame. And that's it by choosing an excellent inspiration, we have designed and created a fabulous looking home page. This is the power of good inspiration. Hope you have enjoyed the process. I'm very keen on seeing your submission. In the upcoming part of this course, we're going to build this exact page in Webflow. Stick around. 58. PART 3: WEB DEVELOPMENT (WEBFLOW): we're going to take a break from designed. For now. There are more lessons coming up on design and a full client project from start to finish. But we'll get to that. Now. Let's have some fun learning how to actually build websites in these part of the course. You're gonna learn how to develop websites using wreck flow, and we're going to do that by taking the home page that we just designed and building it inside wet flow, So let's go. 59. Web Basics: Webflow designer: You've already seen this before, but let's do a quick recap of what's what in iFlow. If this is in your initial screen, you might be on other pages. So just click back to the dashboard. I'll be working in the free account as well to make sure you get the same experience. There are a whole bunch of free and paid templates, but we're not in business for those, so we're going to select a blank site. This is called the designer. This is where all the magic happens in Webflow. Our page, as we design, it's going to go on this white canvas, and we'll be able to interact with elements directly on this canvas. On the left toolbar we have our controls to go back to the dashboard, project settings or the editor. Underneath that, we have three important panels. First one is the elements panel. That's how we add new elements on the page. Then we have the pages panel. That's going to show all the pages within our website. From here, we can add new pages and manage their settings and so on. On a free plan, we only get two static pages, but we do get a bit more CMS pages. And then we have the Navigators panel, which is sort of like the layers panel in Figma, but not exactly the same because the web works a little different than the design interface tools like FIGMA. Don't need to worry about other stuff on the left toolbar for now. We'll get to them when we need to. In the center, you have these different device views. This is where we make our website responsive and optimize it for different devices to have a modern website that looks great on any screen and any device. We're also able to resize the screen for each device like mobile, for example, and optimize to make sure it looks great on all sorts of mobile devices, not just one. As you resize it, you can see that in different wides, it shows what popular devices are sort of using that particular wide. And to publish the site on Webflow, we can do that from here. For free, you can publish it on Webflow's domain. For a custom domain, we'll need to add a hosting plan. And on the right side, we have our style spanel. This is where we manipulate and style every single element on the page. You can recognize this. It's sort of similar to Figma properties panel on the same side. Just like Figma, it edits whatever is currently selected. There are many similar properties like size, topography, font name, sizes, and so on and effects like blurring and shadows. There are more tabs on the side, but we don't have to worry about them for now. We'll go over it when we actually need to. And that's it. That's a brief intro of the Webflow designer. 60. Web Basics: HTML and CSS: A when the first webpage ever went live in 1991, this is how it looked like. It's still live, if you want to check it out. This first webpage was made by the inventor of Worldwide Web, Tim Berners Lee in Cern which is a nuclear research laboratory in Switzerland, surprisingly not really related to computers. I've actually been to CERN. I was on this business trip from my job at a time, and I was taken to this exact room where the Worldwide worldwide web was created by Tim Berners Lee, and the room is completely unassuming. You wouldn't really think that anything creative came out of it. It just looks like a regular chemistry or, like, a physics lab of a regular high school. And I was told this story. Apparently, when Tim submitted his paper about Worldwide Web, his supervisor wrote down on the paper when he was reviewing saying vague but interesting. I'm sure at the time, none of them had any idea what the websites and the Internet would end up looking. Today, the very first webpage was made using HTML, and until today, it's still what every website is made of. As we learn Webflow, we actually need to learn how HTML and CSS work. We're not going to learn how to code, but we will learn the logic behind because everything in Webflow is sort of based on that logic. HTML is simply the content of the webpage, like a headline, paragraph of text or image. And each piece of this content has a label to it, which tells the browser if this is the headline, a paragraph, a link or something else. They call this a tag. HTMO on its own, it's not very pretty. It has a vertical layout. Everything is stacked one after another. You can't really overlap elements or create grids and column layouts. It's sort of like a text document where all the content flows in a vertical direction one after the other. Web design back then didn't really exist. There was not much designing involved, but then came CSS, and website started to have whole different. CSS is the style of the website. It's where we define how each of those HTM elements should look like. What site they should be, what font, what color, how they should be laid out on the page, if they should have any hover interactions and so on. A webpage with just HTML looks like a skeleton, and after applying CSS to it, it's like an entire person. In Webflow, we add HTM elements from the elements panel. If we take a look at the codex board, we will see that two HTML elements have been added there too, H one tag for the headline and P tag for the paragraph. These are default unstyled HTML elements. If you check the CSS tab, you'll see it's empty. We haven't added any style to our elements yet. The style is added from the right on the Styles panel. We haven't written any code or written any CSS ourselves, but Webflow has done this for us. Now, CSS tab has some style information in it. It's basically an instruction that says, If an element has a name heading, make it red color and 58 pixels big. That's simple. This is the incredible power of Webflow. We're building our website completely from scratch, no stupid templates and ugly themes. We have the full control over building a completely unique website, and we don't have to code any of it. Webflow writes the code for us. 61. Web Basics: The Box model: Before we get on with building our page, first I want to explain the structure of a web page. Every web page is structured in a so called box model for the HTM, every element is in reality a box. No matter their final shape and content, they all start as a box. And all of those boxes actually sit inside other big boxes, all the way down to the final big box where everything else sits. And that's our web page. When we were designing our navigation bar in Figma, we simply dragged our links exactly where we wanted them to be placed. But Figma and other design tools use a different model. The layer model, you can think of it as paper shelves in Figma. Every new object sits on top of existing object, not above it, but right on top of it. It basically creates a new layer of space and is the king and only citizen of that space. If something else is directly underneath it, the lower guy won't be visible at all until we actually push it up in the layer panel. Exactly what happens when you place papers on top of each other. Now, web pages are more like drawer organizers. When a drawer is divided into boxes, which on their own can be divided into even smaller boxes in drawers, things don't usually go on top of each other. They go either below or next to each other. When we build our nap bar using HTML, we first are going to take an empty box and put our logo and link boxes in it. The bigger box is called parent and smaller boxes inside are called children. And those children boxes are each other's siblings, just the way you'd expect it. By default, they're going to come one after the other because that's how each animal works without CSS. Then we're going to apply a CSS style. So all these boxes are arranged horizontally. Then using other CSS properties and a couple more boxes, we can distribute them in exactly the way we want. Don't worry, you'll get the hang of this in no time. If you ever get stuck trying to figure out how to make something work, the solution is most likely another box. Webflow is kind enough to show us boundaries of our boxes. When you click on any element, it will show you the full box that this element occupies. As you can see, even though our headline is short, the box stretches on the entire page. That's the default behavior of most HTML boxes without any CSS applied to it. And by default, all of these boxes come one after another unless you put them inside another box. 62. Webflow: Element Hierarchy: When we build our page in Webflow, we're going to have lots of boxes. Many of the smaller boxes will sit inside other bigger boxes, and those bigger boxes will be sitting in even bigger boxes. Do not get lost in this jungle of boxes. Webflow has a Navigator panel, which you can find here. This Navigator is similar to Figma's Layers panel. Everything that we add to our page, we can find it here. Even invisible objects, elements in this panel are arranged with the box model logic. The first top level box that holds everything inside is called the body. Nothing goes next to it or outside of it, everything goes inside. It's the great, great, great grandfather of all the children boxes. That's why you get this light indentation to represent the hierarchy of elements and to show what sits inside what box we call this nesting. The heading and paragraph are nested inside the body. Reflow shows us this hierarchy with lines two. If we take an empty box and put our heading inside, the line will appear. This line is a helpful guide to easily identify the hierarchy of elements. Hierarchy is a big thing here, many of the properties pass down from the parent to the children. This is called inheritance. The child will inherit the properties from the parent, just like real life. For example, if I change the font color to red on the parent, any text element that I drop inside the parent will be read as well, all of them. Regardless of the type of text I drop it, headline and paragraph, bullet point or whatnot. That's until I override. We don't have to be exact copies of our parents. Right. If we decide to be different, then we can, we can directly change the text style on the child element. That's called overriding. Not all properties can be inherited. Mainly, this applies to textiles. Webflow can show us if there is any inheritance happening on any element. Do you see how some of the styles are highlighted in orange? It means that the style is being inherited and if you click on it, it will show you from where it's being inherited. For example, on the color, it's as de block, referring to that parent box we just edited. Later I explain what's a deblock. The style is highlighted in blue color instead. That means we have directly styled that property and it will override any styles from the parent. You don't need to understand this fully for now. You'll get a hang of it as we practiced and build our page. The second visual representation of the hierarchy of elements is visible on the bottom Navigator Bar. It shows that heading is inside block, which is inside the body. These are clickable and you can select any of the parents. But it doesn't show children or the siblings, only the parents all the way down to the body. For a complete picture, navigator panel is a better use. Same of course applies to the navigator panel. If we select an element in the panel just like Figma, we will be editing the exact element in Figma. When we move elements up and down in layers panel, the position of the element doesn't change, it just goes behind or in front of some other element. If they're overlapping, if they're not overlapping, then nothing really happens visually. But in Webflow, the position changes. Moving paragraph element in the navigator changes the order of high weights displayed on the canvas. We can also do this moving on the right on the canvas, you'll notice that Navigator panel updates accordingly. We can also drag elements inside boxes in the Navigator panel and move the entire boxes which will move all the trinle children elements with it. Okay, This web structure might feel a little confusing in the beginning, but don't worry quickly, You'll get used to it. 63. Webflow: Section, Container, Div Block: Alright, in this section, we're going to learn by doing instead of learning Webflow feature by feature, we're going to actually learn it by building our home page that we have already designed, and little by little, one step at a time, step by step ferociously. Remember, we're going to learn all the ins and outs of Webflow only as we need it. I'm not going to cover any feature until we actually come to a point where we actually need it to use it while we are doing and building our homepage. So what we're going to do is take that design that we have made, and then each section by section, we're going to go over it and kind of recreate and rebuild it inside Webflow. And let's start simple with our content on the left side on the hero section. Before you start building something in Webflow, first, you have to plan in your head what sort of layout is going to be needed. So what do we have here? We have a blue background. In figma, we use a rectangle for that. In Webflow, we don't have such things as rectangle. We have boxes instead. There are three types of empty boxes in Webflow. You can find them right here in the Elements panel. Elements panel is where Webflow keeps all the new elements we need. It's divided in need categories like typography, where you have a heading, paragraph, and all text related elements. So we have three empty boxes for our general use section, container, and a Dive block. A section is exactly what it says. It's an empty box where we can organize a section of our page, which is exactly how we have our designs organized, don't we? We have a hero section, then several sections below. Finally, the footer section. Those are all sections, and that's how we're going to organize inside Webflow as well. Container is where we put the content of our page. In our designs, it's everything we have put in the boundaries of our grid. The most popular box in HTML is a DV block, short for division block. It's an empty box and most useful most basic building blocks of a webpage. It's under basic category. Which one of these do we need first? Obviously, a section. So let's add a new section to our page. Section and DE block are identical elements. They work exactly in the same way. So everything I describe for a section right now applies to the DL block too. So a section or a D block is an empty box. There's nothing in it. This box doesn't actually have a height until we give it some height. Webflow is showing us a little bit of height temporarily so we can notice it and don't drive ourselves crazy looking for it. It's a spreche box, too. When you place other elements inside it, it will grow to match the height of its child element. Let's give it a color so we can better understand what happens to it. We can do that from background. The basic things inside, the Snile panel is very similar to Figmas properties panel, so very easily you can work with it. Now, if we enter the preview, the section disappears. Why is that? Because it's empty and has zero pixel height. It's invisible. Webflow just gives it a temporary height just inside the net designer, so to help us to see it. If we drag an image element inside, it's going to stretch from zero pixels to the exact height of that image element that we just put inside. Now the whole thing is visible in the preview mode as well because it's not zero pixel height anymore. If you put something smaller inside like a small tag, then it's going to shrink. But it didn't actually shrink. It was zero pixels. It just shrink only inside the designer because it had this temporary height. Hope you're getting a hang of it. I remember this strange behavior was a little confusing for me in the beginning. So I wanted to clarify from the start so you understand and you also understand the basic logic of how the structure is formed on the website. Give it a go yourself right now, and then we will continue styling our section. 64. Webflow: Size Settings: And we're back. Now, let's give this diblock the same blue color from our designs. To grab the exact blue color from Figma, select the color box or a background rectangle and then copy the code from the field color. If you can't select the background rectangle, don't forget to check. Maybe you have locked the layer because I know this is what I've done inside the tutorial, so you might have locked it as well. So this is a hex code, which we can copy and use it on Webflow, and it's going to bring exactly the same identical color there as well. Side Webflow, go to Styles panel and scroll down to find a property called backgrounds. There's the same field for the HC, so just paste your code in there. Always starts with a hash sign, but you don't have to copy that. If you do, make sure to replace existing hash sign too. Now we need to give our d block a similar size as our rectangle in figma, and this is where things work a little different compared to Figma. The reason is that websites are responsive. They can grow and shrink based on screen sizes. In figma, everything has a fixed position and fixed size regardless of the screen or content. To start with, we do have similar controls like we do it in Figma. You have width and height where you can put exact values as you would put in Figma. We can't drag and resize a rectangle from the canvas like we do in Figma. We have to input values in these boxes. We can put exact pixel values by grabbing them right from Figma. For some elements, this might be a fine thing to do, but for the background box, it isn't because it's not responsive. If my screen is wider than that value, then I get this white gap because I've made the blue box only 1,400 pixels wide, whereas my screen is wider than that. And if the screen is smaller, it's still no good because then the box overflows. You see those blue lines, those are the boundaries of the blue box, and they are going off the page. So often exact pixel values aren't any good in workflow. Okay, then what is a good option? If you press on this PX value here, it will show you all the units you can input in these fields. After pixels, we have a percentage. With percentages, we now enter responsive web. It's a responsive value and responds to the size of the parent. If we put 50% width of our box, it's going to take 50% of its parent element. And what's the parent of this element? If we check that on the bottom navigator, we can see that the body is the parent. The body of any website is responsive and its size by the browser width. This means 50% of the body is 50% of the browser. So if we shrink the browser width, and we can do that from here by dragging. We can see that our blue box automatically shrinks as the body shrinks and there is no horizontal scroll. The next unit is EM. We're going to skip this one because it's a unit that is based on the phone size and I never found any use for it in the context of widths and heights, so I'll do just fine without it. VH and VW, on the other hand, are important and very useful units. They stand for viewport height and viewport width. Viewport is same as the browser size. For example, as we drag this handle here, we can see the change in viewport width or the browser width shown directly in pixels. So that would be viewport width. Similarly, this is the viewport height. These units work in percentage, so 100 VW is 100% of viewport width, and 50 VH is 50% of the viewport height. Let's drop another box inside, so we can see this in practice better. The yellow box is sitting inside the blue box. If we use percentage values, the yellow box will resize relative to the blue box because it's the parent. So 50% and 100%. So 100% height covers 100% of the blue box height, which has its own value of 600 pixels. Now look what happens if we put 100 VH instead. It covers the entire visible screen. It even goes outside of the parents borders. The same thing applies to VW. 100% makes it stretch until the edges of the parent element. But 100 VW makes it stretch all the way to fill the entire width of the visible screen. To note, we usually use these values to their corresponding field, so VW in the width field and VH for the height field. Although that doesn't mean you cannot switch them around. Usually, there is no need, but there are some rare cases that you might want to do that. Here's another cool demonstration of comparing percentages to viewport units. We have identical boxes. In the above example, let's give a yellow box 50% width. And on the yellow box below, let's give it 50 VW. Right now they're identical. Why? Because the parent blue boxes stretch from edge to edge. But let's give a top blue box a width of 900 pixels. As expected the yellow box shrank with it to make 50% of the blue boxes width. But see what happens on the bottom version when we give the blue box 900 pixel width. The bottom yellow box didn't change shape because it's relative to the browser size. And as you change screens and shrink the browser, the bottom yellow box shrinks with it because it needs to maintain 50% of the viewport no matter what. The last unit is auto, meaning auto sizing. This is default value and width and height. When the side is set to auto in the height, the size of the element will change based on how much content is inside it. For example, let's set the height to auto on our blue box. It disappeared because it's empty and when it's empty and it's auto, that means it has zero pixel height. Let's put some elements inside. To add something new inside an existing element, have that element selected and Webflow will drop it inside when you click something from the new elements panel. If I have a section selected, it will drop inside, but if you don't want it inside any other element, then select body, so it will kind of drop outside on the general canvas. If you want, you can also drag elements directly on the canvas from the layers panel, not the layers panel, but the elements panel. But that's not usually what I do. I like the other way, but up to you which one you want to prefer if you want to drag, you drag, if you want to just click, click. And so as you add more elements inside the Div block, it will stretch. If we set a specific pixel height, then the dip block will abide to that height no matter how much things you stuff inside. The elements will just overflow from it just like your garbage bin when you're too lazy to take it out. As for the do on the width, the box will stretch to the edges of its parent. In this case, the full page because the parent element is the body. Finally, we have minimums and maximums. These rules work in conjunction with regular width and height. It's an extra rule to set floors and ceilings on our elements. For example, if we set the height to auto, the blue box will stretch based on the content inside. But if we set a maximum height, then it will stretch only until that point. Minimums and maximums are super useful in many different scenarios. For example, if we have a card element like this where we want to put some content, it can be information, form, pricing, whatever. We could set an exact height on it to match our content, just like the way we would do it in FIGMA. But because web is responsive, the size of the content can change from screen to screen, and then we're going to get something like this. A better way is to use minimum height instead of the exact height in this case. If we put minimum 400 pixels, we'll make sure that the box doesn't shrink because there is not enough content inside, and we also make sure it grows when content grows with it. Same goes for the width. Setting 400 pixels look good here, but if we shrink it, we get the overflow, and it's going to stubbornly maintain as 400 pixels. A better option is to set 400 maximum width. This means it will not stretch more than 400 pixels no matter what, but it will shrink below that if there is a necessity. So let's see now what value and units do we need to enter to make that box look like our design? For the width, it's obvious, right? We're going to go with auto because we want it to stretch from edge to edge. The hundred percent width would bring us the same result in this case. Often in web design, there are multiple ways to achieve the intended results. Sometimes they are equally good, but sometimes one might be slightly more superior. With practice and some failures, you'll soon learn which is better. In this case, auto is better because it's default and it means no extra code. Here is a Webflow tip to return any property to its default value, hold out or option key, and click on the property. It will clear all the changes that you have made and return to the default values. It's a very handy shortcut. In other tip, if the property is in blue, it means you have changed it. You're facing some sort of a bug, trying to figure why something isn't acting in a way it should, you can easily scan this to identify what properties are applied and what could be contributing to the issue. When it's orange like this, it means we have changed the develop values, although not on this element directly, but on one of the parents. In this case, on the body element. In other words, it's being inherited from the body element. Again, this is a great way to identify where are some styles coming from. Okay, now for the height, based on what we have learned, we know that we cannot use an exact value like infigma because when screen expands or shrinks onto mobile, it will not adopt. So how can we make it adaptable? We have two solid options. First, we can keep it auto and let the content define its size. And second, we can use VH, the viewport height. Since we didn't put our content yet, let's try the second option, 100 VH, meaning 100% of a visible screen. This means no matter how much we shrink or expand our browser, the box will adapt instantly to match the visible screen. But if our browser is too small, then sometimes blue box might not be enough for our content, and content will overflow from the box. So why is this happening? Because the Blue Box has a defined height. It doesn't stretch with content, and that defined height is only as tall as the browser window. So how can we fix this? We know that to have the parent box stretched to accommodate its content, we need to use auto sizing, right? This way, we make sure the Bluebx grows with content. And the 100 VH value we can put as a minimum height. Now, the blue box will be at least same height as the browser, but not smaller than its content. That's a perfect arrangement for us. So to recap, we have pixel values to input exact fixed dimensions. We have percentage values to size and element relative to its parent. We have VH and VW to size elements relative to the browser size, and we have minimums and maximums to set floors and ceilings on elements. 65. Webflow: Padding & Margins: Let's continue with our design and add the content to the hero section. We need a heading, a paragraph and buttons. All of these we can add from Elements panel. Make sure that they are inside that blue section. Remember why we put them inside, because web works on the box model. Everything's going to go inside something. Okay, now let's put our copy inside these text elements. Just double click the element on the canvas and start typing or copy paste from the design file. I'll explain in a bit why there is this new white gap on top of the blue box. New elements in Webflow are usually jammed one after another and stuck to the edges of their apparent. This is how HTML behaves by default. But that's not how we want things. We want to move them around and create spacing between them. So how do we do that? In FCMa that's easy. You just drag the element where you want it. But on web pages, that's not possible. These elements can actually be moved or dragged around wherever you want on the page. But CSS has a special trick for this. It's called padding and margins. We can find that under spacing category on the properties panel. Padding adds space inside the element and margin adds space outside of it. Let's take our button, for example. By default, Webflow has applied some padding. When you hover over the padding property, it highlights the space on the bottom so you can see it visually. Values in this case are set in pixels, nine pixels on top and bottom and 15 on the sides. You can increase or decrease either by dragging the handles or directly inputting the value like 100 pixels. Here's a protein. If you hold out or option key while you drag the handle, it will automatically apply the same value on the other side. So top and bottom together or left and right together. And if you hold shift, then it will apply same value to all four sides at the same time. Similarly on the margin, only difference is that space is being applied on the outside. So we can pull our elements wherever we want them to. And so this way, we can add extra space on either of the four sides of that element, which will then kind of push them from their original place. Just like in sizes, we have all other units besides pixels, although rarely we would use other units for padding and margin. Pixel units are usually the way to go. So that white space on top of the blue box is actually the margin from our heading. Just like the bottom, Webflow adds the default margins on many of the elements. If something is acting oddly, check the styles panel for default values. They usually hold the clues. In our case, let's apply margins and paddings to match our designs. We already know these values. Inside FIG must select the object and hold out or option key and move your mouse around to see distances between the selectan and other objects. For example, we can see that the content is 140 pixels from the left edge of the frame, and we have 209 pixels on the top. How do you use this information? We can apply the same padding to our blue box. Now, depending on the browser height or screen, this 290 pixel might not work at all. On a smaller browser height, these 290 pixels is too much. The web isn't static like VICMa and we need to think of values that will be responsive. So what do we want to achieve here? We want this content to appear more or less in the center, don't we? Regardless of the screen size, just like we did in our designs. If we use exact pixel values, it's going to look very different from screen to screen. On shorter browsers, the content is going to look like it's sinking on the bottom, but on the taller browsers, it might be too little and the content might look like it's too much on the top. So instead, we can use VH viewport height unit. This will automatically calculate the padding, and if screen size shrinks or grows, the padding will shrink and grow with it. Sometimes it will need 20 VH, but sometimes something else. It depends on the content that we have, but in this case, something like that. Now, if we shrink the screen a little too much, you can see that content is being squeezed on the bottom. That's because we haven't added the bottom padding. When screen is large, it's floating on the top, and there is space on the bottom because we gave our blue box a value of 100 VH, stretching it to fill the entire visible screen. But when that visible screen is really short, then there is no space left on the bottom. Same thing we can do here, so we can add the same exact VH value to the bottom padding. This will make sure we have good spacing both on top and the bottom, no matter how we shrink or grow the browser. Okay, now let's add margins between the objects. Let's remove that extra 20 pixel margin that's on top of the heading because it's adding to the already existing padding that's on the hero section. This layout arrangement seems like we're on the right path. We check vertical responsiveness, but what happens if we check this on different widths? This 140 pixel left padding doesn't seem like a good idea anymore. It's pushing content too much to the right. We could fix this and set individual paddings for each screen size or maybe even use responsive unit for the padding like VW for the viewport width. But the most common way and the best way and best solution for this to use a container. In our designs, most of the elements are sitting inside the limits of our grid. This gives us an invisible container which is centered in the middle and all those elements are sitting inside. This is how most websites are laid out as well, right? It has a center layout, and they place everything inside this layout unless it's background images or some unique elements. We can easily achieve this by adding a container from the elements panel. We're going to place the container inside the section and we will move rest of the elements inside that container. We do this by dragging them inside one by one. You can do this either on the navigator panel or the canvas. Same result, both works. My usual preference is to do it on the navigator because I can see better what's going on. We don't need the left padding from the section anymore, so we can get rid of that. If you check this on different screens, you'll see that our content is neatly centered right in the middle. Even on larger screens, and that's all due to the container. Let me give you an idea of what happens without the container. I'm just going to give the container a different background colors so you can clearly see its boundaries. If you place a bunch of paragraphs outside of the container, you'll see that they are stretching edge to edge. Even on the larger screens. This doesn't make a good layout. The text is stretched too wide and that makes for a bad reading experience. But as you move the paragraphs inside the container, you get them neatly centered. That's the power of a container and it's the most basic building block of any website. And weblos default container is in fact a good old d block just like a section, but it has two predefined styles that makes it work like a container. First, auto margins on the sides. All this does is that it centers the container in the middle of the page. Auto margins work like a spring that pushes the element from the sides to keep it centered. From a technical point of view, it calculates the amount of empty space left by the element and fills that empty space with margins. If you remove any of these auto margins, then the container will lose that centering power and it will hug one of the edges depending on which auto margin you remove. This trick to apply auto margins is a good method to use when you need to center something. Weblo even has a small shortcut here for centering, which does just that applies auto margins on sides. But auto margins are not enough to center something. The element needs to have a width, and that's the second property that the container has. Maximum width in this case. This tells the Dv lock to not stretch beyond this width, but it allows to shrink, making it nice and responsive. Without this width, we instantly lose that container quality and now this element stretches edge to edge just like most other elements. It still has auto margins on the sides, but now they're useless because auto margins fill the empty space left from the element. If there is no empty space, then there is no space they can occupy. I this container width is editable. Depending on the website, we might want it narrower or wider. By the way, the Figma trick of increasing values in increments of ten works in Webflow two. Hold shift while pressing up or down arrows to increase or decrease these values in increments of ten. In our case, our container width is actually different because our container is our grid, which has a set width inside Figma and we can measure the exact width of our grid by drawing a rectangle over it and checking the final width of that rectangle. It's 1,160 pixels. We can apply this width to the container inside Webflow. Depending on the screen we are viewing this, the container will either be centered or hugging the edges. In my case, it's the latter. Why? Because 1,160 is more than the current canvas width, which is 992 pixels. There is no leftover space for on margins to kick in. Although on wider screens, the center layout is there. Fix the issue on screens that are narrower than our container, we need to manually add some space on the sides. Now, because we're already using auto margins for our container box, we can't really add extra margin values anymore, but we can do something else. We can add padding either on the container or on the parents section. This will push the content away from the edges. Whether you add padding to the container or the parents section doesn't matter that much. Both of these options are equally fine. I personally have a habit of adding padding to the parent, let's do that. This gives us a centered layout that is responsive and nicely adjusted to all screens. Except maybe on the smallest mobile screen, the padding value we set is too high, we would adjust and use something smaller here. But we're not going to do that right now. I have an entire section on responsive design and we're going to fix our web page on all of these smaller screens and devices. Leave them as they are for now, even if they look broken, work on the base desktop breakpoint. It's the one with the star icon on it. In fact, don't touch these larger breakpoints either. We don't need it and if you edit, you won't be able to get rid of it afterwards. We've covered spacing on the web. We have padding, which adds spacing inside the element, margin that adds spacing outside of the element, and we've covered a container, which is a basic building block of a web page. It neatly centers the content of our page on larger displays. 66. Webflow: Web Typography: Now let's style the text. Font styles are applied from here, which you are quite familiar with. First thing we need to do is to choose font. But unlike IgMa here, we have limited selection of fonts. Our typefaces, pop ins, and Roboto are enlisted. This means we need to add these fonts from project settings. Project settings is a different place from the designer, and we can access font settings of this project from this link. Or from the Hamburger menu, go to the project settings and then go under the font tab. Webflow gives us three options to add phons. First, Google phones, which lists all the Google phones, and to add them, we have to select and then add them one by one. We cannot add all of them at the same time. Also, Adobe phones or type kit in a similar way. This, as I mentioned in the typography lesson, needs a subscription to Adobe's Creative Cloud. Once you have that subscription, then you can connect this with your account on Webflow, and then you can pull fonts from there. As we can manually add custom fonts just by uploading them. In our case, we need Google phones, so we're just going to find pop ins and once you find that, you select it, and you'll be asked which variants you want to include. These numbers are font weights. CSS uses numerical values to represent different font weights instead of naming. And this is how it's commonly mapped. You're going to have to manually match each font weight with one of these numbers. To find this chart, you can just Google CSS font weights. Or you can also check your specific font inside Google fonts and see how the numbers and names map with each other. Let's check what other font weights we are using. So we have 600, 500 and normal for pop ins, and we have normal and 500 for Roboto. We could, of course, add all the weight variation, but it's a good practice to not add to add them because Webflow has to then load them and sort of upload these fonts to the website, and this is going to add extra time to the page loading. Italics are separate versions for each weight, as you can see, we haven't used any italics in our design, but we should still edit for regular and bold weights. And then, it shows here what fonts and font styles we have added to our project. Now, the same thing for Roboto. Let's also include bold 700. It's an important weight for paragraph text, even if we haven't used it yet. In case if you still had the designer open, it's not going to show the new fonts right away, so refresh the designer. And there now we have Poppins and robado inside. You'll see that the weights that we have added they are inside and enable, but those that we haven't added are disabled. Okay, so let's style our text. Sema build was our heading, regular for the paragraph and medium for the button. Now for the sizes and line heights. Phone size for our heading is 75 pixels. Webflow doesn't automatically adjust line height to defaults. It inherits values from the parent elements, so we have to end it manually. And now we can do the same thing for the paragraph and the button text. When line height is set to auto, you can find the actual pixel value by clicking inside the field, and that will reveal the current line height. Or you can just slightly edit the value by pressing up or down with your arrow key and that will switch it to the pixel values. Let's change the colors. This is quite straightforward. Just make sure to not confuse these two colors. One is font color and down below is a background color. We want to change the color in the typography section, but the background color for the button. Weblo doesn't take percentage unit for letter spacing, but guess what? We can just do the math. The percentage is relative to the font size. So it's negative to percent of the font size which is 75 pixels, making the letter spacing negative 1.5 pixels. By the way, the same goes for the line height. Percentage value is relative to the font size. 100% line height would be exactly the same as the font size, and to 100% would be twice the font size. You're also able to do the reverse math and convert line height from pixels to percentage. I hope you paid attention in your math class. That's our typography controls. There are other things we can do with typography, but we will leave those for later. So to recap, adding fonts into Webflow projects happens from the project settings. We can easily add Google phones directly from the drop down. We have to choose specific font weights that we need. These font weights are represented in numbers which we can either look up online or find inside FIGMA under Code Tab. Then we have line heights that we can grab the exact value of line heights again from the code tab. 67. Webflow: Buttons & Links: This video, we're going to cover buttons and links. You'll find two types of buttons in Elements panel. And you'll also find two types of links. This duality got me a little confused in the beginning and I had trouble to understand which one to use and where, let's clarify why there are two links and two buttons. Let's start with links. Link block is a regular day block except it can be linked. You can put anything inside the link block and the whole thing will be clickable. The text link on the other hand is just a text link. You can't put anything inside it. To link the links, we select the link and click on the setting tap. This is where we can update link settings. First one is URL, where we can type in the exact destination. Next, we have pages. This is where we can link to other pages in our website, and this is exactly the option we would use if these links weren't fake and we actually had other pages. Right now, it only shows one page, home, that's where we are. Next, we have a page section. This is when you link to a specific section on the same page or even on another page. Right now it's empty. There is one extra thing we need to do to be able to link to a section. We'll get to that at some point. And last two are email and phone links for email addresses and phone numbers. Email ink will open up a default email client that user has set on their computer, for example, Outlook or Gmail, and it will open the new mail window with email address and subject line prefilled with the values that we have put there. In my case, it opened up a GML window because that's what I have set as my default email client on my computer. The phone number is for mobile devices, so the person looking at the site on their mobile device can click a link directly to call without needing to copy and type in the digits. On a computer, this is mostly useless. You'll get the error message sometimes. Now for the buttons, we have two types, a regular button and a Form button. The form button can be style just like a regular button, but it's linked only to the form and submits the form when clicked. The regular button on the other hand works just like a text link. It has the same link settings, and just like a text link, we cannot place other elements inside. This means you can create buttons from text links. You can also create buttons from Link blocks, and if you want to create a button that has an icon inside or an extra line of text, then link blocks are exactly what you'll need to use. If you ever find yourself lost what each element does, use a more info pop up from the elements panel. Each element has a little question mark on top. Click on it to get a quick explanation what this element does. So back to our button, let's edit the button shape. Our button in Figma has a specific size. It's 168 pixels wide and 50 pixels high. We can use these exact values, but you'll see that using exact width is not a good idea. First, let's try to center the text inside our button. How do we do that? Vertical alignment is quite simple. We can simply use the text alignment option and center it. But for the horizontal alignment, we have to use padding so we can push the text around until it looks centered. Now, here's a reason why setting an exact width is a bad idea. If at some point we decide to change text and it's something longer, that button doesn't adjust and text has to overflow. A better way is to use the pedding value again. We can grab that padding value right from our designs. Spacing on the left and right is 48 pixels. We can use these values for our button pedding. Remove the width and add 48 pixel padding on both sides. This will make our button unfix and it will adapt to the size of the text. And lastly, the rounded corners. This can be changed inside the border section under radios option. Just like we did in Figma, we can just increase this until button becomes rounded completely. So to recap, we have two buttons, regular and Form button. Form button can only be used inside a form, and regular button is used for linking to other pages, actions on the page, email, links, phone links, et cetera. We have two types of links, text links and link blocks. Link Blocks are just like DIV blocks, empty boxes that can nest many other elements inside, even other DVBlocks, but it can act just like a regular link. As for the text links, they can't nest anything inside and they work just like a regular text. 68. Webflow: CSS Classes: Let's now add our second button to save time on styling. We can duplicate our existing white button. You can write, click, and then duplicate or use a control C, control V, a regular shortcut, or command C, command V for the Mac. When you do this, two funny things will happen that you don't expect. First, instead of pasting it underneath like most other elements behave, it is placed next to it. This behavior is happening because of a default display style that is applied to buttons. We'll cover this in an upcoming lesson. In this lesson, we're going to cover the second finding behavior. When we try to make any edits to our second button, everything is being applied to the original button. This is not a bug. On the contrary, it is probably the most powerful feature of CSS and one of the reasons why CSS was created in the first place. This feature is called class. We can have this button on 100 different places on our website, and by changing one instance, we can change every button with the same class inside Webflow. This class is managed from here a place called selector. Selector means what it says. It selects a specific class. There are other things we can select besides classes like a tag, but more about that later when we need it. The blue square saying button is our class. If you select the original button, you'll see that it has the same class. This is why the same CSS properties apply to both. But if we remove this class from the button, then we're going to lose all the changes that we made to it and go back to the default settings or default properties. But don't worry, we can select the class back again and instantly all of the properties will come back. When you are looking for an existing class, just start typing and Webflow will filter the search results. If the class already exists, then you'll see it here and you can select it. If it doesn't exist, then you can create a new class yourself and name it whatever you want. Applying newly created class will do nothing to our button because that class has no CSS properties applied to them. On a newly created class, we can apply new styles and it won't affect the original button. Classes are removable and can be applied to anything. For example, we take my pretty button class and apply to the original. Button. Classes can also be duplicated or renamed. You can do that from this tiny drop down. Just rename and hit Enter. Duplicating a class is a good way to save time. Our ghost button has a lot of same properties as our primary button. We can duplicate those properties and create a new class from it. Now we can name it whatever we want. We have two buttons with the same properties but different classes. When we add it one, the changes won't affect the other. Inside CSS, we can see how these classes are presented. It starts with a period followed by a name we wrote. Webflow will generate code in lower case letters, regardless of the way you write it. Inside the designer, you can use upper case if you like. Spaces are not accepted in an actual CSS class naming, but inside Webflow you can use them. Webflow will then change that space into dashes. For any change we need to make to the element, we have to give it a class. We haven't been doing this so far because Webflow actually does it automatically for us. If you select any element that we have already edited, you'll see it has some class applied to it. If you drop a new element, they don't, The selector is empty. The moment you style an element, Webflow will automatically generate a class name for us. You cannot style an element without having a class applied to it. When you look at the Navigator, you'll see that elements are named according to their classes. Let's change the name of our block that holds all our content. Our blue box in reality is a hero section that holds everything inside this section. Let's give it some respect and name it a more appropriate name, like Hero section. Right back to our ghost button. Now that we have a different class, we can style it as we want. Ghost button is made of same material, but the background feel is transparent and instead it has borders. You can also do this by decreasing the opacity slider. Same result has completely ghosted out of the page, but text is still there. It's invisible because it's the same color as our background. Let's change the text to white. Now let's add borders. This we can do directly under border section, it says zero pixels. If we increase it to one pick cell, the border will show and then we can change color to white. It looks complicated in the beginning, but it's quite simple. Style shows what border we want to use solid line dashes or dots. Those squares show. On which side are we adding the border? Right now, the middle square is selected, which means we are adding all four sides. If we select the top square, we can addit the top border only. Finally, we need to add some space between two buttons. What do you think we should use, Margins or padding? Question, we can't use padding. Padding only adds space inside a box. Measure the space. In Figma we use 30 pixel space. So we need to add 30 pixel left margin on the ghost button or the 30 pixel right margin on the first button. All right, things are looking neat. To recap. In this lesson, we learned how to use CSS classes, which in Webflow is managed through the style spanel. We learn how to create new classes, how Webflow automatically creates classes for us, and how to duplicate classes. We can reuse existing elements on our page. 69. Webflow vs Figma Sizes: Many students had questions about differences between sizes in Webflow versus Figma and how does the canvas size in Webflow relates to the frame size in Figma. This is actually a very good topic and I decided to make a full lesson on it. There are several nuances here that you need to wrap your head around when transitioning from Figma to Webflow. Let's start with a concept called responsive design. A section later in this course dedicated to responsive design and we'll dive deeper into that topic. But let's brush over it a little bit because without it, you may feel a bit confused when building your website. Any given website that we build will be viewed by users on many different devices and screens. So will visit your website on a MacBook air, some on Lenovo ThinkPad, some on a custom desktop PC, some on an iPhone, and on hundreds of other different devices. All of these devices have their own screen sizes and resolutions. A good website will have to consider the device of the user and adjust and respond to that device and its respective screen size to deliver the best possible version of the website. This is called responsive design. This is exactly how we're going to build our website. Weblow makes it easy because it has responsive design technology baked into it. But the design we created in Figma is not responsive at all. Before we design our page Figma, we picked a particular frame size with 1,440 pixels and width. That frame is representative of a single screen resolution, a screen with exactly that size, estimated to be about 6% of all desktop screen resolutions used worldwide. Height is irrelevant here because unlike the width the height isn't fixed, we increase it as the content of the web page grows and on a real website that is represented as a page scroll. You might have two valid questions. How can we pick that particular frame size, which is not even that popular? Second question, you might ask, how come we didn't create a responsive design in FIGMA? Let me answer the second question first. Figma does have some responsive tag like auto layout, but this tag is nowhere close to actual responsive powers that web offers. Since we are the developers of our side, we might as well use the full power of responsive design and take care of that part right within Webflow. We would still have to do this in Webflow regardless if we did infigma or not, we might as well save time. Now, let's answer the first question, why 1,440 pixels. Desktop and laptop resolutions range anywhere 1000-4 thousand pixels in width. That's a pretty big range. You can see in this image how the screen sizes actually compared to one another. You can literally fit nine HD screens inside a four K resolution. For example, if you're working on a two K screen and decide to use a matching two k frame size Figma, you'll have a lot of screen space where you can build your design. You can fit way more stuff on your screen than someone on a tiny netbook can. A small netbook basically covers a small portion of your two k frame. Easily end up putting way too many elements or details in your design that simply won't fit on a smaller screen. This will create a headache for you down the line when adjusting the responsiveness and Webflow. What's the good frame size then? Most screens beat laptop or desktop fall somewhere between this range. To K and four K screens are quite rare, and users on those screens don't usually use the browser in full screen mode because that would beat the purpose of having a very large display where you can fit many things on your screen. Given we are designing for a range of approximately 1,000 to 2000 pixels, choosing a screen in the middle of this range is the best approach because the average size will be the easiest to adjust up for the larger displays and adjust down for smaller displays. FICMAS 1,400 pixel frame size is a good candidate for this purpose because it's quite in the middle. Your comfort as a designer matters too. You may want to choose a frame size that matches your screen resolution. That way, when working in Figma, you'll be able to preview your website as it would look like on your screen. If your screen resolution is a good representative of an average anywhere 1280-1600, then feel free to use that for the frame size on your next project. You can find out your screen resolution just by Googling. What's my screen resolution and checking one of the first websites. Or you can also see your screen width by entering the preview mode in Webflow and checking this number here. This is a width of the visible canvas. When your browser is in full width, then it will be same as your actual screen resolution. My screen, for example, is in fact 14 40 pixels in width. This is just a blocky coincidence. But there is no huge need to match the frame size in Figma with weblos canvas size. Whatever we did in Figma is a mockup of a single screen. In Webflow, we are building a fluid responsive website that will shrink and grow with different screen sizes. Together with that 14 40 pixel version, we're also building 12 80, 1920, 320 pixel version, and everything in between. It's one website that shrinks and grows like an accordion. Don't try to match your Figma mockup with 100% accuracy. Only the identical canvas size can look 100% like your designs. Everything outside of that, we'll have to adjust to the reality of a particular screen. As you can notice the canvas or the visible screen width changes between preview mode and the designer. Inside the designer, my 14 40 is only 992 pixels now. That's natural because the designer mode has side panels so they occupy the available screen space. Webflow gives an ability to change this width, even turn it into my original screen width if I want to keep in mind that increasing canvas width doesn't provide fully realistic view, Webflow can't add more pixels to my laptop. Instead, it's zooming out and changing the scale to create an impression of a larger screen. That makes each element not true to its actual size. Although it's still a useful preview because you're able to see how elements interact with each other and detect and layout issues. It's like if you are looking at a 1,400 pixel screen but standing a bit far from it, everything besides that basically matches the reality. Shrinking on the other hand does provide true sizes because the scale remains at 100%. These icons here represent what's called device breakpoints. They actually aren't just for show. They can take custom rules, rules that are specific for each device breakpoint. But no need to worry about that for now. We will dig deeper into those later in the responsive section. For now, all you need to know is that you're working on the base desktop breakpoint, the one with a star icon on it. This is where you need to stay during this stage and check your designs within the desktop breakpoint range, which is 992 pixels and up. While in preview mode, you can resize the canvas down to 992 pixels and up to 1,900 pixels to see how it looks within that range and make sure there aren't any unexpected layout issues. All of that is our single desktop breakpoint and every change we make to 992 or 1,900 applies to both simultaneously. Our design needs to work well for both. You don't need to check the side on the smaller devices because we will do this in the next section. First, we will build everything in the desktop breakpoint and make it look good for all the different desktop screen sizes. In the responsive design section, we will go over our page one more time and make changes and adjustments to make everything look good for all the smaller screen sizes. Also, don't add these larger breakpoints, we don't really need them. The design that we created uses a container with a maximum width of 1,160 pixels, none of our content goes beyond that boundary except for background colors on sections. The actual element sizes between Figma and Webflow should match. As long as you're looking at 100% Zoom state in Figma, applying that same size in Webflow should give you more or less the same size. For example, a phone size of 75 pixels in Figma should look the same when applied in Webflow. Again, when looking at 100% Zoom state, and that's regardless of the frame size in Figma or Webflow, as long as the scale is 100% in both. The weblos canvas size will alter all other things. Don't expect the hero image to be the same size on 992 pixel screen compared to Figma because this canvas doesn't give enough space to fit the image in its original dimensions. Image rings because image has a special property to it applied, that makes it shrink when there is not enough space. Font size, for example, won shrink but the length of text will shrink instead when there is no space. That's it. Those are the important nuances of screen sizes between Figma and Webflow. If you still have doubts, let me know in the Q&A. 70. Webflow: Images: This video, we're going to add our hero image to our page. We'll learn how to export images from FIGMA, how to import them inside Webflow, and how to work with images in Webflow. First, let's export our hero shot from Figma. In Figma, we made this hero graphic with several different elements. We could export them as independent images, but that would be unnecessary work and quite tedious to recreate in Webflow. Instead, we're going to export it as a single image. This way will save time and make sure it looks exactly as we designed it. To export anything from FGMa, select the element, and in the properties panel, click plus icon under Export section. And to export several different elements as one image, you have to group them first. Select everything, right click and press group selection or use the shortcut. Then select that newly created group and hit that plus icon under export settings. Let's go through these different export settings. Screen resolutions have improved significantly over the years. Tablet, smartphones, latest premium laptops like MacBook, they use high DPI screens, also known as retina display. High DPI means high dots per inch, and they usually have double the pixel density than common laptop and desktop screens. This makes things look much sharper and crispier, so you don't have those pixelated edges on smaller text or on the edges of the image. To make our images optimized for such screens, this is commonly called retina optimization. We need to double our actual image size. So from this drop down option, we would select two X. And we have several file formats. Ideal image format for the web is SVG because they are vector based, have smallest file sizes and can be enlarged infinitely without losing quality. But unfortunately, they don't work on images that have photography inside. Basically, anything that is pixel based. I won't go into explanation of what's the difference between pixel based and vector based images. In short, PNG and JPG file formats are pixel based, and SVGs are vector based. Since we are using photography, we have to export either PNG or JPG. PNG and JPG or JPAC have two main differences between them. First is the size. JPEG images are usually smaller than PNG images or because of the higher compression, but JPAGimages can have transparent backgrounds. PNGs can. So in our case, either we have to export a PNG or a JPAC and include the blue background in it. If we don't include that blue background, it will automatically fill the space with white, and that's not going to work for our image. Ideally, we would go with JPAC because the file size is smaller and that really matters. Why? Because no one likes a slow website. And images with large file sizes is one way to slow down a website's loading time. But if we go with JPAC then we have to include a blue background, and that can have some issues. Sometimes colors on exported images don't match with web colors 100%. And we need that blue background to match 100% with the blue on the section in Webflow. If they don't, we're not going to have a smooth transition, and the edges of the image will be visible. I've tested this already on this image, and sadly, it didn't match. White and black colors are easy. They always match, but other colors not as much. So we're left with only one option, which is PNG. Let's export. If we check the file size, we'll see that it's way too large, more than 1 megabyte. We should always aim for images to be less than 300 kilobytes, if we can, especially those that are right on the hero section. Users might end up staring at the empty screen until the image finishes loading. Luckily, we can make the file size smaller using image compression tools. There are a whole bunch of desktop and online compression tools. The one that I like to use is image compressor.com. Upload your file here and it will compress instantly. You can see how much of the file size has been reduced. It's still above 300 kilobytes, but not too much. There is one additional thing we can do to make it even smaller. Instead of exporting two X, we could export 1.5 X. The image dimensions are what contributes the most to the large file size. So sometimes I compromise on pixel density in favor of a better file size. It's much better to have a little blurry image on a minority of devices than a crispy image that loads very slow on every single device. This time, we can keep it two X. All right let's import our PNG into Webflow. As with anything in Webflow, we add new elements from the elements panel. Drop the image anywhere for now. We're going to structure the layout later. In order to upload an image, double click the image or click the settings gear here. It will open up the Assets panel. Assets panel is where Webflow saves all the images and documents that you upload to your website. Remember how we exported this image as two X the size? We can tell Webflow that this image is double the size and made for high DPI. This will shrink it down half the size, just like we have it on our designs. Webflow does give us a warning for a large file size. Sorry, Webflow, we'll listen next time this time would like crispy L. That's it for now. We're going to arrange the image later. We'll need to learn important CSS properties for that. So let's recap. To add images to Webflow, we have to first export them from Figma using export settings. Images that are made from several different objects need to be grouped first. To keep our website fast, we need to be mindful of our image file sizes. We can shrink images using online compression tools. Adding images on Webflow happens by first adding the image element to the canvas and then uploading an image through the access panel. 71. Webflow: Float & Display: Okay, so how do we bring that image on the right side? We can't just drag it like we do in Figma. We cannot align it to the right either. Remember what I told you before, if you're stuck and trying to figure out how to make things work in Webflow, the clue is probably another box. Let's take a look at our layout. We have a hero section. Inside, we have a container which holds all the content. In this container, we have elements that we want to lay out on the left and an image that we want to lay out on the right. So we have to somehow split this container in two halves, left half and right half and have them sit next to each other. We can do that using DVblocks. We can put two DVblocks inside this container and then put content accordingly. Beware Webflow will drop new elements inside your selection. After I added a new Dip blog, it selected that new one, and second Dibblog was dropped inside of it. Just drag it out from this navigator panel. Now, drag the image in one Div block and everything else in the other div blog. And let's name these data blocks accordingly, left and right. There. Now the structure is on the right track. Now we have to figure out how to make them sit next to each other instead of on top of each other. There are several ways we can do this. And one best way. Let's go through each one. First, the quickest way to do this is by using the float property. We can find this under position section. It's hidden inside the dropdown. Float is a CSS property that tells the element to position itself either on the left or right of other surrounding elements. In our case, we want the image to position itself on the right, so we set float right on our right block. And note here, I've set the float on the right block, not just the image. If you set float only on the image, then this will happen. This is floating image inside that right block, not affecting the left block content because the right block is still sitting on top of the left block. Even though this is a quick way to make these elements sit next to each other, it's not the best way. There is one thing float does the best wrapping text content around the element. If we have a section like this and we want the text to wrap around the image just like it would happen in a text document, we can give the image float style and even add margins on the side, so text wraps around neatly. These and couple other things are what float does the best. Second option is by using columns. GOA flow has this premade layout element for columns. Inside column settings, we can choose many different arrangements and how many columns do we want to use. It's using the same 12 point grid layout like we did in Figma and can be split different layout just like our grid in two, three, four, and so on. Inside the navigator, you can see how these columns are arranged. We can drop left block in column one and right block in column two. This is already improvement to the float because the content drinks nicely. But here's the truth. I hate columns. They're not as flexible as one might think, and sometimes strange things happen to it. It looks powerful and flexible, but so many times I'll hit limitations with columns that I stop using them and started making my own. This approach actually helped me understand web development better and improve my skills. I'd advise to do the same. At the end of the day, these columns are made of DVblocks yet again and have specific CSS properties applied to them. So let's go with the best option. The best and most accepted way to arrange this would be CSS feature called flexbox, which you can apply under display settings. Let's go through each of these display settings and see how they behave. By default, most elements come with display settings set to block. Block elements, they stretch from edge to edge, and nothing can be placed next to them. They will push the next element to the second line. They will do this even if we set a smaller width and there is space for other elements on that same line. Next, we have inline block. Inline block elements are as wide as content inside. They free up leftover space, which can be occupied by other elements. Remember that behavior when we duplicated the button in a past lesson, buttons in Webflow by default are set to inline block. They only occupy space of their content. So if you put two inline blocks together and there is space, they will sit next to each other. In here, if we set display to inline block, nothing happens because the content in this case is a free flowing text which will make the box as wide as possible. But if we delete some of these texts, then we'll see that bounding box shrinks with it. However, on a block element one below it, that doesn't happen. Even if we delete the text, the bounding box still occupies the entire width of its parent. Now, I said that inline block elements frees up a space for other elements next to it. So how come the second paragraph didn't jump above? Because second paragraph is set to block, and block elements are greedy and they want to occupy an entire floor just for themselves. But if we set the second paragraph to inline block as well, it still doesn't go up. Why? They want to, but there is not enough space for both of them. If we cut the text short on one of them, then there is going to be enough space, and the second block will move to the floor above. Also, this will happen if you manually shrink the width of one of them by applying a fixed width. Third display setting is inline, no block. Inline is how text behaves inside any element. It flows just like texts, one next to each other. It doesn't have width and size values. It will ignore them even if you put it. There is not much use for inline display outside of the text, so that's inline. Then we have display none, which hides the element. It's not just invisible, but it also doesn't affect the layout. It's not transparent. We're just telling the browser do not render it and completely ignore it. Although it doesn't disappear completely from our website, it's still in the navigation panel. If it was transparent, it would still occupy the space. You might wonder what use there might be for display none, but there are many, and we'll get to them. That's display none. Then we have display grid. CSS grid does something that was not possible before to have a table like arrangement where you can move elements as you like with a lot of flexibility. With an ability to have a completely different layout between different devices. We won't be going through ins and outs of grid right now because we won't be needing it as much. Instead, we'll be using flex layout, which we'll cover in the next video. So to recap this lesson, we have several different options to make elements sit next to each other. We have float, one of the oldest and simplest methods. Float can make an element sit either on the left or right of the content and surrounding elements will sort of wrap around it. Then we have columns, which you know, I hate end of lesson. And I'd advise to use it moderately and mainly if you want to save some time. And finally, we went through all the display settings from block to the CSS grid, and we will cover those individual display settings once we need them. 72. Webflow: Flexbox: Continuing where we left off. In this video, we will discuss Flexbox and how to apply it to our hero section layout. Flexbox is a way to arrange and distribute content inside that box. The flex settings affect only the children of that de block and not the D block itself. In our case, those paragraphs, the container itself is unaffected. The moment you select flex layout, the new options will be displayed. This is how we distribute children inside the flex box. Let me demonstrate how Flexbox can distribute its children element. We can align the items inside the flax box using this align box. The controls are quite intuitive. It's a three by three grid representing the flax box. We have three options for the top alignment, left, center, and right. We have three options for the bottom alignment, left, center, and right, and we have three options for the center alignment. The basic alignments are super simple because they're intuitive. The line box gives you a visual representation of what will happen. Not so intuitive options are hidden underneath these two dropdowns. For the y axis alignment, we have two more options, stretch and base line. The stretch is exactly what it says. Stretches the flax children to fill up the entire vertical space of the flax box. If you increase or decrease the height of the flax box, the boxes will shrink and grow with it. This is actually the default alignment setting of flex box. You can see this when I reset that align settings from here. It's set to left and stretch, and clicking anywhere on that align box will remove the stretch setting and let you align items without the stretch. Baseline alignment is to do with a text. It's an invisible line on which characters are aligned. I don't think I've ever had a need for this alignment, so you can ignore it for the most part. Okay. Underneath the x x is drop down, we have two more options, space between and space around. These are like distribution options in Figma. It distributes children evenly. First option, space between makes the first and last child flush with the edges of the flax box. Well, in my case, it's not exactly flush because I have padding and margin applied to the elements. If I get rid of those, then it will be flush. The second option space around is slightly different. It still distributes children evenly, but it does so by adding even spacing on the sides of each child, including on the first and last child. The first option is a lot more useful and practical. This one, not so much. I rarely need to use it, so you can just focus on understanding the space between option. By the way, the x and y dropdowns are the actual controls of the flax box. The line box is just a visual guide. X dropdown lets you control how you want to align and distribute children on x axis. That's a horizontal axis. Same for the y axis, which is the vertical axis. The align box locks to a different mode if you select stretch or space between options, right now, because I have space around selected, the align box only allows me to change alignment on the y axis. To return it back to normal, you can just return the x alignment back to one of the standard alignments. The same goes for the stretch, it only leaves you with the horizontal alignment options in this case. Just remove the stretch by switching back to some other standard alignment and the align box will act normal again. By default, children are distributed in a horizontal direction left to right, but we have an option to switch the direction to vertical. And as you'd expect, they work in the same way just different direction. But one thing you'll notice that the alignment doesn't change on the y axis. Top center and bottom all give us the same result. That's because there is no extra room inside the flexbox. The children are filling up the entire viable height. The minimum height that I gave to the flexbox leaves no extra room. The children's heights put together is more than that. The flex box actually ends up stretching with the children. But if I increase the height of the flexbox to something that leaves empty space, then you'll see that the align box works just as expected. What I love about web design is that it's like a puzzle. Things often act strangely and you're trying to figure out why and find a solution to your problem, quite satisfying when you do solve the puzzle, but a big head scratcher when you're staring at the screen, trying to figure out what the hell is going on. Pay attention to one thing. With a vertical direction, the space between and stretch options now have switched places. Stretch is now under x alignment. And space between is under y alignment. By the way, if you're ever confused on what each of these options mean, just hover over it and read the explanation text underneath. That will give you some idea. Also, another option is to find explanations in Webflos documentation. What I usually do is I Google Webflow University and the name of a setting. Usually, the top result after the ad is going to be the page about that setting or a page that contains an explanation about that setting somewhere deep down, which you can just find by searching inside the page by Control F. By default, flax children will try to fit on a single line overflowing the flex parent if necessary. Luckily, Flexbox has another setting that helps us manage such scenarios. It's called rap and you can find it under this dropdown. Rapping basically tells children to jump to the next line if there is not enough space. We have many different options here, but there is usually only one you're going to need based on your direction. Since we are using a horizontal direction and the items are distributed left to right, then we would need to choose one of the options from the left to right group. And the best way to tell which one you need is actually look at the icon rather than the name. The arrow icon gives you a better representation of what will happen to the children. In case of the first one, children will start from the top left and follow a Z pattern distributing down and right. You can see this action as I add more items to it. In case of the second option, they will start from the bottom and distribute up and right, like a reverse z. The first option is obviously going to be more commonly used, but in specific cases, you might need to reverse the direction. Now, if we have a vertical direction, then we will be looking at top to bottom wrapping. But nothing happens. Why is that? Because there's no necessity for wrapping. Rapping only works if there is a necessity to push elements to the next column or the next row. Since our flex box doesn't have a fixed height, then it just keeps on expanding in height, so the necessity to wrap never arises. But if we give it some height beyond which it's not allowed to grow, then the children will start to wrap. Without wrapping, this would happen. They would just overflow outside of the flax box. To be honest, these wrapping options can be very confusing, so don't feel bad if you can't wrap your head around it. The best way to find the result you need is just to play around, select all of them, and one of the options should be. That's what I usually do. Inside the direction drop down, with all the wrapping options, you'll see two options that don't say wrap, single row and single column. These two options simply reverse the direction of our flex children. Instead of left to right direction, we can switch to right to left. And the second option gives us the ability to reverse direction vertically. If you click on one of the boxes, you'll see in the properties panel special options for the Flex Child. This gives us even more fine grain control over individual items inside the Flexbox. But let's not worry about Flex child options for now. Flex Box can be a little handful to understand in one go. So don't worry if you feel a little confused or not understanding exactly or not following every single. Layout option that I have covered right now. Once you start building in and playing around with it, you'll get a hang of it. In one of the assignments after this, I have put a flexbox game, which is a sort of a puzzle game built inside Webflow by Webflow team, and it's a great flexbox exercise and a great way to practice flexbox and the different alignment options. So let's go back to our hero section and see how we can use flexbox. In our case, it's pretty simple, actually. We just have two blocks left and right. We can apply flex layout to the container, but remember, We made this container to be a standard container throughout our page, even for non flex items, so we don't want to mess with it. We can simply add, you guessed it, another box. Drop those left and right blocks inside and apply flex layout to that. It's in an opposite direction. We can of course reverse this using Flexbox option, but we should instead arrange them correctly inside the navigator. Just drag one on top of the other. Now we have our flex options so we can align these blocks as we want. Horizontal direction is exactly what we want, so we keep it there, and then center alignment and pushing them to the edges is going to look spot on. In Figma, we have content sitting a little higher. We can achieve this by adding a button margin on the left block. This will push the content up. Let's check this on a smaller screen. There are two things that need some styling. First, the left content is a little messy. Buttons got all screwed up. That's because there's not enough space on one line and the second button jumps below. We can easily fix this by giving the left block minimum width. Then it's not going to shrink to a point where this needs to happen. 400 pixels looks like a good idea. Now, the left block doesn't shrink beyond that point, and if there is not enough space, the image is going to take the hit. Second bit is that they are a bit too close to each other. We can add an extra margin to the left block so it pushes the image away. That looks quite good. Tablet and mobile screens are a little more messy, but we will take care of those in mobile optimization lessons. All right. This looks just the way we want it to be. Yes, the image has a little different dimensions compared to fi Ma design, but that's expected. We are making things responsive so it shrinks and adjusts to the screen sizes. So, to recap, flex box is what it says, flexible box. It can distribute children elements either in vertical or horizontal direction. Once you set display flex on an element, alignment and justification options show up. Nailing down the right options from here is a matter of trial and error. Just play around with all of the options until you find the right layout for you. 73. Webflow: Debugging Checklist: So what do you do when you experience now sort of a bargain Web Flow? Wearing something is just doesn't look like the way you expect it to do. In most cases, this issues aren't actually bugs within the web flow designers sometimes the might look like a bug because you try use things like everything is working correctly and there's like all, you know, there is some something with web law or there is an issue with a web flow or maybe something with a browser. But most often those are just styles that you are applying inside web flow. And they're just not behaving the way you expect them to behave. And I sort of have my own checklist that I'd go through when I'm trying to, let's call this add debug, how to find out what's causing the issue and have greater this checklist. I'm going to link this checklist so you can have, and it's sort of like a few steps you go through when you're experiencing some issue in there, we'll help you. I'd say about 80% of the time. And they will put you in direct direction to find out what's causing an issue and how to fix it. But there are obviously some of the cases that are not going to fit this template and you will need to dig a bit deeper. But majority of cases these track los is going to cover. So I have some issues here on this page that I've created and let's go with a trackless MIT how this works actually and this, most of the issues that likelihood, all of the issues that upgraded here, they are something that I often see from my students when they're asking the questions like what's going on. And somehow I'm trying to fix something and it's not working out and they're very common issues that are coming from the students. So I just grabbed stores, common issues, sand applied this checklist, do it to show you how it will work. Now and the number one thing, step wining the checklist I have if it's a spacing issue, this is on the border spacing issue. The step one enable x-ray mode and hover over different elements to find it. The space is coming from some elements, margin or padding. So in this case we have a spacing issue here, right there is this extra white-space. We don't know what is it coming from and what we're trying to find out and here as y. So there is this extreme mode right here in the Canvas settings. You can enable x-ray mode. And in the x-ray mode, you, when you hover on elements, it will show you padding and margin of that particular element when it's green. That's padding, or when it's blue. Let's see that one right there, those dashed angled lines on the side on the bottom of it, that means it has a padding. So in this case, a heading has the bottom padding right here. And in this case, a hero section has padding. Sorry. So they're heading. Heading has the margin and the heroes action has the padding. And what I'd like to do is actually to hover over inside the navigator. Because in the navigator you'll be able to cover all the elements. Whereas on the canvas sometimes you will miss like a parent because they are very neatly wrapped around some analog element. So what you can do inside the navigator is click this icon to expand all of it. If you press wide-scale lab six, if you're pressing and it's going to expand all your elements. And then wherever you are, you don't have to go all the way Barnum, right? So wherever you are, find that element, then start hovering over and see where it picks up and where that space gets highlighted. So in this case, heading two has a margin on the top, and that is causing that whitespace issue. So now you can go to that thing and you can see that it's correct. There is a two pixel margin on the top. And even though the section itself doesn't have that margin, has 0 margin somehow, the way HTML works in this case, the heading is causing these extra margin. Instead of it adding the space inside. So this is why this x-ray mode is really nice and neat and we'll show you where that space is coming from. If it's coming from margin our panel. So obviously if you change this to 0, they will go away. Same thing now with the bottom right, this little gap here. So we go continue. And there you go. We have a paragraph that has this bottom padding, which she's sorry, again, bottom margin. And it's a default value that all paragraphs have in my case in here, probably in all the cases because it's attacked. Change it to 0, and there you go. Now all that space is gone. So now that was an issue where step one works because it's spacing issue. Now. Sometimes it is a spacing issue, but it's not going to work. So for example here, again, it's a spacing issue. We have this paragraph. This is something actually happens frequently with my students. They send me their version of the site that they're working on and they will have odd spacing gone paragraphs and tags and they don't understand where the hell is this coming from. So if you do the x-ray here, you're not gonna get anything. So I'm not going to even bother to go through the hall. You're not gonna get this space filled up as a margin or a padding. So step one doesn't work. We have to go to step two. Now in the step two, we have removed the class from this spec to see if the issue disappears. If it does then skip to step six. So in our case, I think it's quite easily easy to identify what's the who's the suspect dot this issue which would be the paragraph sometimes. So it looks like it, but they're not. We have steps for that too. So paragraph is this aspect. So what we're going to do is we're not going to try to find out what's here, what is the cloud? What is that star that can be causing this it. So we're not gonna do that. We're going to remove that class, temporarily, remove class, and bear it was fixed. So now we know a 100% that this class is causing this issue. So I'm just going to hit undo with Control Z or Command Z or by doing this here and do. And so we know it's this class, which means it's one of the styles within this panel, either blue styles or orange tiles usually is going to the ones that are highlighted blue because they are the ones that are being directly in, directly affecting this element. So in my step it says, if it does then skip to step six, and let's go to step six. What does the say? Once you identify the class that's causing the issue, put the class back on the element. We did that and start resetting each style that is in blue color. You shouldn't be able to find a particular style that is causing the issue. And he got so what we'll do now is we don't know what is it. I don't even understand how, let's say web law or HTML and CSS, more absorbed. I'm just going to blindly go and remove all of these I don't even have to understand. Without even understanding this will tell me which style is causing the issue. So I'll go reset. I'll go reset. Nothing. It's not fixing. And I'm going to just use that shortcut here, which is option click in my case, probably ultimately on Windows computers. And I'll just continue doing this. Alright, still nothing. There is another blue here. Bam. Alright. So now we know we're going to do. Now we know it's exactly have the style that is causing the issue. And let's see height 160 pixels. So even if you don't understand why this is causing, and it seems like it's a correct thing. You can play with an r value most often you will get at why this is causing it. But if not, just change it, when you do the reset, it will also tell you the clue of what's the correct value that doesn't cause this issue. So if I reset this, now we see, okay, it says 161%. Okay? So in my case, in this case is 160 pixels. So it seems like this pixel, it being pixel causing that issue, which is true in this case because percentage of a line-height is calculated, a 160% means a 160 of the height font size is relative to the font size, but a 160 pixels is not a relative and absolute value, which means. That space here, that space has to be a 160 pixels. That's why it's so, so you can just change it to 160%, right? And that's fixed. Know, sometimes lets go to another issue. So we have this issue where this was actually submitted by one of my students. I remember the issue here is that these buttons are not aligned to the left. And we go through all these methods and see how the x-ray mode, nothing is going to come up. And if we go with, okay, so for example, this is the button we are suspecting that it's a button is causing this. So we do this method from the step two, which is removed our class. So we remove those two clauses here, one combo class, right? So we remove one of them. Okay? Nothing will remove another one. Steel nothing. Ok. So when I do this, I usually return them. So we know it's not the button itself. So what does the step three say? Seems removing a class on the suspect element didn't help. That means the issue is coming from some other elements. Start by removing classes from the direct parent, then parents, parent all the way, including the body element until you remove the class that makes these should disappear. If you find a buggy cluster, then skip two step sex. So again, we're doing the same thing, which is we need to find the class on one of the parents or whatever the element that's causing this, and remove it. And once we remove it, we will see that it's going to fix it. And then even within that class, we'll find the style that is causing the issue. So we know it's not that element itself. So we have to go to the parent. So easy way to go through that parent of something is to look at the side navigation bar here. Do you have a button? Button is selected and now tells you or shows you the hierarchy of where the button is sitting in that hierarchy of decreased. So it's like a family tree. So the first parent is the blog than a grandparent is flexbox, great-grandparent container and so on until the body. So we start with the first parent which is diblock. Alright, and we'll try to remove class. Okay, nothing. It's not definitely not this diblock class. So I do undo so we can return it back. So now we go to this next parent which is flexbox. So we try and the flux box, we have two classes here. Remove one nothing, remove another one. Let's see, still nothing. So let's undo this toward it back. Now next parent container. Let's see. Remove. There you go. So it is the container class that is causing the issue. So whatever the step was here, right, skipped a step six and go to the steps, takes Step six, which is to reset all the classes that are in blue, start to gain option. And quakes. Nothing, nothing. Oh, there you go. So I'll just return all of those other classes back. And now let's see. So a line when we're sad, it goes to Ireland to the left and we need on the center. So for some reason, and you don't have to understand this at this moment. You all, at some point understand most of the issues why they are causing and but often you'll see, okay, so I just need to set this to the left alignment and problem is fixed. And the reason why this is happening, just to give you an idea, if you're curious, it's because container has text alignment center, which means whatever taxed element is inside container and doesn't have to be directly, right? It doesn't have to be directly. It can be any of the grandchildren inside, and it will inherit this value. And that means that all the tax start texts, elements that are texts like will be centered. Yeah, Robbie, center. Now why is that applying to the button? Because buttons are inline block. Inline-block behaves like sort of like a text, which means it's not a block level which spreads from one edge to another. Meets inline block which has the border, it's edge off. It is defined either by the width or by the content inside. In the dual behaves sort of like taxed. And that's why you are able to put to inline-block talent of elements like button and share the one button here next to each other because they do behaves sort of like tests and they are allowed to go on the same line in Enlighten means in the same light. And so issues is to fix here right, left alone oranges. And we were studying this on diblock cylinder container and reset it. You should fix. So that's and I believe I only have one last issue left that will cover other instances. So we have recovered steps three and issue isn't the issue isn't coming from any of the parents than it might become in cramped children or siblings. And this is the case, for example, with this element. So we have this, imagine it's not growing, it's very small. We wanted to fill up most of this space, but it's not happening. Now we start with an image with them, okay, images, a very small probability issues from the image and we start with the same process and removing the class. This image doesn't even have a class, so you can be that image. In this case, sometimes there is one instance and this can be from the settings. So unlike most stuff other elements, he image elements to they have an extra place where you can mess with how they are displayed. Then you have this width and height settings inside image settings. So that's one thing can be edited without you editing any of their stats. So in our case, it's not that it's not the class. Then we go to our parent. And I'm not going to go through all of that because it's not fare so well, we're going to do, is we're going to check as these shows children or siblings. So image this is not going to show us I, neither children or siblings. So we have to use their Navigator to see what the children or siblings after element. In our case image doesn't have many children. A doesn't have any siblings. The one lonely single child of a right block. So seeings image doesn't have, it, doesn't have children or siblings. What you're going to do is you're gonna go to the parent and then check the siblings off their parents. So parodies right block and the sibling is left block. And so what you do here is you're all removed the classes from black block because that's the sibling off the parent. So we'll see if that fixes the issue, which it does. So we know now that it's a class that is causing an issue. When you go through this comma class, you will see there is none of the styles are in blue. So what does our checklist say about that? Once you identify the class that's causing the issue, put the glass back on the element are start with, okay. So we did this without no blue pluses. So what we need to do if resetting blues styles, we go to the steps happen. If resetting boost styles didn't help or there are no blue styles, then start resetting the styles in orange color. Because the orange colored, the styles that are in orange day are also changing something about the element. Although they are not directly resettable, because they are being inherited somewhere from the combo class, somewhere from the parent and so on. Often this is the case when you're working with responsive versions here, most of the things are in orange because they are being inherited from the desktop. So this is the method that you will usually want to do a year in the responsive where you don't see any of the blue, so you have to start resetting. The orange starts now resetting here, there is an option to reset. So what you have to do it, find out what would be the default value and just change it manually to that default value. So with the margins and paddocks, it's easier. You know, it's always 0, you just change it to 0. And you see this is not gonna do anything. Then you go to that width setting, side settings. Here it's a bit different. Each one has a different sort of default value. You'll see that week. And height they have auto as their defaults. But minimum. Has, and you can check since this is filled up and you don't know what's the default for a minimum. You can check this based on the minimum height. It has 0 pixel. So 0 pixel is the default of minimum height and width, or you can change to 0. And now that's the issue. Now we know that issue was coming from minimum width y. Okay, now we're going to understand, so it has a minimum width of 800 pixels, which means it's being persistently stretching. Beyond that it needs to, and it's pushing the Imagine image doesn't have any space for it to grow. Though that's why to fix this issue, then you start shrinking this a better size. So image has space to Rome and that's it. So this is the mold issues that I'm demonstrating here and shows most of the issues. There is one more step that I didn't cover and this is usually when you're dealing with something like a navbar or some components that are coming from the where clause elements panel. And if you go through all of the steps and you did this and he did the orange reset, you did everything, it's still not working. Then there is one last step you'll want to do and in which he's, you add that element or a component from scratch. For example, if you are experiencing an issue where the now buried you did everything, all the steps that we've done and still nothing. Then what you'll do is you'll add a completely brand new. Whereas the navbar nav bar. And you sort of position it in the same place where that number is supposed to be, and you start checking. This noun is completely new. Navbar has the same issues are not. So you will see if the completely barren new number has the same issues, then he issue cannot be width than r bar. That means it's some other power parent element or something about the bodies sometimes, yeah. Styles can be changed on the body element here or from there. Buddy elements tag. And that's going to cause some issues down the line or some parent and you know, or if you see that the issue is not happening with the navbar and then you start recreating that navbar step-by-step in, you check every time to make sure that you you identified the moment you make some change here to match your new, though older, not bother styled now bar. And you identify which one of the classes made the mistake and causing the issue. And often you'll see that it's not going to be from the styles and it can be from things like setting or things like the navigator where something is missing, maybe an icon is missing and maybe one of these elements is missing from there. But at least we will be able to, even if you don't identify what's exactly causing the issue, you will be able to get unstuck. So you're not wasting your time. You'll be able to okay. You know, and I'm just going to start from scratch. I have this old one here and I'll start applying the same content than the same style and our recreated and just check step-by-step to make sure that I don't go too far before making a mistake. That's it. That's all there is saying these, we'll help you with a lot of your issues and will save you a lot of time and headache. So I'll go through the checklist. Hopefully, most of your issues will be identified using the checklist. 74. Webflow: Navbar (Chat App): In this video, we're going to add navigation bar to our page. Webflow has a default navigation bar element called Navbar. This is one of the premade Webflow elements I do like to use, which we can add from the elements panel, drag it to the top to bring it on top of the hero section. Navbar already comes with elements inside. Let's have a look exactly what's this Navbar made of. So inside the parent Navbar element, we have a container. This container is similar to what we did with our hero content centered in the middle with a maximum width, so elements are nicely wrapped inside it. Then inside that, we have three other elements, which again, are boxes. First one, the brand sits on the left. That's where we put the logo. Nav Menu is where these three navigation leaks are sitting. Like most other things, it's just a regular diblock but with some default styles already applied to it. We're able to change these sals if we want to. Third, we have menu button, but it's invisible. You can see here that there is a display none applied to this item, so it hides. Menu button is invisible only on the desktop. On other devices, it's visible and you can see why. It's a Hamburger icon that drops down the hidden navigation links, which you're probably familiar with because that's what most of the websites have. Fitting navigation links on mobile devices is difficult. We use this hidden navigation menu and the Hamburger icon that contains those links. Navbar acts just like any other HTML element in Webflow, but it also has some extra options inside settings. There is an option to open and close the menu. Menu is basically what's hidden in mobile devices. In desktop version, this doesn't do anything because menu is visible at all times. There are three types of menus in here, drop down, which is the default, right side, and left side menu. I mainly use the default dropdown option. Underneath, there are options for easing. This is relating to the animation. Easing is an animation that starts slow and then acceleratees. This is how most animations on the web are set. But more about this later in entire section dedicated to interactions and animations. I leave all these settings on default. Only thing that I use here is the open and closed menu, so I can visually style the menu. Another useful setting here can be the display options for the menu. With this slider, we can set on which devices should there be a drop down menu and on which devices to leave regular navigation links just like the desktop version. For example, if you move the slider to the right, this will disable it from the tablets. Meaning on tablets, we'll see the regular links, and on anything smaller, we'll see the Hamburger menu. Now, let's dial the navbar to match our design. First, the background. That's quite simple. Just set it to blue from the background property. One thing you'll notice is the content inside the Navbar stretches only until a certain point. That's because the content is sitting inside the container, and this is not the container we made. It's a default container from weblo which is not as wide as ours. We don't want that container. Instead, we want to use the container that we already made, like the one where our hero content is sitting inside. So how can we use our container instead? Just like the way we reuse any other element by applying the same class. And you'll see how the container instantly changes the width. This is the class that we created and we gave it to this container that we styled before. And if we apply this to this knob bar container, all those styles and properties will be carried to this knob bar container. Just like what we did with buttons, if we decide to change the width of our default container in one place, it will instantly update in every other place just like magic. Next, we need to insert our logo. Just like we did with the hero image, we're going to export the logo and drop it as an image element. Unlike with our hero image, this time, we're going to select SVG. Why? Because we created our logo ourselves in Figma. It's a regular tax right now. If we export it in SVG, we will maintain its vector based qualities. It will be retina optimized right away. It will stretch infinitely without losing quality and file size is going to be very small. In most cases, SVGs will be smaller than PNGs and JPEGs. All right, once you have the image exported, add a new image element and upload the logo like we did last time. I have brand elements selected, so when I click the image, it will automatically drop inside that brand box. But the logo is glued to the top. How do we fix this? There are many ways to make it a line in the center. Probably the simplest is to add a top margin to the image itself. Let's now style the navigation links. We're going to do that just like anything else. But first, what we're going to do is delete all other nab links and just keep one. We'll apply some style to it, so Webflow automatically creates a class. Now we can duplicate this nab link as many times as we want, and when we make a change to one of them, all of them will be updated instantly. Long live CSS. So we're going to apply the appropriate textiles, pretty straightforward. And apply spacing to match our designs. We can measure spacing in Figma and ply the exact spaces in here too. The space on top figma is 42 pixels, and on the side it's 30. In Webflow, we will use padding for this. We could use margins, but by default, it already has padding and it's quite nice this way. On the side, we will use 15 pixels for each side. This way, padding of two neighboring links will add up to a total of 30 pixel. By using padding, the entire link will grow, so users will be able to click not just with the text, but with the entire box. You'll see that link is clickable even on the empty space because it's not an empty space, the entire thing is link itself. Finally, let's add that button. Although instead of using a button element, I'm just going to create a button from one of these nav links. Duplicate the class so we can make new changes without affecting other navigation links. Now, let's see what properties our button has in Figma. The textile is the same as the navigation links. The background is white, but with 20% opacity and the padding around the taxes, 12 pixel on top and bottom and 24 on the sides. Let's recreate all that in Webflow. Inside weblos Color Picker, you can apply 20% opacity from this box named A for Alpha value. Not sure why Alpha and why not O for opacity. It's something to do with our RGBA color system, but who cares? We have different padding than our nav links. And we have rounded corners which we can set in border section. There is no exact value here, increase it until it stops rounding. No problem if you go over it. All right. Inside Figma, we can see that it has 30 pixel margin on the top. And for the left margin, we're going to use 15 because it will add up with an existing 15 margin from that nav link next to it. Because of new spacing, logo is out of line, as you can see, we're going to have to align the logo in the middle with the NAV menu. We're going to have to align it by eye. Finally, let's check the fluidity and responsiveness of our Navbar. As you can see, they're being squeezed to the edges, but that's because we don't have any extra spacing. The hero section is fine because it has padding applied on the sides. So when browser window shrinks and container shrinks with it, the padding will stop it from being squeezed all the way to the edges. We can apply the similar padding to our nav bar as well. And there now it's looking good. It's almost done. There is one small but important thing missing hover effects. None of the links or buttons react when I move mouse over them. We're going to learn how to add hover effects in the next lesson. Right, so to recap, we learn how to add a navigation bar, the anatomy of a bar, and what is it made of, the settings of an abr and how it works on smaller devices, we learn how to add a logo inside an bar and how to style links inside the navigation menu. 75. Webflow: Hover: Our hero section looks great right now, but not very exciting to interact with. When we move our mouse over the elements, they don't really react to it. These are called mouse over or hover effects in web design. Remember this law called Jacob's Law of user Experience? The law says that users spend most of their time on other sites. What does that mean? This means that they expect for your site to work the same way as all the other sites they already know. If you try to be very original and make your site work in a different way than what users are used to, you're going to end up with a very original ghost website that everyone wants to leave instantly. People have expectations for links and buttons to react when they move the mouse over it. Adding hover effects and webflow is quite simple and very fun. This is managed under the dropdown called states. After selecting the hover state from the drop down, any changes that you make to the styles will apply to the hover state of that class. Just like that, the button changes. The opacity on hover states now show a blue dot to indicate that a change has been made to the hover state. There are other states like press and focus, but I won't go into those until we need it. We haven't designed hover states in Figma. I don't do this in real client projects either. It's too much extra work that isn't really necessary. I come up with hover effect on the go during the webflow building process. This way I can also visualize how it's behaving. We can change almost every property on hover. A lot of fun animations can be created just from this. Although Webflow does have another way to build animations and interactions and it's super amazing, but more about that for buttons. Changing the background feel is a good and simple way to add some simple hover effect. Changing the opacity of the background feel is easy way to do that. You can use that as your go to technique for quick and simple effect, it's easier than putting a different color. Another simple way would be to add a shadow on hover. That's a common and fun animation. Adds an extra layer of dimension. Now with our ghost button here, we can't decrease the opacity. It's already transparent. But what we can do is to add thin layer of transparent white like that button in the navbar, Adding white background with 20% opacity for the button in the navbar. Either we can play with opacity again or fill it with 100% white. When you fill it with white, we have to change the tax color to because text is white and it doesn't show. Luckily, we can change any style on hover without a problem. We can turn text into blue. As for navigation links, we can do something similar like decrease opacity, change the color to something else, or we can do something even more interesting. We can add a border underneath, I don't mean under line, that's lame, I mean a border underneath the entire link box. We can do so under border settings, Select a box that indicates the button border this show. Automatically. Select a solid line as a style. If it doesn't, make sure you have it selected and it's not set on X and change the color to white. This is a nice hover effect and suitable for us because we are using a link as an entire box, not just a text. It shows that this whole thing is clickable. We could bring this border closer to the text by decreasing the button padding, but I actually like it being spaced out like that. There is one strange thing that is happening on hover. Pay attention to how the content underneath shifts slightly every time we hover on links. That's certainly not nice. The reason this is happening is because two pixel border adds to the available space dedicated to the nav links. It pushes all the content down. How do we fix this behavior? We need to somehow make sure the height of the nav link doesn't change on hover because of the border. One way to do that is to add topic el border also on the regular state. We can make it transparent so it doesn't show this way. Nav laying box has a topic El border either way. So it doesn't change sizes on hover. The only thing that changes is the color. That's a good solution. The hover effects right now, transition quite abruptly from one state to another. It's a very instant jerky jump. This instant jump might not be much, but it's too fast for us to register the change. It doesn't feel very natural and smooth. Web designers in such cases add a little transition effect. There is a slight time delay in transition. We can add the transition style from here under a dropdown, you'll see there are many transition types. It's listing everything that can have a transition effect, like an opacity of an element or a background color. Every style can transition. For example, you see phone name isn't listed because phone change can't be animated. But many other typography settings can. In our case, we want to transition a border color, which is an available option. There are two more values, duration and easing duration is what it exactly says. How long does transition take in milliseconds? The default value of 200 milliseconds is pretty good for most hover effects. You can leave it as. As for the easing, it might look a little complicated, but they are quite simple. In reality, these are different formulas on how fast they go or accelerate and how fast or slow they decelerate when the transition is ending. Let's leave this to the default, most of the time it works perfectly fine. Now if you hover the nove links, you'll notice that border appears and disappears smoothly. And that's just so much nicer than that jerky transition that was before. One small thing to note. The transition effect has to be applied on the regular state, not on the hover state. That's just how she assess works. Okay. The same thing we can do for buttons and their background transitions. Often instead of selecting specific transition type, I actually like to select all properties. This will apply same transition settings to any hover effects. Just simpler way to do it, instead of looking for a transition type every time we want to apply some different hover change. If one element has several properties that change on the hover font, color, background, color shadows. Instead of adding three different transition types, we can just add one that applies to all. Unless we want to transition different effects in different speeds, but those will be very rare occasions, the same transition effect on the other buttons. And that we have all buttons and links transition nice and smoothly. All right, let's recap what we did in this video. We've added hover effects to the links and buttons on our Hero section. The hover states are changed from the states in the styles panel. We can change almost any style inside the hover state to make the state changes from regular to hover look nice and smooth. We can add transitions from effect settings. 76. Webflow: Middle Section (Chat App): The desktop version of the hero section is completely done. We haven't optimized it for mobile devices and tablets yet. But what we're going to do is actually we're first going to finish the entire page, and then we're going to do the responsiveness and mobile optimization. This is sort of my habit of doing it. Some web designers, what they're going to do is they will each section by section, each individual block that they are building, they're also doing mobile optimization at the same time. I like to finish the entire page first and then go to the mobile optimization and responsiveness. Why? Because what often happens for me is that I send desktop versions or whatever the page that I'm basically designing, I send it to the client for the review. And they come back with revisions. So what happens, there will be like, even though we agreed on the design, sometimes, you know, there is animations involved, right? There's interactions involved, some horror effects. So different things are involved that haven't been part of the design phase, or they might just change their mind when they see the page in reality. So what happens is that they might come back with some different changes that I have to make, and I might completely remove part of the section or completely change the way it's laid out and so on. And now all that responsiveness and mobile optimization that I have put inside is sort of lost all the time. And this way, I know that I don't have to spend any extra time on mobile versions until we're sure and until my client has signed off on the designs and we know this is ready to go. Then at the final stage, I'll fix the mobile and then create the responsiveness of the page. And we'll use that process, finish the page first, and then go over it and go through the entire tablets and mobile versions and all that. Now it's time to build this middle section. We're just going to be much simpler. So what do we need first? We can have a look at our hero structure to get a clue. So it looks like we have two DO blocks, one named hero section and another container that sits inside that hero section. If you remember, we made a container as a generic block to center our content. We even reuse this container inside the navigation bar. It's a great idea to reuse this container again everywhere on our website. This way, we have a uniform layout. And if we ever decide to change the maximum width, make it wider or narrower, we can do so on entire website. In a couple of clicks. For the hero section, we haven't done anything standardized like that. Otherwise, we would reuse it here as well, but that's okay. We can create a generic section now, which we can reuse later like we did with container. So we're going to add a new section. We'll put another container inside. We'll apply container class to that container. And we're going to create a new class named section for that section block. And now let's add some style to this newly created section class. One thing we can borrow from the hero section is the side padding. Remember this side padding, we apply to the hero section, so the content doesn't go to the edges. We know this is going to be uniform across our website and between pages, just like our generic container. So we're going to apply the same padding to our generic section. Later, if we ever decide to change that padding, we can do so on the entire website just by changing one instance of that section. We can also add top and bottom pedding. This information we can find in Figma. We have used a 90 pixel spacing figma to distance this headline from the hero section above, so we can reuse that same value here, and we can apply it as both top and bottom pedding. There, now we have a generic section layout with a generic container inside. We'll reuse this exact same structure on other similar sections on our page. Now we can put our elements inside and start styling them to make it look like our designs. We'll do that in the next video. 77. Webflow: HTML tags: Let's start by styling our headline. Any new text that we add to our page by default is set in Arial font. Wouldn't it be nice if you could somehow give them a default style like make all headlines pop ins and all paragraph text roboto, so we don't have to style them every time we add a new headline. On a small one page like this, that's fine. Not much work. But what happens on a large website with 20 different pages and even more blog posts. We could of course use CSS classes, but there is even better way to go about this. Remember the selector field, you're already familiar with this. From here, we apply CSS classes to our elements. By applying a class to an object, we are basically saving the information on styles and properties. Later, we can apply the same class to another similar object. In the selector field you'll see it says, select a class or tag. This tag is what will enable us to set default styles on our text. So what the heck is a tag? A tag is part of HTML, whereas class is part of CSS. The tags are exactly what we have been adding to our page. DV Block is a tag named DIV and a heading is a tag named H one, and a paragraph is a tag named P. Inside HTML, this is how new elements are being added, tags. It starts by telling the type of the element it is DV, H one, P, et cetera, and right after it, if there is any CSS class applied to it, then the name of that CSS class. You see how it says class equals hero section. That's exactly the class we have created manually and name it that way. So how do tags help us with setting default styles? Well, just like we define a set of properties and styles of a class, we can do exactly the same for a generic HTML tag. For example, for the heading, instead of applying a class to it and then styling it, we can select all H one heading from here and then style it as we usually do. Now, every time we add a new heading, the default style will be applied to it without needing to use classes. And just like classes, we can make a change on every single instance at once. K. Besides H one, we have more heading tags. Just click on the settings of the heading and you'll see. We have all the way down to H six. The use of this different heading tags is basically the level. H one should be our highest level heading style. For a secondary heading, we can use H two and so on. If you look at our designs in Figma, we could definitely define different levels of headings from there. The heading on the hero section is the largest, so that can be the H one. The headline on the section afterwards can be H two and maybe those footer headings can be H three or H four. So if we wanted to define an H two tag, we would select it from here and again, go to the selector. This time, selector will show us all H two headings instead of H one because that's what we have selected. And we can style all H two tags across our website. Now, when we select H two tag on a headline, this style will be automatically applied. As a side note, unlike classes, tags don't keep being selected. So moment you are done editing and you exit the element, this tag selector will go away. So if you do this and come back to the heading to edit a little more, now any new edits will create a new class and it won't be applied to the tag. So every time you make a new addit to the tag, make sure to select it each time. Until today, I keep on forgetting about this. To be able to select the tag, the class field needs to be empty. Otherwise, as you can see, it doesn't show the option to edit the H two tag anymore. But there is another way to select and edit the tag itself, even if you have a class applied to the element. You can do that from here. This drop down here shows all higher level classes and tags that you can directly select and edit. Blue is for class and pink is for tags. For example, let's take our heading and make it red, but not the tag, but just this particular instance of the heading. As you can see, the default H one heading is unchanged because we apply the red color using a class, not using a tag. Now, if we want to edit our default H one style, of course, we can do that on the headline below, but we can also do that on the red one by selecting a higher level tag in the selector. Any changes that we make now is going to be applied to the default H one style as well, and you can see this happening in life. Another thing to point out, you'll notice the color style is scratched out. Why is it scratched out? It's basically Webflow telling us that the color property is being overridden by more specific selector. So classes are more specific, sort of like children elements, and tags are more like parent elements. So classes override tags, similar to children inheriting styles from the parent until we set a specific style on the child element. Same goes here. H one tag is a higher level selector, and it will act as a default style until a more specific class overrides that style. A good example of this hierarchy is a body tag. If you look inside the navigator, you can see that the body is the biggest box where everything else goes inside. Nothing goes next to the body or on top of it. While you have body selected, go to the selector and click on Body A pages. Now you can set some certain styles on this body tag that will be passed on to all the children elements. However, only for the inheritable properties like textiles, other properties like sizes, display, borders won't be inherited. You can see Webflow has already applied some default font styles. We can see that because it's highlighted in blue. What default styles can we set here? For example, we know that roboto is our main font on paragraphs and everything else besides headings. So why not set Roboto here? Also, we can set a default font size, color, and line height. This way, every new text we add to our website will begin with these settings and will have much less styling to do. Of course, we're not stuck with these values. H one and paragraph tags are more specific selectors, so they will override the settings. That's why the paragraph changed when we were editing, but the heading didn't, and classes are even more specific selectors, which will override all the other texts, be it heading or body tag. Now every new text element that we add to the page will be in roboto and in gray color unless having more specific styles. There are other tags we can style, but headings and body tag is the most common and most useful. So in our case, we have H one tag that we style just like our designs, and we have style the body tag according to our paragraph designs. After styling the body tag, you'll notice sometimes some tags will change where you don't expect. For example, our navigation links, they agree on size to match the 18 pixel we set for the body tag. And if we click on the font style, we can see that this value is being inherited from the body. Even though we have a enabling class applied to it. Why is this happening? Because originally when we style navigation links, we didn't have to change the phone size and line height. Whatever was set on the body by default was the same phone size we needed at the time. But now because we have changed the phone size on the body tag, we get this. Let's dtyle these navigation links to whatever sizes they are supposed to be 14 pixel for the phone size and 16 pixel for the line height. And that's much better. So to recap, we have CSS classes and HTML tags. HTML tags are elements themselves, like paragraphs, headings, images, et cetera. Just like classes, many HTML tags can be styled to create a general default style for those types of elements like all H headlines or all paragraphs. Styling text is a pro habit. It saves a lot of time down the line. And it's efficient and creates a cleaner code. Highest level tag we can style is the body tag. If we set a font style on the body tag, then every other tax element across the website, not just the page will inherit that font from the body tag until we override it with other more specific tags or classes. 78. Webflow: Combo classes: So the middle section just has three elements, heading, paragraph, and one image. So we need the cording elements in weblo. Now, let's put our content inside and see where does that take us. Next, let's export the image. This time, we can export JPEG instead of PNG because the background is white, so we won't get any color mismatches. We're going to do two Xs for routine optimization. Of course, run the image through optimized to compress the file. PNGs and JPEGs you should always compress. SVGs can be compressed too, but most of the time it's not necessary. They're small enough. A Since we exported two X, we need to enable the high DPI option. Okay, it almost looks like our design. We need to center everything somehow. We could set text align to center on the container D block, but we can't do that on our generic container because it's going to center elements everywhere and mess up our content elsewhere, like on our hero section. We could, of course, duplicate this container class and create a new one with a center layout, but that sort of beats the purpose of having this default generic container that we're going to use across the website. Luckily, CSS has a super smart solution for this the combo classes. Let me demonstrate. We've got a generic button here. Let's apply our existing button class from the hero section. Once we reach this section from the design, instead of white, we will need to use blue version. But instead of duplicating the button class, we're going to keep the same base class and add a combo class to it. There are two classes now in the selector, button, which is the base class and blue, which is the combo class. Any changes we make to this new button from this point won't affect the original white button. But the beauty of the combo class is that every other property that we didn't touch is still being inherited from the base button class. This means if we at some point decide to change the style of our buttons like make them square or decrease padding or change the font style. All of those changes will be reflected on the blue button as well. However, all those properties that we have applied to the blue combo class won't be affected at all. In this case, the background and text colors. It's not really a crime if you don't use combo classes. Regular people visiting your website are not going to know difference if you're using combo classes or not. And frankly, they don't really care. But this is what pros do to save time, produce a cleaner code, and have a better control over the website. And of course, I want you to become a pro, create websites efficiently and make more money by saving time during the development. These combo classes fit the inheritance tree at the bottom of the hierarchy. They inherit styles from the base class, who in turn inherit styles from the related tag. Related is an important word here because a paragraph won't inherit any styles from H one tag or heading tag, only from paragraph tag. And all of those tags inherit some styles from the body tag. And when we overwrite styles, we're overriding from the bottom. More specific style wins. So the combo class can override everything above it, the base class, the related tag, and the body tag. Similarly, a base class can override everything above it, but it won't affect the combat class if that combo class is in charge of that specific type of style like phone color or background color, and so on. That's exactly what CSN stands for cascading style sheets, if you are dying to know. So the styles cascade from the top to the bottom, sort of like a waterfall. You can see how combo class has been added to the inheritance menu. And this menu gives us an ability to select any stage of this hierarchy and dit exactly that stage, for example, the base class. By the way, this inheritance menu can also show what specific tag can control your element. The second pink box says all links. Why? Because buttons are regular links. We just dile them to make them look like buttons. So if we set some styles on all links tag, then you will notice those styles on your buttons until you overwrite them. Okay, back to our container. We can add a combo class called center and then change the text alignment of the font. This should center all our content as we want it. From this point, if we ever need another container with center alignment, we can apply this combo class just like we would apply a regular base class. Webflow even displays combo classes that are linked to that base class, so you can choose an existing combo class. In la, we get a centered container. Couple of things we need to style in our section, the width of the paragraph and the spacing. We can grab the spacing from our design. 30 pixel on top and 16 on the bottom. And of course, we can grab the width of the paragraph two, which is 566 pixels. But oops, this happens. I know you might be thinking here, how come it doesn't center? Didn't we set the center alignment on our container but have a closer look. The text itself is centered inside the box, but the box isn't. So why isn't the box in the middle? Because the paragraph text is set to display block, and text alignment option doesn't affect block level elements. It only affects actual text, inline block, and inline elements. So one way to center that entire paragraph block is to change the display to inline block. This might seem a little strange. It works on inline block, but doesn't work on a regular block, but that's okay. You'll get the hang of it. Another way to center it is by setting auto margins like we did with the container. Remember what auto margins do, they act like springs that fill any remaining space and push the box in the middle. Both of these are valid solutions, auto margin or inline block, but I'm leaning towards using auto margin because if I'm facing some sort of a bug and I'm trying to fix something and I forget what I've done here, I'm more likely to assume that the paragraph is set to default block rather than to inline block. And that's it. We're looking good. So Tereca, we learned about combo classes and how they can save us a lot of time. Combo classes are on the bottom of the hierarchy tree, so they inherit styles from everything above them, but they can override any of those inherited styles, and their changes won't affect anything above their level. 79. Webflow: CTA section (Chat App): Alright, we're going to build our call to action section in this video. What do we need here? Let's do a quick planning in our head. So we got image on the left, content on the side, pretty much same as our hero section. Let's start with the basics. We're going to add a new section and give it a class section that we created. Then we're going to put a container inside and give it a class container and then we'll take it from there. We need a background color for this section. It's actually the same blue, but we have it at 10% opacity. We'll do the same thing in weblo, but the question is, how are we going to edit our sections background without altering same sections on our page? Well, if you pay attention to the previous lesson, then you'll know that we can apply a combo class to the section without needing to duplicate it. There. Now, the change is only reflected on this new section. Since we have the similar layout as the hero section, maybe we can do the same thing. Let's have a look. We have a flax box inside a container, and this flax box has two blocks left and right that sit next to each other. Let's build this out in a similar way. So we've added a div block and applied the flexbox class to it and put another boxes inside that are glued to the edges. Why? Because if you check the properties of the flexbox, you'll see that it has space between applied. This pushes those children boxes to the side. So whatever we put inside them will be pushed as well. Okay, on the left, let's put the image. We need to export it first. The thing with this image is that it's too big and two X export even after compression is too large of the file. Ideally, we would want to export a JPEG in such case, but let's try 1.5 X and see if it's going to be small enough. It's still a bit large. We could go one X, but it's right. Also, it's not in the top part of the page, which means it's going to load in the background until user scrolls down. Now, because we exported it in 1.5 X, the high DPI option doesn't do a good job. This means we need to set the width manually. We just need to check the width infigma and apply that exact width here. We're going to need to find a way how to make this image stick on the left edge like we have it in our designs. But let's first put some content inside the right block. Okay, so what's happening here? The left and right boxes are flex children, so they have a flexibility to shrink and grow to make space for each other. So in this case, paragraph is pushing things and making the left block shrink. What we can do here is to apply a maximum width to the right block so it doesn't go wild. We can check the width infigma and put that as max width, which is 467 pixels. Now, do you wonder why not fixed width instead of maximum width? Because on smaller screens, we want it to shrink. We want to design responsively. Is that a word there is responsibility. Well, both we want to design responsibly and responsively. So mostly, consider using max and mean sizes instead of exact sizes. I have to point out here because this block is a flex child, it would still shrink even if we gave it an exact width. This happens because that's what Flexbox does. It rules their children as it wants. They don't get a lot of say. Let's give this block some margin on the left, so it's not so close to the image. Okay, now what to do with our image? How do we push it onto the side? I know we can add a negative margin to the parentif block. Yeah, that's the thing. Negative margins. And there you go. But this has a small issue. On a wider screen, the negative margin that we have added is not going to be enough. To fix this issue, we can do two things. First, we can use VW units instead of pixel units. Remember what VW stands for? That's right. Volkswagen, but it also stands for viewport width. So when we put something like ten VW, it means the margin will be 10% of the browser's width. So as browser increases, this will increase too. It's still not enough. We could add a few extra points and crop the image on smaller screens. But there is one more thing we can do is that we can widen the image itself, which means we can export more of the image. When we made this graphic, we have actually cropped the image. So we can reveal more of it and export the wider version. This way, we will have more flexibility. Move the image in the middle, so the entire thing is visible and frame is encropping it. Otherwise, if you export it, then it's going to clip the content based on the frame. Enlarge the image or basically reveal more of it. Then again, we go through the same export and compression and all that stuff. Just make sure to adjust the width one more time. It's not 660 pixel wide anymore. It's 825 instead. And now we have more flexibility on how much of the image we can clip from the page. By the way, this is not a hack. This is a valid way of doing things in web design. What matters at the end of the day is not the method, but the result. All right. Let's finish up the content. Remember what we did with the button when playing with the combo classes. We'll give this button a combo class or blue and style it. The same thing we can do with a ghost button. Let's use our paragraph to add spacing. 30 pixel on top and 60 pixel bottom. It actually doesn't matter where you add your spacing. You could even use headline and buttons, but that would need me to edit two elements. By using a middle guy, I can add space on top and bottom. It's less work and less amount of classes. So what do we have here? There is a line, and then there is image of stars and text next to it. Based on this side by side layout, we know that we're going to need an extra Dalblock just for those two. This time, we're going to export stars in SVG format because they don't have any photography inside. They are vector based, so perfect for SVG. As I mentioned before, SVGs usually don't need to be compressed. They are quite small already. Also, SVgs don't need to have high DPI option checked because they export from Figma in one X size, so there is no need to shrink them. They will look perfectly crazy in their original one X size. And even if you enlarge them as much as you want. A Okay, so how do we put the stars and tags side by side? Every time you want to put something side by side, start with Flexbox. There are other options, too, but flexbox will give you the most flexibility most of the time. This flexbox that we created in the hero section has a center alignment. In our case, we want it to have a top alignment like our design, but we can't change it here because that's going to mess up the original flexbox, and it's going to mess up all the other instances of the same flexbox. Okay, so we can create a combo class and name it whatever you want, and then change the alignment to the top. Two things still need to be fixed, the spacing between them and also it's still not nicely aligned on the top. The text is sitting a little too low, so let's take the paragraph and style it a bit. 20 pixel margin on the side, just like we have it in the design and some negative margin on the top to move it up and align it nicely with the stars. And also, let's give it a maximum width so the text jumps and cuts where we want. Groups, what happened here? Check the flax box. Of course, it has justify a plight that pushes them to the sides. Just switch it to left a line, and that's it. Okay, now let's add that horizontal divider. Oh, wait, there is no such thing as a line web flow. Lines in web are made of as usual div blocks. Line is just a div that has a one pixel height or something small like that. Add a background black with 15% opacity. Give it a width. And let's add top bottom margins to space out the content. Easy peasy. One thing you might have noticed that sometimes I name classes myself and sometimes I just let Webflow automatically create a class for me. The thing is, we should always name our own classes. But in the beginning, that's okay. Right now, we're just practicing and we're learning weblow, so we don't want to torture ourselves by new extra decisions that we have to make on how to name classes and all that. For now, we're just going to name important classes like flexbox or container or section, something that we're definitely going to use, and we need to know what we are naming them. And everything else, like the small paragraphs or whatever, we can just let Webflow automatically decide it for us. Okay, so to recap. Actually, there is nothing to recap, as we haven't learned new concept in this video, but we've learned how to use what we already know in different ways, like adding a negative margin on the image to push it to the side or using a one pixel height D block to create a line and a little more practice with Flexbox. 80. Webflow: Footer (Chat App): I. In the very last section of this page, the footer. The layout is quite simple. We used our 12 point grid to divide the footer in six equal blocks. Each block is made of two columns and one block is reserved for the space between the logo and the footer links. The most obvious option here is to use flexbox. Of course, there's an option of using columns element from Webflow. I would fit our layout just right because it's based on 12 point grid two. But you know how much I love those columns, so we're not going to use them. Instead, we will make our own columns using flexbox. As usual, let's add the section and a container inside. Add another block and apply our usual flex box class to it. Now, let's add another d block inside which we'll name as footer column. I'm going to give it a temporary background and hide just to see what we are doing. Just like in our designs, we're going to use six columns. These are going to be equal width columns. The entire flex box will be divided in six equal parts. We can do that using percentage points. 100% divided by six, gives us 16.666, and so on. Instead of doing the math on our own, we can actually have web flow to the math for us just like Figma. Inside the width fill type 100% divided by six. If we duplicate these six times, you can see how it fills up the entire space. Let's add the margins on the side, just like we have in our designs. They are separated by 30 pixel space. So here we should add half of that on each side, 15 pixel left and right margin. This way, margins from adjacent columns will add up to 30 pixels. However, we shouldn't have margins on the first and last columns because these margins will add extra space to already existing padding that's part of the section. This might not be that big of a deal, but it's a great habit to be consistent. We can do this easily by using combo classes. Just create a coboclass first and remove the left margin and same thing on the last column. All right. Now, let's put the content in the corresponding columns. Instead of using paragraph for regular text, we have another option for a text called text block, which is what we're going to use for this tag line under the logo. Text block is basically a regular dip with text inside it. It works the same way as a paragraph element, but they have different purposes. You should use paragraph for multi line longer text and main content of the page, and text blocks for everything else that is not a heading paragraph or a link. You can use these two interchangeably. The result is the same, but it's a good habit to use them purposefully because search engines and screen readers can identify how your content is structured on the page. Another way to create a text block is just by double clicking inside a regular d block and start typing. It will turn it into a text block. For the footer links, we are going to add regular link elements. Let's dial the link before duplicating. That way duplicates will carry the class. The foam color already shows the gray color, but for some reason, it's still blue on the canvas. This is a little odd behavior that seems like a bug on web flow side. It is correct that it's blue because the gray color from the body tag is being overridden by more specific link tag, which has a blue color by default. In reality, the properties panel should be showing blue, not gray, but there might be one reason why that's not happening, which I'm not going to go into right now because it's not really adding value to this lesson. To fix this, just select some other color and select the gray again. We don't need it to be underlined, that we can remove by selecting non under text decoration. We need some hover effect for this link. Otherwise, they're not going to look like links. We can simply turn it into blue color on the hover state. That's a simple and effective option. We could add a hover transition effect here just like we did with the buttons, but it's not really necessary. It's not a lot of change, so let's keep it without a transition. Now let's duplicate. But. It puts them side by side. Why is that, can you guess? Because display for links is set to in line. That means it flows like text, which it is. They are going to go one next to each other. If we apply display block instead, we know what's going to happen. It will occupy an entire width and stack on top of each other. But this method has one little issue. Not really an issue, more like not an ideal user experience. Since it's a link and it's a full width, that means it's a clickable even on the empty space. Unlike our nab bar where similar thing is happening, the links interact even on the empty space. But here, the border on the bottom is a good representation that the entire thing is a link. If we were just highlighting the text, then it would be odd on the NAB bar to. So how can we make them stack on top of each other without them stretching edge to edge? By using flex box. We can give the parent flex layout and give it the vertical direction instead of horizontal. Then left a line, Make sure to give this left a line. Otherwise, it will stretch edge to edge by default just like a block. And there now it's stack on top of each other and empty space isn't part of the link. Okay, let's style our headline. Instead of applying a class to this footer headlines, let's style one of the heading tags, S H three maybe. It might be the right level H two we could use for something bigger, a mid level headline. Do you remember how to style the tags? We need to select a tag from the selector, and now we are able to style all the H three tags. Let's remove the top margin and add a 20 pixel bottom margin just like we have it in the designs. And there we go. Now, all the t will be stuffed like this by default. One thing you'll notice that columns don't align on top like we have in design. Let's have a look at our flex box settings. You see it says a line center. What we want is a line top instead or stretch. As usual, let's add a comp class to this flex box before we make any changes. Do not mess up other instances. Stretch is better because empty columns will stretch two and will be visible. Let's finish up the links. Remove the background. And that's it. In this practice project, we're not going to link these pages because we don't have other pages, but we could connect the contact as link. For example, to link the e mail address, so it opens up a new email window when the user clicks on it. We just need to put the email address inside this field. We can skip the subject line. And we can do the similar thing for the phone link. And also for the office address, Rico Linka Google Maps URL. Check opening new windows so that Google Maps doesn't open up right inside this window, forcing the users to leave the site. And finally, let's add the copyright text on the bottom. We're going to use text block again instead of the paragraph element. I've added the text block inside the container but outside of the flex box. And we can add 180 pixel margin on top just like our designs. In our designs, the copyright text is quite close to the bottom of the page. 30 pixel away from the bottom. But in web flow, it's much higher because our section block has a 90 pixel padding. We need to change that 90 padding to this 30 pixels. But before we do that, we got to add a combo class. And there you go. We're down with our desktop version of our page. Let's go to the preview mode and check how it all looks. To recap, we have built the footer using a flex box layout. We have given footer columns percentage width, so they shrink and expand equally, and we have left one of the columns empty to create space between the logo and the footer links. We have learned about a new element text block, how it's used for non paragraph text in more of a general use. This concludes the current section. In the upcoming section, we will learn how to make our page responsive so it looks beautiful and user friendly on any device. 81. Intro to Responsive Web Design: For the times of responsive design, the websites were shrink down on mobile devices. Many websites are still made like this until today. Just very recently, I was looking for some information about Piers payment system and got to their help article 0R the support article page, which looked like this. It's a shrink down version of their desktop site. Using this sort of website on a mobile phone is just super annoying. You have to zoom in and move around and you know the drill. Luckily, with Webflow, we can use the power of responsive design and serve our users different layouts and very specific responsive layouts for their specific phones and specific devices that they are looking at. This way, everybody's going to have an optimal experience with our website. In this section, we're going to do exactly that, make our homepage responsive and optimize it for different screen sizes. First, let's understand how Webflow works with responsiveness. Inside the designer, we can see the switches for different devices. First one is desktop. That's where we are. Then it's tablet, mobile landscape and mobile portrait. In technical words, we call these breakpoints or media queries. They work like checkpoints instructing browser to change styles of elements if a browser width is in certain size and pixels. For example, if we make a style change on a tablet view, then this change won't be affected on a desktop. This is basically adding an extra CSS rule that says, I browser windows is a certain size, then show black background instead. And if we decide to change the background color on the desktop version, this change won't take place on the tablet view because we are overriding the background color. This uses the same inheritance rule as everything else. Remember how Combo classes carries all the style information from the base class. But moment we change a particular style on the combo class, then we are permanently overriding it. So no future changes on the base class will affect for the particular style. Say particular style because that's an important keyword here. Just like classes, same with breakpoints, we haven't touched any other style besides background color. So everything else will be inherited from the desktop version every time we make the change, like this border, for example. The changes that we make to different views only apply to styles. If you change the structure of the page or add new elements, that will be reflected everywhere. Why? Because these breakpoints are CSS feature, not part of HTML. In CSS, we style things. We can't change the skeleton of the page. We can only change the looks, although we have an ability to hide and show elements using CSS. So if we want something on tablet but we don't want it on desktop, we can just hide it. This image is hidden on desktop version, but it's still part of HTML and still inside the navigator, as you can see. Another thing to note about style changes, when you make a change on a tablet, all changes will cascade down to the smallest screen. In other words, mobile landscape and mobile portrait will inherit changes from the tablet and mobile portrait will inherit changes from mobile landscape. You can overwrite styles on smaller devices, but any changes on smaller devices won't affect to bigger devices. This uses the same inheritance hierarchy like classes. Mobile portrait inherits styles from mobile landscape, which in turn inherits its styles from tablet, which inherits styles from desktop. Each device breakpoint has a range to it. We can see this range using this Canvas recisor. The tablet expands to the maximum of 991 pixels and shrinks to 768 pixels. You can see this on the ruler below. This means 992 pixels is where desktop begins, and 767 is where it turns into mobile. The changes that we make to each breakpoint applies to the range. That's why we have to check by resizing the canvas each view to make sure it responds well. By default, Webflow shows the most common sizes in each view. On the bottom, when you resize that slider, you'll see that Webflow shows common devices for that specific pixel width. This is a good way for us to see how many devices are being affected by our changes and to make sure that we achieve optimal designs and optimal versions for the most popular devices. One thing to note, we're not able to apply specific style or independent devices like pink background on iPhone six. When we apply styles on the mobile portrait, then that style is set for the entire range of all the widths and devices whose screen resolution falls in that range. There is one more thing I want to show you before we move on to optimizing. We can reset any style changes we make by clicking on the blue style and clicking Reset, just like we would do with classes. The resetting will remove overrides and inherit value from the first higher level size. It even says here, where will the style be inherited after resetting? In this case, hero section class for a tablet version. The icon in front shows that it's a tablet version. As a shortcut, hold out or option when clicking and it will reset right away. And for the tablet, it shows that it will revert to desktop version and you can see that with a small laptop icon. So to recap, we're able to change styles of our elements for four different sizes, desktop, tablet, mobile landscape, and mobile portrait. For each of these device types, we also have an ability to shrink and expand browser within. So we can clearly see how our web page will look like for any number of devices, for example, iPhone six or seven. Styles are being inherited from top to bottom, from bigger devices to the smaller ones and not in opposite directions, so the changes on mobile are not going to affect tablet or desktop. But change on tablet will affect the mobile. All right. Up next, we'll get down and optimize our page for these devices, starting from hero section. 82. Responsive: Hero Section - Tablet: All right, so let's start with a hero section. We'll go one by one for each device and optimize the style. First, the tablet view. What issues can we identify? Here we have the image that is shrinking too much because of not enough space. The content on the left has a minimum weight. If you remember, that means image is taking the hit. Then we have a Nab bar that needs fixing. We'll have to see if we can actually fit our regular links in here. If not, we'll keep the hamburger menu and style it. The hero section is way too stretched for two reasons. First, because of 100 VH we have applied to that section. And second, because of that similar 20 VH padding. Let's see if we can fit the navigation links. How do we disable that hamburger icon and show the navigation links? We can do that from navbar settings. Click anywhere on the navbar and go to Settings. As you can see, it says menu icon for tablet and below. If we move the slider towards the smartphones, that will disable this from the tablet view. As a general rule for user experience, showing links is much better approach than not showing them for obvious reasons. It's easier to find and navigate. Real estate on tablets and mobile devices is very important. The spacing on these devices have to be much smaller than what we would do on a desk top. Let's remove that large padding that is applied to that section instead of VH. This time we're going to use regular pixels because it will give us more predictable look, say nine pixels. All right, the overall spacing for the hero is pretty good and we don't have bloated spacing. That's good. What to do with a hero image? It's still quite small. In comparison, the left content is too large and it's pushing the image on desktop, We had enough real estate to be able to use such large headline, but here we don't. So we can start shrinking the sizes in the left block. So we did shrink the content, but the image is not growing. Why is that? Because we have minimum width settings applied to the left block. Even though content is shrinking, the box itself isn't. Let's change this minimum width. All right, that looks pretty good. Let's test the fluidity of this layout by resizing our canvas. Great, it flows really well on the entire page. The tablet layout for hero section is done. All changes that we made has not been reflected back onto our desktop. It's still the way we left it. Now let's move to mobile views. 83. Responsive: Hero Section - Mobile 1: As I mentioned in a previous video, the style changes cascade down to smaller screens. All the changes we made to that tablet is reflected on the mobile views as well. Usually, this is a good start and sometimes might even provide good results for mobiles. But often it's not enough and we have to add extra tweaking on mobiles too. I like to use same layout for mobile landscape and mobile portrait. I use mobile portrait as my guide when I plan in my head and try to use solutions for landscape view that are going to work on portrait view as well. It's just a good way to save time and keep things more efficient. So based on the portrait view on mobile, I know that nearly everything is going to be in vertical layout. Not much space for columns and side by side layouts. There's no way we are fitting hero image and content next to each other. We will need to find a vertical alignment solution. Luckily, we have flexbox to help us with this. The default direction of flexbox is horizontal, but we can change that direction anytime to the vertical. And alignment options update as well when we change the direction. And this direction change is not going to apply to the desktop version. There it's still set to the horizontal. That's how awesome the flex box is. We can change the layout without altering the HTML structure and setting these stiles on a specific devices. But before we make these changes, let's give our flex box a cobo class because we are using this default flex box elsewhere, for example, on Footer, and we don't want to make all these changes to all the flexbox instances. And let's center align the content. Real landscape view isn't actually as tall. Think of it when you hold your phone in a landscape mod. You're not going to get the visible screen this tall. It's going to be more like this. It means vertical real estate is very important for us. So let's try to shrink spaces and try to fit as much as possible. For example, this padding for the section. We already shrink this on tablet view, but we so shrink it a more. Same here for the paragraph margin. Four de pixels looks distant. The photo is a little too tall. And most of it won't be visible on the single screen, and user will have to scroll through it. So let's set the maximum width on that image. I'm setting maximum width and not high because if you do hide value, then this will happen. Changing height doesn't preserve the aspect ratio, but width value does, so on images best to use to re them. I All right, something interesting has happened here. The image doesn't shrink anymore on a smaller screen, and it goes off the page. This is called overflow when elements go outside of their parent box. You'll come across with overflow objects often, especially on smaller screens. This overflowing can happen for many reasons, and it affects the entire page. For some reason, image refuses to shrink, so it creates an extra space on the entire page. So how come image doesn't shrink anymore? Because when we gave an image maximum width of 500 pixels we gave you permission to grow all the way to 500 pixels, it does, ignoring the dimensions of its parent element. This behavior is common with images. Some other elements, for example, a paragraph is not going to do this, but images they do because they have an exact width as part of the file. Or it has a width specified in the settings. By default, image will always try to grow to its original file size, and when we set max width to 500, it stops on 500, but doesn't shrink beyond that as long as it's allowed. To avoid this sort of behavior, Webflow has an added default value for every image that you drop in a max width of 100%. This means that the image will take up maximum of 100% of its parent element. For this reason, it's best to leave this value untouched. This thing always gave me a lot of confusion and clueless stairs on my screen. So now instead of styling the image itself, I prefer styling the parent of the image. This way, we can avoid a lot of strange behavior down the line. All right, so let's give a maximum width of 500 pixels to the parent element instead. Now, this behaves exactly as we want it to. It doesn't grow beyond 500 and it shrinks when it needs to. All right, we can conclude the landscape view here. We still have this horizontal overflow, but this is from other part of the page, and we will take care of it when we get to it. We do need to style the hamburger menu, but we'll do that in the end once we're done with all the views of the hero section. Up next, we'll do the mobile portrait view. Stick around. 84. Responsive: Hero Section - Mobile 2: Let's finish up with the portrait view. Almost everything is overflowing here, but we can fix all these with similar measure we used on previous views. First, let's make more space by shrinking padding even more to 30 pixels. Same on the nav bar. On an bar, the brand block has a default padding applied to it. Desktop and tablet doesn't have this, but mobiles do, so let's remove that padding. I actually forgot to notice this on the landscape view. It's there as well, so let's remove that from there. Now, we just need to shrink the size of the content. First, if you have a look at the left block, you'll see it has a minimum width of 300 pixels on it. So it refuses to shrink beyond that point. Let's remove that minimum and set it to auto. And let's decrease the size of the headline font. The thing with the headline is that on the smaller narrowest screen, we have to make it very small. Otherwise, we get one word per line, which is not idea. But if you check the super narrow screen is for old Android phones. The web usage of these screen sizes are very small. I've checked the statistics, and they don't even seem to make 1%. So most of the time, I don't go out of my way to make it perfect for the screen sizes and sacrifice more common screen sizes. But there is a way to make it close to perfect for this entire range. Instead of p cells, we can use responsive units for the font. In this case, VW for the viewport width. If we give the phone about 14 VW, that should shrink and grow nicely with screen widths. Now for the buttons. With buttons, we can change the display setting. So instead of them sitting next to each other, they can go on top of each other. Remember which display setting does that? Display block, which is going to stretch them edge to edge. Then remove that left margin and add a top margin to create a separation, and that's it. Our hero section is done. We will style the navigation bar in the next video. 85. Responsive: Nav Menu (Chat App): So far we are rocking our responsive versions. In this video, we're going to style the Nab bar menu button, or as school kids call it the hamburger menu, because the icon looks like a hamburger. Right now, it looks quite horrific. Not to worry, styling, this isn't a big deal. First, let's style the button itself, the menu icon that's inside can be changed. We're not stuck with it. If we want to get our own icon and add that, instead we can, we can just delete the icon and add an image element inside the menu button, which is a simple dive and upload your own icon in SpG or PNG format. Although there is one benefit of just keeping this default icon, because the color is editable from the phone settings and this makes it easier to change colors. We could also build our own menu icon from dive blocks. Sometimes I do this if I'm building a super snazzy animation for my client. Almost anything is possible in Webflow. For now, let's stick with the default icon first. The color, we'll need this in white. We can change the phone color to white. And that's going to do the job when styling this element. Stick to styling the menu button element instead of the icon. Next, let's increase the size. It's way too tiny. We can do this again from the phone settings, and 30 pixels should be good. Let's shrink the padding. A little padding is what controls how much of this is clickable and visible on the drop down. Lastly, let's align it with the logo. We want it to be centered, not floating in the air like it is now. Can we center it? We could go on and change the Nab bar display to flex box and do all of that, but a simpler option is to just add a top margin on the button and then pull it down. We got a size, this by, you can see it better in portrait view. And 27 or something like that seems like a good choice. We don't need to add a hover animation here, because it displays only on mobiles where we don't need to use a mouse, hover is pointless. Now let's style the inside of the menu. Styling blindly isn't nice, so we can open the menu and style it while open. We can do that from settings. Just select any knob bar element and go to Settings, and then click Show next to the menu option. This will keep the menu open until we style it. There are two other menu type options, but I'm not a big fan of those. I like this default drop down version. It's easier to work with and needs less styling. Now let's understand the structure of the whole menu. This knob menu block is exactly the same block that holds all our links in the desktop view. On desktop it doesn't have any background and is arranged horizontally. But if we make any changes to it on desktop, those changes will be carried down on the mobile view to same goes for any layout changes. If one day you see mobile links arrange o lay check if you've made any changes to the desktop version. Inside this nav menu block, we have all the links including the button to start the whole menu. First we're going to start the nav menu, and then we will style the links inside. Let's give this a different background color. Our black color from the design looks pretty good. Let's add the same padding on the sides like our hero section. That way will be consistent with our grid right now. The links are noted inside a little because they have their own padding which we are going to remove once we style the links. Let's also add top and bottom padding, but make it 30 pixels instead of 60. Right now we have styles that are being inherited from the desktop, like the underline on the hover and paddings. Let's fix that padding first. We don't need side paddings. Let's choose an equal top and bottom to maintain the nice separation between the links. 20 pixels look good. We don't need a hover effect because it's for mobile devices. How do we remove that from the hover state, which we can find here under States, click X under the border dial to disable the button border. When you test this, you'll see that border still appears. That's because we have this border enabled, not just on harbor, but also on a regular state. We need to remove it from a regular state as well to avoid this funny behavior there. Now we've got no harbor. Now the button first, let's get rid of the left margin. Next, let's change display to inline block. Right now it's set to block, That's why it's stretching like that. For some reason the button aligns in the middle. That means some property on the parent element is doing this. There are two properties that could align it to the center. First, the flex box lay out but our N menu isn't flex box. That's not it. Second is a regular text alignment that would make sense because inline block elements can be aligned using text alignment. But if we check the text alignment of the nav menu, it's set to left. This is deceptive because in reality it's not set to left. If you change the property to something else and then put it back to the left alignment, this time it will do what it says. This looks like an issue from Webflow. I might be wrong, but it looks like there is a default central alignment on the nav menu block. Webflow for some reason doesn't reflect this in the styles. Whenever you come across with something like this, just follow your logic. And if what you see doesn't make sense, then play with the styles. And sometimes you'll notice that they're just pretending. One thing to note, you need to apply the alignment to the parent nav menu, not to the button itself. Nothing will happen if you apply it to the button. All right, let's decrease the margin of this button to match the rest. The spacing we use between links is 20 pixels top plus 20 Bottom, total of 40. Let's total this 240 here. 20 from the last link and 20 for the top margin. Same for the bottom margin. The real space on the top is 30 pixels from the menu padding and 20 pixels from the padding. To match this 50 pixel total. Let's add bottom 20 on the button there. That's looking good. We can keep the hover effect here. We don't need it, but neither is doing any harm. And sometimes on buttons, it's quite nice when you press it and it changes the state. Finally, let's add the same background color on the hamburger. Now for this, it's important that we add that background color on the open state. Because if we add a background on a generic state, then we'll get the background when menu is even closed. Changing styles for the open state is like changing styles for the hover state, it has to show this green label. But the open state is not listed in the state's dropdown. Instead, open state needs to be enabled from the settings by opening our menu. Keep in mind that show height switcher doesn't instantly update the open state batch. You need to click on the menu button again and then the state will refresh. Just opening the menu isn't enough. Make sure this green label is there. You might have the navigation menu open, but this open state label doesn't show up, which means whatever you're going to add it, it's not going to add it on the open state. Now you can see the open label appears. This means edits that we make now will be reflected only on the open state. Now we can change the background color and also less round the top corner so it looks more polished. But instead of rounding all four corners, we're just going to round the top two and have the bottom two flat. This way they will connect with the menu. To do so we're going to need to select individual corners option inside the borders. And then select the top two. And then put something like six pixel. Let's test our results in the preview there. It's all looking great. It's also looking great on the portrait view. We don't need to change anything except for one small detail. On portrait, we have different page padding. On landscape we have 60, but on portrait we use 30. We don't even need to open the menu for this. Just select the nav menu from the Navigator and change padding 60-30 And done so, we have successfully styled the hamburger menu for mobile devices. We changed the color and size of the icon using simply the font styles. We've played with paddings and margins of the menu button to align it nicely in the nav bar. Then from the settings, we opened the menu and styled the menu item, gave it the background we wanted, and adjusted padding. We've made small changes to the nab links and the nav button as well, removed the hover from the links and tweak the paddings. And we've learned how to change the style of the menu only when it's open. Hero section is all done here for all the device views. In the next video, we'll continue with the rest of the page. 86. Responsive: Overflow: Now we're going to move down and optimize the next section of this page. And while we do that, we're going to learn a new concept called overflow. This section looks pretty good on tablet and doesn't need much editing. Only one thing I'm going to change here is the top and bottom patting of the section. As I mentioned before, we need a bit more tighter spacing on smaller devices. So 60 pixels should be good landscape, we have an overflow. When you get the overflow on the page, find the element that is going beyond its parent margins. That's going to be the cause of the issue. Here, It's obvious that the paragraph is causing this because it's outside of the boundaries of the container and even section. The reason it's not shrinking is because it has a fixed width. We made a mistake on the desktop, and instead of setting responsive value like maximum width, we gave it a fixed width. Now, because this is not an optimal setting neither on the desktop, let's just style this on the desktop version and let the styles then cascade all the way down. Before we move on, let's actually understand what is overflow? Is it a bug or is it a feature? Actually, overflow is a very handy feature. It has its own dedicated setting in the styles. Let me demonstrate how this works. We have a dip block here. I've added to this dip, exact width and height, It's 900 pixels by 300 pixels. If we put more content into this dip block, the content will overflow. Why? Because it has a defined height, 300, it's not going to grow beyond that size. If we remove that height value, you'll see the box will grow with a content. But sometimes that's not what we want. We want to keep the box at exact dimensions. If you check the overflow settings of this block, you'll see that it's set to visible. This means that overflowing content will still be shown. If we set it to hidden, the content will be clipped and it's not going to show no matter what we do, even if we try to scroll inside it. But for such cases, we have another option to make the content inside scroll. But this option isn't very good because it always shows a horizontal and vertical scroll bar, even if there is not enough content to scroll. For this, we have a better option, the last auto this display scroll bar, only if there is something to scroll. Horizontal bar is gone and if there is content overflowing vertically, then it will show the scroll bar. This is always a better option if you're creating a scroll level content just to note on your computer, you may or may not see this difference. This depends on the settings you have chosen inside your operating system, inside Mac or Windows. Another thing to note, the overflow settings are set on the parent element, not on the children. In this case, we set it on this white block. If we set it on the paragraph, that's not going to do anything besides scrolling content. Another common use for overflow setting is when we want to clip content that's usually done with images. We never want to clip text. Probably example if we have a section with an image and we want to clip that excess of that image, we can set the overflow hidden on the parent element and that's going to clip the image. All right, let's finish up our mobile views. We still have this gap on the page, but that's caused by some other element on a different section. We'll take care of it once we get there. Now let's do something about this very narrow look on Iro section. We have changed the padding to 30 pixels, but we never did it for this section. Let's do that. Let's decrease the vertical padding as well to be more economical And spacing. I'm actually going to decrease this on landscape as well because vertical space is even more important on the landscape. Reset the value on portrait. If you have changed them at any point, it's better to inherit values than to repeat the styles because it just adds extra code which we don't need. Finally, let's do something about the headlines too big for the mobile. Now remember the heading isn't a class. We style the T. This is how we're going to style this. Select all H one headings from the selector drop down and then change the styles that will change all H one headings for mobile portraits, but won't affect other devices. All 35 pixels works quite well. Finally, what to do with that image? It's too small to be anything. There is one thing we can do. We can have image co off the site and clip the overflow using what we just learned. First, we have to increase the size of the image when it comes to changing image sizes in responsive views. Never use these settings. This changes the HTML settings of the image and that's going to change the size everywhere on all devices. Also drag the image to resize, but don't use that either. It changes that same width that's inside the settings. What we want to change instead is the CSS style of the image, because CSS style gives us flexibility to have different sizes on different devices. To do that, select the image, you see this max width of 100% that tells the image to do not grow bigger than its parent container. That's why it's shrinking. Since this is a rare scenario where we want the image to actually grow beyond the container and even beyond the page, we're going to addit that exact setting and set it to something like 170% Now it goes off the page and sits bigger. Now we can see a bit more detail of the image, but we have image overflowing like this. What do we do? We need to set overflow hidden on the parent element to clip the image. But we can't set that on the direct parent, which is the container. Because container doesn't go all the way to the edge, the section does, we need to put that overflow star on the section. But let's add the combo class to it so it doesn't affect all the sections. There we go. Now the image is clipping right on the edge of the section. We've learned important concept of overflow and how to use it for our benefit. Overflow Visible is a default setting. It will show any content that goes outside the borders of the parent element. Overflow hidden is going to clip the content just like we did here. An overflow scroll and auto will let the content scroll inside the container. But the scroll option will display a persistent scroll bar even when there is nothing to scroll. 87. Responsive: CTA Section (Chat App): Cult action section doesn't look bad right off the bat. We can make a couple of tweaks to increase the size of the image a little. First, I think the headline is a little too big. It wasn't an issue on the above section where there was more space and smaller tags, but here it gets hard to fit more than one word per line. This is a good rule of thumb to use. If you can fit at least two words per line, then the phone size might be too big. If we are doing a full website, we would hit more limitations of this headline size. I'd rather nip it in a butt. Remember, this headline isn't a class. It's a default H one tag, so that's what we're going to style. By default, the tag is not selected. We have to do that each time we are styling. I'm just going to go with the 35 Pixel phone size that we used on the mobile screen and just make that as a default H one size for all responsive screens from table to mobile. However, the headline still ends up wrapped in exactly the same way on three lines. The thing is, as we shrink the phone size, the image pushes the content block and shrinks the space that is available for the headline. This sort of kills our effort to fit the headline on two lines. So I'm going to give the left block a minimum width. Three 40 seems good. Let's check the fluidity. Nice. Moving on. Here we're going to do what we did with a hero section. Change the direction of the flex box to vertical and the align to the left. Don't forget to create a new combo class first, or it's going to alter all flax boxes across the page. I'm regretting the use of the shared class for all these flexbox Should have styled them individually. Well, that's how you learn. The content block didn't align because it has a margin set on the left. Let's remove that margin. Let's see, the image is way too big on wider version. Let's say the maximum width on the image, but better yet on the left block itself. As I mentioned previously, anytime I can, I try to style the container of the image rather than the image itself, except for the case in the previous video where we directly had to style the image. Don't worry, you don't need to memorize every single rule and recommendation I give you. You learn by making these mistakes and adopting your own rules and habits, and Webflow is a great help with this learning procedure. You can see everything visually and you can see the styles that are enabled and that might be causing the issue without needing to read the lines of code. Even for those people who want to learn how to code, I would still recommend learning with Webflow first because it just is such an incredible help and guide. And everything in Webflow works precisely in the same way as the regular code does. Anyway, back to our section, 580 pixel max width is looking fine here. I don't like the orphan board in the headline, so let's rink the right block, so the word small jumps to the next line. Also, let's rink that spacing between buttons and the stars. It's part of that gray line. Let's increase spacing around the content a bit. It's too close to the image and to the footer. Finally, the portrait version. Okay. Here, we need to remove the minimum width which is set on the right block. Good. The headline tax is pretty big for the portrait. So let's shrink that too. 27 pixels look right. On the stars, let's arrange the layout so it's vertical instead of horizontal. This is a flexbox layout, so we can switch that with one click. Make sure you have a cobo class applied. That's it all looking snazzy. We just got footer left and we are done. 88. Responsive: Footer (Chat App): So what have we got here? This is a flex box that has columns inside. The columns have this percentage width applied to them. Let's keep mobile views in mind when creating a solution here. We will need some sort of vertical alignment. We could go for vertical option from the flexbox, but that sets everything vertical even when there is space on the sides. A better option is to use a wrap feature. We've discussed this option in Flexbox video, but let me refresh your memory. By default, Flexbox tries to fit all children in one single line, be it horizontal line or vertical line. But when we enable wrap option, then children will jump to the next line or wrap to the next line one by one as needed. Let's change the justified settings to the left. There is this empty column, which was nice on the desktop, but not needed for tablet and mobile views. We'd like columns to align to the left without extra spacing. We can remove this empty column because it's going to remove from the desktop as well. But what we can do is hide using styles. Let's give it a combo class so we don't mess with other columns, and then from display options, select hide. The display non property hides the element and frees up the space it was occupying. What else? The columns have the left and right margins, so when they jump to the next line, it's going to create this extra space. Let's remove that left margin and only use right. But make sure to edit a column that has only a global class. The first and last column have a combo class applied to them. We used it to fix some margins on the desktop. That's pretty good. And let's add a bottom margin so the columns on the second line don't jam into the first line. On smaller sizes, you'll see that they don't really wrap properly, and instead the columns squeeze themselves very tightly. That's because they have the percentage with applied to them, which is fine on the desktop, but becomes unnecessary in this sort of layout. So let's get rid of it. Now that column with is automatic, it grows with the content inside, and that makes the first column too wide. We got to give it a maximum width so it doesn't grow this much. And that's better. And the whole thing wraps nicely across all views. One last thing we tweak is the spacing between the copyright and the links. I think 60 pixels will be much better. Let's have the final look at the whole thing. And that concludes our entire page development. In the next section, we're going to go over finalizing our page, things like publishing, SEO, and so on. This doesn't mean that we're completely done with Webflow designer and the development process. There is still more to learn, things like CMS and forms and interactions and animations that can make any website look so amazing and so fresh and so modern and so professional looking. But all of those concepts we're going to learn in other parts of this course. One part, we're going to learn them inside this big client project that we're going to do from start to finish. So you get this hands on experience on how to start everything with the client with things like project brief and wireframing and designs and then moving to Webflow and developing CMS and blog inside Webflow, and then interactions and then finally delivering everything, publishing with a custom domain, and all that stuff. And also some parts I'm going to put inside the advanced part of this course because you don't need everything. You don't need to learn everything in one single go. So I put everything that is not essential skill and essential knowledge for you to start freelancing, inside the advanced part. So once you reach that final part of this course, which is advanced, you already know everything that is essential, and that can get you started with freelancing. And while you're freelancing while you're looking for jobs, you can also continue with advanced parts and hone your skills and get better 89. Going Live: SEO (Chat App): Our web page design and build is fully finished. Now we have last bits to finish up and then publish. First we need to set the SEO settings. Seo stands for Search Engine Optimization and its set of practices on how to make a page more appealing to search engines like Google, Bing, and Go, especially the D.com. Seo is a whole separate field and we're not going to dive into the details in this course. However, there are some things that we absolutely have to take care of for stars. These are title and meta description of the page. These are what usually show up when your page appears on Google. This is title and this is meta description. If you don't set this up, Google will fetch a random text from your page. Well, not entirely random. It has its own rules. But we want to be in control of this and choose what exactly we'd like to display. We can change under page settings, which we can find inside pages panel. Go to the page you want to edit, in this case the home page. All other pages we have for our side will appear here. And each of these pages have their own individual settings, which can be accessed from this gear icon. Let me collapse these settings so we can go through them. Under general or group, we just have a page name. This page name is what shows up in Webflow. It's an internal name, so you can name anything you'd like here. Under access control, we can manage who can enter this page and who cannot. This is useful when you need to password protect your page. For example, if it's an internal company page with sensitive data and only certain people have access to it. Or if you're creating a membership site and only specific logged in users can access this page. Under SEO settings, we have two values, title tag and meta description. If we leave this title blank, then Webflow will use the page name by default. As you type in these fields, you'll see Search Result Preview, which is a good way to nail down that awesome title and description. There are many different ways to name your pages. On home pages, it's common practice to put the name of your company or a product first, then followed by some tag line. For example, chat app, simple team chat application. Inside the description field, we're going to describe the page. Since this is a home page, we'll describe the product itself. Google and other search engines will truncate description beyond certain character count, usually up to 155 characters. Open graph settings are similar to SEO, but this is information that shows up when sharing content on social networks like Facebook, Twitter, Linkedin, and Pinterest. For example, when you share a link to a car you just bought, Facebook can pull title description and even a photo from the open graph settings of that page. If these settings are empty, then Facebook will pull random information or sometimes no information at all. We can put custom title and description, but we can also check these options to make them same as SEO as for the open graph image that we need to insert a link to the image. Which means we have to upload the image somewhere and then get the link. We can upload image right on Webflow in our assets and then get the URL from there. Or just use already uploaded image and get the link for it. We can get the link under this gear icon. This is a URL of this image which is uploaded on webflow servers. Copy this URL and paste it in the image field. Now you can see a preview of how it might look like when the link to this page is shared on social networks. Two other settings are not related to SCO, the site search settings, which might seem like they are SCO and Google search related, but they're not. It's actually about search functionality within our website, you see we're able to add search component on our website where users can search the contents of our website. This is useful if we have content based website like blog e commerce, something where search makes sense. On small websites like a company website or a portfolio site, it's not really needed. The last option is custom code. It's not going to show anything right now because you'll need to add a hosting plan to unlock this future. It looks something like this. Custom code gives us an ability to add our own external code to the page. Usually it's for third party applications that we want to connect to our web page or some sort of Javascript plugins or anything that is usually external things like trackers, analytics, and all those stuff. Anything that is outside of webflow, usually, and we will be able to just insert the custom code here. So to recap, each page on our site has SEO and other settings. We use title and meta description to control how our page shows up in search results on sites like Google. In addition to this, we can set open graph settings, which is SEO, but social media networks like Facebook, Twitter, and so on. 90. Going Live: Publishing (Chat App): Let's finally publish our page. This is quite a simple test. Go to the Publish, and click Publish to selected Domains. Give it a moment. There. Our pixel perfect web page is live and operational like a char. All the responsive optimization that we have done can be tested by resizing and shrinking the browser window. The buttons and links aren't operational right now because we haven't linked them to anything. We're not going to do this on this practice project, but we will do it with this big client project that we're going to work on initially. Your website will be published on Webflow subdomain. In order to publish our website on a custom domain, we need to add a paid hosting plan. And then we're going to be able to publish our website on our own domain. Webflow hosting plans are very decently priced. This website would just need the basic plan. Cms based website is the one that has a blog or other dynamic content that needs to be managed through CMS, which is content management system. We'll be building a CMS based website in the upcoming project. I'm not going to demonstrate how to publish this to a custom domain for this project, but I will show it for the next one. On a free plan, we're able to change the subdomain of our website. Go to publishing and edit this field to whatever you like. As long as it's not taken, then click Save. As you can see from the published button, this is now your new URL. One last thing that we need to change is this little icon. This is called a Favicon. Right now it's showing a Web Flows default Favicu. But we can change this from project settings, There are two icons here. First is this Favicon that shows on a browser tab, and the second is web clip. Web clip is an icon that shows up on iphone when you save your website on a home screen. If you don't know what I'm talking about, Safari has this feature to bookmark a website, you can add it to a home screen, and it will be saved next to all of your apps, looking just like any other app. I never used this feature, But since we have an option, we should change this icon here. We'll need to create an icon in Figma, which is just a regular image file. And we need to create some icon out of our logo. Just add a new frame with the size of 256 by 256 painted blue and maybe give it rounded corners. Then copy the logo. Delete everything but the letter C, enlarge it exported in PNG and that's going to be our web clip. As for the Favican, we just need to scale this down to 32 by 32. Regular resizing isn't going to do the job. It's not going to scale both rectangle and the tax proportionally. Instead, we need to use the scale tool, which we can find under the move tool. Scale tool resizes grouped objects proportionally. If there are tax images rectangle, it's going to lock the proportions of all layers inside and then resize them altogether. It's a very handy little tool and export in PNG again. And then upload each one to their dedicated place. The dimensions of these icons have to be exactly those. 32 by 32.2 56 by 256. Webflow won't let you upload any other size. Now publish again to see the changes take effect. Just a little side node for Safari users. Safari doesn't update the Favicon right away. Even when you refresh it multiple times, it's going to keep the old fabric. It does this because it saves the Favicon in cache and pulls it from there, instead of reloading it and grabbing it from the source all the time. If you need to update the Favicon and see in Safari the latest version, what you need to do, you need to either clear the browsing history or empty cache. And you can do that from here. From history, clear history, or I'd like to use, if you have this developed, have then it's easier because it will just clear the cache instead of the browsing history which has some other stuff in there, empty cache. And now when you reload it should update. There you go to the latest Vavican. That's all our web page is live. It's looking great and it's sharp and it works well. It's fast and it's responsive and just amazing. Notice how fast and effortlessly the page loads. That's webflow is one of the amazing benefits because their servers are blazing fast and they're just very well organized and optimized for the pages and websites that are built in webflow. And we've also done a good job because we built it with a very nice clean code. And website is just working well and loads quite fast. So good job to us. Up next we're going to learn about webflows. Another feature called the editor, stick around. 91. Going Live: Editor: Have I ever mentioned how amazing webflow is? This is how amazing it is. Besides the designer, it has another view called the editor, which you can access from here. Editor is a place for clients and collaborators to edit the content of the website and they can do this right on the life side, literally. On the life side, no ugly content management and text editors, you can just click on their content and start editing. This is so incredibly useful for clients that I can't even put in words. Your clients aren't usually tech savvy and last thing they want to do is figure out how content management systems work. The last thing you want is your client e mailing you every time they need some small change in the headline to remove a coma or add a new ward to it. The requests will creep up on you after you have finalized and shipped your project to clients. Well, if you're getting paid hourly, that's fine, but if you're getting paid per project, then you're working for free. We cannot change any styles or layout from the editor that's inside the designer here. It's just content, text, images, or links. You can change an image just by clicking on it and uploading a different one. You can also change a link destination URL or the text. The changes won't be reflected on the life side until you click the published button. After that, all the changes will go live instantly. And it's that simple. Obviously, these changes will be reflected in the designer to which we can switch to from here in case we want to restrict access to some parts of the content from the editor. Inside the designer we can go to the elements setting panel and uncheck. Collaborators can edit this element. Now the headline won't be editable inside the editor. Inside the project settings, we can add extra collaborators. This is independent from the main account and it's going to give access to the content management of the site. This gives access to the editor to form submissions, page settings, creating new CMS items like blog posts and so on. That's the editor, quite simple yet powerful. There is nothing that we actually need to do about it. I just wanted to show you around because I don't usually work with an editor, because I work through the designer. But this is usually something that you sort of teach your clients and tell them, okay, so this is the option, this is how you do it, this is how you edit the pages and so on. Webflow actually has tutorials on the editor, so sometimes you can just send the video tutorial like that, or you can record your own video tutorial up to you. That concludes the third and big part of this course, which was about Webflow and development. In the next part, we're going to do a full client project. Stick around. 92. PART 4: CLIENT PROJECT FROM START TO FINISH: in this part of the course, we're going to design and build a full project like we were doing it for the client. I'll take you exactly through the same process that I go myself. We now have a new project. You'll practice exactly what's involved in the rial project and take each step from Project Brave tow, wire framing, gathering inspiration, design and then building and delivering the full enchilada to the client. We're going to use everything that we have learned so far. Plus, we're gonna learn much more concept that we haven't covered yet, especially in wet flow. For example, CMS, which is stands for content management system in its basically wept, flows powerhouse on how to make dynamic website and dynamic content. For example, blawg, where we can pull information from the database instead of just building a static page for every single article. We can just have the database with content inside this database like a headline, the sub her, the name off, the author and everything and then just design and build one template for the article page and then have the database pull the content for different pages as we as the poor page loads and as the user interacts with a Web site, the second big topic that we're going to cover his interactions. This is how you build interactive elements and objects inside workflow that can animate, move around, disappear things like pop art forms, drop Tom's animated buttons or scroll animations that something happens, hides, reveals or just changes form on a scroll and much mark. All right, so let's dive right in. 93. Good Design Process: Usually my website project starts by client emailing me a one paragraph of description of what they want. And usually it goes like, Oh, hey, Vacco. We would like website for our app on, but we don't have screens or content or anything else. Yet it's very difficult to create an entire website out off. No content, no project brief and no app screens or no brio, valuable information that I can use for the website that's realign. That's how things work usually, and you don't get a perfect project with all the content and photos and app screens or whatever ready for you to start designing. In the beginning, I didn't have ah, process on my plan was to just wing it and just get going with the project and see where it goes. This was a terrible idea for three reasons. First I would get stuck. I would be staring at the screen without having any idea what to do and what to design and thinking. I just had a creative block or something like that. But no wonder. How can you design something when there is nothing to be designed? The second problem was big for me cause I would spend a lot of time designing something and creating and at least getting to liking a page or maybe have a page. And I would send this result to my client to sort of agree on the creative direction and look and feel that I was going towards. And then often I would get a complete rejection and that there would be like, you know, no, we don't like this style. We want something more like this. This was very frustrating for me in the beginning, because I get a little kind of agitated Ted and I'll start telling myself All these guys don't know what they're talking about. They don't have a good design taste and just bullshitting myself. Just say Okay, fine. And just get back to work. And Crumpley Bork on a new look. The third problem was this. Start my work and get to some sort of final results with, you know, going through different iterations and finally agreeing on design. But often the dummy. The content was dummy content inside, so that tax was dummy content. No photos were sometimes really, because maybe I needed photo. So far, users for testimonials or reviews or photo self team members or something like that. And they're not to give my client toe homework, too, you know, provide me and write and gather all that content that I need it. But often client would come back with a different structure for their content. So, for example, if I designed a section with three columns, the client would come back with a copy for two or maybe five columns. But this sort of content is optimal. If we have three or four columns for two, it's just not very nice. And for five, it's just too much content to fit in one row. This was absolutely not my client's fault. It was mine because I'm gonna have a process. I didn't have a proper design or project process to go through now, which is winging it. But the moment I figured this one out and created a proper design process and in project process for me, things have changed dramatically. It's the project just moved smoother and nicer. Ah, faster, last situations to go through and this is funny. But designing actually became easier in the past. I was just trying to take the whole project in one go in, just like stuffing myself with a full frickin Brito in one go, and it was too much to handle. I was in guiding my clients through different steps that we had to go through in my plan was just, you know, going to the room, locked myself and then one week later emerged with this brilliantly well designed website and then just hope and pray that clients loved it. So here's a three step process that great designers go through before they even pain the first pixel. The first step is to define a project brief. It's a short description of goals and details of the project. The project Brave asks important questions like What is the goal of the website and who is it for? An answer to these questions will align both you and your client on the same page, making sure that everyone has had it towards the same direction. The second step is creating a mood board and getting your clients feedback on it. This is something we already know how to do, and we've done it to gather inspiration for ourselves. But if we share this boot bored with our clients than we can get more benefit from it By sharing a mood board with your client, you can nail down a taste and a look and feel off your project because there is many different styles that you can go with, right, you can go a bit more photography having for your website you can buy but go a bit more. Illustration heavy, a bit more colorful, less color for right. So there is many different avenues you can take with with your project and your designs. And often clients have very specific tastes. So you don't want to find out some information because they do have a hard time explaining themselves and they don't know you're the designer and you have access to all the inspiration in the world. You know, these websites like cripple our interests and lap I lend book and you go there and you find inspiration. You gather this and you work this so you have access to these sort of inspiration. But they don't that websites they don't see that might not be that much. They're busy with doing other things right, and by sharing this information to them, you can nail down and kind of meat on the same page off the look and feel, because if you don't that what you're doing is you have to go through reiterations until you get to their sort of taste and that just so much more work to do, right? Why would I go through different iterations to finally nail down the taste in Just general , look and feel off the site where we can just grab examples from other websites and other inspiration and show them OK, which one do you like this for this? The third step of this process is to create wire frames. Wire frames are sort of a rough sketch off the site. A skeleton. We don't worry about colorist or typography or any need a greedy of design. This is, for example, or wire frame off YouTube. It shows what goes where and what's the content. Very simple. Not much design going on that it looks like a child wrote, but wine framing has a huge benefit because you are able to discuss with your client. A very important part of that website wants the content because design always has to accommodate the content because design off our small to line paragraph is going to be very different from a design off a 5000 ward document, right? So you have to nail down the content. What sorts off photos for software does the buttons go and everything, And doing this during the design process going through the situations during the design process is just much more work and more wasteful because you have to worry about every single pixel on caller and shades off different colors and shadows and all that stuff, which is absolutely unimportant when discussing the content and when content changes and a structure changes, then you have to dump everything that you designed already waste your time and then start over from scratch. But during the wire framing, it's very simple because there's not much to design. You don't have to worry about making everything aligned or pixel perfect, right, and you don't get frustrated if Climb decides that they want to restructure the entire content off the page keeps everyone happy and on the same direction to the final goal. So the three stages of good design process our project brief would boarding and we're framing at the end of each stage. You have to share the results with your client and agree with them and sign that off, cause if you don't do that, then sort of bits the purpose you need to get the feedback off the client to make sure that you're not going to a wrong direction when you keep your clients in the loo. First of all, they feel like they're in control of the project and they love that idea. They want to know how things are going. Second always shows you you're you're a professional, that you have a project process going on, and they know they understand that they are. They are in the great hats. And once you finalize all those three steps, that's when you move to the design process and design results that you produce are going to be much more appreciated and like by our clients because they were part off the process. And this is exactly what we're going to do in the upcoming lessons. Stick around 94. Client Project: Project brief: Project should start with a project brief, but it often doesn't. A project brief or a design brief is sort of a plan of the project. It's sort of a guide and agreement between two parties that you're going to move into certain direction and you're going to get the certain result. There are different ways to go through and create project briefs, but I have sort of my own way because I don't find an official and kind of industry adopted ways to be very useful because they are very big, too much information in it and very not very sort of relevant to everyday businesses and everyday real life scenarios like freelancing on up work and sending some information to somebody across the continent and not very useful for small projects. Maybe useful for ginormous corporations, and that's how they define the project brief because it has to go through committees and board of directors on that sort of stuff. But when I'm working mainly with small startups and interpreneurs and smaller companies, They don't need any of that. Their primary concern is time and money and to get to that project and get through it as fast as possible. So for me, project brief is basically answers to certain questions that I need to know. And these are questions that I ask on the kickoff meeting, so I have an initial meeting with my clients, and we discuss something there, and I have some questions prepared. For them, I ask them these questions, and they give me answers, and then at the end of the meeting, I sort of draw a project brief out of this meeting, basically answering the same questions on the paper, send it to them so they can agree that I didn't misunderstand something, or maybe we had a miscommunication. The two most important questions that I ask is, what's the goal of the website, and who is it for? You can't really design a solution to a problem before you know what's the problem it's trying to solve. I need to know target audience and who's going to be using this website. A website for a young crowd in their 20s is going to look a little different than a website for corporate managers in their 40s and 50s. For our project, I already have prepared a design brief, and it's a template that I created from my own design brief that I use, and you can use it for your projects. Take it and save it. Here's what you can do with it. When you get to a meeting, a chat or e mail conversation with your client or an employer, keep this document by your side and ask these questions to them. You will later refine these questions and add more or remove some to make it work for you. Once you're done with a meeting, fill this out, you can do this during the meeting or later no difference. Then export it as PDF. And send it to your client to double check if they agree. This will do two things. First, this is going to be a big help actually for your client, because what often happens is that my clients don't know what they want. And this is something that you wouldn't expect, but they do know that they want a website. But often they don't know why exactly they want the website, what sort of website they want, and they have many different ideas, and this is very common with terpreners, because a lot of terpreners, they are in their head, and there's just million different ideas just buzzing in their head, and they're excited about everything. And they have trouble to structure their idea and structure their mind in a proper way. By going through these questions and answers and then reading them this later in the design brief format, you give them the ability to create clarity in their had. So both of you are the same page. The second thing that's going to happen is that you will appear more professional. This shows that you know what you're doing and I have a specific system in place. Because of this, clients will trust you and your designs more. They will have better experience at the end of the day because they will get what they actually wanted because they trust your designs now. And they will be happier with the results, meaning they will share it with their friends who are often interprenurs themselves, bringing you more clients and more work. All right, so I have already filled out this brief. Let's imagine that we already had a meeting with our client, and we have agreed on this brief. Our client is a start up that is building a team collaboration platform. The goal of the side is to sign up users for early access. This means the platform isn't ready yet, but the company wants to market already and generate interest. This is a common practice with start ups to have a website during their development process or whenever they are building their product, because that way they can generate some interest because they go around looking for investors or try to get PR and media exposure, so they always need a website often before they even have a product. The target audience of this website is other start ups and teams that have employees working from different locations. Client wants a modern website using photography instead of illustrations and with a clean, minimalistic look. The website is going to have a blog. This means we're going to build a CMS, and it's going to need to collect form submissions. That's it. That's how simple the project brief should be. It's called brief, isn't it, so make it short and sweet. 95. Client Project: Moodboard: Board is something I always did, but I wouldn't share it with a client. I kept it as semi internal design process. In the beginning, I thought of design as an artistic process where you lock yourself in the room and week later come up with amazing designs that completely wows your clients. But that's far from reality. Often your clients have certain websites and style in their mind. And if you just go without agreeing on this common ground and come up with something out of nowhere, chances are you're going to miss their expectations. And you might come up with something better. But if you're missing their expectations, then you are disappointing them. If you agree on a moodboard, then the designs that you create, chances are are going to look like what your clients expected. Keeping them happy and coming for more. You've already practiced creating a moodboard, so we're going to skip that part where you gather inspiration. Instead, we'll use a moodboard that I've already created for the team collaboration product. I've just removed and added a couple more shots. In the Figma file, you'll find this moodboard. If you want a little more challenge, you can use the moodboard that you have created in the same assignment, although I'd recommend using this one and following along. Let's imagine that we have already agreed this moodboard with the client. Let's take a look at these examples and we can start noticing sections and elements that we like. This, we're going to use as a hero section. I like how the green contrasts with the image in the background. I also like this card layouts, similar to this. From here, I really like this section, similar to what we've already done in the remix exercise. I also quite like this testimonial cards, and I love that blue color, so maybe we'll use that one. It's a nice, vibrant blue and looks great on a picture. Plus, it really fits the team collaboration theme. Companies, especially bigger ones like Blue. Blue is an excellent color because it demonstrates cleanness, transparency, and proper conduct. But of course, they have to be good blues because there are some that suck. Here, I like the split sections, and also I like how interface elements are incorporated with the photography brings more life to the photos. I've also added this footer shot. I like this dark style, so I'm going to do a dark footer like this. Sharing a Moodboard, using Figma is very easy. Figma is a great tool for collaborating, unlike other tools like sketch or photoshop who require the use of third party apps. Figma collaboration is integrated inside. Here is how. On top right corner, you have the share button. Make sure to enable public link access, otherwise they won't be able to see the file, and then click copying. Then just share this file with your clients. They won't be able to edit or do anything with it except commenting. But this is a good way to share the moodboard that you wanted to show to them. You can ask them to comment on certain things that they like and certain things they don't. Here's a little trick. Open a browser incognito window and paste your links there, you'll be able to make sure they can access the file and see what they can do with it. I hate it when I share something with someone and they tell me they can't see it. That's just bad user experience and makes me feel ashamed when that happens. As web designers, good user experience has to become the way of our lives. We should try our best to make sure that clients, teammates, and obviously users have a good experience with everything that we share or create. Because if not asked then who? By checking it inside the incognito browser, you are able to see it exactly the way they would see it. Because if you just paste it inside your regular browser where you are logged in inside Figma, then you're just seeing your own personal view. Okay, they can see the board, and from this menu, they can access other pages on the file. However, they cannot comment unless they sign in or sign up. And if they are signed in, they will get this sort of view. This looks just like a regular view. They can see all the pages and layers on the left. The commenting feature is very handy when you work with projects. To comment, we have to click on this ad show comment option. You'll see the mouse cursor changes to this little balloon. We can drop a comment anywhere on a page. So when you share a moodboard with your clients, instruct them on how to make comments and get their feedback on the examples. They can tell you what stars they like. Commenting on specific parts instead of the entire screenshots. Inside your view, you'll see these comments reflect instantly. Just enable the comment option, they will even show on the right side. There's no assignment following this video since you'll be using the same exact moodboard. You can find this in the same file where the project brief was. It's just on a different page. Up next, we're going to create wire frames. Stick around. 96. Why Wireframing?: before I had my design process may have down. I often struggled with coming up with designs. The problem was, I didn't have content to design. You can't really choose a correct typeface. If you don't know the tax that it's going to go with, you can design a benefit section. If you don't know what the benefits are, you can choose the right photo. If you don't know what's the tax next to it. You can design a team page if you don't know how many team members there are. A team page with 55 team members is going to look very different from a page that has only three team members with really long biography. It's at one point I started working with this amazing agency from Australia. Unlike me, they had a proper design process. The first app was to write down the content off a page before doing any designs. Working with them got me into the habit of writing the content first, and I realized how much I was torturing myself by trying to design a blank piece of page. Once you have the content, design decisions become obvious and they come to you easily. Now. Getting content from the client is not very straightforward. Most of the time, they don't have any experience on writing the copy off the page right there. Not copywriters. They're not designers. They didn't have much experience with this, so they don't know how to properly. And what's the best way to structure a page or a website, and they need our help for this. Many designers don't do this, and they pass the hot potato to the client, and obviously the client will come. Who is going to come back with a content that is not very optimal for a page, and final result off the design is not going to be as good, meaning. The client is not going to get the best results, and they're not going to return for more business to the designer. Lose lose situation for both of the sides. So am I suggesting that we should write content for our clients? Well, sort of. But not really. Here's where wire frames come in. Generating content for me is part of the wire framing stage. Here's what I do is I start creating wire frames. I start thinking about the structure of the content and trying to uproot the page in the best way possible, based on the goal off that particular page beat home page or some other lending page or whatever it is now is that put text blocks on the page, I start filling those tax blocks out with example text with something that I think might be useful for this particular section. I'm not really a cooperator, and English is not even my first language, but I still write down content as much as possible. If you're English isn't very good, don't worry about that. That's not a problem because you weren't hard for your English skills. You're hired for design. Just be up front with your client and explain them. Whatever you're putting, there is your example and suggestions to help them, and they should write their own content. And what it can also do is you don't have to write that copy. You can borrow and copy them from other websites. So during your inspiration phase, you probably went through different websites and found some examples that are from a similar start ups or similar businesses, right so you can grab the tax from there and copy and paste them that. But always make sure to explain that you're not writing content for them so that you're not judging you for that content in that you gather this example from other sites and maybe even competitors. And if you are a little into right and consider taking a copyright in course, so you can add that to your services. Clients will love you for taking that part off their hands. You'll make more money, win win. And after I'm done with wire framing, I shared with my client and ask them to rewrite the content and remove anything if they want to and filled it out in their own wards. Having a layout already with pre field content makes it easier for them. Teoh, right that copy. Because otherwise then it's very difficult for him to understand what I meant there and what would be the purpose off destruction, maybe, and this columns and what they should write in that. But if I give them examples, then they get the idea and they can easily come out with something off their own. I avoid using Lauren Gibson and dummy text like that as much as possible But sometimes we have to, and we cannot avoid it, because sometimes I have to create a page for or a website for a complicated financial services that I have no idea how to describe. So in that case is I'm going to use dummy tax or maybe somebody's biographies or testimonials or something like that. There is no point off me filling out with anything and wasting my time on its right. We'll use dummy text. Another big reason why to use wire frame is because of provisions, because revisions are part of any design process. And if the revisions are happening right in the during the design face, then you're gonna take much more time, because then you're thinking about colors and making everything pixel perfect and wasting a lot of time on something that you sort of already designed and sort of attached your ah, ego to it. Because thesis what often happens with designers because whatever work that we produce, we kind of feel attached to that work. But when you're doing wire frames, you're not attached to it. They're just, you know, ugly skeleton looking doodles, and we can change it battery easily. Revisions are easier is there and you know nobody's feelings get hurt. This is a wire frame off one of my client projects. As you can see, it's devoid of any design collars and is very rough. Has no images or icons. I was making these website for a scooter sharing app. Let's go through this quickly so you can understand why I've done. And what was my thought process. The navigation bar is pretty simple. I didn't even put a low going there. Just a taxing. It's a logo. Instead of a hero image, there is an image placeholder, and that's all. At that stage. I haven't decided what would be the hero, and it's not relevant to this either. Although I have decided on the layout, I wanted to have a hero on the right and content on the left. If I wanted a hero's a background that I would put it as a background stretching edge to hatch on the next section, I chose to have three column content to describe how the product works in three steps not much designed, but layout is clear, and I also made the decision that how it works was an important section to have right after the hero. I have filled the content out myself, sometimes reusing tax from the competitors sides. An important part is to give example tax to the client, so they click and start writing right away without much research up. Next up created a section with a small demonstration off the APP with some benefit. But let's on the side on this section of actually already had a pretty good idea of how would design the section. I wanted to showcase the app and show them the app in action. So I plan to have a video gift animation off the app being used a little more showcasing and benefits of the product, like free parking insurance and so on. Then I had a pricing and testimonial sections pretty straightforward, and finally we have call to Action Section, and the food or closing pages, especially home pages with cold to action section, is a good idea. You want to prompt users to do something after they are done getting to know off a product or service you don't want to let them hanging. Their clue is not knowing what to do next. You might lose them so After I was done with their fire frames, I shared it with a client and gave them explanation off each section and the thought process behind my decisions. And here's how the final design ended up looking. You can see how the layout and content is the same, but it's sort of like it has been colored in. So those are the reasons behind using wire frames in your design process. Use them before you get to design Thank me later. 97. Figma styles: We create wireframes, I'm going to teach you two features of Figma that we haven't covered yet. We're going to need them to create our wireframes. These are styles and components. In this video, we're going to cover styles. You know how in WPL, we can style classes and tags. We can do something similar in Figma as well. For example, let's take a heading and style it. Under these dots, we have option for textiles. If we click on that plus icon, this will create a new textile from the currently selected text. We can name it H one, similar to what we do in web flow when styling O H one texts. Now we can take any other text and apply H one style to it. In the property disanel, you'll see that a lot of te editing options are disabled, like the phone size, line height, and others are gone. But we still have things like fill color and text alignment. They don't become part of the textile, so they can always be edited. It's not going to affect the textile itself. It will be applied only to that instance. If this was Webflow, we wouldn't be able to do this. Everything would be editable and reflected on all instances with the same tag or class. Inside the interface designers like Figma, this behavior makes more sense. To edit a style, click on it and then go to the edit style. We have an option to edit the style from here. You can change whatever you like and you will see changes to the style, instantly reflect on all of the instances. This doesn't seem like much, but when you have several pages with multiple headlines on each page, then you'll realize how big this is. We also have an option to detach the style. That's going to let you edit all the text properties and any future changes to the original textile. It's not going to affect the second headline because it's now detached from that textile. If you want to delete the style, this is not very evident, but right click on it and you'll get a delete option. Textiles are not the only thing we have in FICma. Almost every other property in the panel can have these global styles. Fill, stroke, effects, even the grid. The second most useful is always the color styles. From the same place, you can add a new color style. Just like textiles, it can be applied to all other elements that have color property. It doesn't matter if it's text or rectangle. Just like textiles, color styles are big. I often end up changing color several times while designing a website. I'm very picky with colors and can change my mind easily. God bless the color styles. That's the styles in Figma. Applies to nearly everything, f, co, text, layout, g. Up next, we're going to cover components. Stick around. 98. Figma components: L et's create a button. Now, if we select this button and click this component on the toolbar, this will turn this button into a component. Which we can reuse across our file and drag them anytime from the assets tab. Components in Figma are the group of elements. With styles, we create this global connection for one particular style. But with components, we can create a global connection for several styles and for every single object inside that component. The original button is called the master component, and the one we just dragged is called the instance. The changes that we make to the master will be reflected on every single instance. But each instance individually can override the styles for themselves. However, the changes are not going to be reflected back on the master or any other instance. You know combo classes in weblo. Just like combo classes, new changes to the master will affect only the styles that have not been overridden. The first instance did change the color to the green just like the master did, but the other two below didn't. Why? Because on the two below, we have overridden the background fill of the button, but on the first one, we didn't touch it. It still inherits from the master component until we override it. In exactly like combo classes in we low, other styles that we didn't touch and didn't override will still be inherited from the master. For example, if we round the corners of the button. One big difference between classes in waffle and components in Figma is that classes don't have other elements inside. For example, if you create a class for a hero section and you put headlines, buttons, and images inside, those elements are not part of the class. But in Figma components, they are. If I delete an object from the master component, it will be deleted from everywhere. If I had a new object inside the master, that will reflect every other instance. There are things you cannot override on the instance. For example, whatever is the component made of. You can remove or add new layers inside the instance. I can drag this rectangle inside the instance, that doesn't let me. Either I can remove an existing layer from the component. When I press delete on any of the ingredients, it does disappear, but it actually is only hidden, and you can see that in the layers panel. The layer is still there, it's just hidden. If I want, I can show it from here. Another thing we cannot override is structural changes like sizes or the position of the layers inside the component. As you can see, when I select the rectangle, there are no resizing handles. I can't change that. However, we are able to change the size of the entire component. The resizing of the rectangle is not possible, but resizing of the whole component, we can do that. If I change the size of the master component, it's not going to cascade down to the blue button because it's overriding it. But that's only for the full component size. If I change the size of the rectangle itself, that blue button is now helpless and we have to obey. Neither I can change the position of the text inside the instance. There's no way for me to move it. Now, as for things that we can override, we can override the styles of each element, whatever they may be. We can override the size of the entire component, like I mentioned previously, and we can override the content. Again, if we override it, then whatever changes we make to the master component, it's not going to be reflected. As you can see, the other two buttons instantly updated their text, but the blue button didn't. We're also able to detach instances from their component. You can do that from here. Once detached, it stops being a component and they are completely free and independent layers. Another thing we can do with instances is to reset the changes we've made to them. This option here will reset every single change we've made to the instance and inherit everything from the master. We also have an option to reset only particular properties. If we select the rectangle and go to the reset option again, the dropdown highlights all the styles that have been overridden and we can reset them independently. For example, we can reset on the background fill, or we can reset all the override on the rectangle without touching any changes that have been made to the text inside the button. If you have a closer look at the player panel, you'll see that master component has this diamond icon with four squares, and the instance has this single diamond icon. To locate the master component, you can select any instance and click go to main component from the properties panel. This will work even if the component is on a different page, but won't work if it's in a different file. A components are part of individual files. To add a component, you can either drag them from an asset panel or you can just copy paste either a master or an instance. If you want to create a new component, for example, like a primary button and a secondary button. First, detach the instance and then click create new component. If you instead click create component on a live instance, then that's just going to create a new component within instance as part of it. This gets weird, so make sure to detach it first. That's all for now, you'll get a hang off components with practice, and we're going to start that practice by wire framing in upcoming videos. 99. Wireframe kit: Several ways we can create wireframes. There are like third party applications that create wireframes like balsamic mockups and whimsical that I've used in the past. Some designers just use pen and paper and sketch the wireframes like that. I do that, but only for my brainstorming process, I don't share it with my clients. The best tools for us is still Figma. That's what I use these days. It's just easier to create wire frames there and share it with the client, the collaboration part of it and the commenting makes it easy for them to give comments, and also can share the access to the file with our clients, and they can fill out the content right inside Figma. The best way to create wireframes inside Figma is by using wireframe kits, which are pre made, ready to use component libraries, and we can drag them right from the component spanel and then put them on the page and sort of start building the entire page like a lego structure. There are a lot of wireframe kits available online often for free. But I wasn't very happy with what I found. So I decided to create one for you, a simple and easy to use kit based on what I use myself. And you can make this wireframe kit your own and use it in your future projects for yourself. Here's how this kit works. From the asset panel, we're going to drag pre made components that we need. They are organized like this inside the asset panel. We have buttons. We have inputs like different types of form fields, and we have placeholders like an avatar, and we'll build our wire frame using these components. Besides these elements, I have also added icons. These are free material design icons by Google. They are Figma components too. You can drag them, change colors, and so on. The assets panel has the search option, which is very handy. This will search through all of the components that are in the file, including icons, since they are regular components too. I've also created text and color styles. For example, when we need a headline for our hero section, we'll add a new, the usual way we add text, and from the textiles, we'll select heading one or any other heading style. When we need a paragraph, we'll again add a new text and choose a paragraph style instead. I have also added color style, so we can instantly give something a color without us, you know, worrying and testing it out and coming up with different color versions. Primarily, we will use this black s and phrase. This is a nice neutral color palette that's great for wireframes. I like wire frames that look faded, deliberately looking like it's lacking color, like a coloring book. For clients to understand that this is not a design. Speaking of when you share wireframes with your clients, make sure you explain your process and explain what wire frames are. Often they're not going to know what wire frames are. I've had once a moment when one of my clients thought that these wire frames were final designs, and he wasn't very happy with it, if you can imagine. The master components and styles that I've created, you can see them on the wireframe kit page. If you want to make any edits and changes, you can addit these master instances from here. You can also build and add more components if you like it. Make this wireframe kit your own and have it as your go to template for your future projects. It will make your wire framing stage smooth and speedy. One note about icons. If searching from the assets panel doesn't give you any results, take a look at here to see what's available. The names of these icons might not be as intuitive. For example, this trashcan icon is named delete, and searching trash won't bring any results. Open that wireframe kit file and make sure that you have the copy of a file in your account. Now we're ready to start wireframing. We'll get to it in the upcoming video. Stick around. 100. Wireframes - Homepage Part 1: In this video, we're going to start creating wireframes for our Tam collaboration home page. Inside the wireframe kit file, create a new page by clicking the plus icon and name it wireframes. We're going to add a frame and the grid, the usual way we do it. Desktop frame and our usual 12 point grid. Now that we know how to create styles, let's save this great style for later use in this project because we can, so why now we'll save us time later. For us to come up with some ideas on what content and layout we should have. Let's have a look at our project brief and the Moodboard. Be project brief is where the goal and high level details of the project is, and I Moodboard, we have a look and feel, which we already agreed with our imaginary client. So the website is going to be prey standard, but the primary goal is to get early access signups. That's going to be our call to action. We know it's going to have a block, and we'll also need a place for people to subscribe to a newsletter. Now let's have a look at the Moodboard. S. From the brief, we know that the client wants a website that is more photography based rather than illustrations. So I think this background photo approach is something that's going to be liked by them and a good approach over for our target audience. We could find a photo that audience relates to, so they can see themselves in it and that's going to help us connect with the audience. Based on that, let's wireframe the hero section. We need a background photo, not a real photo, but just a placeholder. Find an image element and drag it onto the canvas. And then resize to fit it to the full screen. Take it around 800 pixels in height, that's usually a decent size for the hero section. Now we need a navigation bar, a logo on the left, and the links on the right. Pretty straightforward. Let's use heading four style for the logo. The link style for the links and secondary button for the call to action in the na bar. I'm going to resize the button to make it smaller because we'll use a regular size for regular buttons. Mm. So far so good. Now for the headline and the subhead. We're going to choose a heading one style and choose the black color from the wireframe kit. It's a good idea to stick to this neutral gray color palette when creating wireframes. I really like this palette, actually, I stole it from a wire frame tool that I used in the past. In addition to the blacks and gray, stick to one primary color from those options, or choose your own primary color if you'd like, but stick to one. If you want to change the primary color of buttons, changing the field color on the entire component won't work because it has mixed content. The rectangle is blue, but text is white, so you'll have to change the rectangle only. But the batter option is to change the master. That's why we use components. Select an instance, then click to go to main component and in there just choose a different color for the background of that rectangle. The same goes for the secondary button, change two colors, one for the border, and one for the text. In my case, I'm going to stick with this original primary color. All right, I already have content in my mind. I'm going to steal the headline from this one, instant collaboration for remote teams. As I mentioned before, we're not copywriters, so we don't need to be perfect with the content. Just anything we think works and will give an idea to our clients as little dummy text as possible. Or just ask Cad GPT to write content for you. That's a valid thing to do these days. I'm not worrying about distances here too much, but still making sure they're air line. Now we need to urge users to do something, which is our primary goal to get their e mails for early access. This is commonly referred to as call to action or short CTA. CTA is either a form or just a button. Let's see what our inspirations are doing in this case. Many of them are using a form with a single e mail field. I think that's what we should do as well. We could have a pop up form, but when it's small form, especial with a single field, it's a better practice because it's less threatening. It's right there, no trig very transparent, asks user for just an e mail and they see what's going on. There you go very simply and quickly, we have a wireframe for our hero section. Thanks to this wireframe key, didn't take as much effort, and we didn't have to waste time on choosing phones and colors. This is how you should work with wireframes, thinking about the layout and content and not worrying about the look and feel. In your real projects, when you share the wireframe to your clients, you can add comments to different sections and different elements on your page to show them your thought process. To do so, switch to the commenting mode, and by clicking anywhere on the frame, you can add new comments. Clients love seeing the thought process that you put behind your designs. Because when you build a website and design a website for a business, you're not just giving them something pretty to play with, you're giving them a solution to their problem. Often, you're giving solutions to several problems like generating sales or or traffic, creating online presence and good brand and some reputation. A website that looks fancy and modern, that is going to create a very specific image and reputation for that company. And you need to show that you have a deep understanding of their problems, and you have come up with some potential solutions. In other words, you need to sell them on your designs. You made the first sale by convincing them to hire you for your services. Now you're making another sale. You're not done there. You're making another sale to show them that these designs that you created they are great solutions to the problems that they face as a business. I don't mean to use some sort of sleazy sales pitch or techniques when you're explaining your designs. Just explain your self like a designer and how you thought about these elements that you created. For example, that single e mail field that I've put in the wireframes, I would explain this to the client, something like this. My suggestion is to use a single e mail field for the call to action and the subscription instead of asking first name, last name, and so on, because one single e mail field is Low commitment from the user side, it's less threatening, and because it's also visible, we're able to fit it because if we're asking for several different things, then we would have to put probably a pop up form because then we would occupy too much space. But by showing the field, an e mail field is visible, we're showing that we're transparent. This is the only thing we are asking at this step right now, and this low commitment exchange will increase the overall subscription rate. And that's it. Now, if we didn't do that, and if we didn't explain our thought process, the chances are they're just not going to know the reasoning behind one fill, because they are not designers. They haven't been building websites, and they think from the business owner's perspective and not from the user's perspective, right? So they're going to think, wait, I'd like to have more information about the users. I'd like to know their e mail address, phone number, Social Security number, credit card details, and so on. Now, because you haven't put all these fields in there, and you just put e mail address, they feel that you're being neglectful, or maybe you just didn't understand their business challenges and what they want from the business. So they're going to feel that you're just not getting them and not offering good solutions for their business. So it is our job as designers to educate our clients about topics like this. But you can't educate your clients if you don't educate yourself first. So as an external reading, I would recommend you to subscribe to blogs and newsletters that share information and latest research and anything new basically about design or user experience topics and things like that example, Nielsen Norman Group is one such place you could subscribe to, they often publish articles and research about user experience topics. Also, prototyper dot IO, which has this newsletter that includes it's not that their primary focus, but it also includes the top posts, blog posts, usually about topics of design and user experience and everything sort of web related. If you like books, I'd recommend reading Don't make me think by Steve Crook, which is a great book about web and mobile user experiences and usability. And another one, the design of everyday things by Don Norman. That's the same Norman guy from the Nielsen Norman Group. And it's not really about web design, but it's more about items and everyday things that we use in real life. But it's a good introduction to the journey of user experience and understanding. What you have to look for and basically sort of a philosophy behind designing things and objects and items, which includes web because people interact with it, and especially web because usually it's a bit more complicated and a bit more difficult to interact with for people than regular items that we use in real world like Fork. Okay. So back to our wireframes, but we're going to continue that in the next video. 101. Wireframes - Homepage Part 2: We're back continuing with our wireframe below the fold. Let's see which one of the inspirations could work for our next section. It would be a good idea to demonstrate the product by showing some screens. A section like this could work, have the screens on one side and the text next to it. We could steal some content from Slack. Using content from the competitors is a valid option. This is how your clients will try to get ideas anyways. But make sure to put a comment on it and telling where you grabbed the content from. You don't want them to think that you came up with this content and then at some point, find out that, you know, it was grabbed from the competitor because they're just going to think that you just stole it, right? Here, we can add learn more link to the other potential pages that will explain the specific features in more detail, like they've done it here. It's a good way to direct visitors on different pages of the website, and also it brings a little more detail to the text block. We already have a link in style. Just change the color to your primary color. We can also add a little arrow to this link. Inside the components, we can search for an icon and grab that and put it next to it. That's all for the section. Now, let's create rest of the sections in the body. I was thinking of split section like this. Content is the same style as to what we just did, so we can just copy that. For the graphic, we're just going to put the image holder for now. Agh for our clients, we will explain our vision about these images that we're going to create an augmented reality view, adding ws from the platform onto real photos. L et's say some content for simple task management. I'm going to write this on my own. Don't judge me. Mm. Let's have one more of the same layout with the photo. Let's just duplicate this. I'm holding on out option key here, so it duplicates when I drag the whole thing, but you should know that by now. I want to see a fi metric to reverse the layout of this section. Group the content first. Then select everything, and these two pink circles should appear in the middle. Just hold it and move the content on the other side. So simple, a baby could do it. Let's now add a testimonial section. I really like this one here. I'm going to recreate it nearly as is. From a marketing standpoint, having testimonials on product or service websites is a great idea. It increases trust in the brand and audience gets a better feel for the product by reading real people experiences. One great way to design testimonials is by adding five stars just like they've done here. People love to see how someone has rated the product. It's more powerful and simply saying five stars on the page instantly brings people positive feelings about the product because there is a strong association in people's brains linked to those five icons. It's a little psychological technique. You employers will appreciate your understanding of such things. And. So I have just tried to match it roughly to the inspiration, not using any specific colors or anything. In real designs, we'll use golden stars and the white car, but here we got to keep the gray car, so we don't want to worry about the shadows to make the white car visible on a white background. Now just group the whole thing and duplicate it in a similar way as our inspiration. And the last one to go off the frame. One thing to note here, we don't want this whole card visible. We want it clipped like it's in the inspiration. So how do we do that? The reason it's not clipping is because it's not part of the frame anymore. You can see that in the layers panel. When you move something off the frame a little, Figma looks at your cursor and decides if you want it on the frame or off the frame based on that. You see how that group gets clipped when the cursor moves inside the frame or becomes fully visible when moves outside of the frame. To move it back, just make sure your cursor is inside the frame. Then position with arrow keys or in a way that you don't move the cursor outside. Fantastic. We can keep the dam tax inside testimonials. Those are something our clients would need to ask their users and produce it that way. Let's add those slighter arrows just like in the design. F. Lastly, let's add footer and be done with it. As I often do in my projects, I'm going to copy the Footer content from our previous exercise, since we use the same 12 point grid and columns fit just right. This reusing different components between different projects comes from a bit from laziness, but works out really well at the end of the day. You start to master these common elements as you use it in different projects and start understanding benefits and limitations of the layout, and at some point you refine it until you have a near perfect personal template. Now, let's update the colors and textiles. M. M. Later in a design stage, I'm thinking to use a dark footer like this. Since we know from our project brief that we need a newsletter sign up form, we can add a similar e mail form right here in the footer. Mm hmm. Mm hm. Mm. Mm hm. M. M. H. M. M. M. M. And there that's our footer. All right. Wire frames for the homepages done. Next, we're going to wire frame the article page for the blog. 102. Wireframes - Post Page: This video, we're going to come up with wire frames for the block post page. Actually, after home page is done, wire frames for the block post is much simpler because the navigation bar is already done, the footer is done, we just need to come out with the middle. We haven't done any research for the inspiration for the block and the block post. Let's find some examples and see what we can do. We don't need to create a moodboard for this. Let's quickly look through some examples. You'll see that most of it is quite standard layout anyways. As you can see, most modern examples have a similar structure, the headline and post details on top, then the cover image and the body text. We can do the same layout as well. First, let's copy the Na Bar. Nabar in most cases, you want to have the same across the entire site. Now, the headline, it's a common practice to use narrow width for post content. We've touched this in the good design part. The thing is paragraphs that are too wide are very hard to read because you start losing line brakes. A common maximum width is about 700 to 800 pixels for the body text. So let's make the content framed to be 700. This includes the headline. Not that headline has an issue with breed ability, but since we're creating this content, to keep things. Let's include the headline in it as well. Underneath the headline, let's put the author of the post and the date, just like other examples. In many of these examples, I like how cover image goes beyond the content, beyond this frame that we created. So we can do the same thing and create maybe 900 pixels for the cover image. For the body, just insert some dummy text. It's nice to finish the post with the author and the details. We already have it in the top, but it's a common practice to put the author on the bottom as well and a bit bigger in this time. M. M. M. After the post page website, usually have a commenting feature at the end. Most of these websites, they use third party plug ins to manage the commenting, like Facebook and discuss. Using third party commenting plug ins is a great idea. Most users already have either Facebook or discuss, and they can start commenting without signing up and all that stuff. That's what I do on websites too. I use discuss plug in, which is a little better than Facebook because it gives the site manager more control over commenting and moderating. We'll also learn how to install this discuss plug in, which is going to be inside the advanced part of this course, but for now, we just need to put a wire frame that looks like a commenting feature. Mm hmm. Mm. Finally, let's copy the. M That's all. Let's have a look at the wire frame from the presentation mode. Select a frame and click the play button. Looking great, now we can share this with a client, and that's it. They will be able to enter the presentation mode themselves too from the filing that you have shared with them. But as another option, you can also share the prototype directly. When you share Figma links with your clients, it's a good idea to explain how things work, how to see the comments. You've included how to add their own comments, how to enter the presentation mode, and so on. Whenever you share anything with the clients, be it Figma links or web flow or anything, always guide them through the process and explain and tell them how to make things work. Don't expect them to figure everything out on their own, all these wire frames. Figma and mood boards and web flows and prototypes might be overwhelming for them. And if they haven't been dealt dealing with such design process, then everything is going to be new, all these new tools, and they might have a hard time figuring out on their own. So guide them through every step of the process, give them small explanations of how to do something, maybe screenshots, sometimes even little video tutorials you could do. And they're going to love you for this. 103. Wireframes - Blog Grid: Every blog needs a page where users can browse all the block posts in one place. That's what we're going to do in this video. Create wire frames for the blocks home page. My favorite design for the blog is a grade layout, something like in this example, but in our case, we're going to do a bit simpler. We don't need to look for inspiration. We actually have something in our moodboard that we can use. This sort of card layout would be perfect for our block page. Each block card would have a cover photo, a headline, a few lines from the post, and author details. So first, let's prepare the page. Let's duplicate the post page and work it from there. We can keep the navigation bar and the footer. The rest we can get rid of. And let's enable the grid. First, we can put a headline in a subhead. We can name it a blog or latest posts or something like that. Now let's create a block post card. Three cards in one row so be the best layout, I think. Mm hmm. Let's give it a color from our wire frame color palette. Next, we need a thumbnail image which we can drag from the assets tab. Then a headline and a few lines from the block post itself. Heading three style should be good for the headline. M. And for the text, I'm going to go with caption. Paragraph seems to be too big. One advice, keep with wireframe kit styles, you want to limit your design decisions at this stage as much as possible. The goal is to concentrate on the structure and content. That's looking decent enough. Now let's add the author and date in just like on the post page. M. M. M. M. Well, good. Just one last thing. Let's round the corners like we did with testimonial cards. Actually, we shouldn't be worrying about rounding the corners. That should be left for the design phase. But what the have, we've already done it on testimonial cards, so we might as well do it here. That's rounding the background rectangle. Now, how do we round the image place holder? If we do it the regular way, then that's going to round all four corners, but we don't want the bottom corners to be rounded. It looks odd. We have an option here to round independent corners. Eight on the top corners and zero on the bottom ones. Now let's group the whole thing and then duplicate it to create a grid. And there we go. I'm not putting individual content examples for each card, not really necessary at this stage. However, in the designs, we will, because when presenting designs, it's important to make the work look impressive and as close to reality as possible so that clients can envision the final result much better. One last thing we need to add is pagination. You know those page numbers at the end of the grid, so users can go to the next page. With Webflow, the best way to create pagination is to have next and previous buttons. So we're going to drag one of the buttons from the assets tack. Change the color to something more subtle. Keep in mind, changing the color on the entire component itself, it's not going to work. You have to select the background rectangle and change the color there. Mm hm. Shrink the height of the button, and that's it. Bring the footer up and cut the extra space of the frame. Mm. By the way, when shrinking the entire frame, sometimes it might resize the contents. That has to do with constrained settings of each element on the frame. I want to go into details right now, but if that happens, just hold control or command while resizing the frame, and it won't do that. All right. All the wire frames are done. We can share this with our client in two ways. Either we can share it from a presentation mode, which will open each page individually, and to go through pages, we can just click the left and right arrow. Another way to share is to share the file itself. With wireframes, I prefer sharing the file because they are wireframes, working progress sketches, so feels more suitable like that. The designs I like to share in a presentation mode, so it's closer to the final experience of a website. That's it for wireframes. Up next, we're going to get started with designs. Stick around. 104. TeamApp Homepage Design: Part 1: The moodboard, we've got the wire frame, we're ready to design our home page. Let's create a new page and name it design and copy the wire frame in here because it's going to be easier for us to follow the wire frame instead of going back and forth between pages. Next to it, let's add a new frame in our usual 12 point grid. Okay, let's find the background photo for our hero section. I quite like this photo because it looks non stock, a bit more realistic, shows that she's working remotely, and she's happy because our team collaboration platform is just that good. The only problem is that she is centered, and we want to have a layout where we can put the content on the left and it's not overlapping with her face. If the photo is a good quality, then we are able to move her around and position her on the right side. I have included all the photos and assets in the project file. So if you want to reuse same photos, you can do that, and you can find that on the assets page. But if you want to go for your own interpretation, and I'll definitely recommend you to do that, find your own photos, and use that one instead. Looks pretty good. There is a good amount of space, so we can put our content on the left. Now let's choose typography. This time, let's try to find a typeface that can work both on headlines and paragraph. Not for any specific reason, but just to practice. For this, we need to find something that is neutral because we're going to use it for a paragraph and something that has a lot of weight variations. We can narrow that down in Google using number of styles. Six styles in reality means three different weights because each weight has an italic version with it. That's not really enough. I'm going to go with at eight styles. This one is actually called Work sans. Might be a good option. Cabin isn't bad either. Just a quick double check of the typeface manual. Remember, we always read the font manual. We'll avoid embarrassing choices. Ex and all safe in that description, and now let's go apply that phone to our page. Instead of creating it from scratch, I'm going to copy it from the wire frame in here. No need to reinvent the wheel every time. I'm just playing around here, mindlessly to see what works the best. I think this will do. Since we're not using a heavier weight, then line height doesn't need to come closer. Less mass means less gravitation and pull. Hope you've been paying attention to your physics class in school and the paragraph text. We need to add a dark overlay on that image, otherwise content won't be visible much. Now, for the call to action form. Mm hm. I'm going to use the blue from this design. But I'm actually going to brighten it up a little to make it even more vibrant. They also have this yellow on their page, so let's copy that too. Maybe we'll find a use for it. You're free to choose different colors if you'd like up to you how closely you want to follow along with pixel by pixel or maybe a little. It's fine either way. There is a learning value in both of the approaches. Oh. I'm just eyeing the margins and distances here, not really going by the grade as you can see. Always trust your eyes over any design guidelines and rules. Blindly following them sometimes will render far from optimal results. I'm also trying to avoid that corner of the furniture. The objects in the photo and our interface elements sometimes can interact with each other. This can be good interaction, but sometimes it can create unnecessary tension. All right, looking sweet so far. Let's put a navigation bar. L et's make margins 12 on the top and at bottom and 20 on the sides. If you want to do a ghost button here, you can or even to make this flow as well, feel free to remix. Let's add a logo to. Here's another simple and quick way to make a logo. Just write the name in small caps and add a dot at the end with some contrasting color. And, you've got a brand new logo. Far looking good. One thing I want to fix though is that dark overlay on the image. Right now we are using a full overlay, but the model doesn't actually have to be sitting under a dark overlay because we don't have any content in front of her. Now, how do we brighten her up, but keep other parts dark? We'll use a gradient fill instead of a solid fill. Go to the fill that we created and switch that to a radial gradient. This time, not linear. Because with radio, we can create a spotlight on her. Now we can position that spotlight exactly where we want it to be. This handle on the left decreases the radius of that circle. You can play with other handles to to achieve exact result you want. Now back to 40% opacity. There you go. Her face isn't dark anymore and looks better overall. This is a great way to utilize images that have too detail and too much going on in them. You can create spotlights on your focal points and then den rest of the image. All right. Let's pass here and continue the rest in the next video. 105. TeamApp Homepage Design: Part 2: And we're back. We're going to design this section now. We're going to need to find some mockups for the product, so we can showcase it. Just like the last time, I'm going to search for sketch resources and then import them inside Figma. I'm going to try different keywords like project or task or dashboard. I've already found this mockup, which I'm going to import inside Figma and then use that. If you'd like to use the same thing, you can check the assets page. I have put it there. But also, if you want to find something of your own, you can do that, and you can go on resources page like one for sketch or one for Figma that I have included in the resources page where you can find different free mock ups and templates or anything like that that you could include as the product showcase. On the import, it tells me that we don't have phones that are part of this document. What we're going to do is replace with something else. Let's use roboto instead. On the left side, it tells you the phone and on the right, it tells you the weight that was used. It will automatically select the correct weight for you, but if your replacement phone doesn't have the same exact weight, then select something manually. This meeting screen seems pretty good. We can bring that in and let's use our own blue. M. To select contents of a group, hold control or command and select with your mouse, it will do a similar deep select like you do by clicking and holding the same key. In press shift, in case you want to dielect any of the elements. M. M. M. Since this screen is quite wide, we can move it off the edge. That's also a pretty good trick. And I'm going to add a shadow to it to make it more visible. Here's a tip of he shadows. Make them subtle, like it doesn't draw any attention to it. If it draws attention, then it's too much. The edges of the screen don't have a good contrast with the background white. There is a nice streak designers use in this case. We can use off white background instead of a purely white one. Sort of flight what they are using here. We can grab this exact off white color and apply on the entire frame as a background fill. There, that's a huge improvement. The edges of the screen are much more clear now. A. Let's round the corners now. It's always a better idea to round the corner on interface elements like that. It feels more finished. Point the corners feel like someone gave up halfway through. You know, it would be nice to do something like this to pop some elements out of the mock up. It's going to add more dimension and will make the whole thing much more interesting. Here's a fig matric. You can copy properties more from one object to another one. Like the shadow we just created, select the property inside the panel, click on the edge here to select it properly. Then control C to copy and then paste it on the desired element. Or you can also create the style out of it and save that style and then reuse it on other elements. Mm Mm hm. Looking with so far, let's add the content. M M. M. And all looking fine. Now, let's create a section like this. Usually, the way we've done in other exercise, we had the photo on the edge, but ds guys they have it a little different. They have a gap on the edge and also in between the sections, so we can do the similar way. We want to find photos that have a bit of free space in it for us to place the interface elements like in the inspiration. A busy picture is not going to work. Also, what I often like to do is to look for photos from the same author. When you use photos with different style, it creates inconsistent look. It's an obvious tell that the photos are stock and weren't made as part of one photoshoot for that website. But the photos from the same contributor will often have very similar look. It will have the same style, same filtering, and overall similar filter it. Using such photos creates an amazing consistency on the page. Our case, we are Lock, the contributor of our hero photo does have other photos that we could potentially use. I'm thinking of using these two because they are taken in the same scene on that leather couch, so this is even bigger consistency. It's going to feel like we made our own photoshoot for this website. M. M. M. M. M. M. And now I'm going to take some elements from the mock up itself of the product and place them just like inside the inspiration. Just place them over the photo somewhere. H. It's looking pretty neat. We've locked out on these photos. They are not just same stay and scene, but also both models are smiling and looking at each other's direction. 106. TeamApp Homepage Design: Part 3: Now, for the testimonial section, let's actually copy the card from the wireframe and make edits on it. That should theoretically save us time. Let's find some profile photos for testimonials. Mm. One thing you should never do is share designs with your client that has repeated dummy photos like this. This doesn't look very nice and sort of ruins the impact your design can make when sharing it with a client. Even with the names, doesn't really take much time to come up with some random names, but the visual f w impressive, looks real and can be appreciated better. M. M. There are some plugins that you could use for Figma that can create dummy content. This one that I'm currently trying is called Content real, and it can actually do a pretty good job with creating dummy names. Inside that resources page, I have put a link where you can find all the available figma plugins. You can go through that and find some different plugs that's going to help you speed up your workflow. Similarly, what I like to do with dummy paragraphs is to use different text instead of just having the same exact thing repeated. You see the wireframes we didn't bother about that because it's wireframes. They are supposed to look blend. But it designs, we want things to look as real as possible. Mm hm. M. All right, looking swell. I'm going to do the same thing with a copy it from the wire frame and style it right there. Mm hmm. Mm. As I mentioned before, I want to use this dark style. Let's try using our dark blue. It's okay, but I'm going to desaturate it a little, so it has less blue in it. I'd like it to be a bit more subtle, more towards black or gray. Luckily, we know how to fine tune colors, don't we? You can refresh your memory by watching fine tuning lesson in the color section one more time. I've been teaching you a lot of concepts in this course, so it's natural for them to slip out of your mind. Going back to those lessons when you need it is a great way to solidify your knowledge. We can remove some of the blue from the color by decreasing the saturation. Change that rack down to H S B, which is hue, saturation, and brightness, that makes the second box to be saturation, and in the percentage value, just decrease it. It's still the same hue and this new color still fits well within our palette. Just playing around with colors and sizes here. I like footer links to be faded and small. And that's it. Let's have a look at it in the presentation mode. So our home page is done and looking pretty slick. We have two more pages left, the block grid and the blog post page, and we'll get to that in the upcoming videos. 107. Blog Post Design: Our homepage design is down. Now let's do the blog post page. This is what we have from the wireframes. Let's copy this frame into the design page so we can follow it easily. Our homepage has an off white background, but on the blog, I prefer to have it white. It's better for text readability, which is very important when it comes to blog posts. So let's copy paste and Na bar directly from the homepage design. All we have to do is just change the colors. For the links, dark blue is good and for the button, we can keep the same style as this. But instead of white colors for the text and background, we can use our primary blue color. For the author blog, we don't yet have the special style like caption. We can just apply the paragraph style first the detach it and then edit. 15 pixels look good and don't forget the color. Gray would be fine here, the one from the local styles. We should create a textile out of this. I should have created this already on the homepage. There were some small text elements like this, and if I had done it there, we would have less design decision to make here and all of them would be linked and easily editable and manageable in the future. Imagine if the client comes back and says they don't like the font style, then you'll see the true benefit of using styles. There we have the caption style now, and let's apply that to the data as well. But Mmm. For the image, let's grab some photo from splash or pexels. There is this circle inside, so what we can do is set that image as a fill of that circle. A just remove that icon from his face. For the cover photo, let's find something and then just like the aor image, edit as an image film. Excellent. For the body, we're going to select the paragraph style and give it a dark blue color. I'm not going for the gray color like the homepage because gray wouldn't be as good in readability. On the homepage, it was okay because the text was not as much. But here, it's a blog post, and people have to have a very good, enjoyable experience when reading it. And if they are squinting or if the screen is flickering or if they're not seeing the text font properly, then they're just not going to read such a big amount of text. And for this author blog, the same thing, replace the image, then change the font styles and colors. H. Mm hmm. A comment box, leave it as it is. No need to style this because we'll be using a plugin, which has its own style. Also, no point in recreating that style here, but sometimes I'll take a screenshot of a plug in and insert that instead. If it's important for my client to know how it looks already. And Footer is Easy Ps. We can copy and paste, but there is a better option. We can create a component out of it, because we're going to have this footer on three different pages. And this way, if we decide that we need to change some designs, we'll be easily able to change one instance, and then all the three will update at the same time. Mm. That's it. Our blog post page is done. We have one more page left, which is the block rate, and we're going to do it in the next video. Stick around. 108. Blog Grid Design: In this video, we're going to design the blogs homepage. It's going to be quite easy since a lot of it is done. We already have wireframes and blogPost page. We can reuse elements from these two pages. Let's start by duplicating the blog post page. Delete everything on it beside the headline and let's enable the grid. Now, I just arrange the headline and the subhead. Now for the cards, I'm going to copy one from the wireframes and take it from there. If you remember in our inspiration, cards are white on a gray background. That way, card is visible. That's what I want to do here, too, so we're going to paint the background gray, just like our homepage. Now we can change the card color to white. Next, let's put our post image as a thumbnail. All we need to do is put image as a fill of a rectangle. The icon from the image placeholder we can simply hide or delete. We're not going to kid it again. We need another level of headline style that we can use in this card. 22 in size and semi boot, I think it looks good. Also, we can enable the capitalization of the text. This will make the headline more title like. Let's have this as headline three style in case we need to tweak it in the future. Now for the paragraph text. For the author and date block. I'd like it to be smaller than what it is right now. It's a secondary information and shouldn't have same importance as the paragraph. So I'm going to detach the text and change it to 12 pixels. A For that little separator, I'm going to use a light grave. Such dividers, I always prefer to be lighter than the text next to it. Let's detach avatar of the author from the component. And let's make it ten pixel smaller. We can tidy up these elements using Figma's alignment feature, select them and then center horizontally. Or as Figma calls it align vertical centers. Just make sure you don't have the layers grouped or it's not going to work. We can also use this tidy up or distribute feature to distribute them evenly. And once you do that, the new field will open up. That's a distance between the objects. We can change it to something like ten and Figma will distribute the objects with ten pixels apart. It's very handy. I'm leaving this empty space between the paragraph and the author block for a reason. I'm taking into account the occasions when a headline stretches over three lines. That way we'll make sure the card doesn't need to stretch and they are all the same height. Great. The block card is ready. Now we can duplicate them to create the grid. We should put individual dummy content in these cards. Presenting it like this to the client isn't cool. What we can do to save ourselves time is to go on some blog and grab content from there with images, paragraphs, and all that. For example, we can go to medium.com and find content there. To download images, you can either screenshot them or use this chrome extension called Gallery Fi ink in the resources. It scans the page for images and lets you download them easily. H With their names, I'm going to use the content of plugin. I can select all name layers. And by clicking the names option, it will automatically fill in with random names. Okay, let's do similar with authors. Let's just make sure the gender of names is correctly matching the photos. We don't want a girl named Arthur. Mm there, the whole thing is so much better now, looks real and way more impressive than just repeated content. But we need to fix the spacing on aor blocks. Now names have created different gaps. Very last step, the next button, which we can just duplicate from wireframes and change the color. Uh Just like we do with secondary buttons, we can take the gray color and decrease opacity. That's a simple trick to create colors from the same palette. We didn't do this in wireframes, but it would be nice to add arrow to this button to represent the next action. I'm going to drag the icon right from the wireframe kit. Uh huh. There. That looks nice. Move the footer up and all done with a blog page. A All the designs for three pages are now ready. We would share this with client and get their feedback and make any necessary revisions. Designs, I like to share from the presentation mode, click Share prototype and send that link to the client. It will open right in the presentation mode. Explain them how to navigate between the pages. Something that might be evident to us often isn't very evident to the clients. And this concludes the section. We've done a lot. We learned a very crucial skill, which is the design process. We went from project brief, then to mood boarding and then wire framing. And then finally, we did the designs, which wasn't very difficult because of all the baby steps that we took before it. Without those steps, designing would have been way more difficult. Your clients are not going to know how the web design process works, and they might expect and often they do that you just sit down and start building the website right away. And often they even prefer that because they will save time and money and they will have a website up and running as soon as possible. But building websites without designs, it's going to bring terrible results. And usually it's going to cost more time and money because revisions on live website are just they take way more time than you would do revisions on the designs or even revisions compared to wireframes, which is just so easy to do, right? You just move things around. You don't think about anything. Now imagine everything that we do inside, Webflow, build everything, all the structures, and then all of a sudden, we need to completely redesign something and create a new interaction or new layout. And the same thing applies to the design phase itself, because when you're designing, obviously, you can't design without wireframes and without content. But when you have wireframes, when you have that skeleton and when you have content that you are designing, things are just much simpler. And any iteration that you have to make during the phase of structuring your page and structuring the website, so much easier on the wireframes. Why do that on the design phase? So make sure to educate your clients on your design process. They will love you for your professionalism and for your confidence in your process, even if they resisted in the beginning. Alright, next section is all about building this whole thing in Webflow. Stick around. 109. Webflow Development 2: all right, This is my favorite part building designs inside Wetklo in this section. We're going to build that home page design, and we're going to do this by already using everything we have learned in weap Low, but also some new concepts that we haven't covered yet. In the next section, we're going to learn interactions, Tool inside wept flow, and we're going to use it to create some interactions and animations to bring the entire page to life interactions. Make Website more exciting and impressive is going to be fun. And in the section after that we're going to build up log where we're going to learn CMS content management system by wet flow and how to turn any page into a dynamic page to pull information from the database and how to actually build a database inside, ah wept flow and how to structure it so we can create the nice blawg with different dynamic fields like author's name, headlines, photos to cover photos and all that. So, without further ado, let's dive in, stick around 110. Webflow 2: Background styles: In this video, we're going to build a small part of the hero section, only the background image. And to do so, we're going to learn a concept that we haven't touched yet in depth, the background styles. To start with, let's create a new project. WebflosFre plan only allows two unhosted projects. And if you already reached your limit, which you probably did, you can delete one of those previous projects, preferably the first one, the simple one. Okay, we're going to name this team app and choose a blank template. A as usual, we start with the section. We already use background styles to set a solid color background fill to our DV blocks. But that's only one small part of what we can do with background styles. Just like Figma, we can also give gradient background fills, image fills and color overlays. All that is accessible by clicking this plus icon under backgrounds. First is the background image. That's what we're going to be using in this case. We'll come back to this later. The next, we have linear gradient, which works in a similar way as Figma gradient to change the start and end colors, double click on these markers. You can set the angle of the gradient too. In figma, we use this stick that can be manually moved around. But here we have to set the angle by turning this dial or just clicking the rotation controls or putting the exact degree in this field. The next we have radial gradient. In Figma, we are able to move the position manually by dragging the handle of the stick, but in Webflow, we can do that by changing the position on this map. In a similar way, we can change size of the gradient from these buttons. They have explanation on how size is determined, but who cares? Just switch them around to see what works for you. The last option is color overlay. This is mainly used to put a semi transparent color on top of images, like what we did in Figma, but instead of a gradient, just a solid fill. For this to work, we have to add an image as an extra layer and place it underneath the overlay. I It works just like you would expect. Hide, how, drag them around, delete. Alright, in our case, we need to add a background image. We need to export the image from our Figma file and then upload it here. I'm not going to optimize it just yet because you'll see that we're going to need to do something else with the image first. We have three size options. First one is custom that lets us give our image custom values. Tiling is enabled by default. We need to remove that from here. We want the image to spread and fill the entire space of the box. For that, we need to select cover. With cover, the image will resize and crops so it can fit the full space. In other words, it will cover the entire space. With a contain, the image will resize to make sure that all parts of the image is visible. So no matter how you change the screen dimensions or the size of the Dibblog, the entire image will always be visible. This means often there will be empty gaps. So cover is the best in our case. Now, as you can see, the cover setting is very fluid. It adjusts both the size and the cropping to make the image cover the entire thing. If it needs to, it will stretch the entire image beyond its original size. When it comes to cropping, we have a control over on which side it crops that is control under position options. This position map is a great visual way to adjust and see which one works the best. The default position which is top left isn't very good. The laptop that she's looking at is actually important to the story. Without the laptop in the frame, we don't know what she's doing. The image gets confusing. So given this fact, we need to choose a position where laptop shows at all times. Centering might be better. This will anchor the image through the center and crop any excess on all four sides. For now, it's good. When we put the content, we might need to adjust. But we're forgetting one more size, the widest. We have to check there, too. This might not be visible for you, but the photo is a little blurry here. Why? Because the image that we have exported is 1,440 pixels. That's the size of our design frame in Figma. So on larger screen sizes, it will stretch and the photo will lose quality. Right now, the full width preview that I'm looking at is 1,920 pixels. This is significantly larger than the 1,440, so the photo stretches beyond its original size. To fix this issue, we need to export larger image from Figma. We need to export something that is going to be large enough to cover most of the screen sizes, and that's usually 1,920 pixels. There are obviously larger resolutions than that, but we don't have to go too crazy because that's a very small minority. And even in those cases, people who use very large screen sizes, they don't use their browser full width on their screen size, so often they will still shrink it and they might still looking at it on the 1920 pixel size. Okay, to export larger size for our image, we can simply input the width we want in this size setting. Put 1920 followed by W for width, and that way we will export the photo in 1,920 pixel wide. When you do this, make sure that the original image that you put here is at least 1,920 pixels wide. Otherwise, you're just stretching the image like Spandex, and that's the same thing what happens in Webflow, so it's pointless. The original image that I placed in Figma was big. I just shrank it down to position it perfectly in the frame. All right, now we can compress this image. So let's go to image compressor.com or optimize Zilla. And it's done a great job, shrink it quite significantly. Now we can go back and upload it for our hero section. And that's all. We've learned how to use background styles inside Webflow, primarily the image setting and how to position it perfectly to make sure it stretches and shrinks shrinks very well on many different screen sizes. I have skipped a couple of other rarely used settings inside the background styles, but by now, you already know my teaching style. I don't like to clutter your brain with things until we actually need them. We're going to continue with our hero section in the next video, so stick around. 111. Webflow 2: Navbar (Team App): In this video, we're going to build the Nab bar. If you remember, navigation bar is a pre made component in Webflow, which we can drag right on the canvas from here. And we can style it as we want it. Here's a hidden webflow trick, press command or control, you'll get this quick find bar here, we can search all the elements and find assets and much more. You can search now bar and drag it directly to the page. Or just hit Enter and we'll insert automatically. Okay, What do we need to do with the Nab bar? First thing that I noticed is the container size napbar is using a default container width of 950 pixels or something like that. If you remember last time, we've used a different container. But what is the container size we want to use? That's quite simple to find out. We just need to measure the container in Figma, which is exactly the full width of our grid. Draw rectangle over it, and see what's the width of that rectangle. That's 1,160 pixels. Now, what do we need to do in Webflow? We just need to take the container and give it a width size. Why are we giving it max width and not the regular width? Because regular width isn't responsive. We want it to shrink when screen shrinks. And the regular width will keep it at 1,160 pixels, no matter the screen size. The nap bar is glued to the edges when we shrink the screen. So we need to add some padding to it. There we have it. Next we need to change the background. Our Nab bar in the design is transparent. That's easy to change. Select the entire Nab bar, not just the container, and change the color to transparent. Okay, now let's add the logo. We need to export it from Figma. First, we're going to export it as Fig file, because for vector based images, it's the best file format. It's a small file size and it never loses quality no matter how much you stretch it. Insert the logo inside the brand box. We need to first drop the image element. Did you see what I did here? Quick find, then search for image. And because I had brand element selected, it dropped right inside when I hit Enter. Next, let's style the links. But first we need to add the font to our project. We're using a Google phone called cabin. It's not inside the list of fonts. Here, we have to add the phone from the project settings. We can access that page from this link here. It will take you exactly to the right place. I think we're using most of the phone alles. So let's add all of it done now we can go back to the designer and start building or designing. If you kept the designer tab open, make sure to refresh it. After you add phones, the phone shows up in the dropdown. You may also need to request design control if you have webflow open in two separate windows. Now the obvious way to apply a phone to something is by selecting the element and changing the font. But this is not utilizing the full power of HTML and CSS. If we apply a font style on something high level, then it will be inherited by all of the children. The highest element in the hierarchy is the body. We can access body from the navigator. Once you have body selected, go to the selector field and from the drop down select body. When you select the body tag, you'll see some of the phone styles are in blue. That means some styles have already been applied to it. By default, we can change the phone to cabin here. Now every new element, heading paragraph tags, will all be cabin by default until we overwrite them. Why is this approach superior to changing funds directly on each element? Well, first saves time, but second, just by changing on the body tag, we can edit the font on the entire website with a couple of clicks. That's it. Now nav links are inheriting phone from the body tag. You can even click on this orange link and it will tell you that it's inheriting the style from the body tag. Now let's style rest of the properties on the links. Change the color to white from here. The other links were in style. Why is that? Because we don't have a style class applied to them by default. By changing the color on the first one. Webflow created a new styles automatically and called it a nav link. Now we can take that class and apply it on other two. All the changes apply to all of them. We have five nav links in the design, and one of them is a button. Let's change the sizes of the links to match the size of the button. If we select one of them and check the spacing properties, you'll see that their sizes are determined by padding. If we change the padding values to match the button in our designs, then we'll get the matching size. The padding of the button in the designs is 12 vertically and 20 horizontally. Let's style the last link. To turn it into a button, we just need to add a background and round the corners. But we cannot just style it right off the bat, can we? He has the same class as others, so it's going to add it. All the links, what do we do that combo class of course, go to the selector field and type a new name next to the Nabb link. That's going to give it a combo class. Css is in case sensitive, so it doesn't matter if you use upper case or lower case. I prefer using lower case to save time. Webflow capitalizes automatically. I suggest using lower case. It's faster to type. And also you'll see difference between styles that were created automatically by Webflow and those that you created manually. All right, so what are the properties of our button? It had a white background with 20% opacity and four pixel rounded corners. This a four alpha is how you can set the transparency on a color to 20. And there you go. The rounded corners have to be applied from here under border radius. Excellent, let's fix the spacing. Now links in our designs are 30 pixels from the top edge. We can create this in webflow in two ways. Either by adding 30 pixel margin on top of the container or adding a 30 pixel padding to the no bar itself. The result is the same thing, but second one is better. Why? Because container is a class that we are going to re, use elsewhere. It's best to keep it intact. Navbar class, on the other hand, is going to be used only in the nav bar, so we can safely style it as we want. As you can see, logo isn't centered, it's barely noticeable if you don't see the boundaries of the container, But we can't ignore such details. We want our website to look pristine, a work of art. How do we center the logo in the middle? Anytime you need to move or position something, always start by thinking margins and padding. These properties will cover majority of cases. We can just add a top margin on top of the logo. And that's it. I'm just measuring with an eye here. Our navigation links don't have any hover effects on them right now. This makes the nap bar dead and not very fun to interact with. Last time we added an underlying border to the links. This time we can do something different, Something simpler like change of color. Here's one of the simplest, quickest, yet effective hover effects you can use on many different interactive elements. Just change the opacity on hover. How do we apply the hover effect to elements from hover state, which can be accessed right here? Let's change the opacity to 80% there. This simple effect works on the button. Let's add a transition effect. So the hover change is nice and smooth. This needs to be added on a regular state, not the hover state, but it will affect the hover. You'd expect that it's editable inside hover effect, but it's not. That's how CSS works. In this case, there is probably logic behind it. Let's test the desktop responsiveness, not the mobiles. We'll do that in the end. That's it. Napper is looking good. We'll finish the hero section in the next video. Stick around. 112. Webflow 2: Hero content: And we're back to build the content of the hero section. For stars, we need a container, and give it a container class which we already created last time inside the nap bar. All right. Let's put our content inside the container. We've got a heading, a paragraph, and a form. We'll style the heading and the paragraph in this video, but we'll do the form in the next so we can cover forms more in depth as we haven't touched them yet. We need some space on the sides, just like we did with the Nap bar. We can add the padding to the hero box. But wait a second. This doesn't look right. The nab bar now has moved even tighter inside. That's because we have a padding on the nab bar, and navigation bar is sitting inside the hero block, so there's double the amount of padding, making a total of 120 pixels. Let's remove that padding from the navigation bar because we don't need it anymore. The one from the hero will take care of it. You can easily recite any of the styles by clicking here. I usually use a shortcut which is option plus click. I think it should be I click for the windows. Let's style the heading. Size is 55 and the weight is regular. This is same with other instances of a headline everywhere in our design. So it's going to be a good idea to style this headline as an H one tag and not just a class. Remember, what's the difference between a class and a tag. The tag is a basic HTML element. It's how you tell browser that something is a headline, a paragraph or a deal block. If we style an H one tag directly, we will be able to control all H one tags on our website without applying any classes to them. To style a tag, make sure no class is selected, so the selector field needs to be empty. Sometimes you'll forget and we'll style a headline directly, that will automatically create a new class, any changes will apply only to that class. To fix this, just remove that class and start over. Then select all H one headings from the dropdown. Now you're styling the H one tag, that's exactly what we want. We need the line height value. Since we never changed the default line height of this headline, the field right now says auto. WFO doesn't take that as a value, so it's not going to work for us. But if you click into the field, the placeholder tax will show you the default line height and pixels, which is about 67 pixels. If you want to stick to using percentage units instead of pixel units for the line height, then you can just do the math. The percentage value is relative to the phone size. For example, 100% line height means same as phone size. For a 50 pixel phone, that's 50 pixel line height. 200% line height would be 100 pixels, basically, the double of the phone size. In our case, we can take 67 and divide it by 55, our phone size, multiply by 100, so we can get the percentage value, and that's about 122%. I generally prefer using percentages because it has one big benefit. When you change your phone size on smaller screens, you don't need to change the line height because it's a percentage value and it will calculate it based on the new phone size. Whereas pixel unit is going to maintain that height as you change the phone size. So you'll end up with some strange line height situations. Notice how the bounding box stays unchanged. That's because line height is a fixed pixel value. Whereas, during the percentage height, the bounding box grows and shrinks consistently with the font size. All right. I'm not going to set this to white color, do you know why because most of our headlines are not going to be white. They're going to be the dark blue color. So instead, let's set that dark blue color here, and then we will find another way to change this particular one to white. I'm going to enter the color styles edit mode so I can copy the color code. Otherwise, it doesn't show right off the bat, as we've set this color as a style. I'd also like to save this blue color somehow, so I don't have to look for the heax code every time I need it. Enter variables. You probably notice this little purple dot that appears every time you hover on some styles. This thing lets you save different values, which you can reuse and control them from one place. For example, click on that dot, then click on the plus icon to create a new variable, and just name that variable, dark blue or Navy or whatever you like. This color now has turned into a variable, which we can reuse elsewhere, for example, on a button. You just need to click that dot again, and now you can see the dark blue variable is available in the dropdown, which we can apply to the background of this button. If you think this works just like styles in Figma, you're right. It's exactly the same concept with a different name and some other small differences. But the idea behind it is the same. For example, when you edit your variable, it will update all instances across your side. That's the same behavior as in Figma. You can also unlink the value from the variable and then edit the color independently. GMA shows all its styles on the panel here when no element is selected, but Webflow has a dedicated panel for variables. Where you can manage all variables in one place. Edit them delete them, add new ones. This shows all the different types of variables you can add. I personally only use the color. When you delete the variable in places where it was used, you'll get this message. From here, you can either restore the variable or unlink it. And that's about it. It's a simple yet useful future. All right, moving on. The H one tag is ready. If we add a new head line, now, we'd will carry that headline styles. So how about that white color for the hero headline. That one, we can simply add a new class to it and then style it into white. I'd like to add a class name white in this case, if the color is the only thing I'm changing. That way, the class is clear what it does, and I can reuse this class every time I need a white headline or any other white text for that matter. Whenever you're trying to apply a new color to something that already has a variable applied to it, you need to first unlink the color from the variable and then you'll be able to put the custom color. This option appears when you click on it, not from this pencil icon. By the way, many common color names work inside this field, so you can just type them out, like white or black, pink, and so on. One more thing I'd like to change is the top margin. There is a default top margin of 20 pixels on H one tags. That's going to add extra space to our spacing between sections. So let's just get rid of it. If we ever need it, we can always add it to the particular headline. As for the paragraph, we're not going to style the tag. We're going to style the class instead because the paragraph in the hero section is different compared to other paragraph or elsewhere on the page. M. M. Lastly, let's position the hero content properly in the middle. That's as simple as adding a margin on top, but we don't want to add a margin on the container. We're going to reuse that container class across our page, and we already have it in the nap bar. So adding a margin on top will alter all the instances of this container. There are two ways we can go about this. We could add a compo class to the container and then add the margin. This way, our base container will be inta. But a little better option is to add an extra box and put the content inside. Then we can style that box as we want. I prefer this option because it's a cleaner and offers more flexibility down the line. Add a new de block and just drag the elements inside. You might find it easier to do this from the navigator. Let's name this de block something like hero content and add a similar margin that we have in the designs. And let's give it a max width so it's contained nicely alike in our designs. C, using the separate dip block already gave us more flexibility of what we can do with it. Excellent. Let's check the responsiveness. Perfect. Now, it's all looking sharp. We just have a form left, which we're going to do up next. 113. Webflow 2: Forms: And we're back in this video, we're going to learn the basics of forms inside weblow. Inside Elements panel, there is a special section dedicated to the forms and form elements. First step is always to add a form block, which comes with some elements already. We can remove any of this as we like, and we can add more elements inside the form block. Let's have a look what is this form block made of? There are three groups inside form which holds everything that we currently see. Like the field and submit button. Then we have a success message that is hidden at first and only shows up once the form is successfully submitted. And the error message that only shows up when there was some sort of errors when the user was trying to submit the form. If we want to add new elements to the form, we can drag things like dropdowns and check box inside the form. Each form field has their own settings. If you click this gear icon or double click on the form field, it will show the setting for this input field. First item in the settings is the name of the field. This name is internal. It's just what we see inside the database. Users are not going to see the name. The label of the field is outside. It's not in the settings. It's just a regular text block that is sitting on top of the field itself, which we can edit and style just like we would with any text block. But if we want more minimalistic look where the label is inside the field and not outside of it, like we have it in our designs, then we can add this under a placeholder field. Okay. And then we can get rid of the label. The next setting is text type. This means what sort of text is accepted inside this field. Right now it's set to e mail, so it will only allow e mails and anything else will give an error. If you want to collect names and regular text, then we will set this to plane, then it will accept any sort of information. You also have password, phone and number options. Underneath, we have an option to make the field required and maybe auto focus. Autofocus means that the field will be selected right off the bat as page loads. For a drop down select field, click settings to edit the list of choices that's inside the drop down. You can edit the choices, delete them, add more, reorder them, basically everything you'd expect. We don't need to drop down for our form, so we can get rid of it. All right. Let's style our form. In our designs, we made the form to be horizontal, the field and the button next to each other. Here they are aligned on top of each other. So how can we align them next to each other? Well, the form block isn't any different than all the other elements on this page. We can give it classes and style them from the styles panel. The flex box is an obvious choice when it comes to horizontal alignment. Make sure to select the form element instead of a form block element because we are trying to align field and the button. The form block holds form success, and error messages inside. So it's going to align these three elements. This is what's going to happen. One more time, select the element named form and then give it a display flex. Now we can style the field and the button independently. Our field is 56 pixels height, has rounded corners, and has a tax inside that is 16 pixels with a gray color. Now, to make that placeholder text inside the fill different color, you'll see that changing the color doesn't do anything to it. That's because this text color changes the color of the text that user actually types inside. You can check this inside the preview mode. But that's not what we want to change. That was fine as it was. To style the placeholder field, go into the states of the field and select placeholder. Now we can change the color of the placeholder text. In our designs, we are using the gray color, but we have it set to 70% opacity, so don't forget that. H. Excellent now for the button. Let's give it a class name button. The text inside the form button can be edited from the settings just like other form elements. This is a little different from other buttons where we can edit text directly by clicking through it. Okay. I want you to pay attention to something here. You see how the button is a little taller than a field. But the button actually doesn't have a height and has a padding that is only nine pixels. So why is it so? That's because of the settings that are given to the parent flexbox. You see here, it says stretch. That means the flex children will feel the height of the flex box until otherwise instructed. If you change that, then the height will change with it. But you might wonder how come the field has a different height. That has to do with the default margin that is applied to the field. That extra ten pixel margin is stretching the flex box. The button has now more space to fill. If we remove that margin from the field, then button will shrink and match the size of the field. But let's keep that margin for now. Sometimes when we have multiple fields, we need that margin. We can fix this issue by simply giving the button a fixed height. I want you to have a closer look at this behavior because often you'll come across with such irregularities inside Webflow or generally when you're designing and developing a website because all the elements and all that setting sort of interact with each other and they change the structure of the website. So a margin here might be changing some other behavior on a very different element, right? Just like what happened in this example. Whenever something like this would happen to me in the beginning, I would always think like, Oh, is this a bug? Why isn't working like this? I always thought it was something with web flow. Then I would go around on forum searching for this bug with a button or a form or something. And then at some point, I've got to get to the answer, and the answer would be quite simple. That's why I want you to learn how to look for the clues when you get stuck about something and think of it as a puzzle. You always think that there is a solution. The answer is somewhere there. It's not that the tool is broken or it's a bog or something isn't working properly, but there is some sort of puzzle that needs to be solved because I remember and often it's frustrating if you're dealing with a tool and you're trying to build something, it's just not going your way and it's not working out and you might feel frustration and you might get discouraged and you might not enjoy the process anymore. So I want you to kind take a breath and look at it in a Look at it in a way that complete accident. Look at it in a way that it's a puzzle and there is a clue and you just need to get to the answer, check each element and see what style can be interact with something else and you'll get to the answer and you're going to feel very good about it. Okay. All right, let's have a look at the form in the preview mode. All looks good, but the button could use a hover effect. I'm not sure why this text is so light here. Could be because we played around with the placeholder text and made it the opacity a bit lighter. Regardless, reapply this gray color here and I'll fix the issue. Okay. A simple Her state will do just a little change of the color. And that's it. Okay. Another thing we can change is the success and error messages. To do so, first, we need to show the states, which we can do from the form settings. Select the form block and go to the settings panel. Here we can switch between normal success and error states. Once you have success state enabled, then you can interact with it and change them as you like. We can even drag other elements inside or change the background, style the text, or whatnot. Mm hmm. Instead of this success message, we can also redirect the users to a different thank you page, which we can do by adding a redirect URL in this field. But in our case, we're going to keep the success message. Same for the error message, change the state to show it and then style it as you like. I'm pretty fine with this default error message and its style. So let's keep it as is. And that's it for the form for now. Once we publish our site, we will test the form on the live website and see how we can manage the form submissions. 114. Webflow 2: Mockup section 1: And we're back in this video, we're going to do a small part of the following section, just the content. Remember what we did in the previous website. We've created a generic section block. We gave it some default paddings, and that was it. Just like we did with the container element, having such generic section gives us a nice control over the website layout. Let's drop a new section. Give it a class. Give it some padding, both vertically and horizontally. We need 60 pixels on the sides on the bar, so let's repeat that. For the vertical padding, let's use 80 because in our designs, we're often using 160 pixels facing between sections, and 80 pixels on top and bottom will add up to 160. I don't have a strict rule on what sort of padding to use. Depending on the website, this can change, and most of the time, I'm just eyeing the thing. And now let's drop another container side and apply the existing class container. In the designs, we have off a blue grayish can background color on the page. We've done that so we could have better contrast on white cards that we put on the page. Let's apply that background to the generic section. The headline is already in the right style because we've styled the H one tag previously. We haven't done that for the paragraph, so let's do the same, meaning let's style a paragraph tag. So all our generic paragraph texts are styled without adding any classes to it. To do this first select the paragraph, then go to the selector field and select all paragraphs. All right. Now, let's just style it as usual, 18 pixels in size, 26 pixels in line height, and grab the color code from there. Excellent. Now, for the Learn More link, there are two elements here, text and the arrow icon. There is a way to actually insert an arrow as a text like a symbol, but I'm planning to animate this arrow in the future, and in that case, we'll need an arrow to be a separate object. So we have a text and an image element. Let's say a text link. Just like with heading and paragraph, we are also able to style the old link tag. So instead of the generic blue, we're going to change it to our own blue. And all the links now will have that particular color. Now, if we hyperlink tag anywhere else, it will inherit the color from that link tag. But we cannot change too much on link tag like text size, for example, because links live in other places like paragraphs, buttons, and so on. So if we style it and if we give it all links to be like 16 pixels, then if we link something inside the headline or inside a caption or a different type of text, then all of them are gonna become 16, for example, like this. So everything else that we need to style with a link, let's style the class and not the tag. To remove the underline from the link, just go to the text declaration and press of none. Okay, now we need an arrow, which is just an image element. Let's export the arrow image from Figma and insert it here. Export this SPG that's best for such images. Sometimes exports from Figma are going to end up in a zip compressed folder. You're going to have to extract it first. On my Mac, I'm just going to double click and that's going to extract it. I think on Windows, it's right click and then extract here. There's a four pixel space before the arrow. Mm. It's not exactly a line with a tax, so let's add a negative margin on top. Minus two pixel sims enough. Letter spacing in fo cannot be set in percentage units. We need to use a pixel value. We have two options. One, we can get it from a death mode in Figma, but that's a paid feature. Second option is free. We can just do the math. All percentages in font settings, be line height, ladder spacing or whatnot. They are all relative to the font size. 2% letter spacing means 2% of the actual font size, which in our case is 16 pixels. 2% of that is 0.32 pixels. Okay, that's all good, but there is one issue. If you check in the preview, you'll see that text is a link. You can see this by cursor changing from a pointer arrow into a hand, but the arrow icon is not part of that link. It's a separate object. This is not the best arrangement. Ideally, we want the arrow to be clickable and part of the link two. There is a very simple solution for this. We just need to place both of these elements inside a link block. To refresh your memory, we have two link elements inside the panel. One is a regular text link, and another one is a link block. A link block is like a dip block, but it's a link. Anything we put inside will be part of that one link. We add the link block and then drag those elements inside that block. But we can actually drag the link element inside because that's not allowed. Instead, we need to add a regular text block. As you can see the moment we put text inside the link block, it becomes blue. That's because that link block is part of that link tag that we just styled. Let's add that class to that text. The underline is supposed to disappear, but it doesn't. We have to remove the underline from the link block itself. I took a very weird route to demonstrate this implementation of the link. But the reason I did this way is because it would have been a natural way for you to think, and it's going to be a natural way for you to go through this process because when you want to add a new link, you're going to go, let me add a text link, right? And then you're going to have to add maybe an icon to the button or whatever it is, and you're going to think, Oh, how do I do that now? This icon isn't clickable. And you might get stuck because you need to figure it out. So that's why I wanted to take that sort of mistaken route so then we can understand exactly how to come back and redo everything in a way that we actually want to because you will come across to the sort of scenarios when you want to build something, you go with the natural way that you assume it's going to work, and then it doesn't and you get stuck and you go back and then reduce some things a little. This sort of trial and error and going through the bumpy roads of learning this is going to be the best way for you to understand this concept. Now, whenever you're doing this on your own and building websites on your own, there is one place you can always go to and find answers, and that's Webflow forum in their community. They are excellent community, people respond there. Even Webflow has people who work for that community and for the forum, and they give answers there as well, but also other Webflow designers like me and everyone else, they are kind of contributing and answering questions. So if you are stuck somewhere, Google it and look on Webflow forums, because often, Other people and other web designers had the same question as you, so you might find answers there already. If not, ask yourself and you will definitely get somebody helping you out and guiding you through and giving you answers. And you will find the link to the web flow forum inside the resources page. So go check it out. All right. Lastly, we need to place the two elements side by side. We have two options. One is to use the flex box, but second and easier option is to change the display property of the text. Right now, it's block. Block means it will stretch and occupy the entire line of the parent. That's why arrow is forced to jump to the second line. But if we change it to inline block or inline, then arrow will come back up. The arrow is an image element, and image elements by default are already set to inline block, so that's why we don't need to change it. Let's add the space on top of this learn more link. Okay. All right, now, if we check the privy mode, the arrow is going to be part of the link to. And that's exactly what we need. Finally, we need to give this content a maximum width, so it's not stretching through the entire container. We're not going to touch the container. We'll drop another d block and move all the content inside that. Let's give it a maximum width of 464 pixels, which is just like in our designs. And there you go. That's much better. That's all for now. We'll add the image in the next video, stick around. 115. Webflow 2: Mockup section 2: And we're back in this video, we're going to add the image to this section. As usual, we need to export the image, group the whole thing first and give it a name. We can directly export this SS. If we do, Figma will export the cropped image. You can see that in the preview, but we don't want an already cropped image. We want it to be cropped by the page boundaries itself, more like part hidden away. Just drag a copy of this whole group somewhere else on the page. This will reveal the entire graphic. And now we can export it. We need PNG and two X for Vina resolutions, and then compress the size, otherwise it's too large. As usual, we're going to compress it on image compressor.com or something like that. Let's add an image element inside this container and then upload our image. Select high DPI since we're using two x. All right. Now what do we do? We've already done a very similar thing in the previous website. So a lot of things are going to be quite the same. We need the image to go on the right. As usual, flax box is a great option for this. That's what we used last time as well. To create a flax box, we need an extra day block where we're going to place content and image inside. Let's create a new class. And change the display to flex. Let's set the alignment to center. And while we're at it, let's set the justified to space between. Why? Because we want content to be glued on the left and image to be glued on the right edge. It's not going to change anything at this stage because there is really no space inside the flex box. And the way space between setting works is sort of like a spring. I inserts a spring in between that pushes elements to the sides. But with zero space, there is nothing to be pushed. If we make image small then it will work. It's going to be pressed against the edge of the flex box. If you remember last time, we used a special trick to move image to the edge and beyond it, we use negative margin. So we're going to do the same thing here. But let's bring the image back to its original size first. Now, you'll see that at the beginning, the negative margin doesn't move the image. But then at some point it starts moving. To be honest, I'm not 100% sure why this is happening. It's definitely has to do with the fact that image is so large and it's going beyond the boundaries of the parent. This is why I always advise to never style images directly, drop them inside a deblock and style that instead. You're going to get more predictable and proper behavior because flax box does weird things to images, and it's just best to have them inside their own dedicated diblock, and then it's going to behave properly and you'll understand what's happening and you're not going to have to deal with some weird behavior when the margin isn't moving, and then at some point it starts moving and. But this time, I have used just the image so we can learn from our mistakes. One last thing we need to fix here is this overflowing issue. To fix this, we need to tell the section to clip elements if they overflow beyond the borders. It's simple. We just need to set overflow to hidden. Don't forget, overflow setting is set on the parent, not on the image itself. Let's create a compo class named overflow hidden. We don't want to mess with our default section. And then apply this overflow setting. Excellent, let's double check the preview and responsiveness. And we're down with this section? 116. Webflow 2: Photo sections: In this video, we're going to build this section. The layout is very similar to previous section that we already did. Why not just duplicate it and take it from there? Select the entire section and just do the copy paste control. C control will drop one after the other, the order of the content is reversed. We can change that by dragging the image element on top. And this will place image first. This image has a negative margin applied to it, but this time we don't need it to remove that. We need to remove the class because we can't make any added to the margin itself. That's going to affect the previous image. Now let's replace it with our own image. This time we're going to export a Jpeg because we don't have transparent background. And Jpeg is always better option than P and G in terms of a file size. But still, we're going to compress it in our image compressor. Let's replace the content. There we go. Remove the overflow combo class from the section. We don't need that anymore. Okay, we need some spacing between the two. Let's add the margin to the image. Okay, what's going on here? The content was pushed to the right, off the page. The image is supposed to shrink, but it doesn't. That's another reason why it's best to drop images inside a dip block, especially when dealing with a flex box. I think we've learned our lesson by now. So let's wrap it inside diblock. When I say wrap something inside the dip block, it basically means to place it inside a dip block, add a new dip block, move it on top, and drag the image inside, Create a new class and give it a 60 pixel margin. And there this time image is shrinking properly. Actually, it's not the image, but the image wrapper is shrinking properly. An image element obeys the boundaries of its parent. The next section is very simple. Duplicate this new section, change the order inside the flax box, although in this case we need the margin on the other side. Create a combo class for the image wrapper element. Apply zero on the right and 60 on the left and replace the content. Excellent, these sections are looking great. In the next video, we're going to build the testimonial section. That's going to be fun. Stick around. 117. Webflow 2: Slider Component: All right, so now we need to build the testimonial section. We've decided to use the slider, sometimes called Carousel or just slider or Carousel slider. To build that in Webflow, we need to use a very handy component called logically a slider. In this video, we're going to get to know to the slider component and then we'll finish up the testimonial section in the later video. Let's start with the usual section, container, so on. Then at a heading. Now let's add a slider which we can find just searching inside a quick finder or in the elements panel under Advanced section. This is a slider, a premade component, which has a lot of freedom to be customized. But it does have its limitations sometimes, as almost with everything in wet flow, premade components aren't the only way to create such layouts or components. We could build our own slider from scratch, but it's a bit more work and this premade slider does a damn good job for most of the time. Slider takes up a full width of its parent container. If we move it right on the body outside of our container and the section, then it will stretch edge to edge. Let's see what it's made of. There are four elements inside. First is mask. This is where our slides go. Right now, there are two default slides inside. Of course we're not limited to two. Then we have left and right arrows, which are linked blocks with an arrow. Icons inside the, we have the slider navigation. These are the white dots that you see in the middle. They are clickable and will take you to the corresponding slide. The slide itself is just a good old diblock. Nothing particularly special about them. They can be styled as any other div block and we can drop any other element inside them. Let's change the background of each slide so we can see better what's going on. Let's check that in the preview mode, two slides, red and blue arrows and the navigation dots switch between these slides. Basically what's happening is that there are two P blocks sitting next to each other horizontally. And controls moved between these dip blocks with some animation. That's all. There are multiple ways we can switch between the slides inside the designer by using controls or from the slider settings, which has its own arrows from this drop down where we can select exactly the slide we want. That's how we switch between the slides, so we can edit them individually. We have two options to add slides. First, we can add a new slide from the setting spanel by pressing Add Slide. To be able to see the slider settings, you have to have some element of the slider selected. As you can see, now we have three slides. This has added a new slide block inside the Navigator to. The second option is to duplicate the slide element either by right click and duplicate or the usual control C control deleting slides happens in a similar way. Select a slide either on the canvas or in the Navigator and hit delete key. Since the slide is just a regular block, we can add other elements inside like tags, images, buttons, and so on. We have just added this into the first slide. The second blue slide is going to be empty. We can add similar or different content in the blue slide too. That's the slider. In the next video, we're going to turn that ugly slider into pretty carousel made of testimonial cards. 118. Webflow 2: Testimonial slider: So that's the slider component, but that weblow slider looks very different from our designs. Arrows are different, their placement is different. There are no navigation dots, and we are seeing multiple cards at once. W on this slider element, we only see one slide at a time. But not to worry, we can actually style the slider in a way to make it look exactly like our designs. First, let's add a space between the slider and the headline. Just like anything else, we can style the entire slider element. Which again, is a good old d block with a bunch of other elements inside. Select the slider element, give it a class, and a top margin of 120 pixels. And let's get rid of this gray background. It's part of the slider element two. Go to the background settings and change it to transparent. And let's change the color of the arrows so we can see them. The icons here are text base. So if we change the text color, it's going to update the color of the icons. We don't need those navigation dots, so let's get rid of it. But deleting doesn't work. Weblos we don't need the slider and delete the whole thing with it. There is another way to remove something. Select display none, and it's gone from this space time continuum. Floating somewhere in a different dimension. Next, we need to build a testimonial card. This should be quite straightforward. We're going to drop a new dip block inside one of the slides and build all the necessary parts. Give it a class of testimonial card. A white background and the same dimensions as in our designs. And round the corners. Now we're going to add a box shadow just like in Figma. To see the settings of the shadow, make sure to select a correct object that has a shadow applied to it. In my case, the shadow is on the entire group, not on the white card itself. If you are using a shadow style like I am here, you can unlik it from the style so you're able to see exactly what's going on inside. These are all the values we need to recreate the shadow inside Webflow. I There is an extra value inside Webflow, the size, but you can ignore that one. As you can see the card isn't fully visible, the slider is clipping it. That's because slider has some default height to it. Yes, it does say height auto, which means it should expand based on its content, but it doesn't. That's another case of default value is not being true. So type by hand auto, one more time, and he'd enter. There. Okay, now for the content inside the card, we have stars in the paragraph. We'll need to export the star icons from Figma, export all five stars as one, group them if it's not a single group for you and export as SVG. We need to apply padding to the card. We have 40 pixels on all sides, except the top, which has 60 pixels. We need distance from the stars, which is 30 pixels. A little negative margin to align the stars better. And we need the author block. Explore the avatars as two PNG. Let's set a new D block and organize author details inside. First, the image, then the two text blocks. Give it text block some class and style, the same way as in Figma. Now we need to move the text on the side of the avatar. How can we do that? Of course, we could take the usual path of using a flex box, but we would need an extra box for that, and it takes more clicks. A simpler option is to use float. Remember float, under position, we have dropped down for float and clear. Open that up. There are three options, no left and right float. The consort show what it does. Select left float. This will position the image to the left of the text. And that's all. We need to adjust some spacing now first next to the image. Then between image and the paragraph, which is 70 pixels. And finally, we need to add a little margin on top of the author name in order to center the text with the avatar. Now, let's duplicate this first slide and see where we stand. As you can see, we're only seeing one slide at a time, but we want them to display all next to each other as they fit and slide between visible and invisible parts. The reason we're seeing one slide at a time is to do with the width settings of the slide element. It is set to auto, which means it's going to stretch 100% of its parent container. If we give it a fixed width, then it will shrink accordingly. Let's give it the same width as our testimonial card. If you notice the slide box has shrink now, it's as wide as the card, and now let's duplicate it. Delete the others and duplicate the one with a correct width. And there you go. Now they're aligning just like we want. Let's add margin on the right to create the separation. Okay, let's check the preview mode to see where we stand. We have four slides and they slide exactly the way we want them to. Except for one thing. In our design, the page shows as many cards there are as possible and the rest go off the page. But here they don't. They only show inside the slider component. So how can we change that? If you select a mask element, another d block where all the slides are nested, you'll notice that inside overflow settings, it's set to hidden. This means all the slides that go off the boundaries of the mask, they are clipped. Actually, everything that goes beyond gets clipped. Even the shadows on the cards, if you look closer. To show them, we simply need to change this to visible, and there you go. Now all the cards are visible. But there is one issue. They don't clip when the page ends. They expand the boundaries of the page. But we already know how to fix this, don't we? We just need to apply the same overflow heating style to the section, just like we did with the image of the dashboard. We even have a class for this. We don't need to change anything. Just apply the same class as we already applied in one of the sections. Excellent, let's populate the cards with our content, and then we'll just have to take care of the arrows, and that's it. We didn't create content for more than four testimonials, so let's slack off a little this time and just duplicate the existing content. There is just one thing we need to fix with the cards. Right now, we have content that is all equal height. But what if we have testimonials with different lengths? The card doesn't expand because it has a fixed height. So let's change the height back to auto. So it expands based on the content. In a real project, you should try to control the length of testimonials. This one is fine, but when the difference between long and short cut is really big, then it doesn't look very nice. Testimonials can be truncated, meaning you can cut them short. But if your client doesn't want them to be cut, then perhaps a different layout is needed. Something that stacks vertically. One such option could be mason grid. One thing that I don't like is how slides move. Several of them slide with each click, but I'd much rather prefer if sliding moved one slide at a time. This is simple to fix. The amount of sliding is controlled by the width of the mask element. If we change the width of the mask to match the width of each slide, then we will get a movement that's one slide at a time. Okay, all is looking good. The final thing that we need to take care of are the arrows. For that, we need to learn a new concept, which we're going to do in the next video. Stick around. 119. Webflow 2: Positioning: Welcome back. In this video, we're going to take care of the arrows on our slider in order to put them on the bottom right corner of our slider, like we have in the designs, we need to learn a new concept. This concept is called position. Position is a CSS style that gives us a tremendous amount of control on our objects. This style can be changed from here, We have five different position values, static, relative, absolute, fixed, and sticky. Let's go through each one. I've organized five cards here, and one by one we'll apply to them different position settings to see what happens to static, or also called auto, is a default position of almost all objects. Elements that are static behave the way we already are familiar with it, like a word document flowing from one after the other. Things get a bit more interesting from relative. Relative object is position relative to itself. I know this says nothing to you. Let me demonstrate. I'm going to apply relative to this box. Nothing happens very uneventful, but one thing did happen. The position settings now have a few more controls. We get the similar controls like we have with spacing. We can adjust those values and the box is going to move. We're basically giving the box top margin of 100 pixels. It works in a quite similar way, with one exception. You'll see this exception when I show you what happens when you addit margin Instead of this relative positioning, you see the margin has altered the flow of the page. The height of the parent container was increased because that margin needs to fit into that space. But when you use relative positioning, the flow of document is not touched at all. You can move the object anywhere you like, but in the flow of the document, it's only going to occupy that, its original slot. This is a power of relative position. We have completely moved it out of its own place, but the cards that are nested inside a flex box haven't moved at all. They act like their card is still there. Now, as for absolute position, absolutely positioned object is removed from the flow of the document and it sits on a new layer. Sort like objects inside Figma. In Figma, all elements are absolutely position. They all exist on their own layer. Absolute positioning is often what we use when we need to overlap elements or put them on top of each other. Now, an important setting for absolute positioning is here. Tells us what is this object positioned relative to? We have the same field for the relative element, but that one always says itself, because that's what relative does. It's always positioned relative to itself. And that can be altered. But the absolute element can, it can be relative to any of its parent elements. In the beginning you'll see that it's usually relative to the body element, which means relative to the entire page. For example, if we set the left position value to zero, it's going to be positioned zero pixels from the left edge of the body. Right now, it's not exactly on the edge because this has margin on the sides. If we give it 100 pixel left position, it's going to move 100 pixels from the edge. If we give it a zero pixel top margin, then it's going to move all the way to the top of the page. That pink container is going to look like the box isn't really there. But if we check the Navigator, we'll see that the absolute box is still part of the container. As I said, obsolete element can be relative to any of its parents if we choose to do so. Now to choose the parent, there is a little trick we have to do. We have to change the position of that parent to anything but static. For example, if we want the car to be positioned relative to the pink container, then we have to change the position of the container to something but static usually we change it to relative because that's the easiest way that doesn't alter the flow of document. The instant you change the parent elements position, the obsolete position box jumps back to the pink container and positions itself around that container. If you check the settings now, you'll see that it says relative to parent container. Since we have zero pixel from top, it is positioned on the top left corner. As we change this value, it will move relative to the parent container. Now if we instead wanted it to be positioned relative to some other parent container, for example, the grandparent container, we'll need to change the position from static to something else on that grandparent container. But there is one important rule. It's going to position itself relative to the very first parent element that doesn't have a static position. Right now, nothing happened when we change the position of the grandparent container. Because the pink parent container still has a non static position, the box will continue to be relative to that thing. If we change the position of the parent containers to static, then this will happen. Now as it shows here, is relative to the grandparent container. Has some useful position presets right here for an absolute element, this is a very handy quick way to change the positions. Left top corner, right top corner, top full, bottom four, and so on. You can see that as you change the values below update with it. It's easier to align things visually like that instead of needing to calculate on how many pixels should you put on all four sides. Up next is fixed position. Fixed elements are positioned relative to the viewport, meaning to the visible part of the page. At any given point, choose one of the presets. It will be fixed accordingly. As you can see, the fixed element is exactly that fixed. It's like an absolute object yanked outside of the document flow, not affecting other elements sitting on a whole neal layer. And unlike obsolute object, it's fixed relative to the visible screen. No matter where you scroll it, it will remain fixed. This position is often used for navigation bars. You know how many websites have nav bar that is always fixed on top of the page as you scroll. That's using fixed position. Finally, we have sticky position, which is a little tricky. What sticky does is that it acts as a fixed element, but only within its parent container. Easier to show than explain, right now, nothing happens. It just acts like a regular static element because two conditions need to be met for it to work. First, parent needs to be tall enough so there's space for it to scroll inside. Otherwise, there is no point. Let's make the container a bit taller. Second condition, we need to put some custom value, usually in the top position. For example, we can put zero. Now you'll see that it works. What happens is that it's fixed on the screen while we are scrolling through the parent container. Once the sticky element hits the bottom of the parent container, it doesn't scroll past it. What top value does is that it tells from what point to stick. In this case it sticks. The moment sticky element is zero pixels from the viewport. If we put something like 30 pixels, then it's going to stick the moment it's 30 pixels from the top edge of the screen. For the things that scroll horizontally and need to stick horizontally, then instead of top position, we would use left or right position value. I'm not going to demonstrate this one, because we would need that very, very rarely these are all the positions static, which is the default for almost all elements. And it flows naturally with the document relative, which is like static, but it can be moved from its place without altering the document flow and moving any nearby elements. Absolute, which is the wild positioning of the group. It gets yanked out of the document flow and its position relative to the first parent that doesn't have a static position fixed, which is just like the absolute, but it's relative to the viewport getting fixed to the visible screen. Mainly used for navigation bars and sticky, which is like fixed, but on steroid it's fixing only within the boundaries of its parent container. All right, that's the general idea of positioning. In the next video, we'll take this knowledge and apply it to the arrows on our testimonial slider. Stick around. 120. Webflow 2: Slider arrows: All right, welcome back. In this video, we will finally take care of those arrows on the slider. In the previous video, we have learned an important technique that will be useful in order to properly position these arrows. For starters, we're going to replace the arrow icons with our own icons. We can do that simply by deleting existing icon and inserting image element in their place. Just drag an image element inside the arrow block and insert the arrow image which we're going to export from Pigma. And the same goes for the right arrow. Now we're going to need position feature to place these arrows on the bottom. If you have a look at the position settings, it's already set to obsolete by default, Unlike the usual static position. That explains why the arrows are sitting on top of the slider. That's what obsolete positioning does. It yanks the element out of the page. They live on a different dimension like layers in Figma. This is exactly what we need. Obsolete position, with a bottom right placement, you press on bottom right position, The arrow will be placed on the bottom right corner of the slider element. Now, why the slider element? Because it's the first parent that doesn't have a static position. Remember the trick absolute element is relative to first non static parent. If there is no such parent, then it will be relative to the body. In that case, it would jump on the bottom of the page. If you see it doesn't work the way you expected. Check the parent and make sure it's set to relative. Let's check the design to see the distances. Arrows are 60 pic el below the slider. Now here's an interesting part. We need to add 60 pixels in one of these position values. But which one? Let's try all of them and see what happens. None of this actually work. Why? The arrow is position like this on the bottom right. This means that zero pixels from the right and zero pixels from the bottom. The position values tell us exactly like this. If we add 60 pixels on the bottom, then it's going to move 60 pixels upwards from the bottom edge. For it to move outside of the slider, then we have to go negative values. Actually, it works more like this. It calculates distance between bottom of the slider and the bottom of the arrow block. Often we have to compensate for the height of the element. By the way, make sure you type px next to 60 by default. As you can see, it says percentage. The field is set to percentage value. If you just type 60, it will think you mean 60% Now let's apply the same class to the second arrow so we don't have to do all these changes again. Let's move the left arrow towards the left. We can do that by putting some value in the right position. But before we do that, let's give the left arrow a combo class. Otherwise the changes will be applied to both of them. Again, we are putting value in the right because we are telling it to move away this amount from the right edge. Excellent, let's check the preview and see how it works. There's just one issue. If you take a closer look at the arrow blocks, you'll see that they are overlapping. The boxes are a little too wide. And in the preview, the entire box is clickable. User is able to interact with the empty space. Two, a little bit of interaction with empty space is good. User doesn't have to be so precise at aiming the arrow, but too much makes it odd plus overlapping will cause some issues as these are links. To fix this, we need to change the width of the arrow blocks. Let's give it some size. I think 40 pixels is good. I have styled the right arrow, which has the base class that way both of the arrows were updated at the same time because of the linked base class. There's one more thing we can do with arrows. We can hide them on each end. We can do that from the slider settings. This is actually a better user experience that way. User knows which way they can slide and see when the testimonials have reached the end. We have just one last section left. The footer, we'll do that up next. Stick around. 121. Webflow 2: Footer (Team App): Welcome back. In this video we're going to build the final section of the home page which is the footer. We're not going to build it from scratch, we're going to use Web Flows, Amazing copy paste future. Basically we're going to copy the entire footer from our previous chat app project and paste it in the current project. This is a handy future. It lets you reuse components across your projects and also it lets you copy different elements or components from other people's webflow projects. For instance, Webflow has a library of showcase projects where other webflow designers can showcase the projects they've made. Often if the author allows it, you can clone the project and copy any components. From there. You can either copy entire page or copy bits and pieces You'll find people sharing here things like UI kits or wireframe kits like that. Wireframe kit that we used in Figma. Yeah, interfaces like that can be found here as well. You will have to make kits your own and then copy paste any elements and components as you like. All right, so let's see how this copy paste works. Once you have a project within your account, open both of the projects in the designer, select the element you want to copy, in our case footer section with everything that's inside heat control C or command C. And then go to the current project and select where you want to paste it. In our case we have to select body it past right there and not inside some other section, then heat control. And there you go. Now the entire footer has been duplicated. In our current project, we can edit everything about this footer without affecting the other previous, original project. All the styles have been carried with it and new classes have been created. When you copy classes that have the same name, then Webflow is going to rename this conflicting class just like it says in this message. For example, the class name section we already have in our current project webflow gave a different name to our duplicate section. Another thing you'll notice that once you paste the footer, it doesn't look the same as the original because some of the styles are being inherited. For example, the text phone wasn't carried. It's showing our website font for this project which is Cabin. The font wasn't carried because it is inheriting from the body. In reality, this is exactly what we want. We don't want the front from that project. We want the font to be what's inside our project. All right, now let's style this footer and make it look like our designs. Let's start with the duplicate classes section and container and switch them to our existing classes. Any extra classes that we don't need, we actually can get rid of and clean up inside our website. We can do that. From here, Click Clean Up and Webflow will show us all the classes we are not currently using on our page. And just remove all of them. And if we're not using, that means we don't need them. Next let's create a combo class for the footer section and change the background color. Also, let's change the spacing of the photo section because it's a little different from the usual section. Now let's add the photo links. The color is white with 60% opacity. And we also have to change the hover color to a different blue. Excellent. Now the logo, which is pretty easy. Next footer headlines. This one is a little more interesting. It doesn't have a class like footer links. That's because in the previous project we didn't have a class for the footer headlines we styled in H three tag. Instead, when we copied the footer webflow, just applied H three tag from the current project. We're going to do the same and style that H three. We can of course, create a new class or change the tag to something like H2h4 or whatever. But styling H three seems pretty good. There's an extra space on top of the headline. As you can see, let's get rid of that space. All right. So far so good. We have to fix the margin. On the testimonial section, you see how the arrow is too close to the footer. That's because the arrow is absolute element. It ignores the AT pic cell margin that's on the section and goes on top of it. Don't forget to create a new combo class or you will change all other sections to, It already has one combo class to it, but it's okay. We can have multiple combo classes. Usually it's not recommended because it can get a little confusing, But in this case, it's not that big of a deal. Let's compensate for that extra padding. Finally, let's just update the content. That's all done and we have one thing left, the email form. We're going to do that in the next video. 122. Webflow 2: Footer form: In this video, we have one last thing to do to finish the footer is the e mail form. This title here that say subscribed to our newsletter is not a link, it's just a headline, but same style as other footer links. We need to change this into a regular text and remove that horror effect. This is how we'll do that. Add a regular text block and give it the same footer link class. Now it's not a link anymore, but the Hover effect is still there. To get rid of that, we will duplicate a class and name it something like subscribed text. Now we can go to the Hover effect and get rid of it. Excellent. Now let's create the newsletter form. Let's start by copying the e mail form we already have above and go from there. Naturally spacing is going to be an issue here, especially when we shrink, so we're going to have to make some layout adjustments. The content here is flex box organized in columns. For starters, we can get rid of the width that we have applied to the footer columns, that is making them equal width regardless of the content inside, which in this case, isn't really going to work. There is also an extra empty column, which previously we used to have an equal space between the logo and the links. This time, we're going to have to lose it. And that's an extra improvement. Now, let's change the width of the first column with the logo inside. It's stretching way too much. Let's check what's the width in the design and apply that. Excellent, that might be enough. Now let's dile the form. Now, this form is using classes from the above hero section form, so we need to duplicate every time we're changing something inside, so don't forget that. Let's start with the background color of the field. There seems to be some default style on the field border, so let's change the border to transparent or zero pixels. Remember, the text inside the field is the placeholder text, which can be style from the states drop down. Now, the button is a little more fun. We've decided to have a button that's arrow, and it's on top of the field, not outside of it, so we got to pay for our creativity. Luckily, we have already learned how to use positions so we can make such arrangement. We'll need to do a few things in order to make this work. First, let's turn our button into an arrow. This is fairly straightforward. We are going to put the arrow as a background image of the button. In regular buttons, we could directly insert the arrow inside. But when it comes to foreign buttons, they work a little differently. Here's what we need to do, get rid of the text and the weighting message that's inside the settings of the button, but put something like one single letter. Cannot leave it completely empty because Webflow will insert some default text otherwise. Now remove the existing class and create a new class, something like arrow button. We can easily make the letter disappear by turning the text to transparent color. That's all. Now it won't be visible. Problem solved. Next, export the arrow from FCMa and add it as a background image of the button. We got to change a few settings here. Remove tiling, and position image right in the center. Next, remove the blue background by changing it to transparent. We need to match the height of the button to the height of the field. It's not matching right now because the field has an extra margin on the bottom by default. Change that to zero and the button should match the height exactly. If it doesn't, then check the settings of the form, it's a flex box and something might be up in there, or just change the button height manually just like the field that should do the job. Next, we're going to set button to obsolute position. And align it to the right. The moment you do this, the button might disappear. Now why is that? Because position is relative to the body? We need the position to be relative to its direct parent element, which is the form. Remember the trick, if we change the position of the parent to relative or something else, then the button will position itself relative to the parent. And that will fix our issue. Now, let's give it a test in the preview. Always working fine except one thing. For a very long e mail, the text is going to mix with the arrow. Fixing this is very easy. We just need to add extra padding to the field element. That way text will stop going underneath the arrow. And it. We also need to change the success message to enable the success state, select form block and in the settings click Success tab. Make sure you've selected the form block and not the field. Selecting just the field will show different options in the settings. Now, the box grows wider compared to the form field and alters the entire structure of the footer, not a good idea. To fix this, we can give our entire form block a fixed width, the same size as we have in designs, which is 267 pixels. This will keep the field, the success and error messages all the same size. Now let's dial the rest. The text size is too big compared to other footer content, we should match the font size. And maybe less padding. And we also need to update the content. As for error message, it seems fine as this. All right, check the responsiveness and see how it all looks inside the preview mode. Our home page is done, and in the next section, we're going to learn how to use flows interaction tool, so we can create some animations for our page and bring it to life. Stick around. 123. Interactions: Breathing Life Into Your Website: On the right hand side where all the panels are, there is one dedicated for interactions. What are interactions? Simply put, it's when user interacts with some object on our page. And by doing so, something else happens to this or another object. By using interactions, we can have mouse interact with one element. This is called a trigger. And animate another object, even if it's completely unrelated. This is called an action. Every interaction starts with the trigger. First, we have to select an element that we want to interact with, then select the type of the trigger. For example, interaction can trigger on mouse click or mouse hover, and other options. There are also page triggers, which means we don't have to interact with any particular element. But an animation can be triggered by page related actions. For example, when page loads, each trigger type has its own set of options. For example, mouse hover can be triggered either on hover or hover out. One is when mouse moves on the object and another when it moves away from it. When we build our interaction, we have to specify both of these. What happens on the hover and what happens on the hover out. Finally, you have actions, or in other words, animation. In the dropdown, you'll see there are several presets like fades, slide, and so on. The first option is the custom animation, and this is where the magic happens here. We can specify which element gets animated and we can create an entire set of actions that are timed. We get this time line of animation with a granular control over each action. That's a quick and rough overview of interactions. Don't be alarmed if you didn't catch everything. We'll learn this slowly by doing. In the next video, we'll start with some simple interactions, stick around. 124. Interactions: Card interaction: In this video, we're going to animate these cards right here. It would look really cool if these cards, instead of just being static and just fixed on the photo, if we animated them, I'm thinking something like sliding in from the bottom. In order to animate these cards, we need to change our existing layout a little. The cards are part of the background image right now, and as it is currently that can be animated. We will need these cards as independent images. So let's go to Figma and export them. Cards have a shadow on them. They're not really doing much, let's just get rid of it. If we really want a shadow, we can always add it inside Webflow. We're going to export them in PNG. I've tested this with SPG export, but it came out to be a larger file than PNG. Sometimes that might happen, you might end up with an SPG that is large in size, Just pay attention to it. Also, we need to export the background photo independently. And of course, let's comprise all images. Let's see what sort of layout we have and how we can change this layout. There is our flex box which has two blocks inside image and content wrapper. Inside the image wrapper, we have our current image. Here's what we could do. We can put all three of our images inside the image wrapper Will use obsolete positioning for the cards. That way they will be stacked on top of the background image. Let's replace the current photo. All right, now let's give this images same class and then apply absolute positioning and go from there. Remember the important adjustment with absolute elements. They need a parent with a relative position, as you can see here right now. It says it's relative to the body. We need to be relative to the image wrapper. That way we'll position them exactly where we want. Let's change the image wrappers position to relative. By the way, the second car hasn't disappeared, it's underneath the first one. They are in exactly the same position because we are using the same class. Now we can position cards on top right corner and then move them from there. We can simply look up the values inside Figma. How much are they separated from the edges, and use exactly those values when inputting these values. Don't forget to add x at the end, otherwise it's going to use percentage value and that's going to send card somewhere else. But for some reason our values from Figma just don't work in flow. Why is that? The difference comes from the fact that in Webflow, I'm working on a smaller canvas size which is 992 pixels in width. Whereas my frame size in Figma is 1,440 pixels. On a smaller screen, the main image and the image columns shrink. They are way smaller than the one in Figma. Those distances now are way too big for a smaller main image. However, when I enter the preview mode, I get 1,440 pixel canvas with just like Figma distances here work just fine, and the result is pretty much the same as Figma. Now this is my screen on my laptop. Unless you have an identical screen as I do, you're going to be seeing something different. In your case, your canvas width in the designer might not be 992 pixels and your preview mode might not be 14, 40. But you are able to change them temporarily to the same exact canvas sizes to preview this issue exactly how I'm seeing it. No matter your computer screen size, you're going to have to fix this issue on your side too. Because some of your users will be browsing your side on a screen that's 992 pixels, and some will be browsing them on a screen that's 1,440 pixels. You need to create a solution that works on both of these, and anything in between. To solve this responsiveness issue, we need to use responsive units like percentage, something like 10% on both sides. Let's position the second card in its dedicated place so we can better see what we're working with to do so. First, add a combo class to it and then change only the top position value. The right position value is better to be managed by the base class, since both of those cards will always be at the same distance from the right. Now, the position for the second card is not very consistent between the screens. Why is that? Because the cards don't have a responsive size. They have a fixed size regardless of the screen. On a smaller screen, the top card covers almost the entire half of the background image, but on the larger screen, it covers only fraction of that we need to make the card size responsive to. We can do this easily by giving cards a percentage with percentage sizes are relative to the parent element, which in this case is the image column. The size of the main image is relative to the image column two. When the image column shrinks, all the images inside shrink with it. To match our designs closely, I'm just going to temporarily switch out the main image back to the one we had before with cards on it. And I'll use it as a guide to size the cards and their positions Precisely. You don't have to do this, but it's just convenient for me right now. Let's check the responsiveness. Now, all cards ring proportionally with the main image. And now let's do the same thing with the second graphic. Duplicate the card class. Instead of creating another combo class, it's going to have a different position on the left. Anyways, this time we don't need to change the relative position because the image wrapper is the same class as above and it is inheriting the same relative positioning. Excellent layouts are ready. Now let's create interactions. What we want here is for the cars to slide in from the bottom. When this section is scrolled into view, Webflow has a trigger exactly for that, it's this one scroll into view. Once you select this option, you'll get two settings, one for when it's scrolled into view and one for when it's scrolled out of view. We could create a custom animation for this if we wanted to. Webflow has present animations which works just fine. In this case, we can choose slide animation. We get these properties to fine tune our animation and click on Preview to see what's happening. It's sliding from left by default, we want it to slide from the bottom, which we can change easily from this dropdown. Excellent, now let's check our preview and see how it's working. Scroll top of the page, and go back and forth to the preview mode. This will restart the animation. The card animates way too early for us to notice it. It animates when we're still on the section above. That's because by default it triggers when even just the tip of the card enters the Viewport. Luckily, Webflow has an option to adjust that setting and we can do that from this offset property. Now it's set to 0% If we set it to something like 50% this means interaction will only trigger when the card is halfway through the screen. Let's see, halfway through is usually pretty good trigger for a scroll interaction because users are usually focusing on whatever is in the middle of the screen. This way we make sure cards don't animate. When users still concentrate on something else, it will be very distracting in such cases, and they will barely notice the animation. It'll be pointless. Let's add the interaction to the second card now and see how it all looks. I feel like the second card is a little too delayed. I'd prefer if it animated right after the first one, although not at the same time. However, promptly after, let's decrease the offset on the second card to like 45% That should trigger it a bit earlier. Excellent. Now let's do the same thing for the calendar card with only one difference. To slide the calendar from the left. Somehow sliding it from the left makes a bit more sense. We haven't set up anything on the scroll out of view. If we wanted these cards to slide in every time users scrolled in and out of the view, then we would have to set up a slide out interaction when it's scrolled out of the view. But I prefer this to animate once and then stay there. It's not a sort of interaction that needs to be continuous. These interactions were so simple to set up, but it brought a lot of life to the page. Now page feels a bit more live, a bit more friendly and interactive. Although be careful with interactions because if they're overdone, they might make surely bring worse results than improve the website. One thing is for sure, because the interactions, they take a lot of power on the graphics card and they might slow down a website on a simple interaction like this. That's not a big deal. It's easy to perform and nothing is going to slow down the website that much. However, when it comes to a bit more complex interactions, some might be not even complex. But the way things are arranged and the way the animation is working on the page, it might actually slow down the website if you notice some performance drops. And if you see maybe your page is kind of like jerky or something, is just going to feel slow or not animating fast. Or sometimes your left up might start heating up because some interaction or animation that you set up is kind of running on infinite loop. Or it's just not working very well, then just drop the interactions and drop the animation. Because no matter what, it's always better to have a website that is super fast and performing well than something that looks pretty. Is animated really well, but it's very slow and people just want to get out of there. This was a simple interaction and we used Wefflow's preset animation. In the next video, we're going to build our own customer animation. And that's going to be fun, Stick around. 125. Interactions: Arrow interaction 1: Interaction tool isn't the only way to create interactions on a page. For example, a button changing the background color on the mouse hover is an interaction tool. When doing something simple like that, we don't need to use interaction tool at all. This can be done from the styles panel because CSS alone can handle such things. Anything that we can change in the hover state of the element is going to become hover interaction. This can be background color, size, position shadows, and whatnot. Transitioning from one state to another. As I mentioned before, one of the interactions we are going to build is the arrow animation. I want this arrow to move a little towards the right. When we move the mouse over this link, we can move elements from the style panel. And I'm going to show you how to do that. You don't have to follow along with this because you'll see that we're going to hit a wall with this option. But I still want to show this option so you can understand when it's best to use styles and when it's best to use interaction tool style panel has the property called transforms. Under effect section, we have several options, Move, scale, rotate and skew. They all do what they say. We're going to only touch the move this time as we don't need the rest move will move an element on x, y, or z axis. X and Y are horizontal and vertical axis, but z axis is, to be honest, I really don't know how to explain the axis. I don't think I've ever had a need for it. It's basically for moving an object in a three D space. If x and y is width and height, then z should be something like depth. Most of the time we'll be using x and y. Anyways, as you can see, it's simply moving object horizontally or vertically from its original position. It's what we've already done with the relative and absolute objects. What I had in mind with this arrow is to move it horizontally for about eight pixels. But moving on a regular state isn't going to work, because it will appear like this permanently. We need to move it on a hover, which is quite simple. We do exactly the same on the hover state, but leave the regular state untouched. There we have a little interaction. The transition from one state to another is very jerky right now. To make it smooth like a real animation, we need to add something in the transitions property. Here is why we can't use this basic hover interaction. Because hover interactions from the styles panel only animate the object itself, in our case, the arrow. But if we move mouse over the tax, nothing happens. Hover state affects only the target element and nothing else. But in our case, we want the arrow to move when mouse moves over the entire link block. This is where interactions tool comes in. Hover state is just a CSS property, but the interaction tool adds a little bit of Jovscript to the mix, which gives us an incredible amount of control. That's what we're going to do in the next video. 126. Interactions: Arrow interaction 2: In this video, we're going to build the arrow interaction. It goes like this. When mouse hovers over the entire link block, the arrow will move about eight pixels to the right. When mouse is out, the arrow returns to its original position. First we need to choose the trigger. Select the link block, the entire thing, not just the text or the arrow. Then go to Interaction spanel and click plus, choose mouse hover. We'll get to the screen and the link block will have this icon on top to represent that there is some trigger applied to this block or this element. The same icon will show inside the Navigator as well. It's a good way to keep track of elements that have interaction applied to them. Note one thing, this icon shows up on the trigger, not what's actually being animated. All right, under on Howard we're going to select action, which is starting animation to create a custom animation. Click this plus icon and let's name this animation as something like arrow move. Right? This animation is going to do just that. For it to return to its original position, we're going to build a different animation. This place here is a timeline. Here we can create a sequence of different things happening. That put together creates one full animation. This time. As this is a simple animation, we're just going to have two items here. You see this message on the bottom. When we are inside animation mode, we are able to select different elements on the canvas that we want to animate. We're going to select the arrow and create a new action for that arrow. Under this, we have several different options to what we can do with this object and how we can animate it. In our case, we've already done this. And we need to move, get this new, a little more intimidating timeline. But don't worry, it's quite straightforward. First, we need to apply some value in the move field under x axis. We can move it horizontally. Positive values will move it to the right, and negative values will move it to the left. Put eight pixels. In case you didn't select the arrow proper, no problem. For instance, if link block appears here, you can change it. Just right click on the element and choose Change Target. Once you get this new pink message on the bottom, you can select the new element. The target element for this animation will change. If it's still not working for you, just delete this item and select arrow from start, press play icon to see your animation in action. Interactions inside the designer work only by pressing this play button to see them in action. Either you have to check the preview mode or the live published site. Timing and transition can be edited from here. Right now we have 500 millisecond animation, which is way too slow. And linear easing, which is no easing at all. The line will move from start point to the endpoint with constant speed, this doesn't create a nice and smooth transition. We're going to choose the values that we already played with ease, And 200 milliseconds, 0.2 is same as 200 milliseconds. There are 1,000 milliseconds in 1 second. Play the animation again there. Now it's faster and smoother. All right, we can exit the animation mode and check this in the preview mode. Excellent, that arrow moves nicely on hover, but it stays there, doesn't move back. That's because with interactions, we need to specify what happens on the hover out. Okay, now how do we get back to our interaction? We need to select the trigger element because that's where the interaction is linked to, not the arrow. If you select arrow, you'll see nothing. You select the link block, now you'll see all interactions that are set on it. This shows that you can have multiple interactions set on each element. Click on the interaction to go inside for editing. Now under hover, it shows the selected animation that we created. But under hover out, it's empty. So we need to create an animation for that too. The same way as the last time. Select start an animation. The list now will show the animation that we have already created. We need to create another animation and name it something like arrow return just like last time. Select the arrow and click the plus icon to add a new action. The last animation was moving arrow, eight pixels on the X axis. What do you think should be this time to return to its original position? Zero pixels. Because zero pixels on the X axis is the original position. If you play this animation, nothing will happen right now because it's already in its original position. Let's not forget to change the timing settings. We're going to use the same 200 milliseconds and ease with the transition. Now you can see we have two animations, one for the hover, another one for the hover out. Let's check the preview mode. If that's working as expected, it's working perfectly. Now, how about the rest of the arrows? Do we have to go and do this again for every single arrow? Luckily we don't. You see these trigger settings, the one that says element and class, That's an option to either trigger this interaction only on the selected element or on the all elements that have the same class applied to them. We're going to choose the class and let's see what happens in the preview mode, how amazing it applied to all the links. We don't have to create it for each one. And if in the future we want to make edits, we just have to change it in one place. All right, those are the basics of interactions. There is infinite possibilities of what can be done with interactions in Webflow. You can go and I'll advise to do that, to go to the showcase and you'll see some people make very crazy animations and interactions. And we'll give you good ideas on what can be done inside Webflow and give you some inspiration for future projects. Interactions in the beginning might look a little daunting, but in reality, once you get over that little hurdle, you'll see how simple they can be and how much fun and how many different options you have to creating something very interactive, something very beautiful and fun. And you'll be able to create complex interactions with just a few clicks. Something that would take you probably months of Javascript practice in order to achieve that. Without Webflow, there are more videos about interactions in the advanced part of this course. Something for you to deepen your knowledge and kind of gain a bit more practice. Although what we have already learned is quite sufficient for you to start working on real projects. In the next section, we're going to take care of the mobile version of our website homepage in this case. And then in the section after that, we're going to learn all about CMS and blog and how to add blog to our website, Stick around. 127. Responsive: Navbar (Team App): All right. In this video, we're going to start optimizing the mobile version of our home page, starting with the navigation bar. In the previous project, we made the nap bar fully visible on the tablet. Let's see if we can do the same here. To show the nablns on the tablet, select Nab bar, and go to the settings panel. Here you'll find options for menu icon. When the slider dot is on the tablet, it means the hamburger menu will show on the tablet and all smaller devices. If we move it down, then tablet will be disabled. That's excellent. No need to change anything. All fits very well. Love it when things just work out easily like that. Let's see what needs to be done for the Na bar on mobile landscape. It just colors and some spacing. In the previous project, the drop down was stretching edge to edge, but here it's not. That's because we have a little different arrangement for the N bar. It's sitting inside that hero section, which has padding, and the drop down only stretches as far as the Nap bar itself. We could potentially make a stretch if we wanted to perhaps by using negative margins. But personally, I'm quite fine with it not stretching edge to edge. So let's leave it as it is. To change the color of the menu button, we just need to change the text color of the block. It's font paste icons, so the font color will change it. The same goes for the size. We just need to increase the font size and it will grow. I think we used 30 pixels previously. And let's adjust the padding for the whole clickable button. It's a little too big, ideally would make it same size as the buttons and links on the bar, which are 44 pixels in height, I believe, so if the text is like 30 pixel, then seven pixel padding should make it 44. Now, let's style the open state of the menu in order to show the menu while we're styling, select any element on the NAB bar, and then in the setting stab click Open Menu. Now menu items are clickable and we can select them and style them. The background color is coming from this NAV menu block. So let's select it and change the background to I'd say that our dark blue color that we use on the footer. And same for the background on the menu button. When you make changes to the open state of the menu button, make sure the selector field shows this green open class. That's how we style the open state. Sometimes the menu might be open, but this open state class isn't there, so any changes won't be reflected as you want it. Just refresh the canvas and open the menu again. Let's give it some proper padding. Can you notice why the button is stretching to the edges? It's because the display is set to block, and block elements take up full available width. We need to change it to display inline block, just like default buttons. Now that's about right. But we need to align it on the left. We've had this similar challenge in the previous project. Inline blocks act sort of like text. So if the parent container has left center or right alignment, it's going to abod that alignment. In this case, parent is not menu, but it says that it's left align in reality, it's not. This happens sometimes. So just go back and forth and just apply left alignment manually so the change is reflected. And also, let's add some left and top margins to align the button properly. All right, that's better. Finally, I'll make corners of the backgrounds rounded. It will give a bit nicer look. We don't need it on all four sides. For the menu button, we need it on top corners. Click this option to add it individual corners. For the NaF menu, we want it all corners besides the top right corner. That way button and menu will connect nicely, like a single object. That's perfect. Now, let's just see how it looks in the preview mode. One last thing, you see the logo here has a little bit of padding. This padding isn't there on tablet and desktop versions. Webflow is inserting it on mobile versions. We don't need that padding because we have our own, so just get rid of it. All right. Moving on to the portrait version. There's actually nothing that needs to be adjusted for the bar. The paddings need to be fixed, but that's part of the hero section. So we're going to do that in the next video. 128. Responsive: Hero section: And we're back in this video, we're going to adapt hero section to the different devices. There isn't a lot that needs to be done, so it should be quick. Let's shrink the height of the hero section on the tablet. It's too tall in this case. Something like 680 pixel should be good. And we need to adjust the margin of the content so it's centered again. Hundred and 30 pixel looks good. Moving on to mobile landscape. At first, it looks like there's nothing that needs fixing here, but we can forget that we're not seeing the true mobile landscape here. This is too tall. To visualize this properly, the best is to check it on an actual mobile, but we can shrink the height of the browser to give us a rough idea of what we are working with. This is something how it will look like. Nothing is visible here. Vertical spacing is crucial on mobile landscape, so we need to make our content snug and tighter. First, let's cut down on section padding. And remove the fixed height of the hero section. We want it to be automatic in this case, so to be only as tall as the content. Okay. Similarly, let's cut down on horizontal padding. On smaller devices, space is scarce. I'd say 30 pixel padding on the sides instead of 60. Next, we should shrink the phone size a little or default H one size is 55. That can be a little too big for mobiles. I'd go with 35 or 40. Remember that heading style is coming from the H one tag. To addit H one tag on all mobile landscape, first, remove whatever class is applied, and then from the dropdown, select all H one headings. You should get that same landscape icon on the left. That's important. This way, we know that we are affecting all H one for mobile landscape and down and not tablet or desktop. Once down, we can put that white class back. One last thing for the landscape view. The content and background image are interacting now much more. In the above versions, content is on a blurry plane area, but here it's covering the model's face. This makes text difficult to read. First, let's move that word to the next line. But that's not enough. So we're going to add a dark overlay on the background image. 30% seems enough. And that's done for a landscape view. So portrait needs a couple more things. First, let's change the direction of the form to vertical so that field is on top of the button. This is quite easy because we have set this form as a flex box. So all we need to do is just switch the direction. Make sure you're selecting the correct element. There is form and form block. Second, we need to fix the hero background. This is where that custom positioning comes in handy because none of the preset alignment work for us. I think 55% does a better job. Okay, let's check the fluidity. Whoops, the field isn't stretching all the way because it has a max width. So let's remove it in this case and set it to none. That will make it as wide as the parent. Keep in mind that any style changes that we make on this versions only affect downwards and not upwards in the hierarchy. So this field is only going to be reflected on the mobile portrait and not on landscape, tablet, or desktop. All done for the hero section, let's give it a go in the preview mode, making sure everything is looking nice and working properly. Excellent. We'll continue with following sections in the upcoming videos. 129. Responsive: Mockup Section: And moving ahead with the next section. For the tablet, it's quite easy. We just need to move that image more towards the left. When you click on it, you'll see that it has a negative margin. That's what makes it move out of the page so much. Let's decrease the negative margin. I think this looks quite good. -350 pixels. Check the fluidity, and that's it. Now for the mobile landscape, let's start by section padding. We've made horizontal padding smaller on the hero section. It's 30 pixels. We've never matched that with the rest of the sections. We can't make the change on this section directly because it has a coboclass applied to it. If we shrink the space, it's only going to apply to this compo class and none of the other sections. So what we can do is either select another section that doesn't have a compo class like the next one, for example, or we can get rid of the compo class for a moment. Style that section, and then put the coo class back in. But that's more complicated. So let's just style this section below. And of course, that has applied the padding on the above section too. Similarly, we can change the value that is more appropriate and decrease it to something like -260 pixels. Again, check the fluidity. One more thing I'd like to fix here is the vertical padding on the section. On landscape mode, vertical space is very limited. If you can imagine that you're seeing this on an actual mobile landscape, you'll understand that you'll have some gaps where you're not really seeing much content. One thing to note about mobile landscape view, it's not just mobile landscape, but also some tablets in flets or whatever they are called because you'll see in the viewer, it shows different sizes for different devices. So it's not just mobile landscape in reality, but we call it mobile landscape just to make things easier. Okay, so we have 80 pixel vertical padding on our default sections. I'll shrink this to like 60 pixels, just like we did previously select a section that doesn't have a convo class and style that one. Okay, moving on to the mobile portrait. The image on this section isn't even visible. So what we're going to do is change the direction of the flex box to vertical. There's another direction we can change. We can reverse the order inside flex box, and having image first makes more sense. And now we can style the image. One issue is that image is too small, so we should increase the size. Increasing the size of the image has some dos and don'ts. We can't change the width from the image settings. These are global image settings. So if we change the size here, it's going to affect on every single screen size. See now image is gone from the desktop. So the ideal place is to style it from the styles panel. In here, there's another don't. Don't style the height. When you style the height, it doesn't preserve aspect ratio and you get a spaghetti image. The width values are the best option, but here too, some things will behave oddly. Depending on the situation, either fixed width or minimum width works the best. For example, regular width value doesn't change the size. But the minimum width does a pretty good job. Not that this is a bug or some sort of a glitch, there's usually an answer to such mysterious behaviors. In this case, width doesn't do much because there's a maximum width of 100%, which is telling it to be only as wide as the parent container. It's basically overriding the width, but minimum width ignores that because it comes before the maximum width. Don't worry if you're not catching all this. I don't usually worry too much about the reasoning. I just play with values and see which one works. All right. I'd say 380 pixel looks good. Now we need to fix the negative margin, maybe align the edge of the image with the content. Okay. Something like -90 pixels. And let's add some margin on the bottom. Perfect. Let's check the fluidity, and we're good to go. I don't worry too much about the screen sizes, less than 320 pixel wide. That's just such a rare occearnce especially for our target audience who are modern teams. I don't think any of them own Nokia in 95. Besides that, fluidity looks great. We'll continue with the rest in the next video. Stick around. 130. Responsive: Body: Picking up where we left off, we're going to tackle the responsive versions of these two sections from the body. We have to make some space in this section. There is not enough space for everything to fit. For starters, we can shrink the space between the image and the content, say 60-30 pixels. Next, we can let these images go off the page. In reality, just like the mock up above. There's no reason why we can't do that. We just need to set a negative margin. That actually looks pretty cool. Okay, that's still not enough. The image is too small, and that's because content is taking up way too much space and pushing the image to shrink. What we can do here is to set maximum width of the content so it doesn't grow beyond certain point. First, let's rename this class to a content wrapper so we know what we're working with. This class is shared between all three content blocks. Now we can give the content wrapper a maximum width of something like 50% That should create a more balanced look. Actually, on the desktop version, the content is growing a little large too. I haven't noticed this before, but this image is a bit too small on the narrow desktop screens. It's fine on the larger screens, but it would be nice if we increased on the narrower desktop screens, like my 992 pixel canvas here. Now we can set 50% maximum width on the desktop because for larger screens that will be wider than what we currently have. I'll just increase the current max width in pixels to something like 410 pixels. That now gives the image a little more room to grow. 50% max with, in this case is clearly not enough. Let's increase it a little so we can fit the content properly. I would just move the image a little to the right so the more of the girl is visible. Now, moving on to the mobile portrait. The layout here is already vertical. Why? Because we're using the same flex box container as above. And when we style it above, the same vertical layout was applied to it. We just need to reverse the order. We also need to get rid of the maximum width on content wrappers. Since we want content to fill the full width, this time, select none from the dropdown, we just need to adjust the image. Here, I'll decrease the negative margin to something like -30 pixels and add a little bit of space underneath so it's not glued to the headline and zero pixels on the right side of it. That's all the fluidity is, looking pretty good. Let's now apply similar adjustments to the second section, starting from tablet, as we haven't touched any of it. First, the image wrapper, we need same margins as above, but opposite directions. As you can see, there is this overflow because of the image that is going off the page. So we need to apply that combo class we already have for the overflow section. That's all mobile landscape is doing great on its own. Now for the mobile portrait, we need exactly the same spacing as the image above. The same style wasn't carried on this one because this image wrapper has a combo class applied to it. And left right margins are overridden by that combo class. But not the bottom margin, that one was carried to this element as well. There you go. The mobile portrait looks great. Check the responsiveness. Check the preview mode for animations and all that. Make sure everything is looking good and working fine. In the next video, we'll move on to the testimonial section. 131. Responsive: Testimonial & Footer: The testimonial section is relatively simple, for the tablet, it's good as is. I'll shrink that space between the headline and the slider. Half of that should be good. Mobile landscape is pretty good as well. Now, on portrait mode, we need to change the width of the testimonial cards. Obviously, we'll be able to fit only one card at a time. The width is being set by the slide element. If we change that from pixel value to 100%, then it will be as wide as the parent container. So basically stretching from edge to edge. But what would be nice is to show user that there are more testimonials, and it's not just one lonely testimonial that is sitting here. So if we change the width to 90%, then that should bring a part of the next card in the visible screen. That's great. But the content is a little too narrow, so let's make some more space for it by shrinking margins and paddings. First, we can half the margin on the right, so more of the card shows from the next, which means we can increase the width of the slide more than 90% to maybe 95%. Now, for the padding, And that's all up next, the footer. The footer, if you remember, we didn't create from scratch, we copied it from our previous project. The best part about reusing your components across different projects is this. They are already optimized. Altho responsive changes we have made to the first project, they're going to be carried with the component when you copy them to a different project. No need to do it again. Such a time saver. Although we do have to make a couple of adjustments because we did change the layout of the footer, like this spacing issue, for example. Probably in previous project, we had a little different plan for this, but here, if you check the desktop version, columns are distributed equally from edge to edge. This is a pretty good layout for the tablet as well. So let's reset the style, so it's inheriting from the desktop version. Now, on the mobile landscape, perhaps we could change the justification back to left. The columns are a little too scattered apart. We can go an extra step and try to align the company column with the subscribe column below. We just need to shrink the width of the logo column. And that alignment makes it look nicer. Inside the mobile portrait, let's return that first column width to the original size because there is space and that tag line looks better on two lines. The subscribe column is now buried on the bottom of the footer. That's not really the best arrangement. It would be better if we brought it to the top because nobody's going to bother scrolling all the way down for it. Now, here's how awesome flexbox is. Flex has their own set of settings. There are some sizing settings that each child can overwrite the general flex box sizing settings, and also we can overwrite alignment and order. So if we change the order of our last column, we can actually make it f But we don't want it exactly first. We'd prefer it came after the logo column. But not to worry, we can do that, too. We just need to give the logo column the same order style, and it will pop back on top. When you do this, make sure you have a como class applied, otherwise, this change will apply to every single photo column, and that won't give expected results. I haven't applied anything because we already had combo classes on both of these first and last columns. All right. Let's check the responsiveness. Okay. We have this overflow issue with the email field. The fixed width of 267 pixels is too much on that tiny screen. So instead of fixed, we can change to maximum width of 267 and change fixed value to 100%, so it stretches when it has space. Excellent. Oh, looking good now. That's it. The homepage is done, and it's going to look great, no matter the device or the screen size. In the next section, we're going to build a blog which is done by a super powerful weloCMS and we're going to learn all about it. It's going to be fun. Stick around. 132. Blog & CMS: Going From Static to Dynamic Website: So far, we've been building a static website as opposed to a dynamic website. This probably doesn't really tell you much. Let me explain. Let's say we have an article page for our blog. When we need a new blog post, we can simply duplicate this page and change the content, no problem. Now, what if at some point we decide that we want to make some layout changes to this article page template? Well, no problem. We can copy those changes to the second article page. And when you have 100 article pages, then you're ready to give up your web design career. This is static content. Each page is independent from one another and content of that blog post exists only on that particular page. Enter dynamic content. This time, content doesn't live inside each page, They now live in the database, neatly organized, sort of like in a spreadsheet. And then anywhere on the website, we can reference any of these database items and pull them to display on the page. This database is called CMS, short for Content Management System. I know very sexy name with dynamic content. We have only one article page template, a master page. Within this master page, we can reference those database items each time any article page loads. Webflow will pull appropriate content for each item. Now if we make any changes to this master page, it will instantly reflect on every other page, even if we have 5,000 of those. That's the power of Webflow, CMS, and dynamic content. We're going to learn all about it in this section. How to create CMS items, How to create master pages, how to reference the CMS and so on. Stick around. 133. Blog & CMS: Webflow CMS: Before we start designing and building our Master Blog post page, we have to first create a database for our blog. That happens from Webflow CMS, which we can access right here. There is a link to video tutorials by Webflow. They have this place on the website called Webflow University. There is great content there, and they cover every aspect of Webflow. I'll definitely recommend to get familiar with it. They have both videos and written articles. So the CMS or the content database of our website is broken down in what's called collections. Imagine a collection as an independent spreadsheet. Let's say if we had a very large website like demi, we would have one spreadsheet for all the courses, one spreadsheet for all the blog posts, one spreadsheet for all the help and support pages, and so on. Let's create our first collection and see what happens. In our project, we need a collection for blog posts. That's where we will keep our blog posts with the headlines, images, tags, et cetera. Here we have some options to name the collection, some settings, an important part creating fields that will be part of this collection. Again, think of this as a spreadsheet. When you create a new one, it's empty, so you have to add new columns, right? And you'll title these columns like headline, body tags, Ral to the image, et cetera. That's basically what this is. And each row is part of one group that makes a particular blogpost. Webflow here has collection templates. It's to help us get started on some common collections that we might create. Needless to say, first one is blog post, probably the most common collection for everyone. Once you click on it, Webflow will create new collection with some needed items to get us started. Let's go through each one and edit them as we need for our blog. First, we have collection name. This isn't a big deal, what you name. It's internal and not visible to the public. Webflow named it blog post, which we can keep. Next is Collection URL. This is how the URL of each block post will be structured, just like it's showing in the example below, is the word that comes right after the domain. Here I prefer using the word blog. It's much more specific than the word post. It's a bit more common to use blog rather than a post. And now the important stuff. This is what each of our blog posts are made of. Each field is a type of content. There are many different types of content. For example, there is plain text, there is rich text. Worry about that later. There is image, there is a color, there's a switch to turn something on or off. Let's actually look at our block post and see what sort of fields we need. So first, we have a headline, right? That in Webflow is same as the name of the blog post. Well, it's not exactly the same, but we can turn it into a headline and making the name and headline the same thing. Help text underneath is for us and for the team members who are going to create new blogposts. No need to put in here anything. The title headline says it all. Then we have an author and a date. We'll worry about the author later. For the date, we actually don't need to add any extra field. Every new block post that we create is going to come with a creation date. That's why it's not included inside this list of fields. Moving on to the next, we have a main image of a block post. Webflow has already included such field. We can move it on top after the headline to follow the order. The order doesn't really matter. It's just for us. Next in our blog, we have body of the post. Weblo has included a field for that, too. This field has two extra options, minimum and maximum characters. That's if we need to add some sort of limitation to the content of our blog. I'll say no need. And finally, again, we have an author which this time has a little more information on it. We'll worry about the author later. We're going to create a separate collection for authors. Post summary isn't really on our blog page, but we will need it on our blog homepage where we show all of our blog posts in cards. On post summary, it's a good idea to limit the number of characters. Cards have a very strict layout, so we don't want a summary to be way too long. In our designs, we have used a summary that is maximum three lines. That is about 140 characters long. Now as for the thumbnail image, that's something that goes on the block card. We can have that as an independent field or we can just reuse the same main image. We'll make it easier to create new block posts, less things to upload. Feature and color, we don't really need them in this case, so let's get rid of them. And there you go. We have four fields that is going to make up each of our block posts. On the right hand side, we have editor preview that shows all these four fields that we have in our collection. This form is what we will fill out each time we want to create a new blog post. Okay, click Create Collection to finish this step. And that's all. Our Block Post database is now ready. So to recap, we have this ability to add a database to our website. In other words, a CMS, a content management system. Within this database, we have an ability to create many different collections. Collections are sort of spreadsheets that will hold all the content that is part of it. For example, block post, that's a collection and all blogposts going to one spreadsheet. Each block post is made of certain content like headline, main image, and body of the post. These are called collection fields, and we have full control over this, what we add and what we remove. In the next video, we're going to add new blogposts to our CMS Tick around. 134. Blog & CMS: CMS Items: Our database for Block post is ready. Now we can start building and adding new blogposts. To go back to the Block Post collection, click on the CMS and then Block Post. Make sure you don't click on the gear icon, that's going to take you to the place to edit the settings. This is one place to add new blogposts, but this can also be done from the editor. We can add new block posts from this blue button. Webflow actually has this option to generate some dummy content for us. Give it a few seconds and you'll get this. If you click on one of these, you will open up the blog post. Here we can see all those fields we created previously. This time, all filled with some dummy content that Webflow generated for us. There's a headline and there is a main image. We have a post body and the post summary. All of that is editable even after we publish and make our post live. Let's create a new blogpost from scratch so we can understand how each of these fields work. We can use content from our designs. So let's go ahead and fill out each of these fields. When you enter the headline, it will automatically be used as the URL. If you want to have something different for the URL, no problem. You can edit this URL right here. I keep headlines and URLs always the same. Just makes more sense that way. Then we have the main image. And I'm going to upload this image right here. Now, the post body is a special kind of film. It's called rich text. We can put headlines in the text, subheads, images, videos, quotes, bullets, and that sort of stuff. We have different types of headlines. We have images. We don't need individual fils for all this stuff. One rich text filled can take care of all the content like that. And within this rich text field, we have a lot of freedom to style text in different ways or add youtube videos right between the text. This event has some layout controls to display the video in many different positions. Although this isn't really how the final result will look like, the final result depends on how we style this block and more about that later. Lastly, we have a post summary field, which is this. Click Create and will be added to the database. The status has this message staged for publishing. It means next time we publish our website, all those blog posts that are pending will go live. But in our case, they actually won't go anywhere because we have only created a database. We haven't created a blog page that is going to pull this content from the database. We shall do that in the next video. 135. Blog & CMS: Collection page: So we've created a database for our blog, and that's all cool, but where on our website is that visible? Where are those blog posts besides it being tucked away somewhere inside Webflow? Well, right now, nowhere, but in upcoming videos, we're going to bring them to light. The moment we create a new collection inside CMS, a new page is automatically created under Pages Panel. On the top, there are static pages. That's where our homepages and any other page that we create that is not part of the CMS. On the bottom, we have this page called CMS collection pages. These are master pages that can be populated by dynamic content from the database. Right now, we have one page, blogPost template. I call it a MasterPage Webflow calls it a template. I somehow prefer Master Page kind of makes more sense. Each CMS collection gets one such page. Right now it's completely blank, just like any other new page we create. But this page is going to turn into our blog post page from our designs. It works the same way as any other static page with only one difference. We can bind elements to the database items. Let me demonstrate. For example, we have a headline on our blog post, right. Let's add a headline. If we write text ourselves inside this headline, then this content is going to be static, just like any other page. But because this is a CMS page, we have an extra option under the settings of this headline, a purple dot next to the text field. When you click it, you'll see something familiar. Some of the fields from the collection settings. Headline post summer in some dates. Since this is a headline, we can select the headline and voila. Now this headline element isn't static anymore, it's dynamic, and it's pulling content from the database. Let me add the other two fields, the image and the post body. Just like we did for the headline, for the image, we have to add an image element. We cannot populate a headline element with an image or a div block with a headline. The field types and element types have to match. Well, not exactly match, but be compatible. For example, headline field inside our CMS is plain text, which is compatible with any sort of text element, be it headline, text block or paragraph. Okay, so the same thing we're going to do with image, click Image settings, then that purple dot. Here we only have one option, main image because that's the only field in our database that is compatible with the image element, which makes sense. Moment I select the main image field, it will bind and pull the content from the database. Let me just shrink this a bit. Let's add last CMS item, post body. This field in CMS is a rich text field. We never had to use rich text elements so far, and now I can bind this rich text element to the post body field in our database. And there you go. It instantly gets populated with the content that is inside the CMS. Now, this headline image and text is part of the same blog post. Which one shows here it doesn't really matter. Once we publish this page, all those log posts will go live and each one of them will pull their own headline, their own image, and their own text. On the top toolbar, we have this option to go through different blog posts and see how they look like. Remember this one, it's the one I created manually. Right now, it's all quite ugly, but we're going to style and build our page as we usually do. Dynamic content doesn't affect the way we do the designing of the page. So to recap, for each collection that we create inside CMS database, Webflow automatically creates a page for it. This page, unlike other pages, is a dynamic page. It has an ability to bind with fields in the database and pull content from. Only compatible fields and elements can be bound together, for example, image fields with image elements or plain text fields with any type of text element like headline, text blog, link, et cetera. In the next video, we're going to start building and styling this blog post page. 136. Blog & CMS: Navbar & headline: In this video, we're going to start building our block post page. To access this page, you go to the pages panel, and on the bottom you have this page with a purple icon. That's the one I've previously added all this content here. But I'm going to completely get rid of it and start from scratch based on our designs. First thing we need is a navigation bar. We're not going to build it from scratch, obviously. We will copy it from our home page and take it from there. Switch back to the homepage. Select the entire navbar element. Make sure you're selecting the whole thing and not just the container. Glad control C. Then go back to the block page and paste it there. When you paste an object, click on the canvas first or you'll get this error message. Webflow needs to know where exactly are you pasting your element. There we go. Well, nothing's visible right now because our navbar is white. Let's just style the elements inside our navbar, just like in our designs, starting with links. Right now they are white, so we need to have them dark to do so. We need to apply a combo class first and then style it. Otherwise, it's going to change the original two on the home page. And then apply the combo class to the rest of the links. Same for the Nap button. We need an extra Compa class. I know I usually recommend to not have more than one, but it's okay every once in a while. From technological standpoint, there's nothing wrong with it. It's just for us so that things don't get confusing and cluttered. The buttons background is our primary blue with 15% opacity. Lastly, the logo which we need to export from Figma, it's glued to the edges on our home page. Nab bar is sitting inside the hero section, which has padding. That's why it's not glued to the edges there, but here it's outside of that section. We could put it inside the section here too. But a better option is to just create a combo class for the Nab bar and add padding directly on it. That's all. The navigation bar is ready. Moving on to the rest of the block page, we have a headline image, the content. As usual, we're going to start with a section and a container. The section is gray, that's what we are using on the home page. But for the block post, we've decided to go with plain white. The thing with block post is that you want maximum readability. It's a lengthy content and if the contrast isn't enough or there is some decreased readability for some other reason, it's really going to hurt us. Making a white section is simple, just a new combo class, and that's all. Make sure to use some other name. Preferably something specific to the base class, like white section that says a lot more than just white. And we make sure it doesn't conflict with any other class. All right, now let's add a headline. We already know what to do with this headline, right? We're going to bind it to the CMS item. Excellent. The boundaries of our block post in the designs is a little different. We're using a more narrow layout with the maximum width of 700 pixels. The maximum width of our generic container here is 1160 pixels. That means we need to create a different container for our blog post. Let's give it a compo class, or maybe even duplicate the class and give it a maximum width of 700 pixels. All right, that's looking good. Next we have author and date segment, but we're going to do that in the next video. 137. Blog & CMS: Author block: In this video, we're going to build that author and date row below the headline. I think the simplest approach would be to use a flex box for this. Let's add a new empty D block and give it a class author and date. Then let's add an image. Next, we need the name for the author. Add a regular text block. Give it a new class. Style it just like Figma. We need to change the justify property to something like center. Next, we have this divider. We could use a line bracket for this or just a block with width and a background color. But I think line bracket is easier. I think that's what we are doing in ways. We just need a different color for it. And then the date, let's just reuse the same author text block and even keep the same class. The date is the published date of this particular block post. We can already bind this to the CMS. We didn't have to create the date field because every CMS item comes with it. We even have three different date options here. In this case, published on is what we need. But as you can see it disappears. That's because we haven't published our website or any of the block posts yet so that date field is empty. Let's use a different date field, may be created on or updated on, and later we can switch it back to publish. Or keep it that way. Update is a pretty decent date indicator too. With dates, we even have an ability to change the date format. This will matter based on where our target audience lives. All right. The distance between divider and text block is 30 pixels. We can adjust that on the divider itself. Actually, on the right side, we only need 15 pixels because there's already a 15 pixel margin on the left of the date. And lastly, let's add a margin on top of the whole thing to separate it from the headline. All right. All that's looking great now. Here's the thing. This author that we just created, this is a static content. When we publish our blog post, all of them will have the same author. But that's not right, is it? For an independent blogger? Sure, it's always the same author. But for a company website, there's always going to be more than one person creating blogs for the website. We need this author information to be dynamic as well, but we haven't created CMS fields for this, so we cannot bind it to the database yet. We're going to do that in the next video. 138. Blog & CMS: Reference field: As we previously discussed, author elements right now are static, same author image and name for every single block post, even if there were 5,000 block posts. We need to change authors into dynamic content. That way we will have multiple authors and choose one for each block post. There are two ways we can turn author into dynamic content. One is to add an avatar and author name as fields to our existing blog post collection, something like this. Then each time we create a new blog post, we would have an ability to upload author image, name, or any other author related info. Then we would bind those fields on our page and done. But this means for new blog posts, we will have to enter aor information, upload an image, put their name. If you want their bio or other information, then all that too, and repeat the same process for the next post, even if the author is the same. Luckily, there is another option. We can create a separate collection for authors. Just like we did with the blog post, we can create a CMS database for aors where we would save all the aors with their profile photos, names, bios, contact info, any other information. And then we can pull all that information from the database into our blog posts. Alright, so let's create a new collection for the authors. Click here to create a new collection. Webflow actually has a template for authors as well, but we're not going to use the template this time, and we will add fields from scratch so you can better understand how this works. So for starters, we need a name. Anything works here, this is internal. Although it will automatically pre fill the URL with the same name, but we can change this. URL is public, and it does matter what we put there. I like using a singular form for the URL because then it would go something like author slash John Smith, and that sort of makes more sense than authors in plural. For the fields, what do we need? Obviously the name, which is already there. Then we have an avatar or in other words, profile photo. And also on the bottom of our blogpost, the author segment also has some little biography. Let's add these fields. When we add new field, we have to choose what type of field it is, the field and information will be affected by this. In this case, we're going to create a field for the avatar, so obviously that's going to be an image type. We can make this field required. So anytime we're adding a new author, we make sure that there is always a profile photo uploaded. Next, author bio, pretty straightforward. Again, a plain text. We have an option for single or multiple line field. You can see how the field changes in the preview mode with multiple line, and this depends on the company, but we could put maximum character count for the bio. It is a good idea. This way, we're not going to have an author with a biography that is two pages long and another one that is one sentence. And create collection. That's it. If we need to edit or add more fields to this collection, no problem. We can always do that later. Finally, let's have weblo add some dummy items to this collection. It might need a little refresh sometimes to show up. Alright, our collection is ready. Let's connect it to our elements on our page. Except we can do that right now. There is no option for Avatar and author name. Why? Because this is a completely independent collection that has nothing to do with block posts yet. So we need to create some sort of link between these two collections, and that happens through reference fields. It's just another type of a field inside the collection. Let's go back to the block post collection, click the setting icon, and we're going to add a new field. And choose a reference type. Now, what this type of element does is that we can pull information from a different database, in our case, the author collection. And from a drop down, select an appropriate collection, which is authors. Make it required and save. And save the collection too. Now, let's go into one of the blog posts, and you'll see that we have a new field which is an author dropdown. And this dropdown is looking into the database of aors and pulling information from that database. So we don't need to upload author information every time we create a new blog post. Let's go through all the blog posts and pick an author for each one. Now when we go back to our Master page for the blog post, we will have more options in the binding settings. There is a whole new section with filds from the author collection. Again, these filds are shown only for compatible elements. Avatar isn't here, but avatar is definitely available for the image element. Select author name here and Avatar for the image. Now, as we switch between different blog posts, the authors update accordingly. There is one issue with the avatar, though, but we're going to take care of that in the next video. 139. Blog & CMS: Object Fit: We left off here where the avatar isn't looking at its best. That's because we haven't styled the image in a way that it looks same no matter what type of photo we upload right now, it changes the shape based on the image itself. The image that we had before from Figma was already oval and right size. That's why no styling was required without proper styling. Then we would have to upload already crop and oval images, and leaving that up to content creators and clients is a bad idea. First, it adds extra work. Second, we would have to teach them how to do an oval crop and just leaves a lot of room for error. The best thing is to style our image placeholder in a way that it looks great no matter the image that's inserted inside. First, let's make it oval. We do this by rounding corners of the border, then we need it to be the same width and height. We can either apply this value inside image settings or in the styles panel. All right, the shape is good, but if you notice the image inside is stretched. And it's the case for all the images that don't have equal dimensions. Meaning if the width and height of the original image file isn't the same size. How do we fix this? Css and wefflow has a handy property for this called object fit in wefflows shortened to sim. All we need to do here is to apply cover under this fit property. The settings are quite similar to what you see inside background styles. Cover here works exactly how it works inside background images. The image covers the entire space of this element and the excess amount is simply corrupt. This even has the same position settings, just like background styles, in case you need to change the position. But in our case, we need it centered. Now we have the best solution, which is going to work with all image forms and shapes. Content creators are free to upload anything they wish. That's all done with a header of our block post, stick around for the rest. 140. Blog & CMS: Main image: In this video, we're going to add the main image and then again bind it with the CMS field. Although this image is wider in our designs, it's wider than the container for the content. It's 900 pixels instead of 700. This means we can't put this image inside the same container as a headline. We need a different container for it. So we're going to add a new container Give it a new compo class. And move the image inside there. There, now that's about right. In our designs, there is a certain height to the image, which makes it look more pleasing and right now it's just growing and shrinking based on the original image. That's going to create a layout that is not uniform, and in some cases, very odd looking. For example, if we upload a big vertical image, that's going to fill too much of the page pushing the text down. This is again the same problem we faced with the author Avatar. Just like the last time, we can solve this issue using object fit property. First, we need to give this image the width and height that we desire for height 450 pixels. But what do we do for the width? We can't give it 900 pixels because it's not always 900. When screen shrinks, we need it to shrink. Now, technically, we can do that because image already has a default setting of 100% maximum width, so it will still shrink. But I prefer to use a relative value and give it 100% width. This will make the image as wide as the parent, which in this case is our modified block container. As it happened with avatars, we'll get this deformed image because we are changing the aspect ratio of the original image, which we're going to easily fix by changing fit to cover. Perfect. This is now uniform for any type of whatever the form or shape of the image or the size, and it's going to be the same position and dimensions, and it's just going to look great. Lastly, just add a top margin to the image to match the design. That's it. Up next, we'll work on the body. Stick around. 141. Blog & CMS: Rich Text: Up next, we need to add the post body. Adding this is relatively simple. We just need to drag a rich text element, y rich text because that's the field type inside CMS. We need to add this inside a different container. The image container is wider than the rest, so we need the same container that we created above for the header and drop rich text inside that. All right. That's better. And let's add a bottom margin to the image element to create a separation. Bind the CMS field like you do with anything else. Now, here's a fun part. We need to make some style changes to our rich text element. For example, match the text color to what we have in designs. We decided to go with a darker color in the design, and also we need some spacing between different paragraphs and different textiles. Let's start with the color. The obvious way would be to give it a class and change the font color. This does style some of the text, but not all of it, especially not the main one, the paragraph. The paragraph has its own style, and it's being overridden by the paragraphs HTML tag, something that we styled early on on our home page. Since reach text is just a parent element, a paragraph, which is a child element can overwrite any of the styles from the ach text. This means we need to style the paragraph directly. But right now we have no access to it. Once it's connected to the CMS, we can't select individual elements inside. We can disconnect it from CMS from here, but this then deletes all the dummy content it had inside it. So we're just going to keep this one connected and add another static rich text so we can style it as we like. First thing we need to do when styling a rich text is that we need to apply a class to it. This is important and you'll see why in a bit. Let's start with the paragraph. If we style a paragraph like we usually do, you'll see that this will only apply the red color to this particular paragraph. And no other paragraph inside this rich text block. In order for us to style all paragraphs inside the rich text block, we need to go about this like we usually do when we need to style all paragraphs across the side using text. Click outside of the field so you can select individual elements again. Then select one of the paragraphs. Remove any class if there is any. And inside the selector, select all paragraphs tag. Underneath the selector, you'll get this little message with plus icon, selector inside of, and the name of your rich text class, whatever you named it. If you're not getting this message, then it means that you didn't have a class applied to the rich text block itself. Without the class on the parent rich text block, you'll get this message instead. So make sure to first give the rich text some class. A unique class doesn't matter what you name it. Once the class is there, selecting a tag will give you an option to nest the tag inside your rich text class. This applies on not just paragraphs, but every type of element inside the rich text be headings, list items, and so on. You can make a note on this video at this point, if you want to come back to it later. So here are the steps. First, make sure the rich text has a class. Second, select paragraph inside your rich text. You can select the paragraph while you're inside the field like this. Click out from the rich text and then select a paragraph like this or just select it from the navigator. An paragraph will do. Third, from the selector, select the pink all paragraph tag. Without selecting this, you'll be just tying an individual paragraph. Lastly, click this plus icon to nest this tag inside the parent rich text class. This is how it should look like. With an arrow saying when nested inside of in your class name. Without nesting, instead of all paragraphs inside the reach tax, you will be styling all paragraphs across the side. That's not what we want. This step is easy to forget. It happens to me until this day. And now you can style away. Now every single paragraph type can be styled in one go. Even other type of tax will inherit the paragraph style unless you have some more specific style applied to them. I know reach texts are a little confusing, but you'll get a hang of it after a few times. If you remove the class from the ach tax, you can see that all the new styles disappeared. So essentially, this works just like a regular class styling, but with extra granular control for individual types of content inside it. The remaining red color for other text is coming from the main class on the reach text, so we can edit that there. You can see now that all these changes are being applied to our dynamic rich text too because it has the same class on it. If you didn't have the same class, then you would remain unaffected. So in case your connected rich text doesn't update with the new styles. Check maybe doesn't have a class or has a different class applied to it. There are more types of text content inside that we need to style. To style them, we need to repeat the same process. For example, this is a quote type of text. It's a nice element inside blocks when you want to quote someone, so we can style them differently like make it italic, that's more suitable for quotes. Bigger line hide, a little more space around. We can't even style the border. We can style images too. For instance, the spacing is a little too tight around images. Just keep one thing in mind. The image is inside another thing called figure. Better to add spacing on that one. It includes caption inside two. We can style bullet points, too. They are really small right now. I'll keep its same size as the paragraph text. I We got to style H three headings because right now they're white. I guess we have style them white somewhere on the home page. All right, we don't have to change everything. Let's see how the real content looks like. Maybe add a bit more spacing for H two headings. Did you see what I've done here. I made a mistake and forgotten NSA tag inside the rich tax class. So when I made the style changes, I've actually styled all H two headings across the side. That's not what I want. So I'm going to reset the style. Na tag by clicking this plus icon and then style from scratch. Get rid of the static rich text, and that's it. If you need to come back and change the style, just add a new rich text and apply your class to it. So that's rich text. Maybe a little tricky to understand in the beginning, but with a little bit of practice, you'll get a hang of it. Unlike regular paragraphs or headlines or text blocks, Rach text can take many sort of content types inside, like, obviously, all the different headlines that we have, we can put them inside, we can put images, we have videos. We can we can put bullet points and numbers and all that stuff. And inside Webflow, styling rich text elements have their own, you know, specific instructions that we just went through. Basically, the way it goes is step one is that you have to give the rich text a class. So it has a very specific class, right? You have to style that that particular rich text first, right? So you're not able to basically say that every single rich text on this page in paragraph within all those rich text blocks are going to have this sort of specific style. Instead, what you're doing is you're saying that a rich text that has this particular style, let's say super nice rich text. The paragraphs in those classes will always be like this, right? That's what you're doing in reality. And in the second step, you select the appropriate tag. So when you, for example, want to style paragraph, you select all paragraphs, right? And then in the step three, you select this nesting option. Basically, you're saying that I'm not styling all paragraphs across the website. I am styling paragraphs that are nested within this class, right? You're saying, Okay, this is the class. And if I'm applying this class to a rich text, then every time that happens, all paragraphs inside will be like this. So that's the rich text fields, how to style and how to work with them. The example that I gave was inside the CMS and inside the blog post. Usually that This is a place where we use rich text inside like a blog or article. So most of the time, we are using it inside the CMS. However, that doesn't mean that we cannot use it in other regular static pages. The whole styling, everything works exactly the same, and you can add that to a regular page and style them with exactly the same instructions. So this instructions on how to style rich text has nothing to do with a CMS. It's just the way rich text works. 142. Blog & CMS: Author Block Bottom: And continuing where we left off, now we need to add the bottom author block. That's pretty simple. Let's start by new diblock, which we are going to turn into flexbox. And add some spacing on top. Now for the author's profile image, let's just copy the one from above so we have less changes to make. I Now we need some text blocks, but we're going to put them inside another day block so they are neatly grouped on the right side of the photo. Connect the text to CMS. And then just style each one individually. And we're going to match all the styles just like we have it inside the designs. A a And there you have it all nice and style. We can check how it looks for different block posts by changing the block post on the top. And that's it for this blog. 143. Webflow Components: In this video, we're going to add a footer to the page. Nothing's easier than that. We can copy the footer from the homepage and paste it right here. Is ready, nothing to change, and it's already responsive. But there is even a better way to do this. Now, imagine we have a website and it has a lot of pages, especially a lot of static pages. On each of these page, we're going to have same navigation bar and same footer, usually, right? And sometimes we'll have some sections like a call to action section maybe repeated as well. So we'll have, let's say, 20 or ten pages on all of these pages, same component like footer repeats over and over again. Now, when we want to edit this, right, we want to edit the footer, we would have to go edit one of the footers, right, then take that footer, copy it, and then replace it on every other single page. Now, when it comes to styles, we can easily take care of that, right? We already learned we have CSS styles, we have HTML tags. We can just go in one place and change one instance, and across the entire site, everything will be updated. But how about content? How about the entire skeleton and structure of footer? Let's say we decide one column has to go, or we have to replace the text of maybe just a little headline needs fixing and changing something. In figma, we have something that solves that problem, the components. We can create a component, and then any other instance of that component can be updated everywhere, right, until it's overridden obviously. We have something similar in Webflow as well. Next to elements tab, there's a tab for components. Webflow components work sort of like components in FIGMA. Remember those? How making any sort of change to the master component, even on the content is going to update every other instance of that component. Components in Webflow work in a similar way. We can create a component out of anything and then reuse it across the website. So we are going to create a component from the footer. I'm going to delete this one and create a component from the one on the homepage. To create a component, just right click on the element. In this case, the entire section that holds all the footer stuff and click Create component. Give it a name and create. It's going to turn green. This means it's a component now. You'll see a different indicator inside the navigator too with the name of that component. Now let's go back to the block post. If you go to Components panel, you'll see now there's a footer component in there. You can drag this component on the page or the navigator, make sure to drop it inside the body element. And there, the entire footer is here. We have two ways we can make changes to components. First, we can edit the master component. That means any change will be applied to all of the instances of that component across the site. Let me drag another instance here so we can see the changes in real time. To edit the master component, select it and click Edit component. You can also right click and do the same. Any changes you make here will be applied everywhere. It doesn't matter on which page you're editing the component. If you click on Edit component, then it's always affecting the master component. You can move items around and pay attention to what happens to the one above, as you can see the switches have been made there too, or you can change the text. All changes have been updated to other instances as well. It doesn't matter on which page you're editing the component. If you clicked on dit component, then it's always affecting the master. To exit the edit mode, click back on the top or click anywhere else on the Canvas or press Escape. Now let's see the homepage. There. The change was instantly reflected on this instance as well. To edit it again, just repeat the process. Now, let's say on certain pages we want different content, but we don't want to change the master component, just different content on the block page. We can make such changes using component properties. Enter the edit mode of the component, then select the element you want to edit like this heading. And in the setting span on next to text, click this little icon and create property. Now, that lets us overwrite the default text of this heading. To override the text, first, you need to exit the components edit mode. Remember, whenever you're in the edit mode, you're editing the master component. When you click back to instance and you normally select the component, then you're working with the instance. Is it confusing? Yes, but you'll get your head around it after some practice. As you can see, the text element is now selectable. And if we double click on it, we are able to edit the text. Make make sure you're double clicking that heading the text element and not accidentally double clicking the component itself because then you're going to enter the edit mode, so double click this element. Now we can rewrite and overwrite the default text. This will not touch the master component. It will only change this particular instance. You can repeat the same process for any other text. Edit component at property. Back to instance and start typing. Or maybe you want to hide this email form on certain pages. Hitting delete key isn't going to work. What you need to do is select the element, the whole footer column in this case, then go to the settings of that element. Here you'll see an option for visibility. Click Rate. This will open up an option to hide or show this element on this particular instance. If we select hidden, you'll see it's gone from this instance, but it's still there on the other one. These are called component properties, and depending on an element you select, you'll get different options. But let's say we want these elements to return to the original form and resume pulling values from the master component. We can do this by resetting those properties from this panel. When you have a component instance selected and you're not in the edit mode, this panel will display all the properties that are part of this component, and properties that we are using and overriding will be in blue, sort of like it is in the stars panel. Click on the blue text and you'll get an option to reset it to the default property value. And resetting the visibility of the email form will bring back that hidden column. One thing you'll notice in the settings panel is that all those properties that we created are still there. And if you try to edit text on your master component, you'll see that it doesn't allow you to do so. That's because the properties that we created still exist and are still connected. While the property exists, editing of the property happens from the property settings, the same place where you created the property. So if you need to change the content on the default property, you can do so here. To get rid of these properties, while in the edit mode, go to the Props tab. That's where you'll have all the properties listed in one place. You can just delete them from here one by one. Now, we don't have any properties anymore, and all instances will be uneditable and identical to the master component. Sometimes we want to make big changes to one of the instances like changing the order of the columns. In that case, we need to completely unlink the instance from the component. This can be done by right click the instance and then unlink instance. This is now completely independent from the component. To recap, components are reusable and connected, super useful for repeated sections and blocks, such as navigation bars and footers. You can create a component out of anything. You have an ability to make certain changes on instances like updating the text or hiding certain elements for our page, it's nearly done. We just need to optimize the responsive versions, but this time it's quite simple. Most of it is ready. Stick around. 144. Blog & CMS: Responsive Post: We're back for some responsive design. There is very little that needs to be done so we can take care of it in one video. The Nab bar needs some editing for the landscape mode. First, let's fix the margins or default section has 30 pixel side padding, but Nab bar in this case has a 60 pixel one. That's because this is a little different, no bar from our home page. Just decrease the padding to 30 pixel and you're good. The menu icon needs a different color. It's white, so we can't see it right now. Before we change the color, we have to make sure to apply a combo class to the menu button. Or it's going to affect the one on the home page that's looking good. Let's check the preview mode. Here we have a little conflict between the background and the link colors and the menu button color. The links are here, they haven't disappeared. They're just dark color for the same reason as the menu button. We just changed them previously when we were designing our navigation bar. Since they have to maintain to be dark. Then in this case we can only change the background of the drop down menu. So changing it to a very light grace is going to be just fine. All right, now bar is looking good on all screens. Now let's check the header with the main image. The tablet is quite fine. The landscape mode looks good at first sight. But think again. This is going to be narrow. The image that is so tall is going to occupy too much visible screen. This image is going to work best when it's landscape mode as well. Especially because that's what content creators will upload. Something like 250 pixel height should bring it to proper dimensions. Similarly for the portrait mode, we will need to shrink it a little more, 150 pixels look good. I'd also shrink spacing around the image both on landscape and portrait. There is something fun we can do with the main image. On the desktop, we have this non traditional lay out where main image is sticking out of the main container. But on smaller screens, that's not happening because the section padding is pushing everything in one place, but there is a way around it. If we give the main image amount of negative margin, it will cancel out the padding from the section. The tablet section has a 60 pixel padding. We can give the image negative 60 pixels margin. And that's going to cancel the padding and go edge to edge, making it look more interesting. But instead of applying the negative margin directly on the main image, we will wrap the image in a Div block and apply negative margins to that. This will cascade down to the mobiles to, but we need to adjust to mobile section pending is 30 pixels. So we need to adjust it to negative 30 pixels as well. And that will be exactly edge to edge. Portrait mode. Author and date segment need some adjustment. The space in between is too much, that's why it's being squeezed like that. Let's just shrink that. We're controlling spacing on the divider, that's where we need to add it. 15 pixel less is going to be good on the left 15, but on the right zero because there is margin from the date. In addition, we could go with a shorter date format from here. Now let's check rest of the page. Rich text doesn't need any adjustments. It's responsible already and looking good on all screens on the portrait. We can even trim a little bit of space on the right and bring the content closer to it. That's all footer needs. Nothing. It's the same footer from the home page and it's already optimized. This page is now fully ready and looking stunning. In the upcoming videos, we're going to create the block home page. Stick around. 145. Blog & CMS: Blog Homepage: Now one last page our blog needs is this block home page that grid that we have designed. Blog home page is going to be a combination of static page with dynamic content. Unlike the blog post page, which is fully dynamic page, what we're going to do is create a regular static page and then insert CMS items inside. To get started, create a new page. We will name it blog and make sure the URL slug is blog. Starting with now bar. It's exactly the same as the one on our block post page, so we can copy that one. But instead of copying, it's better to create a component out of it. Right click on the now bar and select Create component. Name it now bar. And we, good. Now we can track that right on our block page. Next we need the usual section and container. We have a little issue with the navbars background color here. Because we need it to be gray. We could it inside a section, but then we would need to change paddings and all that stuff. We could create a combo class and give it a gray background, but that means we'll need to unlink it from the component, which is not a problem, but it's nice for it to be linked. The best option is to wrap the nav bar inside another diblock and give that diblock a background color. All of these options are appropriate and valid, but this one was the best because I didn't have to alter any of the default elements or the symbols. Now let's add a headline and subhead. Pretty straightforward. Nothing needs to be tweaked in this case. Now for the fun part, first we're going to design a static car. Then we will figure it out how to turn it into a dynamic item that pulls content from CMS. Let's add a new deal block and give it a class of block grid. That's where we'll keep all the block cards with a top margin of 60 pixels. Next we need a new block named block card. Let's make this white background, give the rounded corners and width. Now let's give this card a fixed width. We're not going to use a fixed width in the end because we're going to arrange this in a three column layout. But for now, let's do it so we can see properly what we are designing. It disappears. When we give it a width, it's empty. That's why. No worries. Next we need a thumbnail. This needs a height the exact height from the designs Will do. We can add some random image for now so we can see what's going on. We're going to change the fit setting to cover the image doesn't look distorted. There's just one thing, The block card has rounded corners, but this thumbnail doesn't. It's going outside of the corners with its pointy edges. This happens because by default overflow is visible on any deal block. But if we change overflow to hidden on the block card, then that will clip anything that's going outside the boundaries. Hands rounding the corners on the thumbnail. Next, we need content which we're going to wrap in a deb block. Give it a padding of 20 pixels. Let's dial the heading and paragraph. For the heading, we can create one of the tags, maybe two or H three. Remember how to style heading tags. Change the tag from the settings, then go to the selector. And on the wrap down, you'll get an ability to select that particular tag and apply all the recording styles from the designs, 22 pixels and semi ball and so on. And one last thing, remove top margin from it, you can unlink the text style so the settings are revealed. Now for the author and date block, we'll need a new block for this. We already have exactly the same block on the post page. I'm going to try to re, use the same class here. It will need tweaking though. Let's check the classes that we have used there. If we apply these classes, we should get the same results. Copying would be an easier option, but it doesn't work with dynamic items since they are linked. All right, now let's tweak this style by using combo classes. Avatar is 30 pixel in size instead of 40. Text is 12 pixels and has different spacing on the site. So let's adjust that too. And finally the top margin. One thing I'd like to add to this card is a hover effect. One thing we can do is we can add a background shadow on it. On the hover, that'll be nice interaction. We already know how to create the shadow right on the cards. We've done it on the testimonial cards. And we can do exactly the same here and we can just reuse the same values for the shadow. Let's add a transition effect so it's not that abrupt and jerky. There's one more hover effect we can add. We could make the card move a little. This, with a shadow, will create an effect of card being lifted in the air. Very simple to do in the hover state, add a transform effect on the vertical axis, Move about two pixels. We need negative two pixels to lift it up. Positive values will move it down. We don't have to add the transition effect because we have added one for all properties that's taking care of the transition for the move as well. That's why I like using all properties transition instead of individual one for each attribute. Excellent, The car is ready, but we're not going to connect it to the CMS just yet. We'll do that in the next video. Right Now, let's just finish up the page. We need to add the footer, which is easy since we just need to drag a footer component on the page. Done. Super it. Now let's link to this block page. So people can access this block page through the navbar or through the footer. Then select the link and go to setting Spanel connected to the block page, which now shows up in a dropdown. And same thing in the footer. Let's not forget the homepage nap bar because the navigation bar there isn't connected to the component that's now the block page can be accessed from anywhere on the site. All right, up next, we'll connect the grid to the CMS Stick around. 146. Collection List: There are two ways to pull items from CMS. One is by using collection pages. That's what we've done with the block post. Every new collection we create is going to have a collection page automatically created for them, which we can access from here. But what if we want to pull CMS content elsewhere, For example, on static pages like the home page or on the block page, where we have all those block cards enter a collection lists. Collection list is an element that can be dragged from the elements panel on any page and anywhere on the page. When you drag a collection list on the page, you get a bunch of empty purple boxes. Nothing to see here just yet. First we need to connect it to a particular collection in our case block posts. Now we get this. The boxes are still empty, but this time you can see familiar titles. Each box is corresponding to the block post in our database. Collection list, by default displays all items in that particular database. We have a control over how many to show at a time, but we'll discuss that later. We also get these layout controls. Our block grid has three columns, so we can easily switch it to that. Now our block cards will be displayed in a three column grid, just like we intended. Well, not yet. They're still empty. If you check the preview mode, they disappear. To start binding elements to the CMS, first we need to drag elements inside one of these purple boxes. Once we do that, then each element inside will gain dynamic qualities and we'll have option to connect to specific CMS field. In this case, we need to drag the whole block card in one of the boxes. Doesn't matter which one. There's no way to select the entire block card right from the canvas. So make sure to select it from the Navigator. Then while it's selected, click and drag it in one of the purple boxes. If that's tricky, you can do that from the Navigator panel altogether and drag it inside the collection item. All right. I'm sure you have questions on what just happened, why the block cards have multiplied. The thing is collection list works like a collection page. One means all acting as one organism, like some hive mind. Once we bind elements with the CMS fields, then appropriate content will be pulled. Let's connect elements to their appropriate fields. See the moment you connect it to the CMS field, then headline of each card updates instantly based on which particular block post they are connected to. Until we make these connections, then all elements are normal static elements and each item will be exactly the same thing. So far, so good. And let's change the date to a shorter format. We need to make some changes to the spacing. First, let's remove that fixed width from the block card. It's going to get in the way and mess things up. We don't want a fixed car, we want it fluid to stretch and shrink according to the width of the page. There's already some spacing applied on the collection item. By default, we can add it there. Instead of adding new spacing properties to the block card, it has ten pixel padding on the sites. In our designs, gap between each card is 30 pixels, so it's 15 pixels on sites. And also the bottom margin or padding doesn't really matter. Either one works. Now let's take care of that odd distribution of the cards. This happens when the heights of each item are different, so they are laid out messily. Breaking our tidy grid, we can fix this easily with a flex box. We need to apply flex box to the first parent that holds those collection items. This is collection list, make sure you don't select collection list wrapper that's a grandparent with all that stuff inside. First you'll get all the items squeezed in a single row. All we need to do here is to enable wrapping and we get exactly the layout that we are aiming for. There's just one thing, these cards aren't actually clickable. How do we actually access the block pages that they represent? For that, we need a link element that is going to connect to the block page. Right now, none of the elements are links. None of the settings has an option to bind URL to the CMS link. We need to turn one of these into a link element. This can be a headline, for example, That can be a link or a thumbnail image, or both. Or we can turn the entire card into a link. How do we do that? Using the link block element, we would have to put the whole card inside a link block. All of these are very valid options, different website deal with this differently. In this current layout that we have, I'd like to have the whole card clickable if we had different links to leading different places. For example, author's name leading to an author's page. Or if there was a link to a category, then we wouldn't be able to put the whole thing inside a link block. Because you can't nest links inside other links. But in this case we can. Let's go with it. Just add a link block element inside the collection item. When you get the settings, you'll have this purple page on. This allows linking to a collection page. Choose that and select current block post. Now that link will go to that block post page. Lastly, let's move the whole card inside this link block. We actually don't need that extra block. We can apply the block card class to the link block itself and move the thumbnail and content inside it and get rid of the extra A block. Because this is now a link block, all the text inside the card is underlined. That's just a regular behavior of links. We can get rid of that underlined from text decoration settings, select none. All right, let's have a look in preview and test the link. There is one thing that bugs me a little different heights of the cards, to be honest, it's fine like that. But equal heights would make it look nicer. That's what we have in designs, don't we? All the cards are the same height regardless of their content. And that makes the grid a little more neat to do the same. We just need to stretch the cards to fill up the empty space, the collection item, since it's a flex chile, it's already stretching, but the block card isn't. If we give a block card 100% height, that is going to fill up the empty space. Remember, you just need to style one of the block cards and all of them will be styled the same. That's all looking nice, except one thing, the author and date block are on different positions everywhere in our designs. We have them glued to the bottom, which creates much nicer layout. Now how can we make that happen? First, if you have a look at the parent element, which is card content, then you'll see that it's not stretching all the way to the bottom first. We definitely need to make that stretch this time, 100% height isn't going to work because that means 100% of the parents height block card is the parent which is taller because there is the image inside two. If we give it 100%, it's not just going to fill the empty space, but it's going to go beyond the borders. How else can we make it fill the space? Here's one way we can make the parent the block card, a flex box with a vertical alignment. And then under flex child settings, we can change sizing to stretch for the card content. Now for the second step, we need to somehow glue the author block on the bottom. One obvious option is to again turn the content block into a flex box with vertical alignment and justify settings to space between that is going to push the objects to the edges. Now the author block is glued to the bottom on every card, which is lovely. But that makes post summary spaced out evenly as well. We don't want that. We want post summary to be grouped together with a headline. This is easy to fix, we just need to wrap the headline and the post summary inside a div block. And that's all. When I say wrap something, it means to add a new Be block and put the elements inside wrap like a gift box. That's all. Let's check the preview. All working great? There's one other thing we need to do. We need to add a pagination. Pagination means to distribute these block cards on different pages. We don't want every single card loading on this page. When we have more than 2030 block cards, then it's going to slow down the page. That's why we need pagination. We'll do that in the next lesson. Stick around. 147. Blog & CMS: Pagination: In this video we're going to add the pagination without splitting block cards on different pages. Every single block card would load. When we have a lot of lock post that would make the page load very slowly and wouldn't be optimal 20 cards, that's all right. But for 50, 60 and more, that is going to slow down the page considerably. Creating a pagination on collection list is as easy as ticking a box in the setting spanel. Here we decide how many items should there be displayed per page. We want a number that is suitable for our three column grid. Something that is dividable by three like 912, et cetera. Ten isn't good because then you'll have empty slots. The ideal number is something that can be divided both into 3.2 column layouts. Why? Because on smaller screens, most likely we will need to change this into a two column layout yet. Again, 12 is the best option besides pagination. There are some other settings for collection lists. Let's quickly have a look at them. Filters are cool and very handy. For example, we could filter posts by author or posts created this month, or we could add extra fields for such filtering in our collection fields. Then those fields will show up here and we would be able to filter items based on that. For example, one way you can do is category filter. Every time we create a block post, we would choose a category of the block, right? So we would say, maybe this is about cooking, maybe this is Spanish, Italian cuisine, French cooking, whatever. Then we would have dedicated pages for each category, right? All the block posts about French cooking, all the block posts about Chinese food. On each of this page. Then we would create this filter. Show only those that are categorized and have a category of French and those that have a category of Chinese food and so on. Similar options apply to sort. We can sort the order of posts by many different criteria and rules. Again, we can create separate pages for different sort orders and then include those links on top so users can navigate there. One last setting, limiting number of items shown. This is similar to pagination, although it limits number of items altogether and adds no extra pages to display other items. A practical example of this would be similar block post suggestions underneath an actual block post. To do this, we would add another dynamic list underneath. We would populate it with block posts and then limit items to two or three. It only shows a few post suggestions. That's how simple and powerful this collection list settings can be. Possibilities are immense. Once you enable pagination, you get these next and previous buttons to move between the pages. Styling is quite easy. Just select the button, give it a background color, change the tax color, add some more spacing, add some harbor of fact. Always add hover effects to buttons and links. It's important for users to understand what's an interactive object and what's not. Hover effect is the best way to do that. I was recently reading a biography of Steve Jobs and I read this line when he was saying that technology has to make you feel like that you can dominate them. This is so freaking true. That's why simple, minimalistic technology and products are always better than complicated products that have a bunch of buttons and dials on them. Whenever you build your websites and design your websites, never forget usability and never forget how the user is going to interact with it. Make sure if there is a button, make sure the button has a hover effect or some sort of interaction with it. So we can understand that this thing is clickable, right? Or if there is a link, does the link change the color? Is there some indicator that this is a link? And you can click on this and it's going to take us somewhere and so on. It's not that difficult, but it does take some paying attention and not being lazy, because a lot of web designers are quite lazy. Because if we wouldn't have so many bad websites, that drives us crazy sometimes. Anyway, back to pagination, back to styling our button, we can apply the same class to the previous button. The class name doesn't make sense, but I couldn't think of anything that would be better. Maybe I should use pagination button, that's a little better. When you select some element of the pagination, you'll get this extra option in the settings. This will show the page count, which is sometimes a useful thing to display. We could style this as well if you want it, but I think this is enough. That's our block is, do we just need to make it responsive? And we'll do that in the next video. Stick around. 148. Blog & CMS: Responsive Blog Page: Now let's make our block page responsive. The desktop is doing well. The car string to a reasonable size so we can still keep three columns on the tablets. It's a different story. It's too much for three, we got to go with two columns. We can change the layout from these settings. That's going to affect desktop version two. It's global, not device specific, but it's quite simple. These items are inside a flex box with wrapping enabled. This means cards will jump to the next line when there is no space. If we give the collection item a 50% width, that will instantly organize everything in two columns, easy as that. They will also stretch and shrink to occupy according space. Now for the landscape, it's a little tricky. On wider sizes, it's perfect, but when you shrink to the smaller size, then two columns is too much. One option is to create a single column layout. So we would need to set the width to 100% Single column isn't bad in this case, but do you know what would be the perfect layout if we could have two column layout and then some specific width for it to turn into single column. For example, if we set minimum width of collection item to 300 pixels. This way cards will shrink until 300 pixel. Then they will wrap to the second line, creating one column layout. But this is an idea on the big screen, we get this gap. Ideally, we want it to switch to 100% width the moment they go single column. Luckily, there is an advanced trick for this. We can set such specific rules under Flex child settings. Underneath the More options, remove the minimum width settings before you start editing this part. There are three fields with grow, shrink, and basis value. The combination of these three values renders different results. It's quite powerful. I won't dive deep into the logic of how they will work. I don't fully understand myself, but I'll explain the one variant that we need right now. Inside the basis, we can set a value like 300 pixels. Then in the shrink field, we can specify to not shrink beyond this value. The value for this needs to be zero. If it's one and above, then it means it can shrink beyond that value. With shrink set to zero, it doesn't shrink beyond that and the cards wrap to the next line. It's like setting a minimum. Because grow is set to zero, it neither grows beyond 300 pixel nor shrinks. 00 basically means don't grow, don't shrink, just keep it at 300 pixels. But if we set grow to one, then we will allow it to grow beyond 300 pixels to occupy any available space. This gives us an absolutely perfect layout where it's two full column, and when it gets too small, then it turns into a single full width column. If you didn't wrap your head around this fully, don't worry, it's a tricky concept. Just know that such granular control is an option when you need it. Then randomly, you can play with different values until you get the desired result. That's what I do most of the time anyways. Finally, let's see the portrait mode. Because of the flex child settings that we have set in the landscape mode, portrait is automatically in a single column mode. Although with one issue, since we don't allow it to shrink below 300 pixels, it goes beyond page borders. Now because we are using flex child settings, we are not able to edit with settings here because flex child settings ignores these values. We turn the flex child back to its default value, which is the shrink if needed, and then we will be able to change the width of 100% There's one last thing we can fix. Having padding on the sides creates this little misalignment from the edges of our page, you know, where all our content is aligned. This is being a little nit picky. But I like things as exactly as possible. You should try your best to develop this habit. To obsessing about details is a good quality for a web designer. So how do we fix this little misalignment? We can have a special combo class for those cars that are on edges there. One remember hive mind. But it's quite simple. We can add a negative margin to the parent that holds all those items -15 pixel on both sides. And done, you get cars aligned now exactly on edges. That's it, really. That's it. Our website is fully done. It's responsive, it looks beautiful, it's fast and powerful. People pay good bucks for this. In the next section, we'll give finishing touches and we'll publish the website. First, we're going to publish it on Webflow subdomain, but then we're going to publish it on a custom domain, because that's an important part. You need to learn that as well. So you can take the website that you're building for the client and then actually put it on their domain, but more about that later stick around. 149. Going Live: SEO & Publish: First we will publish the website on Webflow subdomain. But next I'm going to show you how to publish the website on a real custom domain. Let's start by SCO and some other finishing touches. We need to fill out SEO details for all of our pages starting with home page. We've already done this before, so it should be pretty straightforward except for the dynamic blog post page that's a little different. Don't forget the open graph settings, that's for all those social networks, Facebook, Twitter, and stuff. For the image, it needs an URL. We can choose an image from the assets panel and get a URL from it. I'm going to go with this image, then just grab the URL and then paste it into the field. Same thing for the blog page. I don't have any specific rules on what you should put on SCO as long as it's not empty. The rest depends on the business and what message their clients want to send. Now a fun part SEO for the dynamic page, you'll notice an extra link on a dynamic page. These purple links to add a field, the name of the block post can be static, right? The name has to be same as the headline of the block post page. We can add that headline like this. There you have it. The name of the block page. If you click these arrows, you can easily go through different posts. We can add anything else in front or after this dynamic field Inside the meta description, we can add a post summary text. That's another reason why post summary is such a handy field to have. For the open graph image, we can directly select the image from the CMS. How great is that? Each post will feature their own main image. That's all for the SCO. There are some links we need to connect in the now bar and footer, for example, the logo. It's a good practice to link it to the homepage. It's what people expect. As for other links, we don't have pages for them, so we got to leave them as except for the blog which we have already connected. Let's not forget the footer. We need to link that logo to the home page as well. If you don't see the link settings, maybe you just have a logo without a link block. Only link elements can be connected to other pages. If you are missing it, just add a new link block and just drop your image inside. Don't even have to add a class to the link. Just edit the settings directly. Excellent, this is a good time to check all the links in a preview mode and see how all that looks in different screens. I love the result. It's a handsome fast and solid website. All right, before we hit published, let's go to Project Settings. We need to upload a Favicon just like the way we did last time. Remember how we did this? We had to create a Favicon and web clip icons in Figma, draw a frame that's exactly 256 by 256 pixels. For the Fc, we need exactly 32 by 32 frame. With a scale tool, we can easily re this frame to our desired dimensions, make sure the dimensions are correct, or it will throw out an error. And that's all done. Now we can hit Publish on the wet flow domain. We'll do custom domain later. And that's our snazzy little website. Let's check everything out, make sure it's working properly. App next, we're going to test forms and see how form submissions are managed on Webflow. Stick around. 150. Going Live: Form submissions: Now let's give our forms a test. We have made a pretty simple form, this time, just an E mail address. We can go pretty crazy with forms on Webflow, but be it single field or multi step ten field form, they all work the same. Submission went quite well. This is a default behavior. The submission happens right on the page. When you refresh the page, then this message is gone and we can submit the form. Again, we're not limited to this version. We can also redirect users to a different page after the submission, like to a thank you page or a confirmation page, whatever. All we have to do for that is build that page and webflow and add the URL. In the form settings, you can either add a full URL without domain and HTTPS and all that stuff, or you can just use the slash and the final slug. Slug is basically this ending that we get inside the URL. Like for example in the blogs, in the blog we had blog, that's a slug. You can create a page and then create that slog which is thank you, something like that. And then add that inside URL, inside the redirect URL. And the browser understands that that means on our own website and not some other website. Okay, now let's see what happened to our form submission. Go to Project Settings and click on the Form tab. If you scroll to the bottom, that's where you'll see the submission. There is a lot we can do with these submissions. We can delete, we can export it into CSV. We can send submissions automatically by e mail. We can provide an e mail address of a person who is going to receive submissions, usually your client's e mail address. And they will get an e mail like this. I love that. Webflow also takes care of this, and I don't have to get a plug in or install some third party application to manage the notifications and all that stuff. We're also able to customize these E mail notifications when our site has a hosting plan. Another thing we can do is integrate form submissions with other apps, for example, to e mail marketing tools like mail chimp. New submissions can be sent to the e mail marketing platforms where your clients can do their thing with blast email newsletters and promotional material and all that stuff. And that's all there is to form submissions. 151. Going Live: Custom domain: All right, So in this video, I'm going to show you how to connect your website to a custom domain. For that, we're going to need to add a hosting plan to our weapon project. So that's requires payments. So you don't have to go through this tutorial to kind of publish your website on a custom domain. You've already published it on our work clothes domain, and that's enough. But with real clients and really projects, obviously you have to do that when you would have to publish your project and your website on a real domain, and I will demonstrated how to do it here. I'm paying for the hosting plan and for the domain purchase, right, But you don't have to do it. And once you already doing the rial projects and you want to publish them, then you know where to come and where to see the tutorial on how it's done. It's quite simple and straightforward, and I'm going to show you how it's not right here. So first thing what we need to do is go to the project settings inside the settings, willing to go through the hosting tap, and here we're going to and hosting plan. The custom domains are here, as you can see, but they're not enabled until we at the hosting. And we have to add the CMS hosting because you can see already The basic plan is disabled because the project that this team at website project has a CMS right the block on it. So that's why we have to choose the CMS hosting hosting which, uh, he's $16 per month and you'll leave paid annually and it's, ah, $20 per month You've paid per month, which what I'm going to do in this case, I'm going to choose the Monterey bailing. There's also this notification about the client billing, which the very cool future in Web flow. It means you can directly send an invoice to your client. Your client will provide their own credit card details that will pray for pay for this hosting, Not you, and you are have an option to actually make a little money on it, and you can charge extra and put like extra per month. For example, if you offer your clients of service to like a maintenance fee or something like that, let's say you want Teoh charge maybe $50 per month and you can keep the $30 in. Then charge your clients The whole price. $50 then went flow will take their cot in their hosting plant. More about this later in the part. What about the freelancing? I talk about the future and I'll explain benefits off it and all that stuff. For now, we're just gonna skip that step in. Just pay. At least I'm gonna paid myself here. Once the payment is gone through, we get to this page. Now it says that CMS hosting is the current plan, and then you can see under custom domain, and we have an option to actually at new dominates, which we need to buy. We don't have a domain yet, so go to go, daddy dot com. Go, Daddy, is where I buy my dominance. Usually it's simple. It's straightforward. It's probably one of the biggest ones out there. Hold the dummies that are dot com They're available there, but country specific domains like let's say dot de for Germany. Or that he asked for Spain. It's not on Go Daddy. Usually I don't think there are guarded, but I might be wrong, but usually they're on a country specific websites. Ah, that sell country specific domains, so you would have to purchase them there. But the tutorial that I'm going to show you and how to connect them they work exactly the more or less the same way on any off those domain websites. Seems like I'm getting a very good discount. 85 cents for the first year. Not better. All go. That is very good with discounts off. That's one reason why it's a good place to buy them because they do have this crazy discounts when they give you, like, first year for, like, 30 dirty chip head to card. Continue to cart right here. Oh, go That he's going to try to Upsell do some different stuff like privacy protection, which we don't need. No, thanks. Um, some website designer. We don't need that either. Thanks, e mails continue to card. And here go. That is going to try Teoh instantly Upsell and sell your five year contract right away. I usually changes to one year now the price went back to the normal and I'm going to choose a papal option for the payment and they're the domain is done. Now we need to go back. Teoh Web flow again under hosting tap and had our new custom domain where Flo is going, going to detect that we are using Go Daddy for our domain in what they offer here is that they have this ability to connect domain automatically, which is cool future. It makes things much easier. So if your domain is on, go go, daddy. That's one reason why I usually use Go Daddy, because Whipple has this automatic connection, and they also I think the only other automatic connection that they use with maybe Google domains. But Google domains is not available in every single country, so and you can connect automatically when you have an access to the domain and go Daddy's account because it's gonna ask you to sign in into your account. And if you're signing that is going to do the connection and every setting change that needs to be changed for the domain automatically, you don't have to worry about it. But in this case, I'm going to do it manually. Eso Aiken demonstrate how it actually works because it's going to be similar, Teoh every other website where you're going. Teoh changed settings to connect the custom domain. So we're gonna go with the connect manually. Yeah, this is a message saying that because we're adding a new domain. The sub domain indexing has been disabled. That means that it's basically something to do with the CEO. So we don't have one website connected to two very different domains and because that's something is not allowed by Google, and that's why it automatically d stable. Stay indexing for that temporary domain that we have used from Wetklo. So just click, OK, all right, Now we get this to kind of instructions on what we need to do once reaches our domain, we have this flow course dot com which is the naked domain and then one we chase with the www Lifelock course that calm and Web slow gives us these values that we have to add inside DNs setting so far domain provider. So what we need to do is we need to go back to go, Daddy inside Go, Daddy, It's under products, my products and here it's gonna show us all the websites that we have all the domains we have not websites, right? So if the course not come here and then we have to choose DNS. And it's usually the same thing in every other website. Domain providers. It's always called either DNS only in its management or something based DNS editor. Whatever it is, basically the keyboard is DNs. That's where you want to go. And you get to these sort off weird sheet off different records at our DNS record that look complicated. But they're quite simple. And what we need to do here is added this a record and a C name record. As you can see, we have to choose this a type, right? The name is at and then value is this I p address that is provided by go Daddy. So we have to copy that I p address and then we're going to edit one that has a net. If you're the unis kind of record, she it doesn't have an ad. You have to just create anyone, and that's it. But if it already has thes X record with an at symbol, which is an A record right and both have to match, so if it's on a record and has an ad because, as you can see, there is some other records with a net like an s or S O a. So don't worry about those. But if there is an a record and it says next to it at then you have to edit that one. If you don't see anything like that, you just need to add a new one. In this case, go that it was showing us that we have one. So I'm just going to edit it. So hostess at and points to the I p address by wet flow Everything else you can just leave the same. So that's one a record we need the second a record because we don't have an option that you at the 2nd 1 there. So add from here and under the type we're gonna choose an A type host again at and points to this time a second i p address from Web flow and points it here TL You can believe it is this safe that's done that a records are done Now we need to add it. The sea name record for a www so copy the value from Web slow and added, if you don't have it. You just need to add the new one. That's it. Just like we did the last time I had any record and to see name instead of a record. All right, that's it. Now the DNS settings for the domain have been edited. Now we can check the status right on wet floor and where florals check if everything is connected. Well, as you can see, it is for the first domain. Let check the status for the 2nd 1 There you go. 2nd 1 is connected as well. This one actually was super fast. It doesn't usually happen this fast, I guess, because it was a new domain. Also gold. It is quite fast updating this. DNS records some other websites. They're quite slow, and usually they might take up to 48 hours to update the records. So don't freak out. And don't worry if it doesn't work right away, just wait 48 hours, 24 hours or 48 hours really depends on the Deanna's provider who is providing this because , you know, some of my clients they use a very local obscure DNS providers, and they update like every every once in a day. She doesn't work any 15. Or if one day goes by two days go by, it still doesn't work. Then you would have to contact the DNS provider themselves. Because sometimes what happens is that website might be on go Daddy s o. The person might buy the domain in one place, but then move the DNS management. So those records that we just added, they might move it somewhere else with some different company or a different service or something like that. So we knew talked to the client. Just make sure to ask them, You know, I usually don't even do this. I sometimes give these details to my clients because if they have a domain and if they have the DNS editor or whatever, that means they already know how to do this or they've been doing where they somehow are. Whatever. But if they don't have it, then I could sort of do the whole thing for them. Now we have to choose a default. We can use one off this versions. Either one with the www or one without. It is a default version of our website. So if somebody just types in wet flow course dot com they will be redirected to www Web flow. Of course, that come. This is usually the version I like to do, which is keep the www s the default and main version. So everything cannot comes and redirects to these main you can do it reverses. Well, I don't know if there is ever some specific preference. I think Www always is the best option to just keep it as the default domain. And one last step. We have to publish it. Yeah, this Now it's not publisher. If you check it. Don't forget this last half use always have to publish from here, and then it's going to be available. So we're gonna do select this workflow sub domain and select our new domain and published to select the domains. And don't Let's Chuck. Ah website is now published on a custom domain where flo course dot com Inside the general settings, there is sometimes wet floor keeps the branding right. The badge was right now automatically removed, but sometimes it might be there. And also there is this another Brendan with insight HTML So you can change this kind of disabled this workflow branding from here both in HTML or the website and again published one more time. And also we can actually unpublished this second weapon or that septum it. We don't need that anymore, since we already have it on our main domain and that's it. That's how you publish a website in wet floor on a custom. Don't make it easy peasy. 152. Portfolio website: I used to have a company with two of my friends and we did a lot of hiring back in the days. And what most a lot of candidates would do is they would undersell themselves. They would come and they would say, you know, at all, I'm just a beginner. I don't have much experience. Yada, da buddy. No, I'm a quick learner. But my conclusion as your potential employer is that you suck. How do I know that you just told me? So getting started in any new profession is tough because people do want to hire pros. They don't want beginners, they won't produce. That's the truth. By here's a big mistake. A lot of people make. They think being a pro is someone with years of experience. Not at all. A pro, a someone who takes their work seriously, someone who looks like they can get shit done, and someone who wants to deliver a great service to their clients or employers. So how do you make yourself look like a pro? For starters, you have to show what you can do in their web design. That's done with the portfolio. You've already designed and build two projects in this course, and that's already something to show for. But my recommendation would be to do one more project from design to a building outside of this course. That's going to give you three portfolio pieces. And that's enough for you to go out there and start applying for jobs. And more importantly, doing another independent project is going to give you practice and experience outside of this guided course. But portfolio pieces are not enough to look like a true problem. We need a portfolio website because what do you think we're in an uproar? Web designer have their own personal website, but you'd be surprised that a big chunk of web designers, they actually don't. They have their portfolio on platforms like Behance or dribble, and that's what they share with their potential clients, sending that link to their profile with all that portfolio or uploaded on there. But I never do that first. That doesn't make me look like a pro. As a freelance web designer, you're essentially a business who provides a service to your clients, right? In no good business would ever do something like that. It's like being a professional photographer with portfolio only on Instagram. I want to be a pro photographer who has his own photo studio and I just Instagram profile. And second, I'm sending them to a place with other good designers. That just a bad idea. I'm helping them to find someone else. I'm showcasing my work next to world's best design work. And even if I was the best candidate available for them, I don't look so good anymore. My work doesn't look as impressive next to the world's best Bork. In third, I'm losing an opportunity to make a persuasive pitch to them with my website. All right, I can showcase them, might design process. I can write a very persuasive and convincing content and a copy by to convince them that they should hire me. I could impress them with my website itself in. I can prompt them to take action so they can get in touch or submit a form or whatever. Now I'm not saying that you shouldn't have profiles on those platforms. Sometimes you can even find work for the row there, but it's not a place to direct your potential clients to. Plus, you're a web designer. You never thought of making a website for yourself. That just doesn't look serious. It's like being a car mechanic will never owned a car portfolio website, can do a lot of selling and pitching for you. And I had clients hire me just because they liked my website. Now even thinking or looking at the portfolio website, my portfolio pieces, they just really like the website itself. So knowing from the personal experience how much a good portfolio websites can help. I have designed and built an awesome portfolio upside for you. I've put a lot of thought into this design. My goal was to give you something that would look very stylish series, but with a hint of fun. I've sprinkled some subtle interactions to show that you're capable of doing such things. And I've already added two portfolio pieces that you have done in this course. So you don't even have to worry about putting them up. And I wrote a persuasive copy that will do a lot of pitching for you. All that to show you that you are a strong, solid professional who can get things done. In the next video, I'm going to show you how to install this website for yourself, how to add content, your own content, and how to make some customizations. So it, so you can make it a bit more personal. 153. Portfolio website tour: before I show you how to install a website and movie to your workflow account. Let me give you a tour of the website and show you what's what and show you. What's the design Thinking behind all that. Some of the content you'll see on a page is a placeholder tax like this headline. And in the next video, where I show you how to install, decide in your Weppler icon you're going to replace the generic generic content with your personal info. The website is quite simple. The way put for your websites are supposed to be. We have only two pages at Home page and CMS pages for each project. The content off the website is in the first person narrative. This is sort off style that I love for portfolio websites. If I'm looking at someone's portfolio, I'm interested in the person behind it. So I want to see a friendly interaction so I can sense the personality of the person. I also want to see a clear information of what you do. What is your specialty of what is this website about clear direct language, you know? Can I work with you? Are you available for work. How can I work with you? What are the stabs and so on? Also very directional case off the portfolio. Some performer upsides have it on a separate page, and that's just too much for it. I have to find a lane. Click that language for the page to load again to finally see your work. So I like showing for for your pieces on the home page instantly after the hero section. No looking right in your face. How you display or print for your business is important to a lot of work for your sides that I've seen. They have very confusing, creative but often confusing way of showcasing passport. Often they use just thumbnails. No titles, no description. You have to get to a conclusion on your own, not cool making me work here. As you can see, everything is super clear. We have a title. If we are not sure what this is, there is a smaller title saying Latest War. No way to get confused about that. A description of the project, which is super important because many designers don't do that on the homepage. Clients might not even visit the project page they'll want to get information right from here, and it's important to tell them what sort of project this is. Did you design it? Wasit. An individual work? Teamwork? What was your role? What's the website for? And so on? They want to know this essential information to understand. What the heck are they looking at? I've added some tax as well to give us scannable information on type of projects like Wet Floor Development Concept Project. Saying that it's a concept in a tag is a subtle way to be honest about the fact that it was a concept project concept project means that it wasn't really paid project that you did for some existing business or a product, but you did it either for practice or for this course or for some any other reason. You want to avoid awkward disappointment later, when your client asks you something about that chat app company you worked for and of course, pretty more cops off the project. How you show the screens of the project is important to very important note when creating your accounts on freelancing platforms like up worker and freelancer, take down this portfolio pieces and generate something else. Why? Because the sites have review process for new freelancers. A lot of students are taking this course, and if you guys all apply with the same portfolio work, that's going to raise red flags when dealing with clients, that's not a problem. You can use that work, but for platforms application process, hide them temporarily once approved, then you should be safe to put it back up. What I do section is exactly what it says. Thesis a place to give a more detailed description off services you provide and pitch a little more. Here's a pro copyrighting tip. If you want to write persuasive copy, make it about them. Talk about how you're going to solve their problems and improve their lives, not how much you love Web design and the chicken case of DSR. Your passion. Lastly, very obvious section. If they want to work with you, what's their next step? Now let's check out the Project page. Project pages are quite straightforward. Some description of the project and a large screen shot. There are many different ways to demonstrate your portfolio work, but this is a style that I use on my own website and I like it the most. Some designers like to do a case study so they will have a large presentation off the project and quite a bit of explanation off the process. Goals challenges Basically a short story on how the project came to freshen. This is an excellent approach and shows all the work you have put in it and shows your potential clients that behind the saints off your process the reason why I don't do this case study is simple. It's a lot of work and amount of advantage. Isn't that big? Mainly because war target audiences as freelance Web designers, Our clients 90% of the time are non designer and entrepreneurs. A good for for your side with simple screenshots off your passport is enough information for them. They're not going to dive deep inside the case study anyways. There will appreciate that it's there and they will think even more highly of you. But amount of work we have to put in to create the case study for each portfolio is too much. Maybe in the beginning will have enough enthusiasm. But later we want, and we're just not going to keep our website updated because of that, and that's where we're going to screw ourselves over in the future because updating the perfect four year is going to be so much work that will just not do it. And we will end up with an old portfolio pieces and that's the worst outcome your designs will improve and generally Web design Trans change so you're older designs will look dated and not modern. But if it's very simple to update, you'll beam or encouraged to keep it fresh. So the project pray just needs a paragraph off a description and a screenshot, which you can export right from Sigma. And so is it the linking to the life upside is optional. It's very helpful for clients looking at the project. They can see the website in action and play with it and see all the work you've done, not just green shot but interactions and all that stuff. Although I have a rule on this Onley linked to live websites that you're proud off, really, client websites are living organise, and when you're done with a project, that client might change things on the website. They might add new section and change things on their own, hire someone else for any new updates and so on. So at some point you're pressures. Designs might end up looking her and us, and you don't want to showcase a website that has been put your it over time. Even if you're the one doing butchering well, that's it. Minimalistic, beautiful and strong personal website to demonstrate your work and show potential clients or professionalism and Web design skills. 154. Installing portfolio website: In this video, I'm going to show you how to install the portfolio website in your own webflow account so you can make your own change things, edit content, customize style, and publish as your personal website. I've created a showcase of this project right here. This is a place where webflow designers can share their projects with others. Go to this link to access the page, the links in the resources of this video. Once you're on that page, you'll see this clone button that lets you clone the entire project into your own account. Click on that. There is a warning message saying that we can create a new project in our account because we hit the limit. Under the free plan, you can only have two unhosted sites in Webflow. Since you have already built two projects, the chat app and team map websites, then you'll face this issue. You have three options. Upgrade to a paid plan, create a separate account, or delete one of the existing projects. All right. Once you solve that limit issue, then you'll be able to create a new site. That's it. Now you have your version of this website. You already know how to do everything you need to do here. But let me show you things that you should add it. First name, the logo is just the tax. Just put your name in there as you wish. If you want first and last name or just first or just last name, whatever you prefer. There's also the name in the headline. Don't forget to change that. There is the name in the footer as well in the copyright text. Put your first and last name there. Lastly, there are names in the SEO fields, two places, home page and the project template. Then there are E mail links in two places. There is one in the Nab bar and one in the. Both Nab bar and footer are components as you'd expect. So it's synced on the project page two. These are email links, so you need to put your email address inside the link, so when people click on it, new email is filled with your address. Don't forget to change both text and the link setting. That's it for the personal info. The rest is content which you can update as you wish or don't feel free to keep it as, but giving it more personal twists would be a better idea. You can give this website your own personal colors if you like. Updating is very easy. All colors are global. That means you can update the global color and all the instances of that color will be updated instantly. Click on Edit and just choose a different color on the map or paste the color code. The same thing you can do on the highlight color, whatever color you use for the backgrounds. Don't forget to update project thumbnails accordingly. They are independent images, so they don't automatically update with the global color. I've prepared Figma file for these thumbnails so you can easily update and export ones later on that. Let me show you how I made this highlight effects so you know how to reuse it. If you decide to, the highlighted text is inside a block which has heading element inside. And a regular block as a highlight highlight has absolute positioning. That's why it's stacked behind the text. If you feel like highlighting some other text element, just copy this entire highlight box and edit the text inside high lights. This headline isn't one fluid text. It's a bunch of independent in line elements sitting next to each other. To move the order, you need to drag elements around or change the order in the Navigator. Keep in mind highlighted texts can spend on two lines. Try highlighting maximum two consecutive words, like web designer or have multiple highlight boxes next to each other. If you really need longer highlight the link highlights work a little different. Actually, much simpler than headlines is just a box shadow. If you need to apply that style anywhere else, just select a class named yellow link. The highlighted text will be added with its hover effect. As you'll probably notice, the page has really cool interactions like those highlights on page load. And that's grown line moving like a snake up and down. Let me show you where these things are. If you go to interactions panel, you'll see there are three interactions on page load, quite simple interactions. First one controls those highlights. Second one is for the content sliding and third is for the scroll line in the loop. You probably won't need to addit any of this except one highlight. Because if you add any highlight elements, you'll need to add it to the interaction two. For example, this new highlighted box doesn't animate. The best thing is to just add a text inside the existing highlight boxes. But if you really must add new ones, then here is what you need to do. The new text animates as well. The highlight animation is very simple. The box just scales from 0% to 100% That's all. The initial state is set to zero vertical scale. Then it changes to one, which means 100% It just grows 0-100% in its original size. The same thing is done for each highlight independently. That's why first one runs. And then the second one to animate the third one, select it on the canvas and under initial states, when this plus icon appears, click on it and select Scale. And put zero under x value. But before you do that, disable this lock because this is preserving aspect ratio and we don't want that. We want it to shrink and grow horizontally. Only now we need to add a final state, which is to grow it back to one. And we're going to add that at the end. Why? Because we want it to animate one after another. At the same time, again, disable the lock and put one under x value. Play the animation to see how it's working. Working. Good, we just need to match the easing to others. I'm using out quad and 0.6 seconds. Check the preview. Perfect. As for other interactions, probably you won't be needing to change anything. But if you do, all the settings are visible for you to see how they are set up and what needs to be changed. To find these interactions, you need to select the correct element. The interaction appears in the panel. Interactions that are triggered by page load appear all the time no matter what element you have selected. But those that have an element trigger, you have to select the exact trigger element to find these interactions. You can see them in the Navigator. All the trigger elements have this lightning icon next to it, that means there is an interaction on that element. For example, button wrapper, that's where that hover interaction for the button is set up. All right, the last important thing you'll need to know is how to manage projects. They are CMS items, so you can easily manage them inside CMS. I'll add a new project so you can see what's what name description. Pretty straightforward. There are two images you'll need to generate for new projects. A thumbnail for the home page and the full screen of the project. The full screen is simple in Figma. Go to the design of your page and explore the entire frame. Then just upload it to the corresponding field. But make sure to compress the image first, or it's going to be a very large files for the thumbnail. Go to this figma file that I have shared with you. Link in the resources, there is a page called Assets, and that's where you can create your thumbnails. By the way, you'll see here there is a fabrican and a web clip. Use this so you can generate your own and update them in the settings of your project. Drag the image inside the same thing for the back group, and position it as you like. Then export the thumbnail, compress it, and upload it in CMS. Then you have a life site URL. If you leave this empty, link one appear. So you can leave it empty without a problem. Make sure to enable this toggle. This is for the project to show up on the homepage. I've added this so you have an option to disable or enable any project on the homepage. If you're wondering how I've done this, it's filters. I created this toggle on the home page. Then I created the filter for the collection list saying that display those that have toggle enabled pretty easy. Then you have the three texts that show up under the title. That's it. Once you say go to the home page, you can see the new project is going to appear. On top of the others, it links to the project page which is ready as well. That's all you need to do to add more projects. By the way, these projects on the home page are a collection list. Remember, those content is linked to the CMS fields. You won't be able to edit individual items right on the canvas. You can only edit them inside CMS. Also, the collection list has a sort order applied to it. I'll set it to the newest to oldest, based on last time the CMS item was updated. If you want to change this sort order to something else, you can do so here, like oldest to newest maybe. Well, that's all the important things you need to know about this site. If you get stuck, let me know and I'll help you out. 155. Finding work online: Let's talk work and where to find it. There are many ways for a freelance web designer to find work. The very first and obvious option, which is online platforms like freelancer.com and obviously upwork.com, or locally in the city where you live and networking with people in the industry or networking with the startups going through the tech conferences, making friends with other successful web designers who can send work towards your way. Because what often happens with web designers is that they get fully booked because one designer can only do one website at a time, right? You cannot do 1020 websites simultaneously. So good designers very easily get book. And what happens is then they send the work to their friends or some other people that you would recommend to their clients and so on. Also LinkedIn and regular job boards like ZipRecruiter, there are more than enough ways to find work. And if you Google this, you'll find more and more options. The question is, which one of these options is the perfect place for you to look at things like your current scale, your personality or your experience, where you live, the city that you live. All those things will determine which one of these options is going to be the perfect fit for you at this stage, I can tell you which one is going to work the best for you. No one can, but the best approach is to just pick one at a time and just go through the list. In this video, I'm going to talk about the online platforms and finding work on online platforms. I'll give you a general overview of the biggest ones. There are many of these. There is upward, there is fiber, there is freelancer.com, people per hour, top towel, and so on. The list is endless and if you Google it, you're going to find more and more. And every year, obviously more and more of these platforms will pop up as competition changes, as some of them fall out of their top place and other one will replace them or new ones come up. First upward. This is where I found my success. I found enough work on upward to be busy full-time. Upwork is huge. It's a public company, meaning it's trading on stock exchange. I think it's the first freelancing platform to go public. It was created out of the merger of Elance and Odesk. Jobs are plentiful here, which means competition is rampant. I have a dedicated video on Upwork and how to be successful on it. So we will cover it in detail that I'll teach you some strategies on how to be successful in some common mistakes to avoid. In other big place where freelance jobs is freelancer.com. I haven't worked on freelancer, but I have used it to hire freelancers. I have a feeling that upward clients pay a bit more than freelancer clients. And that might be because of the way these two platforms target their clients. As you can see on the homepage, they have this examples of mobile app design and website design and their prices. Those are very low prices. So it seems like they want to excite clients how cheap they can get something, which is bad news for freelancers. But don't worry about this as the saying goes, if you pay peanuts, you get monkeys soon enough, clients will learn this and they will intentionally choose higher prices because low price will get them low quality result Lists gets updated constantly. It shows open jobs. These are jobs that you can still be done. This is already pretty good, but you'll see that it's lower number than Upwork, which at this moment has more than 70,000 open jobs. To search for web design jobs, you can search with keywords which I think searches through the title and the description of the job. But a better way to search is to select a scale from the filters. That's much better. Of course not all of these is going to be a fit for you. These keywords and scales are all selected by clients. What they consider a website design is not always going to be correct. So that's a short overview of freelancer. Then we have fiber which is slightly different than the first two on Upwork, Freelancer clients post jobs and freelancers bid bought on fiber freelancers post services and clients buy them directly. E.g. this freelancer here says he will design a responsive web flow website for $200. And he offers three different packages, basic, standard, and premium. I quite like this service based approach on Fiverr. I've actually done my first freelancing on fiber. This was a while ago. I did resume designs for five bucks. Back then on Fiverr, that's the price. You could only charge five bucks and offer some upgrades. But as a base price for every service that was listed, there was five bucks, hence the name Fiverr. They've changed their approach since then and now you can price your services whatever you want. I've often hired freelancers on Fiverr to do a quick and small jobs of translation, video editing, and things like that. As a client, it's great to just buy a service that is like a complete finished product. No negotiations and all that By send details, wait a couple of days for results and done. To be successful on Fiverr, you have to make money on volume. The whole thing is arranged for that. There aren't much meetings with clients or negotiations. You get the details, deliver a result done next job Events that specific delivery dates which you have to meet after you have all the input and assets from the client. So if I were to create a web design service here, here is probably what I would do personally. I would say I will build a website for a specific type of business, e.g. a. Website for freelancers or a portfolio website or accountants, etc. I'd create many such gigs. That's what it's called here, the gig. Then I'll create a couple of templates or just use templates from workflows marketplace, there are a lot of beautiful templates sold on Webflow and they're already been pretty great free templates. I would count the template cost and the total price may be use free templates for basic pricing and then have paid templates under premium pricing. And then when people would buy my gig, I would have them choose which template they want, an offer colour type or other customizations based on their brand. This way clients know upfront what they're getting. No discussion on designs and I don't have to design and build an entire website from scratch. I'm grossly simplifying the process here. Of course, I could make an entire course just on this. Keep in mind that you'd be creating a complete ready-made service for your clients. You'll need to put a lot of thought into it to create a really nice package. And we'll take some trial and error until you get it right. As a matter of fact, this is exactly what I was doing with resume designs. I was giving them about five resume templates to choose from. I would choose it then I would fill in their details and done. No one ever had any complaints about the design because they knew what they were getting upfront. People per hour is sort of a mix between Fiverr and Upwork. Clients can find freelancers directly by searching for specific skills and then reviewing profiles or freelancers and getting in touch directly. Also, they can post project just like Upwork Freelancer and get proposals from freelancers. And just like Fiverr, you can post services here. They call it offers on Fiverr it's called the gig. I have used people per hour both as a freelancer and as a client. I did some resume designs here. Back in those days, I've hired web designers and web developers several times in here. Top towel is a freelancing side that has quite a different approach than others. This side is going to be a bit early for you in your career, but I'm still going to throw in here. So you know what's out there. Top-down has a very rigorous selection process for freelancers. They do interviews, challenges, portfolio reviews before they accept you on the platform, they want a top talent in there, hence the name top tau is they claim only 3% of applicants are selected. So consider top-down once you have excelled in your skills, this of course means that clients will look for freelancers on this side, are looking for a premium service and they are not afraid to pay accordingly. So as you can see, even on online platforms, there are places to find high paid work. If you want more sides, Forbes has listed 79 sites to get freelance jobs. Go get your head spinning, link in the resources. Over all possibilities are endless online. But competition is fierce as well because there are a lot of web designers out there. It's an entire world competing for the services, but don't get discouraged. In reality, most of the web designers and most of the talent that is applying for jobs and that are on these platforms. They are terrible. They are not even mediocre there below mediocre, clients actually struggled finding good talent as well. Often my clients, when they come to me and I'm busy and I'm not maybe fully booked and I don't have any capacity to take new projects. They asked me okay. Then do you know anybody else that you could recommend? Because we went on this side and we couldn't find anybody because there's just so much competition and there's just so much noise going on out there that finding, finding the talent for them, it's a bit difficult. And the thing with this platform is that because anybody can join and it's open to the world and the world is freaking big. You have so many people join in without even having any skill at all. Like people will claim that their web designers and they will do anything even before they took a web design course. But if you can imagine like any kid or anybody comes here and they think, I'm gonna make a lot of money online. And they started like, Well do web design. I just installed a Squarespace site for somebody or I just learned how to install our WordPress theme. And now I'm a web designer or a web developer. And for someone like you who has put so much work into it. And let's be honest, this course was quite huge. If you put work and if you are working on it, if you are taking this seriously, then you will be unstoppable. And if you provide goods surveys and you deliver goods surveys and with the Polish and process that you have already said. Having a great, great website showing portfolios in some other tips and tricks that I'm going to teach you later on in this part of the course. You're gonna be miles ahead of the competition who are just messing around there, not knowing what they are doing in reality, and they're just random people around the world. 156. Finding work studios: Finding work online is not the only place. We have a lot of jobs available locally as well. In one such place would be studios. So this would be marketing agencies, digital agencies, creative agencies, design studios. I don't know. There is many different names that they have. Basically, these are companies that do web design and digital work for their clients. Whoever may be individual or company clients, right? So if they are advertisement agencies, e.g. the marketing agencies, they are being hired by some big company that they need a landing page or website. So this sort of studios then they hire, they do have in-house staff, right? Obviously, they do have in-house designers and in-house developers and all that. But what happens is many middle, medium, medium-sized agencies like that and studios. They have a small amount of staff in-house and they have like an army of Florida freelancers. They do most of their work. So that's how they work. My biggest work engagement was actually with such studio and we worked for a long time and they're sent a ton of work for me and I've learned a great deal from them. And that doesn't mean that they have to be local studios that can be from different countries, different cities, and even different continents. I myself work with the studio that was in Australia and really, really far from where I live, which is in Europe and Portugal. Now how you can approach the studios will depend case-by-case, but here are some strategies on how to approach them. I have a friend who's an illustrator and he has this approach. Whereas once I asked him, you know, how do you get your clients? Because he doesn't work on Florida freelancing platforms. And he told me that he just spams them. So he has this email list of different potential clients like a agencies, companies, advertisement agencies are publishing books or magazines because those are the type of clients that he works with. And every time he needs work, every once in a while he will blast email using some email software. And basically, he will inquire for work saying like, Oh, do you guys need an illustrator or something like that? And I'm not sure exactly what's the tax users and how he approaches, but I know he inquires and asks if they need an illustrator. And what happens is more of sometimes at the exact time, one of these companies will need an illustrator for at that exact time. So they come back to him saying that, oh yeah, we actually do need an illustrator. He gets hired. And it's a great approach because this saves the other, the other guy's time. So they don't have to post a job on freelancing platforms or wherever, go through different people's portfolios and interview them higher than all that. It's really easy when somebody already came to you at the exact right time. Every design studio will have their own style of design that they do on websites right there we'll have specific approaches with the designs. They might be a bit more illustration based designs might be more photography, might be more type base and layout based design. So when you approach this, where you decide to approach this design studios go through there examples of work and most of them obviously will have their portfolio work on their website, go through them and understand and kinda nailed down what sort of style they use in their approach, those that you match the style or refine your portfolio in a way that you are bridging that gap between your work and their portfolio to make it match as much as possible. Because we knew that apply to the studios. They're going to see if they have less than are dozens and hundreds of different candidates they are looking for. Obviously there are going to be leaning towards and picking somebody who really matches their style. Because they know that they will, you will easily plug-in into their design, into their workflow. So they don't have to train you if you are like an illustrator and they are more into like photography based websites, now, they would have to retrain you on how to do photography or they might, they will need to completely change and alter your design style. So bridge that gap between there and your portfolio and you will increase your chances of being hired by them. When I was managing company, we had this back and see posted online and we had a whole bunch of candidates obviously applying for it. But one of these guys, one of the candidates showed up at our doorsteps. It's just showed up in our office and I had a printed resume and CV of his. And he just handed this. He said I'm gonna like Ohio. I was applying for this job ad and I just wanted to hand it to my CV personally. And I was like, I was very surprised but very impressed as well to see these guys kinda confidence and audacity to kinda show up and come and apply for the job at in-person. And when I had to go through 200 different job applications, one person really stood out obviously because you showed up. No one else did and no one else did anything differently. And funny enough, I would probably dump his application if he hadn't showed up because he's CV and he's application wasn't strong enough and he's experienced wasn't good enough for what we're looking for. But because you showed up, your amino memorable and I kinda like that confidence and he's sort of proactive attitude and he got the interview, he actually skip the interview part and got to the final phase, final selection phase for the three other finalists. And he got that only because he showed up. Sometimes all it takes is just show up and hand in your printed portfolio because not many people are doing that. People who hire, they're busy and they appreciate any extra step that the candidate will take. No one can get you closer to the job opportunity. The people inside those studios using LinkedIn and Facebook, you can definitely find people who work inside those studios and then connect with them directly or using other social networking sites, probably like Facebook, Instagram, Twitter, and direct messaging them. I, myself have never done this, but I know a lot of freelancers, they do things like that. They connect with people inside you, even those who are actually hiring the managers or the founders of the studios. If you're that kind of person and if you can easily connect with strangers, give it a shot. I'm not that kind of person and it doesn't work for me, but maybe it's good for you. So just throwing it out there as an idea 157. Finding work networking: And other obvious but often overlooked option of finding work is networking. In every big city, there are swarms of entrepreneurs and startups that are hustling and trying to make the amino, their business for it. And they all need a website. You are in a very good market. Every business being small or large or international or local, even individual professionals like you and me, photographers, coaches, kahn Murray organizers, they all need a website. So where do you network? Start with meetup. Meetup if you've never used, it is a place where people organize different events surrounding a specific theme or a topic, e.g. this group really spending your AKS, organizes different design-related meetups and events in my city, intrapreneurs, startups, other designers that are quite valuable connections for you. And they often go to Meetups like this because they run their own sort of meetups and organize their own talks and workshops and different sorts of events that attract the right crowd. That could be useful for you as connections. Everyone's got a gig out of an event like that. I once attended a workshop on what, how to wireframe my website. Really, I actually attended to in a workshop on that. Not that I needed to learn, but I thought, you know what, it's gonna be fun. And what do you know? I gotta get out of it. Even if you meet right crowd in mid tabs, you will realize that many of them don't have good enough budget to pay you well for website projects, It's good when you're starting and you're fine sacrificing some pay for the experience and network, but in a later state, it's not the best option. A better place to find bigger fish is conferences, tech or other start-up related conferences. Startups often go to places like these to exhibit their product or finding investors or find customers for their company. Most of these conferences are paid, so it's more suitable on a later stage once you get your freelancing going and you can afford a little for the marketing. Many cities will have startup incubators and you can check that if you're a city has such incubators because these places, they kinda put a lot of startups together and then they are always organizing different events and demonstrations and things like that. And a lot of jobs and freelancing board can be found within this ecosystem and environment. In a lot of people have wire, web designers, designers or developers. These are crowd and good connections for you to develop and grow. And if you hate networking, then don't do it. Put your time and therefore in something more suitable for you and your personality. I myself, I don't like networking. I'd rather chew on glass then go and talk to people. It's always best to put your efforts in something that clicks with you. I have one row for you. Don't do anything that will make you hate web design. You liking and enjoying web design is crucial to your success. It's a better factor of making your profitable and successful than any talent or fancy university education. And your enjoyment of web design depends on a lot of things around it. Because just like any other job, there is much more involved than just sitting down and designing right there is looking for clients and negotiating, sending proposals and all the meetings and all that stuff. So make as many of those things enjoyable too? 158. Finding work conclusion: These are some of the many options you have at your disposal to find freelance work. I wanted to show you all these options because sometimes freelancers forget that there are more places to find work than just Upwork. I haven't covered all of them and I couldn't possibly do that. Jobs often come from unexpected places, but here's what you should do. Expose yourself to as many opportunities as possible. Knock on as many doors as possible, like anything else in life, you have to try your luck as many times as possible as Wayne Gretzky put it, you miss 100% of the shots you don't take. Alright, up next we'll dive deep into Upwork, stick around 159. Upwork overview: The years of working on Upwork as a freelancer and hiring other freelancers, I have accumulated some interesting tips and tricks that I used for myself to be successful on Upwork, and I want to share these tips with you so you don't have to waste years of trial and error and trying to find out how to make things work on Upwork. So I've put all these tips in different videos and sort of compiled them in different themes. But before we get to those tips, let me give you a quick tour of Upwork. This is how upwork works. A client posts a job that they want to get done, like a website design and build for a startup. They give details, sometimes a predefined budget and sometimes without a defined budget as an hourly rate. The freelancers bid on the job, sending proposals with prices, then client responds to proposals and starts a conversation with freelancers that they like. Often they might do interviews over the call. Finally, they make their choice and award the job to one person. The contract and billing is all managed through the platform. If you are working on an hourly rate, then you are going to track time through their application. All time is automatically logged and the client is automatically billed for it and the client's payment method is automatically charged. This is great because you don't have to worry about billing, money transfers, and all that. Upwork is free to use, but it takes commissions from what you make. For example, let's say you bill a client total of $5,000. Upwork will keep 10%. Searching for jobs is pretty straightforward. You can search jobs by keywords, skills or some other filters. Searching correctly is going to be important to find the right jobs. Keywords for you are going to be website design, web design, web flow, lending page, web page, responsive website, and so on. Don't forget lending pages. Those are in high demand, and they are simpler than websites. In terms of design and development, lending pages are all the same web pages we've been doing so far. It's just a single page instead of an entire website. Keywords aren't the only way to search. Often, they're not the best way because it returns everything that mentions your keyword anywhere in the job posting. Skill search can be a bit more targeted in such cases. You can do that from Advanced search. Select a skill from the drop down and search, but one skill at a time, otherwise, it's going to look for jobs that match all the skills that you have selected. These are skills that lien selected when they were creating the job, so it can be a bit more precise than just keywords in the description. This is how the usual job posting looks like. This one is an hourly rate project. It shows right here. Job descriptions on Upwork are most of the time quite bad. Often not a lot of detailed information is provided about the project. Employees could use some training on how to post proper job descriptions to attract the right crowd. To apply for the job, you have to submit a proposal. This is how proposal submission form looks like. You select your rates that you propose for this job. The billing type is set by the client itself. So if it's hourly billing, then you can only propose hourly rates. For flat rates, then you have to only propose flat rate. Cover letter is a message that you write to the client. This is where you try to make that pitch and convince them to hire you, basically. The rest, like your portfolio, your reviews and all that, they can check directly on your profile. I have an experience of posting job ads on Upwork, and that gave me an advantage that other freelancers didn't have. I knew something they didn't. And so you will. This is what a client says after they post a job. A list of proposals from freelancers. This is most important page where the decision making by the client happens. This is where they filter out freelancers that they don't want to work with and choose the ones they do. I have several great tips on how to be successful on this page and stand out from the crowd, but later on. The client can see your proposed rate here, in this case, hourly, since that's what I set as the project billing. They can see your lifetime earnings on upwork, your job titles, and badges, which we'll discuss in more detail, and a few lines from the cover letter. When client clicks on one of these, they get to a proposal view, which is basically the same as the freelancers profile plus the cover letter. Now, all other details of your profile and the cover letter will matter. Client can check reviews and ratings from the past job, how much you made on those jobs. They can see your portfolio. These are screenshots you can upload under your portfolio section. They can see your skills. Keep these skills genuine and focus on your domain. Don't put things like Microsoft Word. It doesn't make you look like a better web designer, and they can see your employment history outside of upwork if you add any. If you do have employment history, it's a good idea to add them here. Prior experience counts too, and it can help build your credibility. Although, whatever you put, it has to look good. Your summer job at KFC isn't going to add anything. And that's it. That's general overview of Upwork. 160. Tips 1-3: Getting your profile approved: Before you can get work on Upwork, first, you have to get approved. This is sort of bad news in the beginning, but once you get approved, then it's a good news because that means that Upwork is trying to keep the marketplace nice and tight. So it's not overcrowded, overcrowded with freelancers, because then if there is too many freelancers, the competition is too much, and the prices will be driven down. And basically, it's not going to be a big benefit for freelancers who are working on upwork and neither for the clients because then they just have to go through so many different freelancers and too much competition when you open an account as a freelance on Upwork, you submit your application, and they have to review it within a few days, and they either approve or reject. If you get rejected, don't freak because you can reapply and there is no limit on how many times you can reapply to Upwork and you'll just improve your profile and then apply again. And if it doesn't work and then again and again, my experience with this application process is not much to talk about. I made it. It was accepted, end of story. But there is this guy, and on his blog, he has wrote this article which I'm going to link in the resources, and I want you to read that article because there is great tips, and I want you to read that article before you apply to Apwork. And here are some tips that I'm shamelessly stealing from that article. Upwork wants to create a balance on the marketplace between number of jobs posted and then freelancers bidding on that job. So when this balance kind of disturbs, and let's say somebody posts a logo design and you have 1,000 freelancers bidding on that job, then things to get out of hand. So whenever that balance is disturbed, the upwork closes the gate on new applications who are applying for that particular skill. So for example, if it's let's say, logo designers, right, and Work has way too many logo designers, but not enough jobs that are being posted in that category, then they're going to sort of temporarily close the gate on new applications and new freelancers who are coming within that category. So until that kind of balance comes back up. One way to avoid this happening to you during your application process is to show upwork that your skills sort of stretch between many different categories. As a web designer, you automatically fall under multiple categories. First, under family of development you have web and mobile design plus web development. And under the family of design and creative, you have graphics and design category, and maybe even other for things like user experience and user interface design since they're not listed there. In case you have other skills and you plan on doing other jobs maybe like logo or brand design, then you can include that, too. But don't stretch yourself artificially because upwork from time to time, they do check the skill level, so they might do some interviews where they can check if you know and if you are capable in these categories. Besides choosing categories, Upwork also asks you for specific skills that you have, list as many skills as possible. Upwork has this huge database of skills where you search and then it autofills and gives you the option which you have to select. For example, in terms of web design, these are skills you could easily go for. Things like web design, obviously, responsive design, Figma, web flow, lending pages, and so on. But only choose genuine skills that are relevant to the job. Don't put Microsoft Word because that's not relevant to your category of work. I'll let you read rest of the tips from this article itself. There are more, so check them out. Okay, back to my own content and not stealing other people's advice. So when you first submit your application, you don't have an option to submit a portfolio. But if you get rejected and you reapply, then this portfolio option opens up and you are able to submit a portfolio and show your password to sort of support your application. In case you are going through this application process second time and you are uploading your portfolio, do not upload portfolio work from this course. Here is why. Since there are a lot of students in this course, and a lot of you will probably go on upwork to apply, you'll end up applying with the same portfolio pieces if you use those that we have already built in this and design in this course. And for the off chance where it's the same person reviewing your application on Upwork, then for them to see two different applicants applying with the same exact portfolio, that's going to raise red flags for both of them. 161. Tips 4-9: Create a profile that attracts clients: What's the first thing your client says on your profile or your proposal? Your profile photo. Don't make a big decision just by looking at your profile photo. We all do that. Let's play a game. Rad 1-10 how competent this guy looks like. No need to analyze just a first feeling 1-10, how likely he's to get the job done. I'm definitely giving him a ten. He's smiling, he's dressed well, the background is pleasant, photo looks professional. Now, how about this guy? I'll say three. I haven't checked anything else on his profile, but blood already looks like he wants to scam me of my money. That's how powerful photos can be. You don't have to look handsome or pretty because it's not a beauty contest, but you have to look trustworthy and competent. So get a really nice head shot. And don't try to save time and go on Facebook profile and grab it something from there, because most likely on your Facebook profile, you have photos that you're either, you know, looking cool, looking handsome, or looking pretty. And that's not the criteria to use when getting a nice hat shot, and nice profile photo on upwork because clients are not looking for you to be, you know, handsome or pretty or looking like a cool guy. That's not what they're looking for. They're looking for a competent person. So you have to find a photo where you look trustworthy and competent, or something where you're looking directly into the camera, where you're smiling and preferably on a plain background. Now, it doesn't have to be hatchop in the studio, obviously, you can be on a background of a sky, right? You can be on a background of something plain, something that is not attracting attention and detracting attention from your face. If you only had 1 hour to prepare your profile on apwork, spend 45 minutes on the profile photo and 15 minutes on the rest. That's how important the profile photo is. And, come on, it's so easy. We do have phones today. Yeah, you probably have a really good smartphone that takes amazing photos, find a really nice place, dress well, get a haircut, maybe trim your beard and get a nice headshot. Upwork has an identity verification process. It's simple. You need to upload your government ID and complete a video call with them. Once verified, you'll get this blue badge. This is an excellent way to increase trust in your profile with very little effort. Title is what's shown under your name. Web designer is a dissent title, but it's a little boring. That's what most people do, so nothing you will stand down with. Adding some extra punch is going to go a long way. For example, expert web designer or web design P, fast and efficient web designer. It tells a little more about you, even though it's a self proclaimed title, it still stands out. Imagine there are two proposals. One says web designer, another one says expert web designer. You'd be drawn a little more towards the expert. Even better approach is to mention final results, for example, stunning website design and build, top notch websites, hassle free web design. To take it a step farther, you could even mix and match these styles like expert web designer, stunning powerful websites or web design pro, top notch service. These are proposals for one of the jobs that I posted, and it was a lending page job. Now, how many of these job titles match what I posted? Only one. And even he has the most important keyword hidden deep inside the title. I'm looking for someone who creates lending pages. How can I tell if you're the right person if there is no mention of lending pages in your title? Yes, web, Wordpress, and PHP developers can all build lending pages. But how do I know that? I asked for a lending page, you give me Wordpress as an answer. What the hell is Wordpress anyways? I'm not a developer or web designer. If I was, I would build my own lending page. I'm not familiar with your technology and lingo. I'm probably an interpreter who needs a page for something. And even if I was familiar with the technology and knew all the lingo, I would still want to find somebody who specializes in exactly what I'm asking. So if I'm asking that I need to get the lending page down, then I would definitely want to go for somebody who is lending page expert or specializes online lending pages. Or if I want Facebook marketing, right? Maybe Facebook ads, I want somebody who is a Facebook ad marketer and not a general digital marketer. This is bananas. What are they thinking about? It's too easy to compete with most of the freelance ss on upwar. You can be the best damn web designer out there, but if it's socket selling, I'll never get to your portfolio. Upwork has this feature called specialized profiles. So you have a general profile like a web designer, and then you can have a specialized profile like Webflow designer or LandiPage designer. When you apply for jobs that are looking for Webflow designers, then you can use that specialized profile and apply with it. That's much more effective than just applying as a web designer and then needing to explain in the cover letter that you work in Webflow. They might never get to reading your cover letter. Another information that really sticks out from the profiles is the job success score badge. Only four freelancers have that badge from all the proposals, and one has it at 88%, which is not very reassuring. So instantly, these three people stand over the crowd. Even though there are 15 proposals, very easily I was able to filter out most of them just by checking this badge. To get this badge on Upwork, you have to work with at least three different clients. So there's not a lot you can do about it, you just have to wait. But there is something you could do. You could bring outside projects to Upwork to get those minimum requirements as fast as possible. You can find people or businesses in your network who need a website. And do a project for them. And you could give them a large discount or maybe even do the website for them for a very small symbolic price in exchange for doing it on upwork, doing the whole process on Upwork, and then giving you feedback at the end. Kind of win win situation for both of them in the beginning works for you. You'll get some traction and you'll get these minimum requirements on upwork, and plus, they'll get a website for a very cheap price. Batch can improve your hiring rate significantly, so it can be worth the trouble to go through this whole process if you are struggling to get clients in the beginning. In case you do consider going through this whole process, I have linked in the resources a page from Upwork on how they calculate this job success score. Do read that first so you can understand how it works. The formula is not shared fully because it's straight secrets, so it's not guaranteed when are you going to get it. But they give a good guideline on how it works, so you can understand when to expect to get that badge. 162. Tips 10-12: Get the "best match" badge: Every job posting can get a huge amount of proposals. Here there are 15. That's already a lot, right? But it's actually on a smaller side. Clients can get more than that, usually 20 to 50 and sometimes even more than 50 proposals. Is the client going to go through each one? Not really. They'll keep their eyes on the very top. What does that mean? You got to find ways to end up on the top? Work puts best matches on the top and even adds this shiny best match badge on their proposal. That puts those freelancers miles ahead over everyone below. As a freelancer, you don't see if you got this badge or not, but potential clients do, and you should always aim for it. So how do you get that badge? No one really knows what's the algorithm behind this. Upwork doesn't really share that information, but after analyzing proposals that I usually receive, I've nailed down several key ingredients. When you create your profile, upwork will ask you to choose your experience level. This same question is asked to clients when they post the job. You can easily see that experience level that the client has chosen for the particular job. Apply to matching experience level. This is probably the most important factor in determining this batch. The job that I had posted, I was asking for expert level, and most proposals were from intermediate and entry level freelancers. What are they thinking about? It's a waste of everybody's time. There are enough jobs in each level, so apply to matching ones. If you don't like jobs in your experience level, then change your level in the profile. Easy as that. The second most important criteria seems to be the skills. When clients post the job, they are asked to select specific skills they're looking for in a freelancer. They are given the same database of skills as you have used in your profile, and you can see this information on the job post too. Apply to jobs with matching skills. For example, I don't have any of these skills selected in my profile. So if I applied to this job, I wouldn't get a good match score. So always check the skills that the client has selected for the job and make sure that you have those skills in your profile as well, and they match because that will definitely increase your chances of being the best match. Now upwork only allows you to select maximum of ten skills. So there will be some related skills that you might have to leave out. But sometimes you'll see a job that uses exactly those skills that you had to leave out. What you could do in this case is to remove some and add those missing skills from the job and to create a match. This might be a little hack that work might be aware of, so the algorithm might ignore last minute profile changes. But it's still worth a try. At least the client will see that you have the skills they were looking for. When client is selecting the desired experience level of a freelancer, it shows approximate price range to be expected. You want to match your bid to the upwork suggested range. If client selected expert and was fine to pay more than $50 an hour, Upwork isn't going to like it if you bid 30/hour. You're making both you and upwork lose on higher revenue. Find out what's the current price range for your level, you can almost post a job ad to get to the step and you'll see the most recent price ranges. Doesn't take anything to do this. You don't have to post the job in the end. It's just one of the steps in the job posting wizard. And you can do this from time to time to have most recent values. 163. Tips 13-14: Propose the right price: Here's some tips on pricing. A lot of freelancers think that clients pick lower prices. And if they bid low, they think they're gonna look more attractive for the clients, sort of like a bargain. Freelancers who have this sort of mindset. They have this negative sort of tastes and attitudes towards Upwork and deserve freelancing platforms. Thinking because everybody is now competing for the price and there's a lot of pricing, a lot of people competing with the price. So everybody's kinda bringing the prices down, but they couldn't be more wrong. If that was true, then you wouldn't have some freelancers getting paid $500 per hour on Upwork. Websites are high-value products. They're not like toilet paper that the cheapest gets the most sales. Businesses are going to use website for their own business so they can get more sales, right? It's going to represent their company, represent their business in their brand. So they don't want cheap, they won't stand out, they won't quality. And often they're more than happy to pay for it. Just like a lot of us who are happy to pay 1,000 bucks for iPhone instead of paying 100 bucks for Alcatel by bidding low, not only you make less money, but you also when less jobs. It sounds counter-intuitive, but clients actually prefer higher prices. Why? Because pricing is one way to tell if something is quality or not. We know that it's not always true and we do realize that, but often we can help ourselves, right? So we use pricing as one of the indicators to judge if something's going to be high-quality or not. By bidding lawyer quietly whispering to your clients that you are a lower-quality. Look at this list of proposals. Lower, you scroll more depressing. The situation looks less qualified. People know rating no previous jobs for this presentation. And you get lower prices on the bottom too. So being on the bottom doesn't look attractive at all. The less experienced talent is sorted on the bottom. So lower prices are associated with lower-quality. Just by looking at this list, this list is a clear indicator to the client that they should be careful with low prices. In this case, lower prices look like a warning sign, not a bargain. As a client when I'm hiring freelancers, I hate the question. What's your budget? Because most of the time, I don't know what's my budget. I know that I want something done, but often I don't know how much is it going to cost. I don't know what's the good value for it to pay. So asking that question, it's gonna put me into this confused state where I don't know how to answer. But when you post a job on Upwork is a client, and if you choose a flat rate, Upwork is going to ask you, what is your budget for somebody like me who doesn't know exactly what's there, what is their budget, and doesn't like to answer the question. What we do is we try to pick the lowest number that comes to our mind. Last thing you want to do is to overpay for something. So if I don't know what something costs, I will go way, way lower on my estimates then it's actually going to cost because I really don't want to overpay, So I don't want to say N1. I'll pay 2000s for this job. And what if it costs just 300 bucks? Then I'm going to assume that freelancers are going to abuse me for me kinda putting this high budget. So now everybody is going to try to take advantage of that. And they'll say, Oh, we'll do it for 2000 and we'll do it maybe 1,500 and so on. Where in reality, the job just costs $300. So to avoid overpaying, you will see that clients often will pay way lower budget, then what they're actually willing to pay. And at the end of the day there'll be fine paying two or three times more of what they propose is the budget. So when you see a number on the budget, don't take it as 100% truth that that's exactly the amount of money available they have. Sometimes it's true some businesses will have exactly that amount of money available for that project. But often it's not true. It just clients pulling numbers out of their head. And when you see this budget, just ignore that and proposed, what is the project worth to you? Unless if you see inside the job description that they explicitly mean that that's their top budget and that's what they're going to pay 164. Tips 15-16: Be the freelancer they can't resist: Being successful freelance center is often not about the scales, but more about service that you provide to your clients. You can be the best **** web designer. But if clients don't like working with you, if you are not delivering a high-quality two surveys, they're not going to come back for more. Because what happens with clients that are happy is that not just they come back for more and bring more work towards you, but they also bring other people. They refer their friends who are usually business, businessmen and intrapreneurs. Their friends are usually other businessmen and other interpreter. So they do have a really good access to bring more work towards your big chunk of my clients. They're actually referrals like I worked with one client. They are super satisfied because I deal with really high-quality surveys. And then they are happy to recommend me to their friends. But if I didn't deliver a good service, even if I built a good website. But they were maybe I was neglectful or maybe I wasn't. I basically think of a customer service. Maybe I was just not I wasn't very nice. Maybe it was just rude or maybe I was unresponsive to their emails or their calls or something like that, then they're not gonna be confident to recommend me to their friends. Because whenever you're recommending something to your friend, you want to make sure that you're not going to screw them over there, whatever you are going to recommend to them, it's going to be good and beneficial for them. So they need to be hundred percent confident that whatever they're getting, whatever, whatever they are recommending is good for their friends. So here are some tips on how to be that freelancer to whom that clients keep coming back for more. You know, what's the one criteria the clients will never overlook. They can overlook things like your portfolio, your previous experience, maybe even job reviews. But there's one thing that will never, never ignore and that is trust. Do I trust this person? If the answer is not 100% ****, yes, then you're not getting the job. No matter how amazing everything else looks like on your profile. If I don't try to, then everything can be alive. Everything you say can be alive. Everything I see on the profile can be ally. Everything you promise can be a lot, and I will never trust you with my money and my business. The best way to lose my trust as a client, try selling me something. If you are trying to sell me something, then you have an agenda. You have this secret agenda that you want to make the cell. If I recognize that you have that agenda, then how do I know that everything that you say is true, that how do I know that everything you're trying to do is to help me, but not just to benefit yourself. The solution is very simple. Change your personal agenda from selling to helping. You might go, Wait a second, but my agenda is to sell my services. I'm doing business. I'm trying to make money. I'm not here to do charity or volunteer work. How do I change my agenda to just helping when I do need to sell? I know that's true, but nothing changes in reality. Nothing changes on the surface. You're still going to get paid, you're still going to make money. But everything changes deep down. The way you talk, the way you approach your clients, the way you connect with them. All those small thousands of micro decisions and micro-interactions change when your agenda changes from selling to help pink, and it's not going to go unnoticed. Your clients will trust you instantly. And that often matters more than your portfolio. One amazing helpful thing you can provide to your clients is to relieve the pain that they're experiencing in this field. Imagine for a minute that you're a business owner that needs a website and you went to design studios and found out that you can't afford their astronomical prices for web design projects. So what you do, You go on freelancing platforms like Upwork to hire, hire individual freelancer Who's going to charge a bit less. Now thinking about how much confusion and uncertainty you have to deal with if you are not the interpreter who is from this field, from this kind of web design industry or whatever. If you're just doing the regular business, then you probably don't know any of this technology. You don't know where to build it. You don't know what's WordPress or what's web thaw or HTML or CMS. You don't quite know how to judge who is a good freelance article, is a good web designer and who's a bad web designer? You're dealing with a lot of uncertainty. And as you do more research, you will find out that you, instead of getting clarity actually you are getting a bit more confused. So as you can see, the clients have to worry about so many strange details and put their money at risks. So how can we help them? There are several ways we can help them in one way, he's definitely to tell them that in show them that we got the process, all the things that we're going to take care of for them and they don't have to worry about things like the technology, right? Where are we going to build this thing? Where are we going to launch this thing like Webflow ride? They don't have to worry about that. We got that taken care of. We can also explain the process to them, just like our design process that we have, that we're going to go from project brief and then to the wireframing and then to the design and finally building the whole thing in Webflow and developing. So we can explain that they will be involved and have control over each step of the process so they know what's going on and they don't have to just commit a huge amount of money and then hope that everything's going to work out well. Because there will be involved in the whole process and they will have ability to kinda tweak the I'm tweak the way and course to make sure that we are going to the right direction in this way. Now, they can relax in our partnership because they see that we have it taken care of and we know the process. And we can guide this process and that way they can relax and they don't have to risk a lot when working with us. Do that and you'll have them eating off your hands. Because other freelancers, most likely they're not doing this. They're not taking them to this guided process. But you are, other freelancers are there to take their money, but you're not, you've got their back 165. Tips 17-22: Write damn good cover letters: Jobs, you usually have to send cover letters with your proposals. These are just a small email or a message that you send to a client when you're kind of sending them a proposal. On aw and freelancing platforms, there's usually a field that you fill out and you send that. On outside of the platforms, that's usually an email that you sent to them with your proposal. That's it. Freelancing didn't teach me how to write good cover letters. Hiring freelancers did. I've had as a client, I've had experience of receiving cover letters that were great because they were working well on me as a client, and there was a lot of pile of crap that I was receiving that made a lot of freelances completely unhirable. Here are some tips on writing damn good cover letters. A cover letter that puts me to sleep instantly is where the freelancer is talking about themselves. I post the job, describe my problem and the solution that I'm looking for, and you respond with how amazing you are. Nearly all of these freelancers are talking about themselves. I am this and I have that. I have this amount of experience, and I've done this in the past. Frankly, dear, I don't care. Tell me how you're going to solve my problem. Talk to me about the project. How can you help me? Show me that you're amazing. Don't brag about it. Okay, if you can talk about yourself, then what do you say? Very easy. Start giving ideas. Imagine they've already hired you and start brainstorming their project. How are you going to design it? What would be some fun things to do? Send links to example websites and say you could do this sort of interactions or this sort of hero section. Nobody does this. If I saw a proposal with ideas and examples, I'd be like, Thank you. Those are great ideas. You get me. That's what I want. Done, you're hired. What real examples? Here is an actual cover letter that I've sent on Appwor which got me a job right away without an interview. I start by linking example pages. I took lending page templates, not even my work and showed him as examples. I showed him what I was going to do. Now he can see with his own eyes, and I made his life easier. Then I give him a quick rundown of the process, how I was going to do all that, told him it will look good and will convert effectively. That's his goal, isn't it? Now he knows I understand his goal. Then I ask some meaningful questions that shows that I'm not painting the picture pink and I've considered the specifics of the project. Notice how I only start talking about myself after all of that in the very and where it says about me. There's a little more blah blah blah about me, but I've cropped it out because today I wouldn't even do that. I would just keep it without that paragraph. Here's another example of a good cover letter that I received on one of my job ads. This person has more than 50 K earnings on uppwor and it shows why. He's straight to the point. He's helpful. He's even going to show me how to get visitors for my page. He understands my goals and asks me meaningful questions. The message is short and sweet, not wasting my time with a bunch of canned fluff. Don't try to save time by sending template cover letters and can cover letters. I hate can letters. Screw them and screw people who send them to me. Saving your time, but wasting mine? No, thanks. Good clients notice can letters miles away, and they're not even going to bother reading them. Sometimes inside cover letters, you want to give examples of your past work, right? So a lot of freelancers, what they're going to do is they're going to refer to and link their portfolio work within the pw. But what you can do and because you have website, you can send them links to your website. Be portfolio pieces on Atwor they're not displayed in the most flattering way. However, on the website, they look very attractive because it's your website, it's your stuff, right? Everything is kind of organized nicely, and you have a bit more content. It's your opportunity to use it, you know, to show that you're actually not just upwork, but you're kind of very professional, have your own website and kind of impress them with the whole presentation that you have. But only if you're going to publish that website on your personal custom domain, because my portfolio slash 123 dot webflo dot IO doesn't look very professional, looks amateur, and I don't take anybody any freelancer seriously who sends me their portfolio, which is on dot weblo or something or dot wibly or wix.com, because that doesn't look like you're taking your profession seriously. So cough up 15 bucks per month for weblos first month of subscription, and you're going to look miles ahead of other freelancers who are on upwork. And you just need to pay for the first month. Once you start making money, it's just going to pay for itself. Almost half of the proposals that you submit will have an extra field called additional questions. First field is cover letter. That's where you write your main message to the client. Then if client added an extra questions to the job, you'll get those fields below. When I posted the job on aphorg and I got proposals, I noticed something very strange. On the client side, the order of these fields was reversed. I was seeing answers to the question first and then answers to the cover letter second. Most freelancers had no idea about this, so they were writing things like, as I mentioned above in my cover letter. What's above? Embarrassing. I was like, Oh, my God, that's what I've been doing too, writing cover letter first, and then questions. So here's a hidden tip that most freelancers don't know about when there is a field for additional questions, and sometimes there isn't, right? Sometimes it's just a cover letter, but sometimes there are. So whenever there are additional question fields, write them upside down because that's what the person that's what the client is going to see first. The additional questions, answer it first, and then cover letter later. On the page where a client receives all proposals, they can already see a few beginning lines of a cover letter from the freelancer. Many freelancers start by something like dear sir Madam. Is that how people connect? Dear sir slash Madame? Sounds so impersonal and just plain weird. I often say this one. Dear hiring manager. What the hell? Hiring Manager, whom? Hey, why are you calling me random names? And who talks like that? This one is actually Upwork's fault because in one of their blog posts, they advise to use that Deer hiring manager, which was probably written by one of their employees who's never been a freelancer or a client, because that's the stupidest advice I've ever heard. So be careful when reading advice from Upwork itself. So if you can say that, then what do you say? Well, let me solve a big mystery. What do you say when you greet somebody in your work environment? Do you say Dear ser Madam or you say, Hi. Hello. Good morning. Hi there. Simple as that. Why complicate this? All of those are professional and polite, too. Don't be weird. Just be natural and friendly. That's all. Now, some of you probably come from the countries and cultures where use of words, sir, is sort of required to be polite. This is, for example, a case in India. And when I when I work with freelancers from India, they always call me, sir. They go, Hi, sir, yes, sir. Thank you, sir. I get a little weirded out when they do that. Don't use sir with everybody around the world because it's not part of everybody's culture. For example, in North America, Britain and Australia, the word sir is used in very impersonal situations. For example, when you want to grab a stranger's attention, like, Oh, excuse me, sir, you dropped something. But work environment in these countries is more friendly. There is no honorific status distance between people because of their age or job position. So never an employee would call their boss. Sir, even if that boss was Bill Gates, they would probably say something like Bill or Mr. Gates, but not sir. You're going to come across a little strange and impersonal if you use this with people who are not used to this sort of courtesy. Check where they're from and use, sir, only if it's expected in that country. 166. Tips 23-25: Don't get yourself suspended: Sometimes freelancers gets suspended or banned from Upwork for doing something that is against their terms and conditions. So I'm gonna give you some tips to make sure that you don't find yourself in a very tricky situation with them. Trying to get paid outside of Upwork is against their terms and conditions. And if they suspect that you've been trying to do that, they will most likely bend your account. This reason is plain and simple. Upwork makes money on transactions and payment transactions that happens between you and the client. In if you try to take those payments outside of the platform, then they don't make money and you **** them off. You can find more information about this in their terms and conditions. And the clause is called center convention that circumcision. And you can find out more about it. This applies not just to current project that you get from the client, but also all the subsequent club projects that come from the same client. There. They have that 24 month non circumvention period. So the moment you start working with the clients, there is 24 hour period where you have to keep the relationship on Upwork from that client and get paid on Upwork. So there are triggers in your communication that can raise the red flag because the messaging happens using up for its messaging platform, right? So even if in this messaging you discuss things like pioneer, these are, this would be the red flag trigger words that instantly kinda trigger this suspension automatically. If you mentioned things like paying near PayPal, bank transfers, I bands anything that is kinda can be sort of associated that you're trying to get paid outside. And it doesn't matter even if the client is sort of initiating the discussion and they want you to get paid outside if you agreed to it or if you are the one if you kinda mentioned something like yes or whatever, then you will get suspended even if they asked you for it. So make sure that if the client asks you that, Let's take this outside, say no, you want to keep things on Upwork. Now most of the suspensions happen automatically. It's just if you mentioned something that AI gets triggered and all that stuff. But sometimes maybe you mentioned PayPal, not because you want it to get paid outside, but maybe you are giving an example. As a PayPal website, maybe you are trying to deal designer website that is for the banking, or maybe you are designing some e-wallet or something that is related to financing. But then, then it's okay. Because if you get automatically suspended, then you can appeal. And then a human being will take, take a look at your communication and if they are convinced that you are not trying to get paid outside, but you are discussing this was part of the project, then it's going to be okay. And they will lift the band. Now naturally, if you are discussing this on Skype call or a video call, that is not part of our pork, right? It's impossible for upward to find out, but I do have some good reasons for you to stay actually on our park at the end of the day, Upwork is a good thing. It enables so many freelancers to find work. We all want upward to make money and not go out of business. And if most of us move relationship out of Upwork one day, they'll just go out of business for is decreasing commission rate makes it worthwhile after $500 commission slashes in half 20-10%, 10% isn't that big. You didn't mean e.g. it takes at least 50% of what I make here. So Upwork isn't that bad. After ten K earning, it slashes again to five per cent fee. That's nothing really. If you've got paid through PayPal or credit cards, you still lose 23 per cent in transaction fees. And if you'd have to deal with currency conversion on top of that, then you're definitely end up losing up to 5% anyways. Finally, not having to deal with billing is awesome. Your clients get charged automatically. You never have to deal with invoicing and chasing payments. That saves a lot of time and hassle. Because as a freelancer, sometimes there are cases where you do have to chase the clients to pay you on time. But with Upwork is nice because their credit card gets automatically charged. And if their credit card isn't working fine, then the client gets suspended on Upwork. So you know about it as well. That saves a lot of time and hassle. Now, second reason why it's freelancers gets suspended on our part gaze if they're sending a lot of proposals but not getting awarded a lot of jobs. Basically, this happens when you're spamming and sending way too many proposals without actually going through them and kind of deliberately thinking where are you applying and exactly applying to where you want. No one really knows exactly what's the percentage of success rate that you have to get hired. But there is this rumor that you have to get hired every 20 proposals that you sent, I think, but it's a room or might they, might not be real, might be less, might be more. But if you applied the tips that you've learned in this section, then that should never happen. Don't put any skills on your profile that you don t have. Upwork sometimes does a random scale check off freelancers and they do this sort of oral tests and they do an interview with a freelancer to make sure whatever they put an under their skills is true. One is actually my account was frozen because of this skill check. They sort of initiated the scale check on my account and I had an interview with a customer service person and they were quizzing me on HTML and CSS. And it was strange because I never put HTML and CSS, that's my skills. But I guess because I was under web design category, assume that I'm supposed to know HTML, CSS, even though I never claimed that I knew that. Luckily I was able to appeal and explain to them that I don't need HTML and CSS to do my job. That I never claimed that I knew it. And they understood and they froze my account. But if I had them in my skills than I would have been totally screwed. The thing is because Upwork is such a big platform and there's so many people and so much money is moving there, sort of attracts bad actors as well for trying to game the system and opening fraudulent accounts and doing engaging in some different scam activities. So Upwork is very diligent about it and it's clamping down in many different accounts to make sure that people who are there, they claim who they are, and they claim that they know scales and they can perform what they promised to the client. So make sure that whatever you put on Upwork, everything is true and authentic and you're not trying to game the system because they do have, they don't have a big tolerance. So even if something is like shaking, just remove anything that is not 100% truth 167. Tips 26-28: Don't get scammed: Work is large, very large, and there is a lot of money that is moving around and a lot of money that can be made. So when there is money, there's always bad actors that are trying to rip people off. Here are some tips on not to get scammed on Upwork. Never do free or trial work on Upwork. There is this scam going around where some ********* ask you to do trial work that you have to perform some free work before they can award you a job, so they have to test you on your skill or something like that. And what they do is they ask many different freelancers to do that free work, and then they kind of gather this free work, and then they use that free work for some other client and kind of get paid for it, then without themselves doing any job. Here's a video by one of the upwork freelancers who has recorded one such scam. The link is in the resources if you are interested. This is a repeated tip, but this time for different reason because not just because you can get banned by upwork, but also you could get scammed if you take things outside of upwork. If a new client who hasn't paid you yet and you hadn't had any work relationship asks you to take things outside of platform to save money or, you know, kind of get rid of the commission, then warning bells should go in your head instantly. Obviously, for the clients, it's safer to keep things on upwork because they have some guarantees from the upwork, right? If things go wrong, then at least work can kind of intervene and mediate the situation. So when they're asking you take things from outside, it might be shoddy, and if something looks shoddy, then it probably is. 168. Pricing: How much do you charge?: Welcome to the scary topic for most freelancers, pricing. How much do you charge? Being confused about pricing? And the beginning is alright. I was quite confused when I started off as well. I remember my very first lending page project that I did. I charge $200. And it was it was quite a lot of work actually. It was landing page design and build. I wrote the copy and content for the lending page. It was marketing project two, I did Facebook ads and I built designs, Facebook banners and advertisements as well, and did everything for $200. Then I upgraded to hourly rate and it was $20 per hour. And that was already a descent upgrade for me because at that rate, I was able to support myself fully by freelancing. Freelancing basically full time. Then I upgraded to third dollars per hour, which was my rate for quite some time. Then I doubled to $60 per hour. And now I mainly charged flat rate and about on average $5,000 for a design and build up a website. Upgrading $30-60 per hour was one of the most emotionally challenging things to do for me. I felt so guilty, especially we now had to tell my existing clients that I was going to double the rate that they were already working with me for some time. Rationally, I knew that it made sense, but emotionally, I was sweating from anxiety later than I realized that I was running to false beliefs in my head. First, I was projecting my own money issues onto clients instead of seeing it from their perspective, always looking at it from my own, comparing it to my own money spending habits, feeling guilty because I myself would find it difficult to pay $6 per hour for anything. Second, thinking that price that I charge is in direct correlation to the level of my scale. So if I charge double their mouth, now I should be twice as skilled. And you might think, but isn't that true? Shouldn't higher price mean better scale? Actually, not at all. Here's the most important in truth about pricing. How much you charge depends on who's buying. There is this amazing business coach for creative people. His name is Crystal and I was once watching his lecture on pricing and it just blew my mind. I realized how much I didn't know about my own pricing. Imagine a scenario to potential clients approach you. They both won a very similar website, same amount of pages, same functionality, something that is going to take same amount of time for you to design and develop. So obviously you give them the same rate, but this clients couldn't be more different. First one is an independent accountant as small guy. The second one is a large law firm that makes millions of dollars per year. What do you think is a website worth the same for them? Absolutely not. New website might bring more business for both of these clients, but more business for the accountant might mean extra thousand bucks per month. And for the law firm, that might mean extra 100,000 per month. Same website, same amount of effort from you, but huge difference in value based on the client. So whatever rate you give this to clients, probably it's too expensive for the accountant and ridiculously cheap for the law firm, you'll end up losing both of the prospects. You might think, well, at least law firm will be excited about getting such a cheap price. But they won't be paying $5,000 for a website that might bring them extra 1 million per ear. Seems unrealistic. It's too small of a number. They won't trust your work. But if you adjusted your price is based on who's the client, Let's say hypothetically offering 2000 for the accountant and 20 K for the law firm, you might end up blending both of these jobs because prices would sound reasonable for either of them. Steve Jobs paid 100,000 for the next logo. Our logos worth 100 K. For him. It was for a small startup. It wouldn't be. So how much a website costs depends on two things. First, who's paying and second, what's the value that they expect to gain out of it? Expected value is an important factor to consider as well. Imagine the same scenario with a big law firm. But this time they don't need a website to generate new business for themselves. They just need a website with a couple of pages and a contact information. Now that's a different story. They're not planning to getting a lot of value out of it. So 20 K might sound too much to pay. They're probably going to pay more than the independent accountant, but not as much as the 20 K. So to determine the right price to charge for the website, you have to first understand who is your client, and then understand what's the value do they plan on gaining out of it? The value will depend on each project. And you can find out by asking several questions like, what's the goal of the website? In what do they hope to gain out of it? As for clients, we can divide them into four categories. A private client is somebody who is paying for the project from their own pocket. So this can be independent professionals like us freelancers, consultants or startups that don't have funding. These guys, I would say they max out at $2,000. But if there is a lot of value to be gained from the website, then they can go higher when it comes to hourly rates. It's a bit more confusing for the clients to understand if something is cheap or expensive because if you don't know how much something's going to take, you don t know if e.g. $50 per hour is expensive or cheap. If you take two or 3 h, pretty cheap, but if it takes 100.200 h and pretty expensive, what happens with hourly rates is that clients usually use their own experience and preconceived ideas about if something is cheap or expensive based on how much it costs per hour. And they use their own cultural reference wherever they live, how much different services that they pay for and compare it to that. And my rule with hourly rates is that never go below $20 per hour because most of your clients that will come from developed countries. And in developed countries, anything below $20 per hour comes very close to a minimum wage. In minimum wage is something that a janitor is going to get paid. You're offering highly skilled services and you shouldn't be paid as a minimum wage. And if you price yourself like a janitor, then you're going to look like a janitor and you're going to scare away any decent clients because nobody wants their website to be built by a generator. Then you have studios and agencies like creative studios, design agencies, IT companies, and all that. These are usually going to be small and medium-sized agencies and studios because large ones, most of the time they have their own full-time staff and they don't engage, and they don't have a need to engage freelancers when working with agencies, usually hourly rate is the best way to go for two reasons. First, it just simpler. You don't have to renegotiate every time on every new project. And second, because of the revisions and projects going a little kinda scope of the projects basically, it's getting bigger and bigger and you needed to do a bit more work. Because what happens is that when you design something and build something, right? You are going to have staff inside the agency give you feedback. Then you would have to do the revisions and they're going to send it to the client. And then clients will have their own comments and there are owned changes that they're their own changes that they want to make. And then you're going to have to then do another round of revisions on a fixed rate. Studio itself doesn't have to worry about this revisions. So they're going to pile all of it on you. But if they are paying your per hour now they're going to have to be a bit more mindful and a bit more cautious of how much revisions you are doing because that's coming out of their payment that they get from their final client. And usually when they work with the final clients, they don't work per hourly basis. Companies don't usually work on per hourly pay rate based, but they work per project. So they're going to charge a flat rate to the final client. And the need to make sure that whatever it costs them doesn't go too much out of hand. And when they're paying you flat rate, then they don't care. And you can just work on it as much as as much as they want in terms of hourly rate, It really depends on what type of clients they themselves work with. Typically, I would say they're going between $20 to $70 per hour. They're never going to go, I think above $70 per hour. Then in that case for them, it's kinda make sense to hire a full-time employee and squeeze as much as possible from them. And also depends on country that they're located in, on, maybe city even they're located in. And if they are working with a local clients or online clients themselves. Because if they are working with the local clients and you can probably easily find this out, then that means that you're going to be charging more, right? Because we, the local clients, the prices are usually higher because you have a very limited number of agencies and studios in the city and you are meeting your clients and things are a bit more sort of a higher-up level rather than online, because big corporations, they're not going to hire an online agency. They're going to hire somebody who is local, somebody they can meet and somebody they can sue if things could sue, if things go wrong. If you're negotiating with studios, don't be afraid to go lower than your usual rate because the constant flow of work in cutting down on non billable hours totally justifies the discount that you're gonna give them when working with direct final clients, you actually have to do proposals, right? You have to send proposals are contracts and negotiate and Han interviews and things like that. But when working with a studio, you just do that once, right? And then they every single new project that comes your way. You don't have to go through all this process of negotiating and interviewing or older stuff because the agency and the Studio is doing that with the final client themselves. So you will get to, you get the project that is already ready to go and ready to build. Then you have small and medium-sized businesses. Usually this are medium-sized businesses that are making money or startups that have funding. These guys would usually go probably from 2000 and up until maxing out maybe at 10:15 thousand. And finally, you have large companies with a lot of employees that make a lot of money. And this guy is probably start at 15 k and up. But you don't have to worry about these guys because they don't really work with freelancers. They like to hire companies and studios, especially local ones. So now no need to worry about them because I've I've never worked with them and I don't know freelancers who end up working with large companies. Let's recap. So we priced based on who our client is, more valuable, the website for them, more we charge for it. To understand who our clients are, we need to find out more about them. Where are they paid? What do they hope to gain out of the website? Do they need a website for themselves or they are an agency and then propose the price accordingly 169. Pricing: Hourly vs Fixed Rate: Let's compare hourly versus fixed rates. Both of these have their own benefits and drawbacks. The good thing about charging hourly rate is that it's very simple. You don't really have to twist your brain on calculating how much you should price a certain project. Just give a rate and be done with it. No need to negotiate every time you have more work from the same client noted to worry about revisions getting out of hand. More revisions means more money for you. Meetings and communication can take a lot of time. Some clients might want Skype meetings regularly, but if you build them for that as well, and you should, then they will make sure that not to waste your time. And if they do at least you'll get paid for it. The drawbacks of hourly rate is that it says nothing for most clients. E.g. $100 per hour, is that expensive or is that cheap? Who knows? If you're done in 3 h, then it's cheap. But if you need 80 h than it's expensive. Also, clients will have an emotional reaction to certain hourly rates. They will find certain rates too expensive, even if the final price is the same, it might be fine paying five K for the website. But if you tell them 100 bucks an hour, they might freak out is harder for clients to decide because hourly rate makes it uncertain how much will be the final bill is you get more efficient and fast at your job, you make less per project. Benefits of fixed rate is that it's easier to sell. Clients see a clear number and they feel safer with it. As you get more efficient, you make more money. So it gives you a chance to make a lot more money per hour without looking too expensive. No limit on how high you can charge. Whereas an hourly rate, there are mental limits, e.g. 300 bucks per hour is going to be a mental limit for most clients. The bad thing about fixed rate is that revisions can get out of hand, if not clearly defined, e.g. to free revisions and after that, applying a certain hourly rate. And when your client asks for a third revision, then you'll start charging them. This sometimes can be uncomfortable to talk about. It's quite uncomfortable for me, but I learned my lesson when I ended up earning a minimum wage on one of the projects because of endless revisions. Another drawback calculating is the pain. You'll need to put extra work in calculating to clearly define exactly how long it will take you to finish the project and make sure to put a profitable price on it. It involves a lot of guesswork. And until you learn all your lessons the hard way, you end up losing some money. So which one should you choose? Just like with amounts, It's a good idea to go case-by-case and client by client, e.g. with the studios and agencies, it's best approach would be probably going with hourly rates in when it comes to final clients than probably going with fixed rates and flat rates. Because fixed rates are a little trickier to navigate in the beginning, it's okay to go for hourly rates for everyone. I myself have a mixed bag of burritos. I started off with flat rate, but then soon after I realized I was losing money because I wasn't setting estimates properly and I was losing money on revisions. Then I switched to hourly rate, which was great. And I kept for a long time with hourly rate because it was simple for me. I love the simplicity of it. And then right now, I have both with my long-term clients, I do hourly rate and then with new ones, I do fixed grade. But with more long-term clients, I do hourly because I do a lot of different types of work like UI design, e.g. for mobile apps. And those projects can get monstrously big and weird and it's impossible to put a flat rate on it. So I just use hourly because it makes it simple and makes it easy to build. One final criteria to consider is to choose whatever you feel comfortable with. Because at the end of the day, it's your work and you have to do this every day. And it's important to make every aspect, as many aspects of your work enjoyable as possible. And if something gives you anxiety like it did for me, then it's okay to sacrifice some money for peace of mind and comfort. 170. Proposal Template: Fixed Rate: Side of freelancing platforms, how you send proposals, it's all up to you. You can email them, send them a message, tell them over the phone or send them a Raven. It's all up to you. You're the boss. Some options are better than the others. If you want to look serious and impress your clients, then sending a proper well designed proposal document is the right approach. This is what pro freelancers do. To help you seal more deals, I have created a very solid proposal template for you. It's a FIGMa file, the link you can find in the resources. As you can notice, it's designed in the same theme as the portfolio website. That's going to help you set your personal brand, make you look more professional, like someone who has thought about the smallest details. You will instantly stand out from the competition, and standing out is what you need if your clients have multiple freelancers to choose from. Let me take you through the content and explain why I put what I put and what are the things you'll need to edit when generating a proposal. The header is pretty straightforward. Edit the logo, put whatever you want in the headline. You can even mention their company name like Google website proposal. It's a nice personalized touch and your details and the details of your client. Overview is a place where you show your understanding of the project that you know what you're going to be doing. You tell them your objective and explain what's the final deliverable. I've inserted a little spill on how their website will be hosted on amazing Webflow servers, making it secure and super fast. This is a good place to pitch a little on how good the final result is going to be to create an excitement. Not you don't sell how amazing you they want a website, not to go on a date with you. Then we have a price breakdown. This is a flat rate pricing. I've created a template for hourly rate projects, too. It has different price table, and some other content is different, too, which I will explain after this. The price breakdown shows different parts of your job. If you have more items, you can just duplicate the rows and add more or remove as you wish. I like breaking down design and development in separate items. There are two different phases, and with some projects, you can even do only one of them. For example, if they already have designs, then you can just do the Webflow development. I've also added some extra things that are included in the price. It increases the value they are getting out of the price, like responsive development and training session. That way, the price list looks much more valuable and full of benefits than just a single value of $2,500. It feels like there is a lot more that they are getting. About these particular values, I'm just throwing numbers here doesn't mean that's what you should charge. You can charge less or way above this value. That all depends at the category of clients you'll work with as we discussed in the pricing class. I'll just give you one advice on values. Use round values. Don't do 999. That's just going to look stupid. Your clients are aware of the fact that you are the one putting these prices, that there isn't any complex pricing equation that you are using, so round them up or you're going to look silly. Underneath the price table, there is a line saying that Webflow hosting isn't included. Transparency is key in such relationships. Don't forget in quotes to mention important things, especially costs. Next, we have a timeline. This is something clients really want to know. So breaking down as much as you can, clients are making a big risk with their money and time. They want to be in control of their project. So they want to know exactly how things are going to progress, makes them feel at peace, and they will trust you more. These are rough estimates. Projects never go exactly with the predicted timeline. It doesn't just depend on you, how quick clients give you their feedback on each phase, how many iterations you go through, and how quick they provide necessary content is going to significantly impact the project timeline. Often some other tasks will creep up during the project. They might ask you for small things which will add up in the end. If you're working on an hourly rate, then that's not a problem. But on flat rate project, you'll soon end up losing money if you don't set the record straight on what's going to happen if there is extra work, which is outside of the main scope, even if they are just extra meetings that are taking your time. I myself had to learn this the hard way. I had a client who wanted to meet almost every day. I think he was just getting a kick out of talking and brainstorming. But for me, it was just taking too much time and I wasn't being paid for it. If you set an hourly rate for any extra work, then everyone will be clear. The last part is terms. I have listed some important points to have clarity on the way things will work and avoid any future disagreements. These terms aren't probably legally binding terms. Their purpose is clarity, so everyone is on the same page. For example, it has a payment structure. When working with strangers outside of the platform, you should take some payment upfront. At 25% usually is a good idea. This is my structure, but you can feel free to change it as you wish. And obviously, you can change any of these terms or add your own. The final format can be in PDF or you can even share a link to the prototype view, like I'm showing right now, but I think PDF is a better option. You already know how to export. Just go to the property spanel, export, choose PDF, and that's all. I want to give you one rule when it comes to sending proposals outside of platforms. Do not surprise them. So when you send a proposal and they get the value, and that value, if that is maybe too much for them or it's expensive, it's going to surprise them and shock them a little and, you know, kind of disappoint them. And because you put it inside the document and you sort of sent it already as something written and something definite, then they don't have a way to oppose or negotiate and you yourself don't have a way to sort of give arguments and benefits of the price and tell them and explain them why is it good for them to go with you and so on, right? Neither you have an ability to maybe negotiate and perhaps give them a discount because maybe sometimes you have that put inside the price as a buffer, right? So you put a little bit as a buffer to make sure that you can negotiate it down if they want if they ask you for the discount. Or sometimes you can even bring the price down by maybe removing number of revisions or doing something a bit less or, you know, there is many different ways you kind of can move things around to decrease the price if they really can't afford that value that you gave them. So the right approach is to do the discussion of the price during the meeting. Like, you don't have to finally agree on it, but what you can do, an important thing is to give some sort of ballpark range. So they're not surprised when you give them a final value. And what you can do during the meeting is, this is, for example, what I do. I have a meeting like it's a skype meeting or a face to face meeting. And when we go on the meeting, I ask a lot of questions about the project, and I already have some sort of pre value in my head that I'm willing to go with. I sort of have this range, which is like a minimum that I'm willing to work for and like an ideal price that I want to get out of it. Once I ask the questions, I understand that if the website is just like one or two pages or if the website is maybe a big website with, you know, 25 different pages or a blog or something like that. And I kind of come up with a range which is maybe something like minimum $4000-6 thousand, and then I give them that range, and if they have some sort of objections to it, we'll discuss it, and I'm able to give benefits and tell them, you know, why this is a good option for them and why the price is actually worth it. And if they don't. And if, for example, sometimes it can be that I give them a value and they were expecting something less than 1,000. Now I know that we were just a bad match and, you know, I'm not going to do a website work for a large website, less than 1,000. So I don't have to bother about creating the proposal and sending emails, everything. We instantly understand we're really in a different different game here, and we're not a good match, so I you know, save a lot of time. But if we are still in this right phase, then we can negotiate if we need to. But if the price also sounds nice, then once I'm done with the meeting, then I prepare the proposal, and probably I would put something like $5,000 for the website, and now they're expecting that price and they're not surprised, and we have a deal. 171. Proposal Template: Hourly Rate: As for the hourly rate proposal, Same ten played in most part. The first difference is in the price table, of course, much simpler, just one rate. Sometimes you might want to have different rates for different tasks. Then you can add an extra raw and put a different rate for that service. I once did that with my first Webflow client. At the time, I didn't have a lot of experience in developing and Webflow. I just had done two practice projects, but I had solid design experience, and I knew I wouldn't be very fast in Webflow. So I gave a discounted rate for the development phase to be fair with my client. I've added a paragraph here to explain how things will work, for example, saying that you will bill them every two weeks for the time logged during that period. That's up to you and your client how you arrange it. If you want, you can bill once a week or once a month. I've made a few changes under terms, too, like payment structure and the cancellation policy. Don't use these terms as a legal advice. I'm not a lawyer and neither I have created these terms based on any legal framework. It's for you and your client to have clear understanding on some important things. We'll talk about contracts in the later video. When working with hourly rates and outside of platforms, you will have to use a time tracker tool. The one that I use is Top Tracker. I've tried many, and this one seems to be the best, especially since it's completely free. At least for now it is. It has a desktop app. Once I open it, all my ongoing projects are there, then I select the project and start tracking. Simple as that. I track everything about the project. Doesn't have to be just design and development, meetings, communications, and so on. That's all part of the project. I put the link to Top tracker in the resources under productivity section, more freelancing tools to be found there. For example, WAV, that's what I use for invoicing, again, are also online proposal tools. For example, Bonsai here has a proposal feature. I don't use these online proposal tools because in figma, I can design my proposal as I wish, making it fit my brand and overall have more flexibility. But with these tools, I have to stick to their templates. In case you want to give them a try, here they are. And that's your proposal template. Use it, adopt it as you wish. I've put things here that I use myself and what I've learned throughout the years of making some mistakes with clients and getting into some misunderstandings. You can use my experience as your starting round. 172. Freelance Contract: Be surprising, but I actually don't do contracts with my clients. I can't be bothered with it. It makes things too serious. And even if things go wrong, I'm probably never going to seek any legal action. So there is really no point for me. Because of that, I make sure things don't go wrong. Here are a few precautions that I take to make sure project goes smoothly and I end up getting paid. This mainly applies working outside of platform. On the platforms like Apwork the contract is taken care of there. It's in their interest that you get paid, and if something goes wrong, then they're going to mediate and decide who is right or wrong. Regardless if you're working with a contract or not working with a contract, here are some precautions to take to make sure things don't go wrong. First, you have to make sure that you are clear with your client and then no surprises come up anytime in the project. For this, I use my proposal document and make sure everything is stated there that could potentially come up in the future. And if some disagreement comes up, then we can always go back to the proposal and see what's saying there. When working with clients across the continent, it's often easier to break a contract, but not as easy to break and screw up a human to human relationship. So when I work with clients and usually I do work with clients abroad and across continents, I try to have face to face on Skype mainly because having a face to face interaction with people and having this face to face relationship established creates a different bond between clients and me. And breaking this relationship is much more difficult if they've already seen me and if we had some interaction over the call versus if I was just some guy with a profile picture and a username or just an email address. Plus, I can gain a lot of information on my clients by seeing them and talking to them. I use my bullshit sensors that Mother Nature gave it to me, and I can sense if there is anything dodgy and fishy about them. With new clients, I always invoice them step by step throughout the project. I don't wait for the entire project to be done with and then finally send the entire value and then, hope that they're going to pay. If I'm working with complete strangers that I haven't worked with and it's outside of the platform, then I'm going to ask for 25% upfront payment. This way, I can balance the risk between me and the client because if I ask them 100% upfront payment, then they are taking the full risk. And I don't want to put my clients in that situation, neither they will be willing to do. Or if I'm charging at the end of the project, 100%, then I'm taking the full risk. By asking only 25% upfront, yes, they are taking small risk actually themselves, but at least I have 75% remaining payments to motivate me to do the rest of the job. With existing clients that I've already worked with and I trust and they have already paid me for previous projects and I've always paid on time, then I can relax and I can easily invoice them at the end of the project, 100%. But that's what I do. That doesn't mean that's what you should do as well, judge for yourself and see the relationship that you have with your clients. I also I often like be trustful of my clients and kind of when I see that we have a good relationship, I do like to show them that I trust them and that I'm not suspicious of them, because that sort if I trust them, then they know that they can trust me. Sort of, it's a mutual thing. If you trust them, then they feel this obligation that they have to trust you back and just creates a very good relationship. But if I'm always suspicious about them, then, you know, relationship is going to be a bit more cold. When you have a bad experience, adjust your strategy. When someone violates your trust and they don't pay you on time, then make sure to change your strategy, no excuses no second chances and ask for upfront payments. I only had a payment issue once. I was working with the startup. I did the website for them, and they were waiting for an investment to come in and they couldn't pay me on time, and I had to chase them, and it was unclear when they're going to pay me. I had to call them and email them all that stuff. They did end up paying me eventually and delay wasn't that but after that moment, once they violated my trust, that's it for me. And then after the moment, everything that I had to do about the website, I was just billing them upfront. They were saying, you know, Oh, can you edit this? I was like, Sure, here is the upfront payment. You pay me, I do the job. If you don't pay me, I don't touch it at all. If someone shows you that they're not trustworthy, believe them and take according measures. If you would feel safer to sign contracts or maybe your client is asking for one directly, then you can generate a contract on Bonsai. Bonsai is this freelancer solution which has invoicing proposals and things like that, and they also have this contract that you can generate for specific design or web design work. It's a really nice, customizable contract. All the highlighted parts are what you edit and put your information the rest you can keep intact because it's been generated by their lawyers. Editing highlighted parts are very easy and they give you an option and ask you straightforward questions. So you can answer those questions, and you will easily kind of autofill in a language that is suitable for contracts. They've done a great job. So if you need it, just sign up with Bonsai and generate a contract there. 173. Selling Webflow to Clients: Your clients will have an experience with Webflow, and they will want the website directly built inside it and they will be looking for Webflow designers specifically. But for others, they might not be even familiar with Webflow, so you will have to sort of convince them to use Webflow as the platform. These clients can be split in two types. Those who don't have any requirement where you're going to build the website. And second, those who have some sort of preference towards a particular platform, usually that being WordPress. Selling Webflow to those who don't have a particular requirement or preference where you're going to build it really doesn't need that much convincing. Most of my clients are like that, and they usually just trust my expertise on where I'm going to build the website. The only thing that might need a bit of convincing is the hosting costs of Webflow. But one thing is important to note is that hosting costs money on other options as well. Even if it's Board press, WordPress itself is free, but the hosting is paid. So the website has to live somewhere. And this is something you will need to explain to some of the clients. For example, I myself when I was running a business, I didn't know much about web design or development, and I thought our company website just magically lived in the cloud. So you might need to explain it a bit of it how this is going to work, that the website has to be hosted somewhere, and we have to pay that company to host the website for us on their servers. Usually will be around at least $5 per month. Now, where actually the pricing on private hosting really comes down and makes it really cheap per website is when you're hosting multiple websites because regular private hosting providers, they also give you the price that I gave you right now was only for one website hosting, but with a very small kind of price increase, I think, two, $3 per month increase. Now they give you a different plan which lets you host unlimited amount of websites. And that's where the prices really come down per website. But the issue is that regular clients can really use this benefit because regular Crens usually have one business and they need one website, right? So they're never going to benefit out of hosting 100 different websites on one single plan because they don't need 100 different websites. They just have one website, right? And I mean website because, of course, we can have even on Webflow, we can have one website. We will pay only one plan, but we can have you know, it can have thousand pages. That's a different story. I'm talking about different websites on different web addresses and things like that, right? So that's the big kind of money saver on private hosting. Now, for example, if I was a Wordpress developer, what I could do is have my own account, right on one hosting plan, and then every website that I build for all of my clients, I would host them there, right? So per website now, you know, the price would come down very, very cheap, right, because I just have one account, one hosting plan, and then every website is going there. And then what I can do is I can charge to my clients annual hosting costs or management fees for each website, and then I pocket difference. And that's what obviously a lot of web developers do. But that then ends up as a similar price to the client at the end of the day. So for the client, they don't really have a lot of options because no web developer is going to pass up on that very good opportunity to make extra money and offer completely free hosting, right, because they would still have to pay for it and all that stuff. So why would they offer it for free? Now, for other important benefits on Webflow, you get what's called a managed hosting. Managed hosting means that they do a lot in the background for you, things that you or your client never has to worry about like automated backups, security, malware scanning, and removal, server site, software updates, performance improvements, and much more that I don't understand and I don't care about as long as it's taken care of. Security maintenance is a big issue with servers. I once had a Wordpress site, which I self hosted on a chip server. One day, some malware got in and turned my site upside down. The site was going on and off constantly. The malware was using all my server bandwidth. I couldn't figure out how to remove the damn thing. It was my personal site, so I just decided to take the whole thing down and cancel the hosting. And if that's not enough for the difference, then this is. A typical cheapest hosting plans usually give you a server space in one single location, a computer called a server where your website lives. If I'm in Australia and the server is in the US, then a website content needs to travel through cables all the way from US to Australia. This makes a side load like a snail. But weblos hosting comes with what's called CDN Content Delivery Network. With Webflow, your site loads from the nearest server to the user. So if a user is in Japan, the website will load from a nearby server in Tokyo, not from California. Of course, Webflow isn't the only hosting to offer that, but moment you add CDN feature on regular servers, pricing starts to rise and come quite close to Webflow pricing. And if that's not enough, webloHsting has one more trick up their sleeve. This is a benefit that regular managed servers don't have. You see, regular servers need to be ready for anything. Users may install WordPress, Juma, Drupal, or even all three of these systems and run them all at once. This poses no problems for the server, but it does mean that it cannot be fully optimized to run just one particular system really well. But Webflow servers need to run only one system, Webflow. So it's highly fine tuned to run only Webflow. Now, of course, there are comparable hosting providers that match all Webflow benefits that specialize in single platform are managed and include citan features, but they end up more expensive than Webflow. For example, WP Engine, a popular provider of specialized WordPress hosting that has all the same similar features that Webflow offers starts at $35 per month. So there you have it. When compare it to one website versus one website hosting, the prices come very similar or sometimes even more expensive on the other side, if you are using the very same features that kind of Webflow offers. And at the end of the day, if a website cannot bring more value to your client than $20 per month, then what's the point of that website anyways? Second type of clients will have preferences to specific platform, usually WordPress. Now, before you make the case and try to convince them to use Webflow, you have to understand what is the reasoning behind them. How how did they came to the conclusion that they need to use WordPress as their platform? Because sometimes there is a specific feature or a requirement that they have your clients might have that Webflow is not able to meet. For example, if the team has been using some WordPress plugin for their past website, probably because they had a website on the Wordpress and they were using some specific plug in, let's say, you're working with a dental clinic, and they are using a specific Wordpress plugin for their appointments, like, you know, booking appointments, you know, like calendars and then, you know, users go on the website. There's a calendar, and then they book an appointment, something like that, right? And they've been using this particular plugin, and maybe they really want that plugin because maybe the staff is used to it or maybe it's plugged in somehow in their kind of business process or some integrating with other applications that they are using themselves, maybe some other CRM or something like that. In that case, right, they really need to, you know, 100% tip with that plugin. You are not able to because if that plugin is Webflow, wordpress specific, then there is nothing you can do about it. Now, obviously, there are a lot of alternatives and appointment booking applications and third party applications that are not platform specific. And most of the really good ones and most of the great third party applications are like that. They're not platform specific. They're kind of codes that you can install on any website. And you could find the alternative. But if they really want to stick to exactly that plug in because for some reason, then there is nothing you can do about it. And the only option is to go with Wordpress platform, and that's it. So you have to find out if there is some requirement that it needs to be met, that they need to meet, and if you cannot fulfill it with Webflow, then you have to pass on that client. And if you didn't find any requirement that Webflow can't meet, then tell them that you have a better solution for them than Wordpress and give them three big Webflow benefits. First, the painless and high performance Webflow hosting. All those points I mentioned earlier, the CDM, better security, faster, less hassle, cheaper. Second, how quickly you can build, iterate and deliver their website. The Webflow designer, the coding a website from scratch takes way more time. And third benefit, Webflow editor. That's a big one for clients. Wordpress and other CMS are confusing for most people. They are ugly, they're clunky and slow, they're not very enjoyable to use. You have to go into the back office and edit content from there. But Webflows editor is right on the live site. Clients can just go on the live website and start editing content right there and then. And that's how you actually make the case for weblo with your clients. Not much to actually sell. It's quite simple and straightforward. I myself actually rarely need to make a case for this because most of my clients they trust my expertise. They're not very concerned where I'm going to build because businessmen and entrepreneurs often even I work with teams that are techie, development teams and even they are not very concerned where I build it as long as it's efficient for me and I produce it and I can iterate it really well because I'm the one in reality who is building a website and I'm the one who's going to be editing that website and all that stuff. So it has to be fast and efficient for them, that I can make it really easy and they ask me, how much is going to cost and tell them the price, and they say, Okay, good. But in those cases where definitely Webflow seems like the best option for them and there is no limitation and but for some reason, maybe you still face resistance from your clients, maybe about the price or something else. Then all these benefits that I described are enough to seal the deal. 174. Intro to Advanced: Congratulations, you went through the main part of this course. All upcoming videos are advanced that you don't right away need to start your freelanced web design career. I really hope you've enjoyed the right. I realize this course was a handful and you've learned everything from good design to webflow development to successful freelancing. Feel free to revisit some of the lessons from time to time. They will stick better and you will get even more practice. My recommendation for your next steps would be to put in some independent practice. Outside of this course, you can pick a topic or a product that inspires you and build that website for it. Or even a better option would be to take on real projects. You can look for projects within your network between your friends, family, work colleagues, and so on. And you can take on paid or free projects. Or you can right away start looking for real projects and real jobs on upwork and other freelancing platforms. And while you do that, you can go through this advanced lessons at your own pace to keep improving your skills and keep fueling your enthusiasm. The tutorials in this section are both design and webflow related. For example, that Photoshop tutorial on how to cut out an object from the background. Something that we discussed in the design part of this course, but we never actually went through it as a practice because it was a Photoshop tutorial and a bit more advanced. That's why we put it inside this advanced part of this section or custom code embed, which is for webflow, right? To embed some third party applications like the commenting plug in, which we're going to do for that website that we've already for the last project that we built. And on the block where we're going to insert the custom code for commenting those and some more video tutorials in advanced section. Have fun. 175. Webflow: Custom Modal (Pop-Up): In this video, I'm going to show you how to build a custom model, or in other words a pop up, something like this. When user clicks on the button, a model opens up with a form. Models are widely used and very handy Putting forms inside is one use. One very hated option is to use it as a pop up. You know what I'm talking about when you're browsing a page and some annoying marketing message pops out of nowhere when we didn't click anything. This time we're going to go with less controversial option, a form opening up when user clicks on this Get Access button on our T Map website. Building this inside webflow isn't as straightforward as you would think. There is no ready made modal component that we can just add to the page. There is one which is called light box, but it's mainly for images and videos, but forms or anything like that, there is none. This was something that surprised me in the beginning and when I watched the tutorial on how to build this model with a form inside, that's when I sort of understood what sort of web design platform flow was a professional tool where you build things from scratch like a developer, not just dropping ready made components. It might be surprising for you too, but that's what makes webflow awesome. Let's begin. What happens when model opens up? There's a background color that overlays on top of the entire page and there is this form inside it, right then on a close, it all disappears. First, let's build that, and then we will take care of the interactions. I'm going to add a deep block and put it on top of the page and name it modal wrapper. That's where everything is going to go. Now we need to overlay this on the entire screen. We can do that by fixed position and selecting full. Let's give it a color so we can see what's going on. It's overlaying the hero, but not the section after it. Also, it's behind the nav bar, but we want it to go on top of everything. To overlay it, on top of everything, we need to use a feature that we haven't discussed yet. Z index, which we can find under position settings. It shows up on all positions besides auto or static Z stands for z axis, the depth. Basically, it lets us control stacking of elements on top of each other. By default, most elements are set to zero value. If we had two elements overlapping each other, one that has higher value is going to stack on top. I have also linked the Web Flows video tutorial on Z index in case you want to learn a bit more about it. If I change z index to one, it's going to stack on top of all zero values grade. But it's still behind the nap bar. How come the nap bar doesn't show that it has a z value side? But since navbar is a ready made component, probably it has some default Z index from Webflow. Which makes sense because nawbar on mobile views has a dropdown menu which needs to stack on top of everything. If we are opening the menu on mobile devices or tablet devices, if we give our model higher z index value, then it will stack on top, we can see what the value for the navbar is. But I'll tell you straight up it's 1,000 If we set model at 1001, then it's going to do the trick. If it doesn't for you, maybe the value is different, just go higher and higher until it works. There's no limit how high you can go. Put 10,000 if you want. Finally, let's make the model wrapper a little transparent. Something like 80% Next, we need a model in the center. Before we add that, let's turn wrapper into flex box so we can align content in the center. New Do block will go right in the middle. Name it model and style it ne just a content, a headline, a paragraph, and a form block. We don't have designs for this, I'm just winging it for demonstration. We already have classes for the form elements, let's just reuse those like button and field. I'm going to give the model maximum width so the content fits nicely inside the Fields have max width, that's why they are cutting short like that. Excellent, we need one more thing on the model, A close button, otherwise how do users know where to click to close the model? We can put something like cancel or close link underneath a button or an X icon on the corner of the model. Let's go with a close icon because it's a little more difficult. So you'll learn more in reality. You already know everything you need to build this. We just need a close icon, which we can get it from icon and then position it in the top right corner by using absolute positioning. But when you do that, it's going to jump to the top corner of the page, not the model. Do you remember what we need to do? We need to set the model to relative position so that the icon is positioned relative to the model there. Now we can position the icon nicely by giving some margins. Just so you know, sphgic colors are editable in Figma. If we wanted, we could open this Spgi in Figma and change the color to match our palette from the project. But we don't have to do that right now. We can instead decrease the opacity to something like 30% to make it gray. Okay, let's check the preview. The cursor doesn't change to a hand. I should have used a link block instead of a regular block, but that's okay. We can manually change the cursor type from the styles panel that easy. And we can increase the clickable space so users don't have to be so precise on pointing it on the icon. You can do that just by increasing padding on the image. But now we should decrease the margins. Or it's too far from the edge, maybe even remove the margins. A hover effect would be nice. We can simply increase the opacity on hover and of course, give it a transition effect, so it's nice and smooth. That's all the model is done. Now what we need, interactions close and open interactions. Let's start with close. Since it's already open, our trigger is obviously the close icon. Select and add a new click trigger on the close icon. New animation and no model. What are we animating? The entire model wrapper we want it to disappear. Select a model wrapper on the canvas and add a new action. We can simply change the opacity to 0% so it fades out. Let's change the easing and make the transition faster, Something like 200 milliseconds. That's all good, but if you move your mouse over the canvas, you'll see that modal and form elements are still there. That's because we simply made it transparent, they didn't go anywhere. Actually hide them from the page. We need to change the display to non. Right after that fading animation is done, we can add a new action which is hide and show action inside display centers. We're going to change it to non or hidden. Check the preview, how it all works. Perfect, Closing is doing fine. Also, it would be nice if we could trigger close by clicking the area outside of the model. Basically closing when the user clicks on the background space. Your first instinct might be to add that to the model wrapper. But that's not going to cut it because even though it works, it also triggers when you click anywhere on the model two, even inside the fields, because all that is nested inside the model wrapper. Clicking the form is considered same as clicking the model wrapper. We need a new element that's overlaid behind the model and we're going to set the trigger on that element. Give it similar style like the modal wrapper fix position and full no need for the background color. Keep it transparent. Now if you add this close area after the model, then it's going to stack on top of the model. But if you move it before the model, then model will stack on top. Usually that order change is enough, but if for some reason it's not, then you can use z index values, give model higher Z index. For example, 2.1 for the close area. And that will do the job. Add the same close interaction to that close area, and that's it. Now when we click on the model itself, nothing happens, but when we click on the background, it's going to close. Finally, we need to add the open interaction. Before we do that, first let's hide the model wrapper on a default state that we can do from the style spanner change display to none for the entire model wrapper. Our trigger is the get access button in the bar. We're going to add a new interaction to that button, a new animation. And let's name it model open. Now we need to select model wrapper to add animations to it. But we can't do that from the Canvavas anymore since it's hidden. So we have to select it from the Navigator. Once it's selected, add a new action since the model is hidden. First we need to show it, choose hide, show from the dropdown. And then change the display to flex. Why Flax? Because that's our original display setting for the model wrapper. Okay, good. But that just shows the whole thing instantly. No fading. To add fading, we need to start it from 0% opacity and then end it to 100% opacity. Let's add 0% first, which we are going to set it to initial state from this toggle, because if we don't, then it's going to show 100% because of the display settings. Then jump to 0% and then transition to 100% again, which is a terrible animation. 0% has to come before the hide and show action. Now we can add 100% opacity as the final state change the easing and duration to similar values as we did with close. And that's it. Let's test the whole thing in preview mode. Perfect. All is working fine and that's how you create a custom model in webflow. You wouldn't expect that such a widely used thing needs so many steps, but that's how all of them are built, developers even have to the whole thing by hand. 176. Webflow: Custom Code Embed - Commenting Plugin (Needs a Paid Plan): Before we begin, just heads up that this tutorial needs a paid plan on Webflow. In this video, we're going to learn how to embed custom code inside a Webflow website. Usually, this is used to insert a third party plugin anywhere on our page. For example, things like calendar components, appointment booking, timers, and a lot more. This time we will install a commenting plugin on the blog post page. After this, you will pretty much know how to install any other plugin, although each plugin has their own specifications during installation, but those specifications are explained by the plugin providers themselves, usually providing video tutorials. So once you know what happens on Webflow side, it shouldn't be difficult to get yourself around the other plugins. The commenting plugin that we'll be using is called discuss. For starters, we need to create an account on Discuss and get instructions from there on how to install it on our website. So go to discuss.com. That is dqs.com and click Get Started. Then sign up. Next, you'll get to this gate asking you if you want to install it on the website. So yeah, choose that. Up next, some basic site info like name and category. Discs has a free version with ads and paid packs without ads. For any website in the beginning, free version is absolutely fine. That's what I always start for my clients until there is a big enough traffic to switch to the paid version, which doesn't cost much anyways. Obviously, that's for the clients to play, not us. Next, you'll get the screen to choose a platform. These platforms offer direct integrations, but Webflow isn't on the list. Webflow doesn't usually have any direct plug and play integrations with other platforms and plugins, where you can just click few buttons and start using the plugin. That's expected because Webflow is a little different from others. It's more like coding a website from scratch, and we can manually install the plug in with an ease. So scroll down on the bottom of this list and select manual installation. We'll get this custom code that needs to be inserted directly on our blog post page. Now, let's copy this code and head to Webflow. We're going to add a new deblock inside our container. And from the elements panel, add a new element called Embed. You will instantly open up the code editor, so paste your code in here. For a lot of plugins, that's it. This is where it ends, but not for discuss. There are a couple edits we have to make to the code itself. First, let's see how it all looks. Note that custom code Embds usually you cannot see inside the editor or the preview mode only on the published website. Webloa doesn't run the code to make sure it doesn't clash with the designer. On the live side, it's visible all fine. That message box on top is only visible to us because we are admins of the site. It's asking us if we want to enable reactions on our side, maybe later. So that's how it's going to look like, but not yet fully functional. Right now it's static, so it's only going to work on this particular page. And every other comment that we will make on other pages, it's going to be the same because we haven't really connected this to our CMS. Let's go back to the code and see what we need to change. If you double click on the embedded element, the code editor will open up. This is a JavaScript code, and inside the code, there are comments that tell us exactly what we need to change. First comment says that we need to replace page URL and second tells us to replace page identifier. We just need to make those two changes and then uncomment that section. Javascript, these symbols, which is slash in the star or two slashes, create comments. But that section is part of the code, so we need to uncomment it otherwise it's not going to run. It's quite simple. There are currently wrapping inside these symbols, one in the beginning, one after that. If we remove both, it will turn into functional code. You'll notice this by color change. Next, we need to replace page URL. The PageRL needs to be dynamic. It's the URL of the particular blog post. Since we are doing this on a dynamic page, on top of this code editor, we have this button to add a field, similar as we had inside SEO settings, if you remember. One of the options is a slug. This is what comes after the final slash in the URL. In our case, after blog slash. We can use that to create a URL value. We just need to manually insert everything that comes in front of that slug. And then it's right next to it. So Webflow will insert the rest of the URL automatically. Just make sure to put this inside single quotes, that's just how JavaScript works in this case. The page identifier needs to be some unique value that each block post gets assigned. We can again use slug for this because the slug will always going to be unique for each block post. In this case, just the slug is enough and don't forget to wrap it inside single quotes. Just final thing to make sure inside the section below, check if the URL of your discuss site is correct. Sometimes depending where you copied this code from, instead of your site name, it might say example.discuss.com Yadira. If that's the case, you'll need to replace that with a short name of your site, which you can find here inside discuss Admin. Under General tab. Just copy this and replace the word example with it to create a proper URL. That's all. Publish the changes and test the commenting on different blog posts. Works only on the live site, preview mode is not going to show it. This was probably the most complicated plug in installation. Other plugins are usually simpler than this. Now that you know how to do this, all other plugin should be simple enough. If you ever get stuck, ask for help on Webflow forums. Community there is very helpful. 177. Photoshop: How To Create a Stretch Crop: All right, time for some Photoshop. Tutorial for most of design, Figma is sufficient, but in some scenarios we can't do without Photoshop. This is one of them. If you don't already have Photoshop, you can get a seven day free trial. And if you want to buy it, it costs about $10 per month, which includes Photoshop, light room, and all Adobe phones and a 20 gigabyte of their cloud storage space. You can download the trial from Adobe.com slash downloads or just Google Photoshop download in case you have already used up your seven day Photoshop trial in the past, then you can try affinity photo instead. It's a very good alternative to Photoshop and most of the interface and how it all works is quite similar to Photoshop. I've included the link resources, it has a ten day free trial, although I won't be demonstrating this how to do in affinity, but since there are two very similar, you will probably figure out how to make it work inside affinity as well. Okay, back to Photoshop. After you go through the installation process, this will be your initial screen. Click open and select the photo file. I've included this image in the resources of this lesson, so you can work on the same photo if you want a quick lifesaver tape on Photoshop. When I first started using Photoshop, I would end up losing some tools and options. Frequently, I would watch Youtube tutorial to learn something, but then I would not be able to find a tool that they were using in the video. Photoshop has a lot of shortcuts and little options where you can easily close some tab or remove a tool and so on. I would end up with toolbox gun, no layers panel, and no idea on how to put them back. So I wouldn't be able to follow a tutorial anymore because the tool isn't there, nightmare for any beginner when you are trying to get your hand around this new software and learn a lot of things at the same time, I would lose a lot of time figuring out how to put it back. Here's the trick on how to return everything back to normal. In case you mess up something, go to this icon right here and select Essentials. If that's what you already have selected, then click reset Essentials. And this will return the workspace to the default just like it was out of the box the very first time you installed it. This will include two extra tabs. This here is Photoshops guide tutorial of some essential stuff. I'll recommend going through it later if this is your first time with Photoshop. Okay, I don't need these two tabs right here, so I'm going to close them. If this method doesn't still return everything back to normal, then that means you have changed something in the preferences, in that case, go to Preferences in Windows, this is under Edit Menu, and select General. And click Reset Preferences on Quit, Restart Photoshop, and everything will be back to normal. Keep in mind any preferences that you intentionally changed in the past that will be gone to. All right, back to our photo. Often you find the right image of your project, but it's not quite the right size. This image, for example, will make a great background photo. It's clean, it's simple. It has great color contrast, but it has one problem. The separation between the beach and the water cuts right through the middle of the picture. Neither side is wide enough to host our content, but if we could stretch one of the sides a little more, then we would have a perfect arrangement. Luckily, we can do that in Photoshop. Inside layers panel, you'll see this lock on the layer. This means the layer is partially locked and in many ways won't be editable as you'd expect it. Just click on this lock to unlock the layer. Now select this crop tool. You'll have these handles around the image, drag the side you want to create the stretch crop on. This just extends the boundaries of our artboard. Click the checkmark. Once done, so it commits the change. Now select this rectangular marquee tool in case you see something else here, right click on it. This will open up all the other tools that are part of this group. Now drag and select the part that you want to stretch. Make sure to select parts that don't have any detail on it, something that is already blurry or uniform. You can't do this with people or objects. This can be done only on backgrounds and blurry parts and so on. I select Extra on the left side just to make sure the entire edge is selected. Once it's selected, go to Edit and free transform. You can also press control or command, just as it's shown right here. Now just drag the left handle and stretch the image as much as you feel is right. And then click the check mark again, this commits the change you are making to the selection. If you have extra space here, select Kroptolgain and crop it out. Now we've got an image that has a good amount of space, so we can put our content to save that image. Just click file, Save As, and select J. That's all. 178. Photoshop: How to Cut Out an Image (Unboxing): counting out an object from its background is best down in photo show or affinity photo. Are any other similar software, which is for photo manipulation? Let's begin. The most important part of successfully cutting out a subject is actually picking the right photo to things that we need to pay attention to. Are the background and the position off the subject? Ideally, we want a background that it's plain and contrast really well with the subject. Cutting out subjects from difficult backgrounds can be tedious work, and the last thing you want is to spend half a Knauer to cut out a model plight into your desires and realize that the model is not a good fit. Good design is usually a result off a lot of directions. Imagine Iterating between three cut out of subjects, sending the final version to your client for their review and then climb comes back, saying that the model isn't really their target audience, and they want someone a little older and dress a little fancier. That's going to drive you crazy. If cutting out subject is not a quick and straightforward job. The second important, in fact, is the position off the subject in the photo, cutting out a model who is sitting mood and make a lot of sense. We would have to recreate the same position you are designed, so we would have to, you know, make the model sit down on something which is very similar size and shape in our designs as well, and that's too much. Need less work. Standing front facing positions are the best for cutouts and all camera angles like these are just asking for a lot of trouble during the design process. Because camera is facing her from sideways from the top thin. The space in which you will put her has to reflect that, too. It's doable, but you will bump into obstacles and limitations for your designs. These photo, even though in a plain background it's still a bad choice, ignoring the part when she is, you know, facing away from the camera because she's wearing a white top and in front off a white background photo shop will have hard time detecting the edges between the background and the sweater on Splash usually is not the great place to find such photos. Most of the photos here are taken in real life scenarios outside of the studio, which is not a bad thing. It offers a good selection of stock photos that don't look like stock. But for isolated images, the best place are paid stock sides, For example, big stock dot com. If you add a keyword, isolated tow whatever you are looking for, it will give you mainly studio shots on plain backgrounds. These photos will work the best for cutting out the photo show process will be super simple , and the camera angle and position of the subject will be excellent for your work. This is another paid stock side photos dot icon ST dot com. They offer a selection off photos, mainly on plain backgrounds. It's free for personal use, so I'm going to pick a photo from here. This is an excellent photo work with for full subject cutouts. The background is playing in single color, and there is a clear separation between the subject and the background. It's an easy work. You can pick this exact photo to follow along or choose something else. I'll link the image and the resources. I'm not going to demonstrate background removal on difficult photos. I don't even want you to learn how to work with difficult backgrounds. This way we will make sure you get into the habit of looking for the right photos. When it comes to isolating the subject for difficult photos, I do something else. I only cut out a small part of the image. I will demonstrate this later. Okay, so let's open our image. Unlock the layer by clicking this lock icon from the tool box on the left shoes. Quick selection toe hovering over a tool will tell you what a days this is. The tour will used to select the model and isolate her from the background. Now select the brush options through the size that is not too big or not too small, so we can easily select tomato and set the hardness to 100%. Now start selecting the model from the center and slowly cover her entire shape. Make sure that those animated lines are surrounding her edges and nothing else to select more precisely, zooming very closely by pinching your touch fat or hold on out or option key while using your mouse wheel. To get a better control over your selection, increase or decrease your brush size. There's a shortcut to this so you don't have to go to the brush settings panel all the time . Just click square brackets. Key left. One decreases the brush size and the right one increases it. If you feel like something extra, hold out or option key and you'll see your selection tool now has a minus on it. When you release out, it goes back to plus so plus adds to the selection and minus subtracts. Hold out and start removing areas that you over select it if you make a mistake and you want to go back under auction and photo shop actually works a little weird. I remember it was very annoying for me in the beginning. It still is because it doesn't work like you would expect it. So the regular control Z or commands a young Mac goes back and forth on your last action. So if you want to under the last action that it works as you would expect. But if you press on it again, it will redo the last action. So pressing on it a lot of time just goes back and forth, drove me not first time I was messing around in photo shop. The actual on Do see here in the Edit options is called Step Back Board and has a shortcut with an out option in it. This is your usual under and behaves as you would expect it to behave in windows, which probably should be control. I'll see, but just in case, double checks and just go into the edit and then go to step backward and see what's the shortcut next to it. Check your address and make sure you didn't miss any spots. Don't worry too much about the loose hair. Just select the main line and then we will fix the hair later, after you're done selecting click, Select and mask right here. This is actually available on the newer Photoshopped releases. If your version doesn't have this, then look for refine ach! It works almost the same way, but this new select and mask future is more superior in here. We are going to clean up our selection so we can get the perfect result. Here's another important Photoshopped tip. Make sure you have a correct layer selected. This is the layers panel, just like fig MMA. If you have more than one layer. Make sure to cite the one with the photo on it. Okay, so in here, by default, that transparency is decreased. It's a transparency off our background and everything we haven't selected sliding. This doesn't affect how our cut out will look like it's a guide for us. 0% shows the original image and full and 100% heights. Everything we have not selected. It's helpful to receive with Mr any details. Let's increase it to 100%. As you can see, there are some imperfections on her hair. The pink background is passing through her hair. Let's put her on a white background from here to better see that eat house change their passage to 100%. Here is well, this time it says rapacity instead of transparency because the white background is on top of the original background, So 100% opacity means it's 100% visible. Don't worry about this too much. The hair needs some fixing. Also, if we zoom in closely on her skin, the edges are jagged and unnatural. There's not a good standard to use in any design. Good design looks perfect when it comes to small details like this know all discolorations , and the cat out should look smooth and natural, like that's exactly the background she was taken on. The ugliness off most cutouts comes out from the edges when an just aren't well refined. It's noticeable, it looks like as if someone actually took a really paper magazine and then with scissors cut out. The model from their luckily photo shop is absolutely incredible. And fixing this to fix the edges off are cut out. We need to select a refine and brush tool from here. It's the 2nd 1 Keep your mouth over it for a second, and it will tell you which one it ISS because these three looks quite similar, just like we did with the other brush size, the brush from the options panel or by using square brackets and slowly start brushing over the edges off her hair. And look at this. What is actually happening here is that we are telling Photoshopped to look beyond the edges off our original selection and see if there are any parts that look like they belong to our selection and at the same time to remove pixels that look like they are part of the background. That's why that Ping has disappeared. Using the opacity slider, check other parts that have been missed in case you remove a little extra, just like other tool price on out or option. You'll see it's a minus sign. This will restore the original edge and then brushed over again while you keep holding on the out key. Don't worry, it's not going to subtract from the original selection. It's basically undoing what we just added. Her hair looks decent, but there's still some pink collar falling on her edges Will remove this later. Let's check the rest of her edges now. We can, of course, go around on her entire body with this refine ach tool. But there is a quicker way to do that on skin and parts that are quite simple and uniform. Unlike hair that's done through here. Edge detection. It's the same concept as the refinanced toe. With this, we can tell Photoshopped to look beyond our selection and see if we have missed any parts. It's in pixel, so one pixel means look one pixel after the selection and add any missing parts. Pay attention to how the edges movements out as we increase two pixels. Same dissent in this case, Smart radios means instead of using a uniform to pixel radios everywhere, it will use custom value depending on the edge. It's useful if you're using large values, but I like to fix odd. Adjust manually with refine edge tool. Sometimes you'll notice that you have some extra patches like this when you were making the selection, or you have actually missed some spots going back and fixing the selection after putting so much work is going to be heartbreaking. Luckily, we can add or remove the spots right here with a brush toe. As usual plus sign will add in any pixel C click on you will feel this works a little different than the previous tools that we used other two tools. They do calculations in places where you press this one doesn't you don't base to whatever you press, and one final step we need to make is to remove that pink glare from her hair that can be done automatically from here. Select decontaminate collars. Give it a moment and Walla. Now most of the ping from her hair is gone. What amazing job it did do. This step is very last because if you have the selected after every click you make, this will recalculate again and again will make things much lower. Although something funny happened here, let's see if we can fix it with refine edge tool. Okay, God, actually still chose a little tricky photo. Ideally, choose a photo that has a white or gray plain backgrounds. Cold backgrounds do end up mixing with the edges. All right, now, let's output are cut out. We have a few options here, the bastards to choose new layer with a layer mask. But this does. Instead of cutting the whole thing out, it will copy the original photo and apply a mask to it. This mass will hide the background and everything we did. This is the best option because if we notice something else and want to make any changes, we will be able to. With the new layer option we want, the background will be gone forever. Inside the layers you'll see. Also, the original photo is still there in its below, but disabled, so it's not visible. It bothers our copy with the mask. Apply to it that black and white Sylar It is the mask or gets The final step is to save our file. First, let's save This is a photo shop file for any future addicts. The rest of the design will be doing in fig MMA. The Photoshopped file can't be important in Sigma, so we have to use PNG file. PNG is the one that will keep the transparency of our cat out. J pack isn't going to work because it will fill the background with white collar. When we export this into PNG, any layer that is he don't will not be included in export. So you don't have to delete this layers. Just hide it. Also, I would like to crop the extra space, select the crop to and dragged the address, go to file export and quick exporters. PNG. Now we can place this image in fig ma and pick any background we want. And that's how you do cutouts in photo shop 179. Photoshop: Stick Out Tutorial: Now I'm going to demonstrate how to cut out on Lee. A small part of an image is always the important part is choosing the right image. You can do this with any photo you can stick out, ends off the object like table corners. Hands, legs had branches. And so any object that has a prominent tip first up in this process to define the container of the image. The frame in which it sits because you're sticking something out off that frame. If you're going to use the photo as a full background photo than address off your frame, are actually not visible. You can't stick anything out. I'm going to work on this image. In this tutorial. I have linked the same image so you can follow along. We can easily stick out that year off the dock. That means our frame has to have a top border if he stretches from top to bottom off the screen than this image won't work at all. But if I use a frame like a circle, for example, then I can stick the year out without a problem. So let's frame the photo first, just like we're doing fig Now we're going to create a mask. We're going to use the same asking to as we did previously in the cutout method. But this time, instead of selecting the dark from the background, we're going to select a circle part of that dog in the market. All right, Click on it and select the elliptical market hall. This is another word. Select. Oh, I don't even know what Marquis means. Not by dragging. Select the face off the dock. Hold shift while you do this so you can draw a perfect circle to get a better handle. You can press on space bar to move the selection around. You don't need to get this perfectly right now. We can always resize and reposition the image off the dog. Later, as we did last time. Click, select and mask up here. You're already familiar with this mask editor, but we're not going to add a hear anything. Actually, because we need a perfect circle mask. So right away go to output options and select new layer with a layer mask like we did last time There. Now we have the same arrangement as in the cutout method. If you need to reposition or re scale the image inside. We can do that similarly, like we do in Fig MMA. Select the move tool first. By default, Mass group is locked so you can move the image separately. It's moving an entire group to move just the image or just a mass quick on this link. I can hear it will, unlike the image from the mask, and now you can move them separately by selecting either the image or the mask from the layers list. You'll notice that mask in Photoshop is a defined space, as it was defined originally. That's why we have this extra bits showing here. If you end up with this extra bits after moving your image around, you can just crop this out with a crop toe. By the way, Photoshopped has this very handed toe called History Panel. Instead of undoing on and on, you can go directly to the staff that you want to undergo. I love this history tool, and Photoshopped makes undoing much easier. Okay, so repositioning image inside is easy. Just track damage around but to re scale the image so like the image layer and then goto adit and free transform. Now you can grab the handles and resize it as you wish. Hold, shift, toe lock the ratio here in my head. I'm imagining what part I'm going to stick out so I can position the image properly. Now that we have prepared our mainframe in which our image sits, we can now stick that year out of it. To do this, we're going to basically cut out a piece off the dogs here as a separate layer and place it on top off this existing layer. So the right click on this mass group and duplicate the layer. Now right, click on the mask itself. Not the entire layer, but just a mask and click dilate layer mask. Now we have the full image on top of it. If we cut out a chunk off the year from this full image and remove the rest, we will get the exact stick out effect would want. So to do so, we do the usual cut out method, just like we did in the previous lesson. Grab a quick selection tool. Set the right brush from the options from here, make sure you have selected the brush with the plus sign, not the minus. Set the hardness to 100% and set the right side so you can select that year easily turn. They'll pass it down to see the edge of the frame and select accordingly. You can select more off the image on the bottom because it's not going to do us harm. It's just going to be sitting on top of the existing photo. Anyways. That looks good. Now click, select and mask. We're seeing both of the layers. Here are frame layer, and just a year later, let's change the background toe white for now so we can refine the edge of the year. Remember how to refine badges, Select the refine edge to and go over the address. Or it adds, in any missing hair or any other missing pixels. As I mentioned before with this story, we are telling Photoshopped to look beyond our selection and detect any missing pixels. You don't have to refine the base off the year. It will merge perfectly with the background image, Now go to output settings and select new layer with a layer mask and hit OK, there. That's our year sticking out. Let's put a white background on this so we can see the results better. Create new layer and click the new feel. I can hear select solid color and choose white. Now drag that layer below everything. If you're going to use a different collar in your actual designs, you can double quick on the field and change the caller so you can visualize this right here in a photo show before you export the final result. For example, when I put this on a dark color, we can notice that there's some extra glare behind the ear. Too bad I didn't check this one refining the selection, but we can still do some work on this. Even after the mask has been applied, the mask is still edit herbal. If we zoom in on the Mask lair, you'll see we have black and white parts. The white parts are visible part of the mask, and black parts are hidden part. That's why the white part has a shape off the air. If we paint wide on this mass, we will show more off the image. Let me demonstrate if I select a regular brush tool and draw on it with white paint. It's going to show more of the image, and if I drove with a black paint on it, it will hide whatever is already visible to switch between white and black brush. Click on this arrow icon on top of these black and white boxes. Whatever is on top is the current color of the brush. There's also a shortcut. You can hit X on your keyboard, and then we'll switch between the two. Okay, now we can remove the extra glare from behind the ear. I'm going to adjust the brush to make it smooth and feathery, so I dont create any hard edges. In this case, I'm going to decrease the hardness completely and even decrease their passage to 50%. This way I will brush over the parts and in a smooth and controlled manner, and that's a better result. It might not be ideal on a black background, but works quite well fast to refine this during the masking face. And don't forget to check the view on the black background. If you plan on using it on dark backgrounds, the last step is to export damage we're going to export in PNG with the transparent background that where you have more freedom to choose backgrounds directly in fig mongering actual design process. Hide the background, crop out any extra space and under file export, click quick exporters PNG. And there you have it. This can be now important inside Sigma and use on different backgrounds.