Learn Web Design For Beginners - Full Course

In this course, you'll learn everything you need to create beautiful, fully functional websites from start to finish. We're going to cover the full process of web design, from planning to strategizing to structuring the right content and creating great user experience, then designing beautiful images and interface to make sure the website is delightful. And we're going to end up with developing the websites and then publishing it.

You're going to get a crash course in Figma to design the website and then Web Flow to develop it. And there's absolutely no knowledge required for this course as I'm recording this with beginners in mind. We'll be working on a project together. So hopefully you can finish this course with a great website under your belt that you can use in your design portfolio.

My name is Ron Seal. I've been a designer for the past 20 years working with clients of all shapes and sizes. And for the past 5 years, I've also been teaching thousands of designers on Flux Academy on how to become successful web designers. Web design is such a great vocation. It's creative. It's technical. You get to collaborate with interesting businesses. And you can work from anywhere. And since every business in the world needs a website, there's always a need for web designers.

Let me be super honest about my goals with this course. I want to get you to the point where you can build simple websites yourself, perhaps even start charging for them so that you're super excited about web design. And when you're ready to go professional, you'll take one of our advanced courses and join Flux Community.

So, this course is going to be long because I'm going deep. And I realize that long video can be a little daunting. So, we broke this course into five chapters. And you can use the link below this video to enroll in a free 5-day course, which will break down this course into a chapter a day with additional resources and bonus materials. You don't have to, of course, but this will increase your chances of completing the course successfully. So, I highly encourage it. With that said, let's get started.

Before we dive into actually designing the website, let's take a 30-foot view and talk about what the process looks like. Now, there's actually two types of processes. The amateur process and the professional process. The amateur process is basically taking a template and then customizing it to fit your or your client's need. The professional process is starting from a blank canvas and designing a custom solution for your specific needs.

In this course, I'm not going to get into the amateur process because I don't think it will get you very far and I don't see much future in that. Don't get me wrong, there's plenty of designers out there who are working today and some of them are charging anywhere from $500 to maybe $3,000 for customizing a template, but to be fair, most clients can do that on their own. And with AI and the tools that are getting easier to use, it's going to be very difficult to keep doing that. Not to mention that is not as creative and fun as the professional process.

The professional process is the same process used by agencies who are charging $50,000 to $100,000 or even more per website. Now, that won't be easily replaced with AI. Actually, I will show you on this course how to use AI tools to make your professional process even better.

So, what does the professional process looks like? Step one, planning and strategy. At this stage, we're trying to figure out why are we even building this website? Who is it for? What are they trying to accomplish? How will we know if we succeed? We do that by having conversation with our clients and doing research. This will help us to create a brief which will serve as the compass for this project.

Step number two, structure or UX. At this stage, we're going to decide what pages we need on the website and what content we're going to have on each page. Then we'll develop this content into wireframes, which is basically gray ugly sketches that just show us the structure and the content of each page, but without any design or color or or images. This is what some people call user experience because it includes how people orient themselves through the digital space of our website and how easy it is for them to find what they're actually looking for.

Step three, design or UI. At this stage, we're starting to bring the magic into the wireframes. We'll choose the colors and font that will help to communicate the right message. We'll bring images, illustrations, and iconography to bring emotion and clarity into the design. Some people call this phase UI, but this is much more than just interface of buttons and forms. This is actually storytelling. This stage can really make or break the project.

Step number four, development. The last step is to bring the design to life by turning it into code. This means making sure that it looks great on all devices and that the design is accessible. It will also include interactions and animations. However, worry not because although many people like to code websites themselves and these people are called front-end developer, there are powerful noode tools today like Web Flow that enable designers to visually turn their websites into highquality code without actually writing any code. And that's what we'll be doing in this course.

Now to be fully fair, some people who are doing the amateur process in working with templates will include strategy and custom photography to increase the quality of their results and some professionals will use templates or UI kits to speed up their process. But in any case, you will benefit greatly from understanding the professional process. So in the next chapters, we'll dive deep into each step of this process and we'll learn both the theory and also put this in action by working on an example project. Let's get started.

Eison said that if he had a one hour to solve a problem to save his life, he would spend 55 minutes determining the proper question to ask. So, while you're probably pretty excited to jump into a design software and start creating something pretty cool, the first thing that we're actually going to do is spend time figuring out what it is that we're trying to design. Or in other words, what problem are we trying to solve with this website? We call this website strategy. The essence of a strategy is to understand where we are today and where we want to be in the future so that we can draw a plan on how to get there.

Now, I've mentioned earlier that every business needs a website. However, every company is different and therefore every company needs a different website. First, let's figure out what type of website we need to build. Then, let's figure out what the goals of the website are. When we're thinking about website, there is basically five big categories of websites that they fall into.

First is e-commerce. These are website where you buy stuff online and you probably know and use these types of website all the time. The second type of website is a marketing website or a business website. Whereas basically the website is a business card of the website online. It presents the website. It tells the story of the website and it basically shows information about that company. The third type of website is a content website or a media outlet. That is a website where you go in to consume information. And so you can think about blogs, you can think about magazines or curation for inspirational websites. These are website where you go to consume information whether that's text, image or video. This is a content website. The fourth type of website is an educational website whose goal is to teach you something. So you go to this website to consume information in order to learn. So that might be an online course or uh a lot of information about a certain topic. The goal there is to teach you something using text or images. The fifth type of website is a portfolio website which is a website that is designed to show you work that this company, this person, freelancer or agency can do. So this is kind of like a proof of concept. It shows projects that this company has created and the goal there is to show their expertise by showing different case studies.

There's an additional type of website that people tend to confuse when talking about web design and these are websites like Google, Airbnb or Twitter. These websites are actually apps that we interact with and they are very different than the types of other website that we've just mentioned and they are more complex. So, we're not going to dive into tackling them in this course.

Depending on what type of website we're building, we're going to have different goals. Some of the possible goals for a website can be selling products or services, building trust, generating leads, or providing value and education. It can be help with hiring. To figure out which one of these is going to be the right one for our project, we need to spend time with our clients in what we call a strategy session where we learn about their current situation, their offering, their customers, and their vision for the future. This helps us understand what part the website is going to play in their more broad business strategy and what content we'll need to include in the website.

Okay, enough about theory. Let's see this in action. My friend Omar has just launched a new pharmaceutical company and they need a website. I sat down with him to learn about his company and what he needs in his new website. His new company is called Massix and they are leading the way in a new medical use of silocybin which you might know as magic mushroom. It's a really exciting project that has the potential to change how the healthcare industry is helping people suffering from addiction and post trauma. However, it has a challenge. People tend to associate psiliocybin with hepes and recreational drug use and not with professional medical care. Since the company is very young, we don't have a product on the market yet. And the website is going to be rather simple. The main challenge on this project is going to be to help them build trust and look credible so that they have easier time when they're talking to investors and partners.

Based on my conversation with Omar, I'm going to create a brief for this project. By the way, if you want this brief template, make sure you've signed up to our free 5-day email course to get all the additional goodies. Now, the last thing I asked Omar is to give me some references of websites in the pharmaceutical space that he thinks are doing good job in building trust. This helps to align our expectation on what credible websites look like and it's going to avoid me designing something that I think looks great but he feels is really far off.

Okay, enough about me. How about you try now? I encourage you to find a friend, a family member, or a local business that needs a website. Go and talk to them about their needs. Fill in the brief template so that you'll be ready to design for them in the next chapters of this course.

Now that we're clear on what the strategy of the website is, it's time to move on to the next step and create the structure and content for our website. The next step is to turn our strategy brief into content that's structured in a meaningful way that would help the visitor find what they're looking for and help them to achieve their goals. Let's take a look at how websites are structured.

First of all, website have pages. Some of them have a lot of pages, others have just a single page. You can compare this to a house. Some have many rooms and some have just a single room and that depends on their need and the budget. Some of the most common pages are homepage, about page, product or services page, blog page, and contact page.

Each page is then made up of different sections. You can think about these sections as chapters in a book or slides in a presentation. Each of them has their purpose in telling a short story and leading you to the next one. Some of the most common sections are navigation. Navigation helps you to understand what content is on the website. And if your website is just a single page, it might help you understand just what different sections you have on that page. It also helps you to understand whose website is this because the navigation usually includes a logo. Hero section. The first section in every page is always called the hero section. The reason it's called a hero is because it has a huge role in the story that we're telling. It's going to tell us very quickly what's here, what's on this page, and why we should stay on this page. It's one of the most important sections in every page. Features section is where we showcase what's included in the product or service. A call to action section or CTA as we sometimes call it, is where we encourage the visitor to take some kind of an action. A testimonial section is where we show happy customers. Pricing section is where we explain how much things cost. A gallery section is where we can show a variety of images. A contact section is where we tell people how they can contact us. And every page has a footer section whose role is to clearly outline all the pages on the website and all the additional information that we might be required to put such as privacy, terms of service, copyrights, and the footer also helps us to clearly understand that we've reached the end of the page because everybody knows that there's a footer at the end of every page.

Each section in turn is made out of elements each serving its own purpose. Some of the most common elements on the web are type such as heading and paragraphs to convey information. We have buttons and links that enables us to lead us to different types of places or take different actions. We have images or videos that help us to convey information in a visual way. We have forms that allow us to submit information.

The first thing when we're working on a website structure is to create a site map. The goal of a sitemap is to map out all the different pages that we might need for our website and all the different sections that we might need on every single page. Once you have that, you can move into the second step which is to turn these sitemap into wireframes. Wireframes is what we call the lowfidelity design. That basically means that we don't spend time thinking about colors, fonts, and images, and we just take care of the structures of the section and the elements on the page.

To show you how this looks like in action, I'm going to continue working on my massics projects. Now, I personally like to do these steps with pen and paper, but I'll also show you other alternatives later on. So, the first question I need to consider for the massics project is how many pages I need. Now this company is still in very early stages and we don't want to share too much on either the product or the team. So it makes sense to use a single page website. We call these one pagers.

Next, what sections do we need on this page? First of all, we need navigation. Yeah, even if it's just for a single page. Next, we need a hero section to tell people who we are and what we do and why they need to care about this. Next, we want to share more about what the company does, but since it doesn't have a public offering right now, and we want to create intrigue and a big promise, we can share the company mission and vision. Next, we'll give an overview of the product that they're working on. And next, to build trust, we can use the list of partners since they already partnered with established medical and research institution. If we show the logos of these institution, that would really help us look more credible. Lastly, we'll conclude with a contact section that will allow interested investors and collaborators to reach out. And of course, every page always needs a footer to close the page.

Okay, so we have a simple site map. Now, let's expand that into wireframe. Again, I like to do this on pen and paper because it feels faster to visualize how the website is going to look like. So, I'm drawing a long rectangular for the whole page and then I start drawing out the sections navigation with space for the logo and some of the section names. Note that I'm not really writing or drawing the logo. I'm just doing boxes and lines. Next, the hero section, which will probably have a heading, a paragraph, a call to action button, and an image. Now, there are a lot of layouts for the hero section that I could use. Left alone, center align, full screen, but I'm not too worried about this right now. Next, I'll draw the mission section when the product section. And I might switch sides for the text just to mix things up. Uh, a line of logos and a contact form.

Now that I have my ugly drawing, I'm clear on what content I need. I need these headings. I need these paragraph, these images, and so on. Now, usually when working with clients, you want to share these wireframes with them to make sure that they are clear on the content and structure of the website before you start spending tons of time on making this look good just to discover that you're working on the wrong structure. Now, you're probably not going to show them this sketch. Uh, you want to share some kind of a digital version of this. So, let me show you how you can do this digitally.

Okay. So, the first tool I want to show you is the Reloom AI site builder. And you can give this a try for free. So, what I'm going to do is I'm going to go into the site builder and it's going to open up a new, as you can see, uh, a new site map. Now, we can generate a custom site map by describing the company right here. So, I'm going to paste my description. Massex is a new pharmaceutical company working on innovative healthcare solution. Basically, a description of the company. I'm going to set this up as 1 to five pages and I'm going to hit generate and let's see what this does. So it's thinking and now it generated basically started by generating three pages home about us research and contact and it's also basically generating the sections for us. So navbar hero header section and it tells us what's going to be included here. Introduce massics with a strong and compelling image and video background showcasing the innovative approach. um about section, team section, FAQ section, call to action section, and footer section. So, as you can see, it's not very different from what we've done previously. And it also suggests three uh pages here. Now, what I can do if I want is I can delete these pages because I want this to be a single page. So, I'm going to delete these. And I can also go ahead and adjust the suggestions from here. So, uh, hero section, we want, navbar, we want, about section is also we want. Team section, we don't want. So, I'm going to rightclick this. I'm going to delete this. FAQ, I also don't want. So, I'm going to delete this. The one thing that I did want, uh, so I'm going to click plus here, and it's going to suggest a bunch of section types. So, what I wanted to do is, uh, maybe features section to talk a little bit about the product. And I can also write here product section. And then what I also wanted was ba basically the logos of the partners. So let's see what they're offering us right now. Uh, we have a logo list. So this is great. So I'm going to rename this partners list. Okay. So basically now I have a very simple site map pretty close to what I did uh with you know just sketching this out. But here's when things get pretty wild is where I click this wireframe tool and now it's going to take the sitemap and actually going to go ahead and design the site map for us. So let's see how that happens. So as you can see the reloom tool have gone ahead and created the whole wireframe for me. Looks pretty good and it also included the copy for me which can be very very helpful. So one more thing that I want to show you is that in this case I can click one of the components and because realum in general is basically a component library I can go ahead and replace the component and start playing around with different layouts. Now I've mentioned that I don't care too much about layouts right now if it looks you know with a text on the left an image on the right or image background but I just want to show you how crazy it is that you've got all of these options here and also inspiration actually for the layout. um just to get started. So now we have a very clear uh and beautiful wireframe that we can go ahead and share with our clients.

So at this point you might be saying, "Wow, Ron, you've made this in a second. Why bother showing us all of the stuff that you did with a pen and paper before?" And to be fair, this is a valid question and this is a super super helpful tool that I personally use uh on all project. However, because you're a beginner, I still think it's very very valuable to take a few minutes and try to think things through with your head before you're delegating your whole thinking to AI just to know that it makes sense. For example, we've made adjustments to the number of pages and we've made adjustment to some of the sections on the site map itself. So, it is worth taking some time and based on the conversation that you had with your clients, make sure that what you're getting here is really what you want. That being said, this is very very helpful. Now, I'm not going to actually go ahead and use these uh wireframes. And the reason that I'm not going to do them is number one to use these wireframes in Figma, which is the tool that we're going to go and use later to design them is a paid feature. And I want to make sure that you're able to do this for free. And also, the components, the Figma components that Realum give you are pretty advanced components. So you need to be an advanced Figma user to try to understand how to design using them. And I want to keep things very very simple and show you what you can do very easily for free. So we're going to use this as a reference, but we're not going to actually use these components. However, give Reloom a try and if you want, you can uh there's an affiliate link that you if you use it, it's going to help support us. And also just saying, you know, web flow masterclass students get two months of free of real, which is a really, really great benefit. Just saying.

All right, let me show you now how I'm creating these wireframes myself in Figma. Okay, so let's rebuild our wireframes in Figma. And if if this is your first time in Figma, worry not. We're going to take it really, really slow. You can open up a new Figma account for free and open up a new project. And this is what you'll have, an empty file. The first thing I actually want to do is before I'm designing is I took a screenshot or uh a photo of the wireframes that I've sketched and I'm just going to drop that inside. So I have kind of like a reference of what it is that I want to design here. So let's go ahead and create a page for ourselves. And I'm going to do this by opening up here and clicking on this frame thing. And then I have a bunch of presets right here on the right. And I'm going to select desktop. So now I have this page here. It's not very long. So I can click here and drag this a little bit so that we have it and it's long. I can also in Figma zoom in and out by hitting command plus and minus um and pan things around um with my mouse this way or by holding you know the shift uh the shift key and then holding to pen. Okay.

So this is what we have. What we want to create here is this rectangular to as a placeholder for the logo and then a bunch of maybe the sections that we have here. So, first let's create a rectangular for the logo. I'm going to hit the rectangular uh tool right here and just drag. This is a placeholder for the logo. Great. Next thing, let's open uh hold the text one and let's write here. So, the first one is going to be mission, right? And the text is a little bit small. So you can see right here from the right from the text panel. Let's make this maybe 18. Uh, and maybe make this a little semi bold. I don't care too much about the design. I don't have to figure this out right now. But just so that we can see what we're doing here, I'm going to drag it here. And let's think about the sections that we have here. So we have mission and then we have maybe product and then we have partners or maybe just contact. I think that's enough. I don't want to put the I think three links here are enough. Okay, so this is what we have here. Now we have basically a placeholder for an image which is also just a rectangular. So I can hit R as a shortcut for this rectangular and just drag here. Going to have an image here maybe. And then I need a heading. So for the text specifically, Massix have helped me provide the text for this which is again it's unique. Sometimes you might use an AI tool to write you or you can do the writing for your clients on your own which is very helpful and you can charge money for which is a big topic. We have a full course called right side just about writing copy for websites. It's out of the scope for this course but for this one luckily I was provided with the text so I'm going to use that and if you haven't, you can use what the Reloom AI builder you can copy from there and paste it right here. So, let me go ahead and paste some of the text. And because this is going to be a heading, let's make this really big. So, let's do something like 50. And I can go ahead and as you can see, we have a box binding this text. And if I make the box smaller, it's going to Yeah, it's going to make the text into a multi-line text, which is great. Maybe it's a little too big, but okay. Something like this. So, we have a heading. We also had kind of a subheading here. Silosin pioneers. Um, and for that I'm just going to duplicate a text. So, how do I duplicate a text? Uh, you can hit it and you can do copy and paste, command C, commandV, and duplicate it. That's one way to do it. Another way to do it is by just dragging it while you're holding the option or alt key, and that would just create a duplicate. So, that's an easy way for me to duplicate. And now I can paste the text here. Um, because basically I'm going to have a lot of text elements here. So, we've got that right. Okay, we've got the hero section done. Okay, next section. Basically, I've made it here. The X in the background basically said that it's on top of an image. Again, I don't know if I'm going to do this, but for now, let's do this. Let's duplicate this image by dragging it while holding the option key. Let's make it as if it's a section that has, you know, the image on the all all of this area. And I'm going to drag this heading here. And let's do the mass mission. Yeah. So, let's do this. Of course, if it's going to be centered, I'm going to need to change the centering, but I don't care too much about layout at this point. And then we've got this is the actual text. So, let's grab this text. Now, you can see that I I don't see the text. The reason is this text is behind this rectangular. And you can see it because right here on the layers panel, this is actually under this rectangular three. So I can just bring it up and now you can see it. So we have layers. So if something is under a layer, you're we're not going to be able to see it. I'm going to paste this here. Again, everything is temporary. This is just a placeholder. Um, and I guess introducing new area for medicine. I don't know what to do with this. Let's put this as a heading here for now. I'm not sure how I'm going to use this later. The next section that we have is another image with another heading and some text. So, basically, I can just duplicate this whole thing, I think, and just drag this down here. And let's see what we have here. So, here we have uh the product. Actually, maybe let's use this as the heading, as the big heading. Let's use the massics product as the smaller heading above the heading. And let's take this text and dup duplicate this small heading. Paste this here. And okay, we've got another section here. The next section is these logos, list of logos. So, we can actually take the logo that we have here, uh, duplicate it by holding the alt key, option key. By the way, I need this page to be longer. So, I'm going to hit, uh, select the page, the title of the page at the top, and then I'm just going to drag this to make the page a little bit longer. Let's duplicate one, two, three logos, I guess. And I can also hold the shift while I'm dragging to make sure that it stays in line so that they are all aligned. So, we've got these here. Maybe we'll need kind of like a heading, our partners or something like this. So, let me drag this. Let's take our partners. Not going to bring in the images at this point because I don't care about this at this point. And the last section is some kind of a form, contact us. So, basically, let's duplicate this again. Let's duplicate this whole thing. Let's make the page a little bit longer again so that we have a little bit more space. And this is going to be contact us. So contact contact us. And in this case we probably need some kind of a form. So I'm actually going to duplicate this uh rectangular for an image. And this time it's going to be kind of like a form. So let's zoom in. Let's do a name and drag this on top of it. going to select both of them and drag while holding option and shift to duplicate this below. I'm going to do email here and let's drag this again and maybe this one. Let's make it a little bit bigger because that's going to be message. And then we also need a button. So let's duplicate this and this. Let's do here submit. Submit. Um, okay. So now we have a button for this form. So now we've created a sketch of a contact form. That looks okay. Maybe we can bring it up a little bit, but it doesn't really matter. And the last thing that we have is basically the footer, which the footer basically I think is just going to include Oh, we also need investors, contact, and an email. So let's copy this. Um, let's bring this here. Let's maybe copy this. Not sure where I'm placing this yet, but let's place it here temporarily. And then what do we have? We have the copyrights for the footer. So we can create can duplicate this. Paste the footer. And I'm just going to give this color just so that it looks a little bit different so that we know that we are in the footer. And this is the end of the page. Okay. So we are pretty much done. Okay. And it is okay. We have now a digital wireframe. We'll use this later on to as the basis of our design. I know that it's ugly right now, but this is actually good enough for us to share with the clients and get their perspective whether the texts are good, whether the structure is good, whether something is missing and we're ready to move on to the next phase. So, I encourage you to stop, go work on your project, turn your strategy brief into a sitemap first and then wireframes later, catch up to us, and let's move to the next phase where we're actually making this look good.

Finally, we're at the creative and fun part of the project, the design. Now, some people call this stage UI design, but I feel like the term user interface doesn't really do justice to what when it comes to web design. Maybe when you're designing the interface of an ATM or a dashboard, um, then user interface makes sense. But when it comes to websites, you know, we have uh interface elements like buttons and forms and navigation, but we also have a lot of imagery and longer text and there's much more storytelling that goes into design uh than other forms of UI design. So, it's much more than UI design.

Now, the core of what we're going to do in this part is basically graphic design or what they call visual communication. meaning we're going to use things like color and type and visual to communicate a message. Now, we already know what the literal message is because we already have the text on our website, but graphic design really helps to reinforce the message. Now, let me show you what I mean. Here are three examples of a poster with the same message. The message is I love you. But you can clearly read a completely different story in each one of them because of how we use the color and the typography and the imagery. So you already know this because you live in our society and you read thousands of visual message all day long. However, as a designer, you really need to be fully aware on how to use these tools to convey the right message. Now, the topic of this is of course huge and we have a full-blown course on Flux Academy on core design skills. But for the purpose of this course, we're going to make it really simple and just ask ourselves the question, what message did this choice uh sends or conveys on everything that we do.

Okay. So, another thing that's going to help us is inspiration and references because we're not inventing visual communication from scratch, right? people um are used to reading design all day long. So, it's worth collecting some references of what we feel is telling the right story so that we can learn what choices other people made to tell similar stories. So, that's actually going to be our first step. But before I'm heading off for my search and collection, I need to know what I'm looking for. So it's going to be really really useful to refer back to our brief at this point and collect a few keywords that I can use to search for the project that I'm working on. Some of the keywords can be something like healthcare or medical pharmaceutical psyocybin magic mushroom and scientific.

Okay, so it's time to search. But where do we search? Now there are endless of sources where you can look for inspiration when it comes to design. We actually have a free ebook with a big collection of places where you can look for it. So if you've already registered for the free fiveday course, you should have that resource accessible. But for now, I'm going to first head off to Behains because that's a huge collection of design work across many disciplines. So that would allow me to search my terms and get a lot of things. So I'm going to start searching for my keywords and then screenshotting or saving some of the images. And I'm going to head back into my Figma. I'm going to open up a new page in Figma that I'm going to call inspiration. And I'm basically going to start pasting the images over there. Now, I'm going to keep doing this and I'm going to search for multiple different keywords on Behance before I'm moving into my next source, which is Pinterest. And then I might move into something like Dribble or maybe awards for great web design references. Now, the amount of time I'll be spending on this stage really depends on how much time I have for this project or how much budget the client have. If I'm really tight on time, it might be something just like 30 minutes. But on big project, I might spend days collecting references and inspiration. One more thing that I'm going to do at this stage is I'm going to go ahead and screenshots all the website that my clients gave me as references at the strategy phase. And also, if I have any materials that the client currently have, I'm going to add that to my board as well.

All right, so let's dive and see what we've got so far and how we're moving forward from here. The first thing I want to look at and walk through is what the client actually sent me, what they have right now, what they're working with right now, which is this, and some of the websites of competitors or other people in similar businesses in this space, and see what they're doing. Now, first of all, let's see what they have. Obviously, they have a single color, which is this purplish bluish um color. They have this I don't know if to even call this logo because it it I don't think that it is a good logo but they have um kind of like a generic sans serif bold font that they're using.

Now when I'm looking at the the other websites here the reason that I'm looking at it is to see what's working and how they are conveying the story. And number two, I want to make sure that I'm not making choices that are too similar uh to other competitors in that space so that it doesn't look like we're either ripping them off or that we're people might confuse us with other people in this space. Part of the our job as designers is to make sure that the the websites or project that we design sets the businesses apart from their competitors. So this is the first one actually looks very nice. They have a very a little minimalistic logo. I can say that has these lines that potentially can be something like connections in the brain because a lot of what psychedelics do is create connections in the brain. You can also see that uh my client has tried to do something with kind of like networks and connections in the brain. So this can be a little bit more abstract way to go about this. They have this very premium looking font that has small seraps. It looks it looks um I guess beautiful. It's not not a trivial font that you would see. looks a little bit kind of like a lifestyle um maybe brand. Beautiful imagery. It does uh look trustworthy and a little bit medical I guess you can say. So and and the choices that they have here is the color is basically this dark bluish with orange. These are basically the colors that they went through with this gray uh background. So this is one. The other one has this kind of like a gradient of um teal to purple to to orange. Also has these lines which might be again we can see this as a pattern also has the brain. Uh, so we can see some recurring patterns here and also I would say a generic sanser font. The last one which I actually really like uh they've made the the choice not for the logo for the logo they have something that looks like and you can see this from here like how molecules look like. So they've used the molecules of psilocybin here to make this look a little bit more medical. Um, and I guess they use the same shape kind of like for the logo. And they have yeah, this looks like something from an encyclopedia or something like this. And also the the choice of a sarafont can look like something from a medicine book. So this is a really interesting approach to how they make this look trustworthy and and um yeah, they have these very nice icons that also look like something from a textbook like a medical textbook. So this is really nice. Um, they're using dark uh dark green as their color. So that's also an interesting choice.

Now I when I've seen this uh image of their lab that also immediately made me think hey maybe my clients need an image in the lab as well. So I've asked them hey do you want us to go and take some pictures in your lab and they actually said oh yeah that can be really really helpful to put uh an image or something like this in the website. So later on we're going to go ahead and do that we'll also go and take a bunch of photos for them. So this is the space in which we're working with. So let's see what I've collected here. And I've started collecting things um in the medical space. And you can see that there is a lot um some patterns recur such as the use of blue to to give trust and these sans sif uh fonts. Sometimes they are they are light. Um sometimes they're using illustrations. Sometimes using people. uh we've got this very clear organized typography on bottles on medical uh bottles that we can see sometimes we have these product shots of if you want to show that it's natural you can show the bottle in kind of like a natural it's in the studio but with natural elements around it. So that can be a good um reference to how we're going to use photography. Sometimes they're you know photo photographing it in nature. So that can be another another nice thing. Here you can see really like a clear there's not much color coming from the brand. We have this purplish but most of the visual uh color is coming from the actual um from the images. We have 3D renderings of elements. Um now here I dove a little bit into looking into psychedelics and psychedelics a lot of times has a lot of crazy colors which is you know not very very different from the medical space. Here's another one with uh where they're demonstrating the connections, a lot of connections in the brain. We've seen a lot of other companies are uh going into this topic of connections um and how to visualize that. So, we've got images of mushrooms. What else do we have?

Okay, so then I stumbled upon this image which is again some kind of a medical I don't know if it's a skin care thing, but some kind of a medical thing. and they're using uh I think it's called glass or mirror page um that gives this glassy effect to it. Now the interesting thing is that when you're collecting inspiration and I fell upon this image, it connected with some of the other things in the topic. So for example, we have these crazy, you know, rainbow colors here and here we do have the same rainbow colors. um, but they look more professional because they are in a medical setting. So that drove me into let's do a little bit of research about either rainbow or refractions or something like this. So one thing that I want you to take away from this is that sometimes you you fall on an idea that you think might be relevant to the project. To me, when I'm looking at this now, the concept, all of a sudden, the concept of a rainbow can be something interesting that I can create to hint about all the colors and the dreamy effect of psychedelics. But if I can use a rainbow in kind of like these clean medical use, I think that can be an interesting and creative solution to the problem of how can you convey the word of psychedelics but also put it in a trustworthy medical way. So, I really like this. This gives me a hint of the direction I want to go into. I also found this image, which again, not a glass effect. This is I guess some kind of a silver foil, but you can see how you can bring in this either glass paper or rainbow effect into a very clean um clean area or and that's also a good reference for you know how you might want to uh take photos of the product one day in a clear background with some elements.

Okay, so this is what I have right now. Now the next step is to start narrowing down because obviously we've collected a lot of things and there's a lot of ideas here. Not all the colors match. Some some places you can see we've got dark images with light text on top of it. Other uh images are very bright. So now is the time to move from collection to curation to make the decisions on what I actually want to use. Now, um I know I'm

Running through this very, very fast and and branding in general and creating mood boards, uh, is a very, very broad topic, and we have a lot of content on this topic. If you're in the five-day free course, we're going to send you more resources on it. But for this course, I'm going to keep it really, really simple.

I'm going to open up a new page in Figma and call it mood board. And the first thing I'm going to do is I'm going to copy in the images that I'm going to use as reference. So, the first thing I told you, I really love this rainbow effect. So, I'm going to take this image and paste it here. The other thing that I think is relevant is how they use photography, clean photography with a clean background. So, I'm going to use that and copy that as well. I'm just going to paste it here. And again, I'm doing this really, really simple. There are more intricate ways of doing mood boards, uh, but we're doing the simple thing here. And the last thing I want to use is this image, which again is very, very clean. Has these, uh, cards with round corners, almost no color. The color comes from the imagery. So, this is something that I can use as a reference. Um, so that's it, just these three images.

Now, from them, I want to try and develop, basically, kind of a color palette and choose fonts based on these. So, first of all, for the colors, you know, uh, what I can do, I can write here colors, um, just so that I have something organized here. Um, very small, I know, but, uh, so, and I'm going to create a rectangle just for the colors that I'm going to use. So, obviously, looking at these references, I want black and white. So, one thing I can do by hitting I is going to the eyedropper and I'm going to just select white and then I'm going to duplicate this. And for this one, I'll just going to pick black from here. So, I have black and white and maybe some kind of, um, some kind of gray that I can use. So, let's pick this gray that we have here as a reference. So, duplicate one more time. Click the eye and use the gray that they have used here. So, now I've got three colors. And also, let's, let's create this gradient. I'm not sure how I'm going to use this gradient, but let's duplicate this. Let's make this a little bit longer. And here from the fill options, I can go ahead and pick a gradient. And you can see, basically, a gradient by default is by between two colors. And I'm going to make it from left to right. Right now, it's from basically black to white. And again, I can pick the go and pick the eye picker. And let's say we're starting from this, um, kind of like a purplish color. And then afterwards, we might have this bluish color. Uh, so you can see I'm adding stops to this gradient by just hovering on top of this line here. Um, and after that, maybe going to take this green area here. And after that, maybe this yellowish. And lastly, we're going to pick this, I guess, reddish thing that we have here. Okay. So, we have kind of like a rainbow gradient. And again, I'm not going to, I'm not sure how I'm going to use it. Also, I need to be cautious because we have this competitor that is also using a similar gradient, and we need to make sure that we're not going to look exactly like this. We have to stand out. I'm not sure I'm going to use this gradient much. I actually want to use a rainbow as a concept. But, okay. So, we've got a color palette, somewhat of a color palette.

Let's think about fonts and type, typefaces. So, here we can see kind of like a very, very clean sans-serif font. So, let's just so that we have reference, let's call this typography. Um, and let's bring in from our wireframe. Let's just basically copy this paragraph for a heading and bring it here. Uh, let's turn it white so we can see what we're doing and bring a, uh, so this is a heading, and let's bring also kind of like a paragraph. So, let's take this paragraph from here. Copy that here. Also, turn that white and make it align to the left. Okay. So, now we've have now we can look at typography and how that looks. Now, basically, by default, we're using the font in, um, which is actually not a bad font. You know, it's a good sans-serif font. It has a lot of weights here. You can see it ranges from very, very thin to very, very bold. And actually, maybe the using the light one, it's actually looking clean. This is a little bit too bold. But actually, this font is not very bad. I can actually consider it as an option. So, to remember what this font is and so that I can compare that, I'm going to duplicate this. I'm going to call this Inter. Uh, actually make this bold. And just so that I know, okay, this is option number one. Okay, let's compare it to something. Okay. So, one thing, I'm going to duplicate this. Let's go to Google Fonts. Google Fonts is a a great alternative for free fonts. And obviously, if you're just getting started, um, that's going to be a good option. Now, here I can go ahead and filter them. And in this case, I'm going to filter by sans-serif. Just if you're not familiar with typography, serif is these small kind of like edges around the, uh, the font. It looks more literary. Um, in sans-serif, sans in French is without. So, this is without serif. It's just cleaner, right? So, I want to pick this one, and I need English. I don't need all the other languages. Where is English? Where is English? Maybe it's at the top. English, or maybe it's Latin. Yeah, Latin, I guess, is what it's called. So, now I can go ahead and scroll and look at which one of them. And I'm trying to remember, I've I've mentioned the question that we're going to ask ourselves, what message does this send? Like this font. Um, some of these fonts look a little bit more technical. Some of these fonts are more round. Here's this one, for example. Raleway is actually not a bad font. I think it has kind of like geometric roundness and these small edges. It might not be a bad option. So, let's give this a try. Now, Google Fonts are by default loaded into Figma, which is great. So, I should have that if I'm looking here, Raleway. I have that here as it is. And I can choose Raleway for this one as well. And yeah, I can see whether I want maybe medium for this. Um, and just playing around with this and saying, okay, what looks better, this one or this one? Which one I like better?

Now, uh, Google Fonts and free fonts are great. However, if you want to create something that looks a little bit more premium and unique, and definitely when I was looking at the inspiration and looking at, you know, the competitors here, they're using kind of like unique fonts that are probably, this might be a free font, and this might be a free font. This is definitely not a free font. This is a unique and and pretty cool, uh, font. Okay, so the next thing is I'm going to look at paid font alternatives. And my favorite one is YouWorkForThem, which is a great, um, place for design resources that has a lot of fonts at a very, very, um, reasonable prices, actually. So, I'm going to go here into fonts and I'm going to look at sans-serif again. And now, again, I I'm just going to scroll and see, hey, is this a good option? And I might open it up in a tab. And again, as I've mentioned with inspiration, this is something that how long you spend on finding the font that works for you really depends on how much time you have for this project. It can be 30 minutes, and it can be like a week of just trying out and comparing, uh, different typefaces and walking around here and, you know, opening up this font and say, hmm, this font is interesting, that might look nice. Now, when it comes to premium fonts, I can't really test it out in Figma. Some some places allow you to download tester fonts. They do allow type tester here. So, I can go ahead and I can maybe copy, um, what we have here, maybe the first line, "developing and providing innovative," and I can paste that here as a type tester, just so I can see, let's make it smaller, how the text looks like and try to make a decision based on that. Now, I've already spent a little bit more time. I didn't want to waste your time, but I've actually found, um, a really interesting font here on YouWorkForThem that I want to use. It's called Saffron, I think. Um, yeah, here it is. Saffron Grotesque. I like this font because it has this contrast between the the wide part and the thin part. And there's something technical about this, but also something that looks a little bit premium. And I like this. So, I went ahead and bought three weights of this. The the light, the medium, and, uh, um, light, regular, and medium, I think is which one is I bought. These ones cost $20. I think in total it cost me $90, uh, dollar. I purchased both the the desktop, which allows me to work in Figma, and if they will want to print business cards and stuff like that, and also the web, um, license that would allow me to use them on a website. So, let's go ahead and see how that looks like. So, I'm going to duplicate a third option. Um, and let's call this Saffron. Here it is. I already have it inside here. Uh, so let's call this Saffron. And I think this is the medium is actually a little bit too bold. But I think that when it comes to this, and if I tighten up the line height just a little bit, uh, it has too too big of a space between the line. And again, typography, we can go deep into typography. We've got a lot of content on this. I'm running really fast on, uh, right now. And let's try this Saffron. You know, when I compare, when I look at the three options for headlines, I actually think that the Saffron is most unique. It's appropriate. Um, it sends kind of like the right message. Um, so I like how that looks. However, it does not look good for the body text, for the small text, because it has these very thin parts in you. You see where the lines connecting, and on really small letters, that makes it not really readable. So, I think it's a great, uh, heading font. It's not really good for what we call body type. So, I think, you know what, for this, I'm just going to use the Inter one, which is a very, very solid sans-serif font. Um, and I think I'm just going to combine them. So, I'm going to have a unique heading font and a kind of like more regular, solid, hardworking font for the the body text. So, I'm going to duplicate this. Um, and yeah, I think I'm going to run with these. So, again, what I wanted to show you is how I collect and compare options that I have here. And as I said, in real projects, where I would spend time on this, I might compare 10, 15, maybe 20 options to look and make a decision between them. How much time you have for this, uh, depends on you. But for now, I've made my decision. So, I'm going to run with these.

Okay. So, note what we have so far. We've got typefaces and font choices that we can use in our website. We've got colors to use in our website. We are missing one thing, which is a logo, right? So, if I'm going to go back into what they have, they have this as a logo. Um, I don't think it looks good. This definitely would not work in small spaces, and I don't think it's really great. Now, again, logos, huge topic. We can learn a lot about, uh, logos. We have a full-on branding course. I'm not going to dive deep into logos, but I'll tell you what I, what I thought. I thought about how can we convey the connections here and maybe try to, yeah, try to use use the concept that they used, which is connections and a brain, but try to make it in a more abstract way that would look as a shape. And I also liked this reference of kind of like thin lines and these oval shapes. And I was like, I'm going to try to play around with these. So, I jumped into Illustrator. And again, I'm not diving too much into this, but Illustrator has this really, really cool, uh, effect or a tool that is called blend, that allowed me to basically take three, two shapes. Um, let me see. It was kind of like an oval. Basically, take one oval and then copy and paste, um, and do another oval that looks basically like this, or something like this, and connect them and create all the intervals between them. So that is, again, I don't think it's an amazing logo, but for this case, it looks kind of like an abstract shape of a brain with a lot of potentially connections between them. So, I'm going to try to run with this. So, I'm going to copy it into my Figma file. Let's go back here. And again, this is really not how long you should spend, uh, on doing a logo, but I just want to have something quick that we can work with. So, I'm going to paste this, uh, I guess we can call it, uh, shape of a logo in here. And let's go ahead and try to create some kind of a typography to go alongside it. Um, so, let's go ahead and make the text black. And, uh, where are we? I'm going to try to bring this on top. Okay. So, the name of the company is Massex. Ma, mass six. Okay, let's make this bigger. Um, Massex. And I think we can, we can make this a little bolder, or maybe the regular. And maybe we'll use the Saffron, uh, but not uppercase. So, I'm going to change the case here. Yeah, I think this this combination can work. And maybe this needs to be a little bit bolder. And actually, on the on a on the web, we need a composition that is vertical, right? Because we don't want a huge, um, we don't want a huge rectangular shape for the website. So, it's better to have in the navigation something that is vertical. So, I think maybe we can use something like this. Maybe we need to make this bigger so that they're the same line height. Is this bold? This is bold. And this is regular, or maybe light. Uh, maybe regular. And this we can make it, I guess, smaller. But maybe make the lines a little bit bigger. A little bit. We can choose all the circles from here. And make the stroke a little bolder. Okay. Again, don't think it's an amazing logo. This was done too fast, but it is something that we can work with. It looks solid. It looks legit. Definitely looks better than, you know, what we had, uh, originally, which we couldn't really work with. So, I think I'm going to work with these.

Okay. So, now we basically have the toolkit for the design of our website. We've got a logo, we've got colors, and we've got typography. The next step is to think about imagery. What kind of images are we going to have as assets to use in our design? When it comes to creating images, we basically have three options. The first option is to create something custom-made for this website. So, for example, we can create custom photography, either by taking photographs ourselves or working with a professional photographer. We can hire an illustrator, or again, if we know how to illustrate, we can create custom illustration, or custom 3D work, or of course, we can hire some kind of an artist. The second option is to work with readymade assets. So, there are a lot of stock photography or stock illustration websites. Some of them are premium that you can buy photos from professional websites for relatively cheap prices. Obviously much cheaper than hiring a professional photographer, or the same with illustration. You can buy illustrations, uh, which is cheaper than hiring a custom illustrator. Uh, and there's also a lot of websites that give you free readymade assets. So, free stock photography, see, free stock photography, or free illustrations, or free icons. So, there are a lot of free resources these days on the internet, and again, if you're on the free five-day course, we're going to send you a list of tons of resources. The third option, which is actually quite new, is to use AI to generate your assets, which is a really, really interesting new option that we have for us that wasn't available until recently, but now opens up a whole can of possibilities for us to basically create something custom, but it's way cheaper than obviously hiring a professional illustrator, 3D artist, photographer, whatever.

Okay, in this project, we're actually going to try and use all of these three methods so that you can see how all of them work. So, let's start off by thinking, coming up with the concepts of what we need for this website. To do that, I'm going to head back into my wireframes and take a look at every place where I basically said, "Okay, we're going to need an image here." And this is really the fun creative part of the process. You basically need to come up with ideas. Okay? And you can use keywords, you can use brainstorming, but this is really where your creativity can shine and you can come up with ideas. So, first image, and one of the most important images on the website is what we're going to have in the hero section, right? And I'm trying to figure out again, we don't have an actual product to shoot. Um, so we have to come up with something imaginative, right? And we need to talk about again, we have references to what other competitors have done. So, here they're showing somebody walking on the beach, kind of like talking, I guess, about mental health. Here they're showing somebody, just somebody, I guess, I don't know if to say tripping, but kind of like a blissful experience with an abstract perhaps connection or what's going through their head. Here they're showing an illustration of mushrooms. So, these are examples of their creative ideas. And I'm looking at here and I'm also trying to think what's unique about this company. How can we tell their story in a unique way? Okay. So, what's unique here? Here, I think what they're trying to focus on, and the reason that they tell me to include it in the headline, is that number one, it's naturally sourced, meaning it's not, uh, I guess you can manufacture psilocybin, the the hallucinating effect in magic mushrooms. You can manufacture that in a lab, but there are benefits for it to being naturally sourced, meaning like grown out of actual mushrooms. So, that's one point, the fact that it's naturally sourced. The other thing is GMP, which I think stands for Good Manufacturing Process, which basically means that it's, it's in a a medical quality, a good medical quantity, it's standardized, right? It's because there's a challenge when you're making things natural, where you're growing stuff, every time it's a little bit different, and when you try to standardize something that is naturally sourced, there's a challenge here to make it in a magical, medical quality, standardized. So, I think that the combination between naturally sourced and GMP and the like the standard is where their uniqueness comes into play, and I'm trying to think how can I visualize this. So, I had two ideas for something that we can visualize. Number one is we can show maybe like these little medical bottles kind of like going through the horizon, like a lot of them to hint at the, you know, the fact that it's there's a manufacturing process here, to kind of like look like a manufacturing, like a production line. But again, maybe bring in a little bit of rainbow or something like this. Try to try to create a very clean image, like we have here, of this medical bottle. Create a manufacturing line stretching into the horizon with kind of like a rainbow light or rainbow refraction or something like this. So, this is idea number one that I have. And idea number two is perhaps create, try to create an image just like this of what we call sometimes pack shot, like the the shot of a product shot of the actual product, but try to bring in this nature into it. And you can see reference here where it's kind of like there's leaves, and you can see a little bit of nature coming into play. So, maybe try to go with something like this where you see the bottle and there's mushrooms growing, and maybe also a rainbow. Again, rainbow is kind of like the brand motif that I want to bring in. So, white, very clean with kind of like a rainbow effect. So, these are two ideas that I have in mind. And I think these would be a great place to try to work with an AI image maker, obviously, because I don't have the budget to hire a real photographer at this point. And also, these sound like very complicated things to shoot in real life. So, I'm going to use MidJourney to try and generate them. And I'm going to show you. I've already done this, but I want to show you my thinking process because this took a lot of iteration and playing around. So, I started by writing "a production line of medical glass bottle stretching into the horizon in white limbo." And this is basically some of the images that I got. And that's not exactly what I had in mind. This looks a little bit too much, uh, factory and product line. And that's not really what I want. So, then I felt, I I tried to, uh, do variations on this. So, I created a variation of this, and now I'm starting to play around with them. So, now I've tried, okay, maybe make it look a little bit premium. So, "premium medical glass bottle stretching into the horizon in white limbo, rainbow reflection." And now we're starting to get stuff that is a little bit more interesting with these glassy or rainbowy effect coming into this. So, again, I'm trying different wording. I'm trying to figure out what maybe these small bottles look like. I want them to have a metal cap. So, I'm adding "metal cap" into the, uh, prompt. And I'm just going to try this multiple times and create a lot of variations until I'm going to figure out what I want. And this is a lot, again, a lot of iterations to figure out what you want. But we're starting to get some cool stuff in here, stuff that I think potentially I can use, um, especially around these types of options where it's very, very clean. I'm also, I have in mind the fact that we need to have a place for the text, and we need to figure out, you know, what composition we're going to use here. So, this image right here is something that potentially can really work. So, I'm good with this. I'm going to try and explore my other concept. So, for this other concept, I wrote "a product shot of a single medical, uh, vial, which is, I guess, I I realize how these little bottles are called, standing on a small rock in a white limbo." There are a couple of, now I try to figure out what the name of the mushroom is. And by the way, specifically in MidJourney, you can't write "magic mushroom" because it's, whatever the prompt won't work. And there's of course a lot of types of ma magic mushroom. So, you want to fit to exactly the type of mushroom that you need. And these starting to become, these are interesting. Uh, they look beautiful. Again, I want to bring in also the, uh, rainbow effect into this because this is part of, um, what I'm, what I'm liking here. So, I tried a lot of prompts, and here's one. Now we're getting somewhere where I think, oh, this is interesting with the rainbow in the background. You can see the bottle. You can see a little bit of grass here. Now, I like the, the fact that it's nature, right? I wanted to talk about nature. So, I want to bring in, I want to try to combine the story of a lab, very, very clean lab, good manufacturing standards, and the fact that it's natural. So, how do you bring nature into the lab, but also combine it with, uh, a little bit of this rainbow, uh, to tell the story? Okay. Once I find images that I like, I'm starting to upscale them, which is creating a higher resolution images of, you know, uh, these images so I can go ahead and, uh, try and work with them. And as you can see here, I'm trying a lot of variations. I'm trying to change the wording. Maybe it's not a rainbow light. Maybe it's a rainbow refraction. Um, maybe I'm need to change, you know, if the mushroom is from under the rock or next to the rock. I'm playing around with the wording a lot. Um, and I'm coming up with with some pretty cool stuff here. Okay, so this is the first images that I'm going to try and work with. Um, that was the first thing. Okay, let's see what we have next.

The next thing here is that we have this mission statement here. And here we're talking about, you know, uh, the, uh, "revolutionize the global mental healthcare, harness the power of naturally sourced, creating innovative products, address the world's health challenges." So, here I created again, image in the background. It might not be an image in the background. Maybe it's next to something, but I want to have a large image. And one thing that I thought about trying to show how the product is going to be actually used in a medical, in a medical context, right? So, the way that the the treatment is going to work is that people are going to come in for a treatment in kind of like a lab. They're going to sit down, and it's going to be monitored by a professional, where they're going to take, you know, the medicine, and it's going to be guided. So, here I had an idea of saying, let's show somebody going through the process. So, they're in a lab, they're they're lying down on a bed, they're closing their eyes, and they're dreaming. So, we're going to use this rainbow light again to kind of like visualize the the psychedelic experience. So, here I basically wrote "a close-up of a man lying down on a lab bed, eyes closed, blissful smile, rainbow light. The man is dressed in white, clean white room." And honestly, in this case, I actually loved the first thing that came up was actually it's, you know, MidJourney is just amazing. But I really like the first option. The first option is just, I feel like it's so good. It's very, very clean. So, we can try to make it just like white and the colorful rainbow. The man looks good. It looks, he looks blissful. Um, so I just, I really, really love this image.

Okay, so I've got my first two images. Now, here we have a section where they're actually talking about the product. And here I was basically inspired by, you know, we saw here in the other website where they had photographs taken inside of the lab of the process. So, in this case, I suggested to them, hey, do you do you want me to come in and take photos in your lab, just so that we can have something like this? Because again, they brought in this as a reference for a good website. And I basically asked them, would you like us to have something like this where we show you in the lab working or something like this? And they said, "Yes, that's actually a great idea." So, I went into their lab. I brought in my, uh, camera. And, you know, I have a DSLR camera, a nice camera, but that's okay. If I didn't have this, I could even go with my iPhone and try to take photos. Um, or of course, if there's a budget to bring in a professional photographer, or if there's a photographer friend that you can ask for help. We decided we're going to go and do custom photography for this, uh, section here. Um, so for this, let's go here. So, again, the context is I want to bring in one or maybe multiple images of them in the lab and how things look like, perhaps even kind of like a short video. Okay, so I went in there and now I'm opening up Adobe Bridge, and Adobe Bridge is basically a software for photographers to review photographs. It's not mandatory. It's just makes things easier for me. You don't have to have this, obviously, if you're working with photographs. It basically helps you run through a lot of photographs where you can see the photos and you can, you know, make them bigger, make them smaller, you can rank them, uh, and it's going to help you, um, sort which one you want to work with. So, here are, you know, I've got a lot of petri dish photos where they're looking at it. Uh, we basically took a lot of photos. Uh, then we've got like some of the processing of how they're distilling, uh, it and turning it into basically kind of a like a processed liquid. So, we've got a bunch of these photos. Um, to do what else do we have? So, we we took a lot of photos, as you can see here. We took some photos of the actually growing of the mushroom and actually harvesting, checking the the mushrooms. We've got here and basically did a little bit of harvesting, cutting them. Now, I also took some, uh, videos because I thought maybe I'm going to create a short video, but I didn't have time to actually do that. Um, so I'm just looking at the images. Uh, and then there's here's images of him showing me the mushroom. These are some of the mushrooms after they've been dried. So, we've got a bunch of stuff to work with here. So, the nice thing about this is, as I've mentioned, it allows you to rank them. So, I've basically ranked here. Here are some of the photos that I like best, just so that we have a little bit of a smaller, uh, selection to work with. And I think because I have a bunch of photos here that maybe I want to use, maybe this can be looking back at the section that we have here. Um, maybe this can be kind of like a gallery, or maybe like a bento box with showing multiple images, um, in a grid. That can be an interesting way to show multiple photos, just because we have a bunch of them in this area. Okay, so I've got these images, and we're going to be able to use them here.

Next, we have partner logos, and that's just logos that I've asked them to submit. So, that's great. And the last thing that I'm looking here at here, I actually decided I I don't want to bring in an extra image here. I'm just going to work with the contact form. However, we have, um, basically, um, investor, and we need an email us button. So, this can be a nice place to start bringing in an email icon, right? And this is going to be a good place to look for free email icons. Uh, I'm going to use Iconfinder, which is a good place for both free and premium icons that I like to use. Um, and basically, it's very, very simple, right? Email icon. It's something very simple. I'm just going to search for email. Um, and I can go ahead and select here free because I'm looking for something free. I'm also, I can pick the style. In this case, I'm going to pick outline because that's probably the most relevant style, um, for us. And actually, the first one is probably not a bad solution for an email icon. And we can use that. I can go ahead and download this as an SVG, which is a vector file, meaning, you know, we can scale it how much we want. I can even just copy it to, uh, Figma. So, I'm going to wait, and later when we're going to use it, I'm just going to, um, copy that into my clipboard and paste it in Figma.

Okay. So, at this point, I have pretty much the assets that I want to use in the design. Now, we can start going ahead and putting it all together, putting the colors, putting the imagery, and trying to make this look good. Let's do that. So, I'm going to go ahead and open up a new page here, which I'm going to call design, design. I'm actually going to put it last so that our pages are based on our process. And I'm going to copy the page. I'm going to hold the whole page of the wireframe and I'm going to paste it in the design. I don't want to ruin the wireframe so that we have a copy of how it looked before and after. And let's just start working on this file.

So, first thing I want to do is I want to bring in the logo. So, let's go here and copy the somewhat of a logo that we have here. Actually, I'm going to have to turn this from text to actual lines so that we can scale it all. So, I'm going to do outline stroke and then outline stroke. Basically, what that does is, as you can see right here on the left, it turned each letter into just a vector shape. So, now I can go ahead and scale them. So, I'm going to select all of them together. I'm going to group them as a logo. Actually, we can call this, double-click and call this a logo. And then we can copy this and go into our design. And instead of this, I'm going to paste this. And I need to hold my shift key so that I can scale it down proportionally. Now, what's happening here is that the, uh, line stroke of the icon still remains very, very, uh, has the same basically outline. So, it looks too bold. So, I'm just going to select these vectors. And you can see here I can drop the outline to maybe one. Maybe one and a half. Let's see how that looks. Okay, one and a half looks good. Okay, so I have my logo here. That's great.

So, what else? We've decided we want basically to have three links here. And these links are basically going to scroll us down. So, if I click mission, it's going to scroll us down to this. Product is going to scroll us down to this, and contact is going to scroll us all the way to, um, to the back. So, what do we have here? By default, these are Inter, which is good. This, that's what we wanted. Trying to figure out whether I actually want this semi-bold or maybe we need this, uh, regular or medium. I think medium is actually looking good. Now, one thing I'm going to start doing is creating text styles inside of Figma. And you'll see how that looks like. So, for example, I'm going to click here on the styles and I'm going to add a new style and I'm going to call this nav link. The what this does is now I can just pick these two and I'm going to go ahead and select the nav link, and the same styles, the size and the width of the font are going to be applied to this. So, if I want to make a change later on, I can just globally change all of them instead of having to change three things in a row. This is also going to help us when we're going to develop to have clear styles. So, the next thing I want to do is I want to make sure that these are aligned. I basically want to make sure that we're going to have all the content is going to be aligned from the left and to the right. Um, and we're going to have kind of like equal spacing. So, I just trying to make sure that we have equal spacing from the top and from the right. And same thing here. And that these three elements basically are going to be equally spaced. So, I'm going to use this, um, distribute horizontal spacing. Now, they're equally spaced. That's great. So, now I can just select this whole thing, this whole group, and I'm going to group it. And I'm going to call this navbar. So, if I want to then move it all together, I can just select this navbar, and it's a whole group.

Let's apply the text styles to these headings. So, here we know we want to use Saffron. So, I'm changing this to Saffron. Now, this is the, uh, main heading of the page. All right. In in web design, we call this H1, heading number one. It's the, we only have one of these. This is kind of like the name of the book or something like this, right? So, it's going to be probably the biggest, usually the biggest, uh, and most important one. So, let's turn this into, I don't know, 55. Um, let's see how that looks like. 55, maybe 50. I'm just going to play around with it. Uh, this looks okay. I don't like to have this dash in the middle. So, I'm going to remove the dash. I hope they're not going to be mad at me. I also think at this point there is too much space between the lines that they actually look like three different paragraphs. So, I'm going to change the line height from auto. I'm actually going to just click down arrow to just start bringing it down a little bit. And now, I think it actually looks better this way. Okay. Now, although this is only going to be used once, I do want to create a text style for this again for, uh, organizational purposes when we're going to go ahead and develop this. I'm going to call this H1. Uh, and this is great. This is a subheading, and this is we will be reusing this. So, we're going to be using here and here, uh, and here. So, we have this kind of like subheading again and again. And for this, I want Inter semi-bold. That's okay. Um, what's the size of this by the way? What's the text size of this? The text size, this is 18. You know what? I actually think I want this to be 16. So, let's turn this into 16. And as you can see, all of them have been changed to 16. And that's, I think that actually looks better. 18 is a little bit big. Uh, this one, this can actually be 18. This I I do want this to be all caps. I think it'll look stronger. So, I can click this three dots here, and you can see we have cases. And we can change this from, uh, title case, which is just the first letter in every word, or just uppercase. I think this looks good. So, Inter semi-bold 18 uppercase. That's not bad for this. Uh, so let's create a text style for this and call this subheading or top heading, whatever. Let's call this subheading. Created style. Okay. So, we've got these spacing should be a little bit more tighter, so that we've got equal spacing between all of these. Um, and maybe we're going to just move this to center it around the image. I think this looks good. Okay, same thing. Now, here we already have a text style for this. So, I can just pick it up from here. That's great. Um, for this one, this is a body text, and that's also going to be reused here and here and here. So, for this, I think semi-bold is too bold. Let's turn this into regular. And I think here 16 is going to be good as well. That actually looks good. So, let's create a new text style and call this body. Body is how we call the main paragraphs. Um, and this one is similar to this one, but a little bit smaller, right? So, if this one was 50, this is probably going to be maybe 40. So, let's change this to Saffron. Um, yeah, 40. Maybe even 42 or something a little bit. I want to make sure that there's contrast in the size between this and the other elements that we have here on the page. Um, so this looks, this looks pretty good. Uh, let's create a new text style here. That's going to be H2. So, H2 is kind of like, if if this was the name of the book, H2 is the name of each chapter. Each section is kind of like a chapter. So, this is H2. This is H2. I can already start applying H2 to this and H2 to this. Now, I can already see that here in the mission, we had one line, so I didn't address the line height, but here, that line height looks way too big for me, and also I want this to be sentence case, meaning usually when you have headlines, the first letter in every word is being capitalized. So, I do want to edit this text style. So, I'm going to choose it and I'm going to go to these properties just to edit it. And for the line height, I'm going to tighten it up a little bit. And I'm going to also click these three dots and select title case. Okay. So, now you can see every letter is capitalized. And it looks much better for headlines. Okay. So, we've got this. We've got all of these. Let's go ahead and center them so they they look centered. Um, however, there's something here that I don't like, which is a long line, short line, and then a longer line. And again, it somehow creates like a weird composition. You know what I'm going to do? I'm going to remove the word "introducing" and just leave "a new area of medicine." I hope they're not mad at me, but I'm going to take this editing, uh, liberty here to, because now it's kind of like it's growing. It's, I I think it looks like a better composition. "New area of medicine, Massex mission." Uh, it's centered. I can select all of them to make sure that they are centered. I can also select the the whole section background and make sure they are centered in this whole page. Okay, this looks good. So, we've got the type figured out for this. At this point, we already have styles for everything. So, I'm just going to apply, you know, subheading for this. This has already been applied. This needs to be body. So, very, very easy. Something in the lines here does not work well. For some reason, it just breaks line where it shouldn't. And also, I'm going to add a dot at the end of the sentence because that's that's how we write, right? So, know that sometimes I'm doing a little bit of text editing, uh, just to make sure that probably I'm going to add a dot to this end of the sentence as well. Um, just to make it look better. I'm going to tighten the spacing here. Okay, so that's okay. I'm also going to center this around this image. Partners, actually, our partners is also H2. So, let's apply H2 here. That's basically the name of the section. I'm going to center it to the page, and then contact us. It's already been applied. Now we have here, um, so two things. Number one, I said I don't want an image here. I'm actually, I want this, I want to have this investor contact as a heading, but it's not, it's basically a subheading of this contact assets. Let's call it H3. So, for this, I still want to use Saffron, but a little bit smaller. So, if this was 40, maybe this is, uh, 35, a little bit smaller than this. Yeah, something like this. I'm going to make sure that it's aligned, maybe to, you know, the second column that we have here. So, we've, and also I want to make sure that these two lines align right, and they're they need to align to the bottom of the text. We call this baseline, um, baseline alignment. So, this looks good. They're they're aligned. This is here. Email us. I'm going to replace the email us with an icon. And we're going to do this later. Uh, and this is basically I want this to look like some kind of a link. So, for this, it's very unique. So, I'm not going to create a text style for this. But maybe I'm just going to make it bigger. Maybe like 25. Uh, regular. I do want to create an underline for this. So, from the text decoration, I'm going to add an underline. So, this looks like a link that people can click. And we're going to bring in some kind. I'm going to do this maybe like a circle or something. Oval. So, I'm clicking O for oval, which I can also pick from here. And just do something like this where we can add the icon later on. Maybe something like this. Okay. Okay. In here, we're going to also redesign this form a little bit later. Um, but for now,

Let's just say that these don't need to be semi-bold. They're also not. Yeah, maybe. You know what? Maybe we can use body for this. Uh, so let's let's apply body to them and see if that looks okay. Yeah, it does look okay. The the the button should probably look different. So, maybe it needs to be an uppercase kind of like submit or something like this. So the button needs to be, you know, looking a little bit different. Okay, this is great. The last thing we've got this and this is really kind of like copyrights. I can make body here as well, but actually sometimes this is even smaller than a body. So this can be sometimes 14 or something very small, not semi-bold, regular, and just center it. So yeah, that looks okay. Maybe left align. We can also test left align here. to this. H let's keep it centered. Okay.

So, we did the first first step which is basically setting up the properties for the type. Now, the next thing I want to do is to create the layout. Now, I can go ahead and experiment. But in this case, because I have this I have my inspiration here from these, you know, cards that have round corners and I I want to do use this this kind of layout like we have in our inspiration. So, I'm going to head back and let's go ahead and just give this some round corners. And you can do this right here from this round corner property. Let's try 25. And again, this is basically experimenting. Do we want 30? Do we want more round corners or less round corners? This actually I think it looks good this way with that is 30. Okay, so that looks good. Let's also make this next section a card. So, I want to make sure that it aligns so that there's similar spacing. Um, and let's make sure that it's align on this edge as well. So, something like this. And let's give this also 30 pixels of round corners. Okay.

So, we've got these sections. Nice. Now here I've mentioned that I want to create kind of maybe like a bento box or some kind of a gallery so that I can use multiple multiple photos. First of all, let's give this 30 pixels of round corners. So what I'm going to do is I'm just going to let's make one f one photo is going to be horizontal. And let's duplicate this by dragging it while holding the alt or option key. And maybe make something like this. Um, yeah, but I do want them to have more space between them. Spacing that looks a little bit similar to what we have here. So, consistent spacing is something that you really want to think about. Okay. So, now they are aligned. They have somewhat of an equal spacing. Um, actually everything is a little too tight, but I can bring in the contact form a little bit down. And I can bring in the partners. Okay. So now it's spaced. It's better spaced. Okay. So I've got these things. I could probably also give 30 pixels of round corners to the form. That looks nicer. Also to the button. That looks nice. Maybe I can make the button a little bit bigger. And you can play around with this. Uh there's no rules for this specifically, but okay. So, we're good. I think we're we're heading in the right direction.

Okay, let's start to bring in the imagery. Okay, so I've saved up my images right here in this folder. And the first image that we have is I've selected this image as the main hero image to work with. Now, I can start dragging it inside. But one thing that I want to show you is I can hit copy, command C or control C. And when I'm holding this element, I'm just going to hit commandV paste. And it's basically going to paste it inside this element already with the round corners. And this looks actually pretty good. It looks pretty good as it is. So this is nice. Okay, let's continue. For this one, we have this image of the person lying in the bed. So I'm going to try and do the same thing. I'm going to hit copy. Hold this. I'm going to paste it. Now, I have a few problems. Um, so here's my problems. Number one, the text is on his face. Always always a big no no. Text on face. You don't want to do this. So, I want to bring him down. That's that's one thing. So, let's select this rectangular. And right here, you can see that the image is being used in the fill here. And by clicking on edit, I can open it up. And I can change from fill to crop. And that allows me to kind of like move the image inside of basically the mask or the container. So I think actually what I really want is to make him smaller, bring him down a little bit. I think this would be much better proportions. Okay. So what I'm realizing right now is the image is not big enough. we actually need to create or fill in all of this missing information which we're going to do. The other problem that I'm seeing when I'm seeing these two images next to each other, I can see that this one is much more bluish or grayish and what we called in colors. This is much colder and this is much warmer, right? The the light is yellow. So, this looks a little bit more yellow or greenish. And I want them to be, you know, so that the brand looks the same and looks consistent. I want us to bring this down and change the color to match the first image. So, now we've got a little bit of uh editing, photo editing to do so that we can go ahead and fix this.

Okay, I'm going to undo this. But, so I'm going to need to take this uh image into Photoshop or some other software editing company. Um, image editing software is what I meant. Uh, let me drag this into Photoshop. Okay, so here's our image inside of Photoshop. Now, the first thing I want to do is I want to create some extra space so we can scale it down. What I'm going to do is I'm going to duplicate this image by hitting command J. And you can see that I've created another layer. And the reason is I'm going to hit C to get into the crop tool. And I'm basically going to add area here and add some area here and add some area here. So, this is I need all of this extra image. Okay. And Photoshop using AI is going to help me fill in this thing. Okay. So, I've changed the crop. Right now, it's all black. So, that doesn't help me out a lot. So, I'm going to take the marquee tool here and I'm going to select all of the space where I need to generate new things. So, I'm selecting this. Now, by holding shift, I'm adding more space here at the top. And by holding shift, I'm holding adding more stuff. So, I've basically selected all of this area here. And you can see from this bar that I have here, I've got generative fill. So, I'm going to hit that. I don't need to describe anything. I'm just going to hit generate. Because if I don't describe anything, it's just going to try to figure out on their own what what should be there based on the image, based on the other area that wasn't selected, which is basically the image. So, let's see what's happening. This is always exciting whether this would work, whether this would not work. But I think that this photo is kind of like easy because it's very clean. It just needs to add kind of like clean wall and the bed. And that actually looks fantastic. You know, it gives us three options with a blanket or with but they all look great. Actually, the first one looks fantastic. So, this is really, really great. Okay. So, first thing, the crop thing is now figured out.

Now I basically want to bring in so let me open up this image also in Photoshop just so that I can look at you know look at them side by side okay I can open it up here in this one let's make it smaller so I can look it okay now I need to change the colors of this image so here's what I'm going to do and again this is some a little bit more advanced Photoshop stuff is a huge topic we've got a course on that as well um right here in YouTube for free So, what I'm going to do is right here from my layers panel when I'm selecting this image, I actually have here. Let's see what we have. We've got I think what we want to use is photo filter. Okay. So, I've added a photo filter. And here's what it looks like when I'm selecting it. I basically have here warming filter and I've got cooling filters. So, when I'm selecting a cooling filter, note what it did. It made this image. And I'm going to turn this on and off so you can see how it took it from a warm photo and turned it into a cooler photo which is much more aligned with this. Let's try to experiment with the other filters. Uh, this looks a little bit bad. Uh, has more red in it. This one has a little bit more green in it. Actually, the first one was actually the best for us. So, I think this looks good. One more thing that I think I want to do is I I just want to brighten up this whole image so that it's kind of like whiter and more exposed. So for this I'm going to right here from the adjustment layers I'm going to add curves. That's going to give me this graph which is basically the distribution between the blacks and the whites in this image. You can see a lot of it is in the middle. And what I'm going to do is I'm just going to pull this graph up which is basically going to redistribute some of these grays into more white areas. And you can see what it does to the photo. It brightens up. It brightens it up a lot. Uh sometimes it's a little bit too bright. So you can bring this down a little bit to create more contrast. But actually, you know what? I don't want this more contrast. I actually like that it's really really bright. So look at what we have right now. This filter, this adjustment layer makes the photo much brighter. This adjustment layer changes the color, adjusts the color from yellow to cool. And now now these photos actually match in the tone in the style in the kind of like vibe you can say. So I'm really really happy with where we are right now. So what I'm going to do is I'm going to select this whole image. Command A. Select everything. And I'm going to do copy merge. It's going to merge all of these layers into an image. And I'm just going to go back here and hit paste here. Bam. Okay. That looks so much better. That looks so much better. I can still bring this up a little bit higher. Uh but already it looks Yeah, it just looks so much better. Okay, already it's starting to look good. I'm happy with this.

Okay, next. Okay, so now we have this area where we want to bring in some of the images that we took. So, let's jump right back into Bridge and decide what images are we going to bring in. So, first one, I think this one. It's a little bit dark so it's hard to see but this is a good one where he's looking at the mushrooms. I think it's a good fit for this horizontal image. So let's go ahead. Now these images were uh taking you can see the file format here are W2. These are Camera Raw which basically enables you to do a lot of color adjustment. So I double cllicked it and again this is Adobe software. This is called Camera Raw. And let me just make this a little bit smaller so we can see it here. Um, what I want to do here is number one set the exposure like really higher to brighten it up. And also we've got here temperature. So I can you can see I can move it from yellow to blue which is again and note the tone of the image. Yellow blue again our style our vibe is much more cooler and bluish this way. So, I think now it can fit the website. So, I'm hitting open. It basically opens it up in Photoshop for me. Uh, actually the file size of this is huge and it's going to really slow down my Figma if I bring it in in the original uh resolution. So, I'm going to go image size and actually going to turn it down to 33% of its original size. And now I'm going to select it. Select it. Copy the image. And let's bring it to Figma and see how that looks. Pasting it here. Okay, it looks good, but we can't see him, right? So, this is again we need to go here into the fill of the image, change it to crop. And now you can basically see we can move the image around so that we can see it. Uh, but we we do have a problem, right? That if we see his face, which we want to see, we don't see much of the mushrooms. So either we just, you know, um either we give this a little bit more space, I guess, this way. And let's do crop again. And let's resize this. And let's see if we like this new crop. You know what? Maybe this is actually I thought this was a good fit for the horizontal image. Maybe that's not true. Let me undo that. Maybe let's paste it into this one. Yeah, that's actually much better because here you can see it everything that he is doing. I can also go here into the crop and play around with it a little bit. Just like make it a little bit bigger because we don't need this area here outside of the box. So now he's focused on the box. Okay. Okay. So we've got this. So what do we what can we use for the horizontal one? Let's see. Um, potentially it can be. Do we want these bottles? Yeah, maybe this bottle. Let's try this. And I'm going to do the same process. I'm going to make it brighter. Not too bright, but brighter. I'm going to bring the temperature to a more cooler one. Now he's holding this liquid. Open that up. Going to reduce the size of this 33%. Copy that. Let's see how that looks like in this one. Okay, this is much better. This is much better. I'm going to adjust the crop as well, just to bring it up a little bit. And you can see how important the crop is, right? Because it's what we're seeing in the image. Uh, and these images, you can see now because we've made them cooler, they work well with the images that we've got at the top. Last image. Which image should we go with for last? Um, maybe this one. Let's go with the big mushroom. Let's bring up the exposure. Let's make it cooler. Okay. And let's bring down the size. In this case, I'm not even going to copy the whole thing. I'm just going to copy this area. Let's uh because we don't need the other area of the photo. And let's bring it here. Okay. Not bad. I think it's not bad. I can al also see that I think the gap that we have between these columns is a little bit bigger than the one that we have at the top. So, I'm going to fix the spacing just a tiny notch. And yeah, I like where we are so far. Not sure that all of these elements are aligned, but okay, it's just now they are aligned. Okay, fantastic.

Okay, next our partners. So here they've basically sent me the logos. I'm going to delete these and let's see. They basically gave me logo one, logo two, logo three. I'm going to bring them in together. And I need to scale them down. So holding shift so that they retain their proportions. Uh now making logos look good in a line is always a little bit tricky because as you can see some of them are wider, some of them are um some of them are more rectangular or taller. So, you need to kind of like look at it and make sure they align. Let's say top to bottom. I think this looks actually not very bad. Uh, let's see that they have equal spacing between them. So, I'm going to select all of them and then distribute horizontal spacing. I'm going to group them and then center them. Whoops. No, I'm just going to group them in this and center all of them. And group this whole section. Let's call this partner section. partner and make sure this the whole section is centered. By the way, I didn't group all of this. This can be product just so that we have a clean dock here. This this can be mission. So, I'm going to group all of this mission. This is going to be the hero. Group this hero. Okay.

So, where are we? What we've got left? We've got this contact form. Um, actually, you know what? I want to do something fun. We haven't used the gradient and that we've created. Although we do have the rainbow here and here, I think the the footer is actually a nice place to perhaps bring in this gradient that we've created just for a little bit extra color. So, I'm just going to copy this, go back into my design, and here in the footer. Let's just paste it here. Uh, yeah, I think that's going to be cool. So, going to take this and make ourselves a little bit of a colorful footer that we have here. And the reason this is helpful is I was thinking, what color should we do the the button? And it doesn't really matter, but I can click the I for color picker and maybe pick this purplish one. So, that looks good. For these ones, actually, let's let's bring in the Let's go back into our mood board. We have this grayish one. So, let's copy this and bring it just put it here on the side just so that we can go ahead and sample using the eyropper this gray that we have here. So, this is great. Okay. So, we've got this this one. We can also pick the gray. Or maybe maybe if we want to make this a button, maybe we can make this also H. So, I'm wondering whether I want to have this circle as purple or gray. I'm going to go with gray for now. And I wanted to bring in the email icon, which I lost. So, let me search again for email at iconfinder free. outline. Select this one. And I'm just going to do copy SVG to clipboard. Done. Going to go back and paste it here. And that looks great. So this is great. So now we've got this. Actually, this looks good. Going to go ahead and group all of this together into contact.

The last thing that I want to do is I feel like we could use a little bit nicer kind of like um cut or distinction between for the partners section. And I think what I'm going to do is I'm just going to copy this rectangular gradient that we've got here. And let me paste it. And maybe let's just turn it into a very very thin line. So, I can actually manually do this like height two pixels. Um, wait, no, it it changes the width as well because they are connected. So, let's just change the height to two pixels. And let's just put it here. And let's duplicate another one. Whoops. Let's duplicate by dragging to the bottom here. So, now we created this kind of like a better organization. Uh, a little bit more spacing. I actually like this. I think this is nice. I think these gradient lines are nice. Okay, with that, I think our page is designed. Now, I don't want to mislead you. I kind of went in and just did the design, but honestly, when I have more time, I would explore so many things. I would explore different layouts. Hey, what happens if the heading is on the right? What happens if this is an image that takes up the whole screen? There's so many things. What I would actually do go ahead and do is I'd probably duplicate this and say, let's see what happens if this image is in the hero and let's experiment and try so many more things. I would basically have a lot of duplications here to compare things. Like I showed you, I would compare different fonts. I would compare different designs, different layouts, maybe different font sizes uh to explore more variations on this. But for this purpose, I just want to make it very very simple. Um, so I just went ahead and basically did a very very simple design.

Now, sometimes you're going to also want to design responsive breakpoints. So, how is this going to look like on mobile? I personally don't like doing it if I'm the one developing the website. I feel like it's a waste of time because I can basically figure out, I'm going to show you when we're going to develop this website how I'm thinking about this. But sometimes if especially if you uh delegate to a different developer, you might want to create, you know, a new page here. Um, for example, phone, maybe iPhone or something like this. And now you're going to go ahead and adjust this whole design for how it's going to look like on mobile, for example. Again, I'm not going to do this and we're going to talk more about responsiveness when we're going to get into the development side of things. But I think for the purposes of our course, I'm good with this design and I'm ready to move in and talk to you about getting this developed. So, I'll see you in the next chapter.

Now that we have a nice static design, it's time to see how we're turning this into a real published website that people can visit. Since I assume that you're new to web design, I'm going to give you a clear picture of how the internet works so that you can understand how our new website is going to fit into the internet. So, how does the internet work? Well, you're using a browser right now, something like Chrome or Safari. When you put in a URL like Google.com, these letters, which we call a domain name, are being translated into numbers, something like 192.158.1.38. Those numbers are called IP address. And much like your home address, it basically tells the browser where to go and look for the website files. And where are they? Well, technically, if you want, you could link your domain to your own computer, but for many reasons, we usually don't want to do this, right? You don't want your computer to or your website to be down every time you close your computer. So, usually you would pay a service provider uh which we call a hosting platform to host your files somewhere in the cloud. Now what are those files? Well, the core of every website is an HTML file which is a file that includes the structure and the text of the website. Then we have another file type which we call CSS which stands for cascading stylesheet which basically takes care of how things look. Remember that we created those text styles in Figma which determine how every heading looks like. Well, those settings are stored in the CSS files so that we can use a single file across all the pages of the website so that they share the same styles. Now, of course, we also have files for our images and videos, and we sometimes have files for JavaScript that are create some more advanced functionalities like animations or the the logical forms. So, at this point, what we have is a bunch of files that are hosted on somebody's else computer, which we link our domain name to.

Now, I hope I don't overwhelm you. Uh, there's one more thing that we do need to consider. We can assume that our clients don't know how to write or edit HTML files and also they don't want to pay us every time they want to make a change in in a heading or an image on their website uh or every time they want to publish a new blog post for example. So we need to give them some kind of an easy way for them to edit their website. Now we call these solution CMS which stands for content management system. Now you've probably heard of some of them. One of the most popular one on the internet is called WordPress. And by the way, it's not popular because it's the best. It's popular because it's free. Uh other website builders like Wix or Squarespace or Web Flow or Framer, they also include a CMS. Now, when you're using a CMS like WordPress, uh you need to pick a hosting service like for example, GoDaddy. Uh and then you install WordPress, the CMS on this hosting service. The other options that I've mentioned actually include the hosting service together with the CMS and the builder so that you don't have to take care of the hosting. It's kind of like allin-one solution. Now, whatever solution you're going to use, your clients will need to pay some kind of a fee to host the website. So, now you're asking yourself, which one of them should you use or your clients use? Now, this is a a big controversial topic and we have many videos comparing all of these options here on our channel. However, my favorite solution and the one that I think is best for the professional process is Web Flow. And that's what I'm going to show you right now. So, let's dive into it and build a website we designed in Web Flow.

I'm here in Web Flow creating a new website. And you can open up a free Web Flow account if you want to do this yourself. And I'm going to start from a blank website. Uh you can start with templates, but that's not what we're going to do right now. So, I'm going to call this uh my website is Massix. Massix uh website. and let's create a site. Okay, so we've got a blank web flow website. Our first thing is to bring all of our assets into this website. And by assets, I mean the imagery that we're using and also the font that we chose to u use here. Now, some of these images I already have here in the folder because I got them from the clients and these images uh I got from Midjourney. But I do need to export my logo. So in Figma, the way that you export it is you select the element that you want to uh export and then right here from the export panel you can click this plus and then basically gives you some export uh options. Now in general for things like logos or icons uh we want to use a vector uh a vector file. And by the way, we didn't dive deeply into what vector is, but I can just tell you that vector is basically, you know, when when you have something here that is being calculated, uh the the shapes are being calculated by code, then you can see that no matter how long I'm zooming, I can zoom in really nice. The lines are still kind of like very very smooth. While we have image, if we're continuing to zoom in, you can see that we're actually seeing the pixels. So this is pixelbased. images are pixelbased. We call them raster images. While uh things like text, logos, and icons are vector-based because they're basically there's a code that calculates the shape of this. So, it's going to be best if we export this in SVG, which is the vector um vector file size. So, I'm going to hit export logo. And here uh let's do this logo main. Let's call this. And also what we want to export, we'll zoom here into the this email icon. And we can go here and export this as an SVG as well. SVG. I'll call this email icon.

Now the other things that we do uh want to export are these images because these images um we've actually copy and pasted them from Photoshop with the color correction. So I don't have them saved with the color correction. So what I can do basically is I can just click this and then do export. However, it's going to export them with round corners and it's going to uh export them in exactly this shape which is not really what I want because some of these shapes might change based on responsiveness. So I actually want the original image. So what I'm going to do is I'm going to copy this and paste it here uh outside and I'm going to remove the round corners and I'm actually going to change here in the image from crop. I want to see fit so that I can see the whole image and let's increase it. Okay. So now I have basically the original image and I can go here into export. This one needs to be a raster image. Now we do have two other types here which is PNG and JPEG. JPEG is basically just an image, regular image and PNG includes transparency. So if you have transparent background, if you have kind of like a shape uh and then a transparent background, you put you will pick PNG. In this case, we're going to pick JPEG. And the other thing we're going to do is not to export it in its original size. And you can see here that the size of this image is 682 pixels width uh width on 511 pixels height. I actually want to change this to two times this size. And the reason is that on newer screen sizes, actually newer screens uh for Mac, for iPhones and stuff like that, we have uh what Apple actually called retina display or I think Apple uh Google calls this HD HD DPI or something like this, which basically means that they have double the pixel density. So actually, if we want this to look sharp in high quality, we need to export the asset in two times its actual size. So let's export this. And I'm going to call this lab one. And I'm going to do the same for these images. So I'm going to paste it. Take it out here. Remove the corners. Change the image to fit again. Um, make it a little bit bigger. And then export it JPEG 2x the size. This one we'll call lab two. And the last image. Copy paste. Move that here. and do the same thing over again. And I think that with that we have all of our assets. Let me do this quickly. This going to be lab three. Okay. So the rest of the assets I think that we have we have these logos. Okay. So we're good.

So back here in my web flow websites on the left side I have my assets panel. And what I'm going to do is uh I'm going to click here, upload, and I have all of my images. I'm just going to go ahead and upload them. So nice. We've got all of the images that we're going to use throughout the website. The next thing that we need to do is to load up the fonts. Now, Web Flow by default has some Google fonts loaded, but I'm not sure that's what we need. So, we're going to go here into site settings. And from the site settings, we're going to go into fonts. Now, we basically need two fonts. We need inter which is the body font uh which is a Google font. So we should be able to find it from this list. If I'm going to type enter enter here we go. Now we also uh web flow asks us what kind of you know variants or width you know light medium bold we want to load. Now you can say hey I'm just going to check all of them so that I can choose whatever I want. However loading more f font files into your website slows down your website. So ideally we want to choose not many or exactly what we need. And I think that if I'm going to go here into the properties I can see that interregular that's the only thing that we need. I think uh and I guess regular is this one that's selected. So I'm just going to do add font. So we've got that one. The other font that we have this one the saffron font that we purchased is actually a custom font and it's a a paid font. So it it's not included here. So, I can just upload the files. And in here, I've got the font files that I got. And you can see here that we've got the web fonts. And actually, I want to see which ones we're using, the medium. I think we are only using the mediums. Now, you can see here under web fonts, it's got a bunch of different uh files. And I'm going to have to upload all of them. These just make sure that uh this font works across all devices, across all browsers. So, there's kind of redundancy of files here. And you can see here that we need to upload all of these formats. Um, so I'm basically doing upload font file, upload, upload, uploading all of them. And once I'm done, you can see that they are loaded and they should be available for us in the designer. So let's go ahead back into our designer. And now we can actually start designing.

So let's see what we have here. The first thing I want to tackle is this navigation that we have here. Okay. So, for the navigation, actually, we already have I'm going to go here into the ad panel in Web Flow, and we've got a bunch of elements. We actually already have a pre-built navbar that I can go ahead and throw in here. Now the the the reason that we're using this pre-built component is that when we're going to start t talking about what happens in mobile, how do things look like in mobile and you can see here right at the top of web flow's panel here you can see different break points. So how the website is going to look like on mobile or on tablet and stuff like that and you can see here that the menu has changed into a hamburger menu which we can click to open up this menu. So we like this functionality we want this. So by using Web Flow's native uh navigation uh element, we already have that out of the box and now we can just go ahead and customize how this looks. Now you can see here that the structure and we can see the structure here. So we've got body which is the whole page and then we have this navbar element. Inside of it we have a container which we're going to talk about in a second and then it got uh this kind of link that is called a brand which is basically a place for the logo. The reason that it's a link is because it's very common in websites that the logo is clickable and it's going to take you to the homepage and then it's got this menu with a few links right here. So, let's actually go ahead and start bringing in uh some of the elements. So, I'm going to go here. Let's take the logo. This is the logo. And drag it into here. And we can actually go ahead and change what we have here. Mission product contact. So, let's go ahead and write mission uh product and contact. Okay, so that's great. It does not look how we want it to look. Now, by default, and don't ask me why, uh Webflow decided that their navbar is going to have a gray background, but that's not what we want. So, now we're starting to style things to make sure that they look exactly how we want them to look. Now, right here on the right side, we've got the styling panel. And if you remember I've mentioned earlier HTML is basically the structure which you can see here and CSS how things look like is basically controlled from here. And much like in uh Figma where we added styles to control how things look like we're adding styles here and you can see here style selected and these are called classes. So for the navbar I'm going to give this a name. I'm going to call this uh navbar. And if I'm going to scroll down here we've got a bunch of properties. You can see that the background by default was set to this gray and I can actually change it to white which is what I want. So this is great.

Now we've already controlled this. Now we've got this container thing which as you can see controls that these things are not wide all the way edge to edge. It keeps them kind of like centered. And it's a great place to talk about containers for a little bit because in Figma we've designed things and they look great. But the truth is this is a actually a static, you know, size of a page that is, you know, 1,400 pixels wide. But people have different screen sizes and not everybody's going to have a screen that's exactly 1,400 pixels. So we need to consider the question, what happens if the screen is actually wider, right? What happens? What happens if the screen might be uh, you know, smaller? What's going to happen to all of the content inside? Now, by default, right now, you can see that nothing happens. They're staying aligned to the left side of the screen, and that's not really good, right? So, one more thing that we can do, and I can select all of these elements um in my Figma file, right? And you can see here we've got constraints. So, right now the width is aligned to the left. I can also say, you know, uh center them. Okay? So, let me actually scale back the page size. to our original page size. Uh, and if I would select all of these right now, let's select them from here and do center. Then right now, what would happen is if I'm if the screen is smaller or larger, they're actually just staying in the center. And of course, one more thing that can happen is that when I select all of them, they will start scratching uh stretching. So, we can pick scale. And if I'm now if I'm going to resize my screen size, you can see that these things start to stretch. So in this case, there is really no right or wrong. You have to as a designer to make the decision of what do you want to happen. However, that being said, a lot of times stretching the content doesn't really work. Uh especially if you have text, if you have, you know, content all across the screen, it makes it difficult to read. So a lot of times what we would do is we would select center and we would basically decide that you know we have some kind of a maximum width of the content. Of course if this the screen is smaller it's going to have to uh contract but if this if you have a really wide screen it's going to have some kind of a maximum width and then everything is going to stay centered. And this is basically the role of a container. So like we have here the container basically defines what is the maximum width after which it's just going to stay fixed in the center right. So in this case uh web flow gives us some kind of a default and it does look much smaller than the what we have right here. And you can see if I select this element and you can see that we've basically have the width of our design is basically 1,300 pixels uh you know not exactly even a little bit uh larger but I can go ahead and I can give this a class here and call this container um and then you have here in the size maximum width and I can set this to let's do 1300 pixels and now you can see that it's much wider however even if the screen is going to be it's not exactly getting to the edges of the screen because the screen is a little bit bigger. Um, and that's going to be the the maximum width. And we're going to use this because all of these sections have this exact maximum width. So that's going to be great. And we're to reuse this container again and again.

So basically, we've got this. The next thing we want to do is to uh maybe style how these links look like. And basically the way I'm going to do this is I'm going to give them a class as well. I'm going to call them nav link. Now the great thing about classes is that once I created it once I can reuse it again and again and we've done that in Figma as well right so um I can select navl link from here and apply this class to all of them and now any change I'm going to make here and you can see if I make the the text size bigger there it's going to be applied to all the elements that have this class and now I can go here and start seeing okay this navl link what is it. I can I can go ahead and check the properties to go ahead and um actually I see that it has a medium and I don't think that we've even brought the medium um weight of in but we're not even having we the the font is not even in it's aerial so we need to change the font now I can go ahead and change the font for navling however because we're going to reuse this font in is basically the you can call it the default font of text in this website one thing that I can do is I can actually apply this class to the body, the biggest element of the whole page. And then everything else on this page, unless we define it uh differently, is going to use this same style. So, let's go ahead and do this. And I'm basically picking up the body. Um I can either pick it from down here below or I can pick it from this navigator. And you can see here this body, I actually don't need to give it a class because there's a basically a body class that is anyway applied to all pages. So, I'm just going to pick this one and scroll down here into my typography and I'm going to pick enter. Uh, let's see where we have in. So, that's it. We've got enter. And that looks great. So, now you can see automatically these nav links are now now have in. And let's see if we have the Yeah, we don't have the medium because we didn't load it. And I feel a little bit too lazy to go and load it from the site settings as we did previously. So, I'm going to keep it that way. However, I do want and I can see here that they do have more spacing from left between them. Now, you can see here and we didn't talk too much about the box model which is a very important concept in web design, but you can see that actually this element is a box and this element is a box. Everything that we touch here is basically a box. And if we go here, we can basically see the spacing. So there's inside of this element we have uh spacing which is called padding inside of this box. So we've got 20 pixels as you can see the green marks it. There's 20 pixels at the top, at the bottom, at the left and at the right. So that controls the settings. And I can actually go ahead and increase the setting uh from left and right by dragging this and holding the option key so it the change applies to both sides. And now you can see that instead of um 20, let's make it 40 at this point. So now this element has 40 pixels of space from left and right all of them because they're using the same class and it's a little bit more spaced out and I like this. So I'm going to keep it that way.

The last thing that we have is we've got this brand and the logo is a little bit too big. Also, I want it to be spaced out from the top as well. So how am I going to style it? I'm going to give it a class and I'm going to call this logo or even main logo because we're going to have additional logos here. I want to make this a little bit smaller. So, I'm going to add a maximum width. Again, if the screen is smaller, we might need it to be smaller, but this is too big. So, let's do maximum width. I don't know, 250 pixels. That actually looks better to me. So, I'm going to keep it that way. And I'm going to add a little bit of padding from just from the top. So, I'm just dragging here. Um, and actually, let's bring it to 20 so that I know that the spacing here is aligned with this spacing. Maybe a tiny bit less because these letters are bigger, I guess. So, I'm just kind of like eyeballing it. Yeah, looks good. I'm happy with it. Okay, so we've got the navbar ready. Pretty much ready. And it's time to go and work on the next section. Now, to do that, I'm actually going to go ahead to the ad panel and add a section. Now, the section basically, it's kind of

like a group. Remember that we grouped these things together. Here we've got the hero and we've got all the elements together. So, a section is basically kind of like a grouping element or an organizing element. Um, and we're going to create a section element for each one of these section. And it will allow us to control them all together. And you'll see how that's going to be beneficial a little bit later on.

So, I'm going to drag in a section. In that section, we also need a container because we need it to be, you know, to have the same maximum width just like the navigation. So, we also have a container here. So, I'm going to drag in a container. Now, you can see that this container is smaller than the container that I have uh at the top. That's because we didn't apply the class. And this is kind of like a diff container. So, you can see I'm just tapping here and it suggests existing classes, and we've got container here. So, now I've picked it. Now, we've got this. Great.

The next thing that we have before I'm starting to throw in the content is basically we're thinking about the layout. And in this case, we've we've got a two-column layout. We've got text on the left and image on the right. So to do that, I'm going to create a simple grid. And I'm going to do that using Webflow's quick stack, which is a way I'm going to drag that inside so you can see. It's a basically a way to create layouts and grids. In this case, even the default is two cells, left and right. And that's basically what I need. So that's it. So now we already have an organizational tool that's going to enable us to bring in, you know, the content.

One thing though, and I'm looking at, I'm trying to think about the spacing between them because I think the spacing here is not big enough. And I'm looking at what is the spacing between these elements. And in Figma, by the way, I can pick two elements and if I hit, you know, alt, and you can see here, check out this little red number here, 46. It basically tells me that the space between this image and this image is 46 pixels. Um, so I want the spacing to be equal. So at the bottom, it's going to be 46, and also here, 46. So let's go here. Actually, when I have this quick stack, and we can give it a class so that we might want to reuse it. I can call it two-col uh, two-col-grid. Okay. And you can see here that we can control the gap between these columns. And currently, it's the uh, the the spacing between the rows is 20 pixels. Let's turn that to 40. Let's make it 50, just for the sake of uh, going to change the number. Instead of 46, let's just use 50. Okay.

So now we've got these. Let's start bringing in the elements. So in this one, what what do we have? We have this H1 element. So to do that, we have a heading here from the typography menu. I'm going to drag that here. It's a heading. You can see I can pick the heading H1, H2. And this is important for Google to know what is the heading of your website. Okay. So, let's copy the text. Copy the text here. This is great. It's still not styled, but at least it's the right element. And then we've got this subheading, which is just it's a normal text. So, from the typography, I'm just going to bring in a text block. I'm going to put this on top here. And just going to copy this text here. Okay. So, we've got the text. They're still not styled, and we'll do that in a second. Let's bring in the image here. So, let's go here and drag the hero image here. Fantastic. We've got these.

So, first thing, actually, the first thing, let's let's style the image. The only styling that we have is basically these round corners. So, let's pick the image and let's give it a class and we're going to call it round-image. Round corners. So, we know what it does. And we we're obviously going to reuse this on these other ele uh elements. So that's going to be reusable. And I'm going to slide all the way to the bottom. And we've got uh corner radius here. And I'm going to do 30 pixels. And basically we've got that. So that is styled. That's nice.

The next thing I want to do before I actually even pick the fonts and style the typography is I want to make sure that these things are actually aligned to the center. So, if I'm clicking on this left cell that we've got here, actually, if I go here, you can see here in the layout, I can pick the alignment and the justification. Currently, they're aligned to the top, but I can also go ahead and click center, and it's going to center them. Now, note that I didn't give this a class, but because I made the change, Webflow automatically gave this a class and called it cell. I'm going to rename this just so that if I want to reuse this again to center things horizontally, I can reuse this instead of creating more and more styles and I don't remember what this does cell means. So let's call this uh um vertically-centered-cell. Uh, and some of you who are into development might say, "Oh, Ron, are you using dashes? How are you naming your classes?" I'm not going to get into this right now. So, for now, I'm just going to do it capital letters on every uh word. There's many religions about how to name your classes. We're not going to go into this right now.

Okay, let's style these classes. So, this is an H1. Now, in general, so far we've been giving classes, but as I showed you with the body, we can actually uh change the default H1 so that if we have other pages on the website, if we give this style, we don't have to add a class. Every time we just add an H1 element, it's going to get that class. So, this is great. I'm going to edit this and going to go into my typography and pick saffron. Where is that? It's in the custom font. Uh, what was the size of it? I think it was 50. Uh, it looks a little bit too tight in the line height because you can see line height is 44. So, I'm going to click the up button until I think it looks good. And of course, I can copy these parameters from Figma. Um, I can copy these parameters, but I'm just eyeballing it right now.

This one is a subheading. We called it subheading. So, let's call it subheading here as well. And I think this was 18 or 16. This needs to be uppercase. So, we have more type options and uppercase. This actually needs to be a little bit bolder. So, I think the fact that I forgot to load the medium in, I'm going to have to go and do this right now. So, let's go and do this because I'm missing um I'm missing the bolder interfont. So, let's go here. Inter. And also load up the I guess let's do 600. Let's try 600 and see if that works. Okay. Going back into the designer and let's apply this both to the mission. We can go here and now so now that we've loaded the additional font I can go here and now I will have the semibold here. So we can apply this to both the menu and this subheading. Let's change that. So that looks good. There's a little bit too much space between the heading and this one. And you can see it's probably because uh right here in the default H1, it has 20 pixels of padding at the top and 10 at the bottom. So, let me reduce that. Yeah, I think this looks better.

Okay. So, we basically have the first section done. And now we've got the second section. So, to do that, I can actually because we're going to need to use the same section. Uh, I'm actually going to give this section a class and I'm going to call it section. Now the reason I'm going to do this is that later on and you can start seeing this if going to scale back when we're going to think about responsiveness is that oh wait we do need to have um padding from left and right and we need to control the spacing. Um, so I want to have a class. Maybe I also want spacing between each section. So, for example, you can see that we've got a space between this section and this section again of 50 pixels. So, I'm going to go ahead and add the bottom margin. And margin is the space outside of the box. I'm going to add here 50 pixels. So, I need to manage the spacing and sections consistently. So, it's good to have a class. And now, what I can do is I can actually copy and paste the section twice because I do need the section. I do need the container. The only thing that's going to be different is I don't need this uh two-column grid. I need something else here. So let's just delete the content inside, but we still have the same structure.

So what do we need here? So here basically we have a big box and we do have a text that's on top of the image. So what we're going to do is I think we're going to create a big box that's going to hold the text. And in web design we call these boxes divs, right? So div is basically a holder kind of like a group that can hold content and we're going to give it a background image of this image and there's going to be text inside of it. So let me show you how we're going to do this. So we're going to bring in and you can see here basic div block and it looks like a box. I'm going to drag it here and this one let's call this mission. Yeah, mission uh block. Mission-block. Um, first of all, I want it to be kind of like big, right? Um, so how big is this? And you can see that the height of this is 700. So actually, let's go ahead and give this a height of 700. And now you can see that this box is bigger. Now, we also want to give this a background. So from the backgrounds, I'm going to scroll here into the background. And I can pick a color, but in this case, I want to pick an image. And I'm going to choose an image. And let's pick this one here. Now, as you can see, because the image is pretty big, we're actually just getting a crop of his forehead, which is not what we want. So, from the properties here, I'm going to set the size from custom to cover, which basically means just make sure that the the image covers or fits the best that it can inside of this box. And that that actually looks pretty good. So, I'm happy about that. I do want to give this round corners. So, I'm also going to use 30 pixels round corners here as well.

And now I can already see that we have an alignment problem because they don't align. This element that we have here, the two-column grid for some reason adds an extra space here. And you can see and I really want things to be aligned. That's really important in design. So I'm going to go here into the top and you can see that the two-column grid has 20 pixels padding on all sides. We actually don't want this. So I'm going to remove all of them. I'm just going to drag up while holding option and alt. And now there's no padding. And now, yeah, it actually is spaced nice.

Okay. So, we've got the image. Now, we need to start bringing in the content in here. So, what do we have? We have a subheading and then we have an H2 heading and then we have a paragraph. So, first of all, subheading we already have. So, I'm just going to copy here and paste it inside here. and a heading we also have and I can copy this and bring this here. Although if I'm going to go into the setting when it changes from H1 to H2 which is unstyled. Let's also start copying the text. So this is mass mission. Uh, that's great. And this is new area of medicine. So this is also great. Let's copy and paste this. Now as you can see because we didn't set it otherwise they're actually aligned to the top left corner. It's basically kind of like a Google. If you don't set other properties, then it's just going to start at the top and left. So, actually, let's go ahead and center this. Uh, so when I'm holding the mission block, the block that aligns all of them, I can go here into the typography and set it to align center. So, now they're centered. I also want a little bit of space, a little bit of padding inside of this box so that it's not really at the edge or touching the edge of the box. So, let's also add padding from the top. Um, something like 50 pixels, I guess, makes sense.

So, this looks good. Let's style the H2. So, again, I'm going to edit the H2, the default HTML tag of H2. So, every H2 that I'm going to add from now on is going to have this class. And I'm going to change that to saffron, uh, which is medium. And I think the H2 was 35 maybe or maybe 40. Let's check actually what we had here. So, we've got the H2 and that's 42. Okay. So the size is 42. That's great. And now we need a paragraph. We haven't used paragraphs before, but here it is. We've got a paragraph and we're going to put it in here. And the paragraph is good, but it's very, very wide. You can see here that the paragraph is actually limited. It's constrained to, let's see, it its width is 510 pixels. Uh, and here because we didn't define otherwise, whoa, it's going all the way from left to right and that's not really easy to read. So, I want to find a way to constrain it. And actually the the I what I think is actually all of these elements right now these are short headlines but even if they were long right what I do want is I basically want all of these text to fit inside of these box and not go outside of it so that the text is contained here in the center. The way that to do that is instead of just basically managing the maximum width of each one of these elements individually, let's actually group them together and set that the box holding them together, the group holding them together is going to have this maximum width. To do that, I'm going to place them inside of a div. We call this wrapping elements. So note what I'm doing. I'm bringing in an empty div and then I'm putting all of these elements inside of this div. uh the order is not right. So let's go here and do the subheading first and then the heading and then the paragraph. So now you can see they're all nested inside of this div block which I can call maybe mission-text and just this uh the wrapper I'm going to give this a maximum width of maybe 510. And now you can see that it is limited. It is also not centered. So to center it, I'm going to go into the spacing and I'm going to click this button, center element. So that is great. So now we have it. The the size of this is limited and I think the text is much more readable that way. And we basically have the second section done as well. So maybe maybe the spacing here is not right. So, let me go ahead into editing the H2 and reduce the space from the top and maybe add a little bit space to the bottom actually. So, I think I'm going to do it this way. 10 pixels spacing from the top and 20 from the bottom. I think this looks better.

Okay. So, we've got first section done. We've got the second section down. Now, we've got this third section. Okay. Now, this one starts looking off similar to this because it has two columns. Uh, but then this area gets a little bit more complex. So, let's see how we're going to do this. I think I'm going to just duplicate I think I'm just going to duplicate the first section again. Copy that, paste it, and bring it here. And what I'm going to do, we can actually, we also have the same elements here, right? So, we've got this subheading which I can paste here. We've got this H2 which I can paste here. And then we've got a paragraph which we can actually copy this paragraph and paste it below here and paste this text here. So this is great. We've got the content, but here we've got a more complicated um a more complicated grid structure. Actually, you can think about this that instead of two columns, maybe it's four columns um or or one big column and then two small columns and this one spans. So, actually, let's do this. So, we have this whole element that's holding them together. It's currently called two-column-grid, but let's duplicate it and turn it into something else. Let's duplicate this class and call this uh product-grid. Product-grid. And let's go ahead and edit how this looks like. So let's turn this into maybe three columns. But what I want is I want these columns to be half. Let's drag this to be half and half. Uh, let's drag this a little bit. Okay. So note what we have one. This is called one FR and this is half FR and half FR. So this is great. This is basically this is half of this which is basically what we want. We also want uh two rows in this case. And what we want is, let's go ahead here. What we want is for this one to span both of these rows. So I'm going to click this bottom uh arrow. And this thing I think this top cell here is um let's see how we're going to do this actually. Let's remove the image here and let's span this top one two columns and basically now we've got our structure right. We span these uh the top and bottom rows. This one spans both of them. Let's start bringing in the images and seeing uh how this looks. So let's bring in which is the top image. He's holding the Okay, let's bring that in. As you can see, this is not the same proportions. So, I think we're going to have to change it uh in a bit. But let's bring in the images first. The image where he's looking at this. And then the third image is the mushroom. All right. We've got the images. Uh, you can see they have different sizes of the images. All right. So, we're going to have to fix the sizing as well. But first, I can I think I can start with the round corners. Applying the image round corners. Image round corners. And image round corners. Now, this one I want this to be. Let's see what the actual height of this. The height here is 200. and let's say 290 pixels. So I'm going to add a combo class to this image. That means that on top of round corners, it's going to have a different style that's unique only to it. So let's call it top-left-image and set the size here to 290. Uh, but the width, I do want the width to be 100%. So it's going to span all across. But note what happened. the image is actually stretched, which is not what I want. So, you can see here we've got fit and it's trying to fill in the image. And what we want to do is set it to cover. Pretty similar to what we did here. Uh, basically make sure that the whole space is filled, but don't stretch the image. So, this looks good. Um, and what do we have here? How high these ones are? These are also 290. Actually, if this is 290, then I think I can apply the same uh top-left-image actually to this one as well. Top-left-image. Yeah, this is great. And then let's apply top-left-image to this. Okay. So basically I think we've got it. Okay. So this looks good. Okay, I'm happy. I'm happy we've got this section. Fantastic.

Okay. Next section. We've got our partners section. Now, this section is a little bit different. Uh, I think I've changed the, you know, the size of this page, but basically what we have here, whoa, is we've got these um top lines that basically go across the page. They're not as the container stopping here. They basically run through left to right all the way. Um, and they have this gradient color. And then inside we've got this container with the partner logos. So, let's see how we're going to do that. So, let's go ahead and I'm just going to duplicate again one section uh and just delete the the product grid. So, we have a section with a container, but outside of the container, I want to have this let's call this divider-line. Okay. So, let's bring in just like a normal div block um and put it in here. Not inside of the container, but actually before the container, on top of the container. And I'm going to call this divider-line. This divider-line, what I want is I want this to go all the way 100% of the page. So I'm going to set here 100%. Height is basically just two pixels. So I'm going to set 2px. And note the interesting thing. Sometimes you can use relative sizing like 100%. Sometimes you can use fixed and exact sizing like 2 pixels. So that's interesting. And when it comes to the background then here we want to actually set this as a gradient. So let's go here and create a gradient. Now we actually have to try and duplicate the gradient that we have here which is let's go ahead and do this. So the first one I'm going to copy the color here from the hex value. So this one this is the hex value here. And then kind of like a little bit down the line we have this blue. So, I'm going to add another gradient stop here and paste that as the blue. Hey, wait. This didn't pass. I see. Some reason the colors don't stick. Okay, let's do that. Let's try that again. Purplish on the left. Should have hit return. Uh, and now it's working. And now let's pick this greenish color. Let's add that right here. as another gradient stop. Hit return to save that. Last one is yellow. Not last one before the last is yellow. And the last one is actually I don't know I have to call this orang-ish. All right. So the last one is the orang-ish. Okay. So now we've got this linear gradient. Now it's difficult to see but I'm going to hit here play so that nah it's difficult to see right now. So we're going to see this. This is a really thin line that we have. And let's duplicate that um before the container and after the container. So, copy that. And we have divider-line before the container, not inside the container. But one of them is before the container. And the other one is Yeah. Okay. So, I think that's right. We probably should also have spacing, a little bit of spacing between that and the container. So, let's add the divider-line. Let's add maybe um 50 pixels to the bottom and see if that's okay.

Okay, so we've got that in here in this container. What do we want? Want probably something similar, I think, to what we have here. This is centered uh and we've got some things inside. So, let's let's try and copy what we have here at the top. We've got this mission-text. Let's copy this whole element and see if that works. If I put it in here, it is not centered, I guess, because here I I set the centered on the mission-block and not on the uh mission-text element. But I can go ahead and pick this and center this as well. Uh, let's copy. What do we need here? Here we just need our partners. So we don't need the new area. We can paste this in here. And here we want to bring in the logos. So, let's start bringing in the logos. We've got the logos here. So, I'm going to drag first one here actually after the partners. And then actually, let's copy and paste this three times and just change the image this way. Replace image. I'm going to pick this image. Uh, you can see that the image it doesn't look exactly how we want this to look so far. Okay. So, I've got these three images. First of all, I think I need to make them a little bit smaller. So, let's call this partner-logo. And I think I'm going to apply this partner-logo partner-logo to all of them so that I can have consistent sizing to all of them. Okay. And now let's do something like height of let's see what happens if I make 40 pixels. I don't know if it's too small. Yeah, it's a little bit too small. You can see it right here at the bottom. Um, I think that 90 pixels is great. And I'm going to give it spacing. And I'm going to hit uh alt or sorry, option to make this uh equal on both sides. I'm going to make sure that they're spaced out. Now, because this mission-text is bounding them at um 510, it's a little bit too small. So, let's actually to this mission-text, let's actually add a combo class, additional class, and we'll call this uh partners-logo-container and just this one. So, it's inheriting a lot of the properties of the mission-text that we have above, but this one is a little bit different. And the way that it's going to be different is that this is a little bit longer. And now, yeah, the text, the the logos can fit nicely this way. I also think that they need a little bit of space from in the top from this partners. So, let's add a little bit of a margin at the top and maybe also at the bottom so that there's nice spacing between that and the other line that we have here at the bottom.

Okay. So I think that our partners uh section is great and now we can continue to our last section almost last section which is just a simple two column right. So I think we can use the same layout as the first section. Let's go ahead and duplicate our first section our hero section copy and paste and bring the copy down below and we don't need an image and we don't need we actually do need an H2 that says contact us. So I'm going to copy that here. I don't need this pioneers. Um now we need a form. So Webflow already has a form for us. Readymade form. We can go here and see form block. Let's drag that in here and see what it looks like. It does have name and email address. In our case, we also want a message. So let's see if we have here under the form. We do have a text area. So I can bring in another one, another text area. And let's see how this is structured. So this this is a special element because obviously there's a logic to what happens when you submit a form and stuff like that. So we do need to see how it's structured. There's a form block here. Everything is nested inside a form element. And there's label and the field label and a field. And then we've added another text area. Let's bring in another text field so that we can say uh the last one is a message actually. But actually, you know what? I can see that for us uh we're not using this label. Um, we're actually using this as maybe the placeholder text for it because you can see that in the text field, if I go here into the settings, we can have a placeholder um some placeholder text. You can see right here. So here I'm going to actually put a name name. And you can see that now we have a placeholder inside of this field. So I actually don't need this. Don't need the email address. But in this field, I'm going to set the placeholder to email. And this one I don't need, but this one, by the way, this one, we didn't give this a name. Now, this is when it comes to forms, the naming of the form in the settings is important because again, you're going to send this message in an email. And basically this is how it you know when the client is going to get hey you got a message they need to know what area did they fill this in. So in this case this is the message. I'm going to change the name here to the message and the placeholder text to message.

Okay. Now we also want this to be how long is this? You can see here this has the width of let's say 400 pixels. So let's go here into the form. Let's add a class here from the styling panel class of form and set the width to 400 pixels. Okay, that looks great. All of these elements, let's call this form uh field field. We want to style them a little bit. We want to give them this gray color. So, I'm going to pick this color and I'm going to go here into background color and I'm going to paste in the color and hit return. And also round corners, right? So where are the round corners? Radius 30 pixels. That looks great. And let's go ahead and apply that. Maybe make them a little bit chubbier by adding a little bit more padding. Um, yeah, I think that that looks good. And we can go ahead and apply the same class that we have for this form field. We can do it here. So form field, I can just pick it here. And form field, I can pick that one here. And this looks great. What we want actually I want more spacing for the form. So this whole form element which we've created a class for I can add a little bit of spacing at the top. So let's do 50 and I'll be happy about that. Um, we can go ahead and style this button. So this is a submit button. It has this purplish color. So let's give this a class of submit-button. And what do we want here? Background color. Change the blue to this. Change the text actually from white to black. And round corners. Give this 30. Also want to make this a little bit bigger. So I'm going to add a little bit more padding this way and from top to bottom to make the uh the button a little bit more chubby, I guess. Also maybe make the text a little bit bigger. So 16 16 and maybe make it semi-bold. I think that's what we had here. Okay. So I like that.

Okay. Second column. This is an H3. We didn't have an H3 yet. Let's go ahead and copy this into this cell and change that from Hey, is this H1? No, I didn't want this to be H1. This was supposed to be H2. Sorry, this is also H1. No, this is H2. Okay, I forgot that I've copied the hero section which had had an H1. So, it's a good thing that I caught that and changed that to H2. And this needs to be H3 which we haven't styled yet. So, let's go ahead and style the H3. What is the size of this? This is 35. Okay. So saffron 35 and let's do investors contact. Investors contact. So, what do we have here? So here we have two things. Basically, we need to create this kind of like link that when you're clicking on this, it's going to send you to the email. So let's go ahead and basically what I'm going to do is create I need a normal box that you know a div that can include the the image. However, I also want this to be linkable. So we have a link block here and I'm going to drag it here. And let's call this email-button. email-button. Now, this email-button, first of all, has um this gray background to it. So, let's copy the gray background. And under the background, I'm going to give this fantastic. I also want to bring in inside the email icon. So, let's bring in the email icon. drag it inside and well doesn't have any spacing uh between the edges of the email button and you know the icon itself. So let's add a little bit of padding. So now we have this but it's a box. We need this to look like a circle. Let's go here and give this like a ridiculous number of uh radius color uh radius uh round corners like 500. Okay. So now this has become a circle. This looks pretty good actually. Um, we can also give the H3 a little bit of spacing from the bottom. Uh, just so that we have a little bit more space here. Okay. And this is now a link by the way. So, we can go here into the setting and determine what happens when somebody clicks this link. And you can see that we can either go to a website or we can go to a page in the website. In this case, this is an email, right? So, let me copy the email here and just place it here. email and what is the subject? Maybe email from website. Okay. So now this is actually a functional button and you know by this point actually we already we can actually make these buttons functional as well. So these buttons what we want them to do is we want them to scroll down into a section. Now the way that we do this is we need to give this section a name so that we can say hey this is the mission section. So when you click here, it's going to connect to it. The way I'm going to do this is you can see from the settings panel, I can give it an ID. Let's call this mission. Uh, let's go into this section and call it product. Pro product. And let's go into this section and call this contact. Contact. Now, if I'm going back into my links here and from the settings panel, you can see I can select to a page section. And now we already have a bunch of things here like contact. Now we can also refer to the the emails and stuff like that. Those are not really relevant. But what I want them I I want mission. The section that is called mission. This one I want to go to the section that is called product. And this one to the section that is called contact. So if I'm going to preview this right now and click mission, you can see that we're now scrolling to the right place. and product. We're scrolling into the right place. Contact, we're scrolling into the right place. Okay. So, things are working. And this is great. I do want to Yeah.

Okay. The last thing that we need to do is bring in this email here as a text link as well. So, let me go ahead and do a text link as well and bring it here and paste in this email. Now, um, one thing we need to do is to style this. So, let's call this email-link. And let's make sure by default links are blue. This is kind of like '90s websites if you remember. Uh, we want this to actually be black. So, let's go ahead and pick black. Um, and we want this to be bigger. Don't remember how big we wanted this to be. 25. So 25 enter normal. Let's do 25. Now we also want this to be next to this email button. Uh, and by default again kind of like a word processor. It's just putting this in the next breaking into the next line. So to organize them together one next to each other again we're going to need to wrap them so that we can handle them together. Now previously we've added the div and then added these two elements into a div. But there's actually a faster way to do that because this is such a common thing in web design. If I'm going to right-click this, you can see that Webflow allows us to wrap them in a div block. So, I'm going to add this div block and I'm just going to bring in the email link. So, now they're wrapped together. And you can see that now they're also one next to each other. But I do want to manage the spacing between them. So, let me call this email-block. email-block. Now, what I'm going to do is I'm going to change the layout of this uh email-block into from display. You can see the basic is a block and I'm going to change this into a flexbox. Now, this is a super super powerful tool. I'm not going to get into how to handle this right now on this course, but what I will show you is that I'm able to manage how they are aligned and how much spacing there is between them. So, I'm going to add a bunch of space here. And now we that that works. And this link, by the way, uh, we didn't manage what this link does. So, right here, I'm going to change this to an email as well. Paste the email in here. Uh, message from website, similar to what we did in the link before. Okay, that's it.

The only thing that we have left to do is to add the footer section, which is going to be a little bit different, right? We don't need uh we need a background here. This gradient background, actually, you know what? So, here's what I want to do. I want to find a way to reuse the gradient that I've created here. Um, because it took us a while to create this gradient color, right? It was kind of like tedious. So, here's what I'm going to do. I'm going to add, let me collapse everything that's going on here. Let's add a new section. Uh, sometimes it's uh difficult to add a new section. So, let's go ahead and actually and copy and paste the last one. uh delete the container because we don't need it in this section. We want it to have actually a background. Um, let me see if I can go ahead and this gradient that we have here. Trying to figure out if there's an easy way to save it. No, I guess not. Okay. So, although it's tedious, I'm going to have to recreate this gradient here as a background. So what we want is to add an additional class on top of the section because this is not a regular section. Let's add footer-section so that we can manipulate the background. So I have this gradient although it's going from top to bottom. And so I'm going to need to change the angle here to maybe 90°. Um, and probably you know what I probably can't see this because this divider-line was too uh too small for me to see so far. Probably I need to change it here as well so that we can see the gradient on this divider-line as well. Um, and we need to give the footer a little bit of well a little bit of spacing padding top to bottom. And we're going to need to add a little bit of text. So, let's add the text block here. Um, copy this copyrights thing. Well, close this gradient. Copy the copyrights thing. Put it in here. Um, and so the the footer, let's select the footer, the section, footer-section. Let's make sure that the text is aligned center. Let's add a little bit of padding from top and bottom so that this thing is spaced out a little bit. And I think yeah, I think it looks good.

Okay. So the website is basically built, but it's built for desktop. And the next thing that we're going to do is we're going to make sure that it's responsive and it looks great on all breakpoints. So I've already showed you that here at the top I can pick to see different break points on how the website is going to look like you know on a tablet or on a mobile. And as you can see things do not look great at this point. Here's an important things before the basically what we're going to do the process is we're going to start looking at them and fix the stylings because and that's the important thing that I wanted you to know is that when we make changes to styling at smaller break points they're going to that these changes are going to cascade down into an even smaller break points but they're not going to affect the decision that we've made for bigger break points for the um desktop for example. So, let's go ahead now that we're in tablet and try to fix to make sure that things look okay.

Now, the first thing that I'm seeing is that we didn't manage the spacing. You know, we want to have you can't really read text when it's touching the edges. So, we want to make sure that there's always space between or a little bit of inner padding inside of our section. So, I'm actually going to go back here. Now here it's difficult to see because the my screen size at the moment is exactly gives us like a really nice space here from left and right. But as you can see if the screen is smaller there's actually no way to force in this space. So what I want to do is I want to go and select our normal section class that applies to all of our section in our website. And I'm just going to add basically 20 pixels of space, maybe even 30 pixels of space from left and right. So that no matter what the screen size is, there's always 30 pixels of space. So now as I'm starting to go down into break points, you can see that this really gives us already a pretty solid spacing from left and right. uh for some reason not not for some reason but this does not apply into the uh header because the navbar because the navbar is not a section. So I'm actually just going to go here into the navbar and separately add this to the navbar. Sorry 20 that was sorry just going to hit option to make sure that it's 30 from left and right. Okay. So okay already things start to look better.

Now we have to start making decisions on how we actually want this to look. So the first thing that we note is that navigation turned into this uh hamburger menu which we can go into the settings and click show to see how it looks. So basically it's great but it's ugly. I don't want this uh grayness to it. So let's go ahead and style this. I'm going to uh this is called menu-button. I'm going to add a class menu-button. Really don't know why Webflow decided that it's going to be great idea to turn that into a gray. Um, let's go here and select white background. Um, I do want white background. However, I want the the actual text here to be black. So, the icon, I want this to be black. And I'm changing the background. I wonder why I'm changing the background into white. Okay, that looks great. So, and also here on the nav-link, they all of a sudden um, no, actually not. The nav-links are inside of this nav-menu. Let's give this a class nav-menu that also has by default this gray ugly background. So I'm going to change that into white. Actually, we can do something nicer here. We can do white and reduce the opacity just a tiny little bit and maybe go here below and do um backdrop filter blur. And now you can see that, you know, we have a little bit of transparency. We have this glass effect where it's opening up and we can see the background blurred a little bit in the background. I actually think this is a nice nice design. Okay. So, I'm going to go ahead and close it.

Now, as I've mentioned earlier, sometimes the designer or you will make these decisions in Figma in the previous design stage. In this case, I'm just going to basically try to figure it out as I go. The next thing I want is I want to have and for this navbar I also want a little bit more spacing between the next section uh here. So I'm just going to add a tiny bit of bottom margin here. 30 pixels bottom margin just so that we have more space. Now I can ask myself whether I still want this layout of two columns. Um, and I think I c I do want on tablet, but I think that this text is just the heading is way too big for this break point. So, I'm going to go into the heading one and change it from 50 to maybe 40. Uh, 40 is still big. Still quite big. 35. Yeah, I think that looks that looks better. Okay. So, I'm going to keep it at 35. I'm going to decrease the line

height. Um, yeah, I think this looks this looks much better. Now, if I've made the change to H1, if H1 is now 35, then this one H2 should probably be something like 30 because we want it to be smaller than that. Uh, and maybe this subheading will reduce it from 16 to maybe 14.

Okay, maybe we need to adjust the spacing between them as well. Um, can reduce this to zero. And here for the H2, we can reduce this to zero and this one to 10 pixels. Okay, so already things are starting to look much better.

Now here, look at how this looks like. Uh, first of all, the image is not centered. So let's go here into our um background. Let's go and see the background. Click that. You can see that the image is positioned to be fixed to the top left corner. Let's actually go ahead and center it. And now I think it looks much better. Okay. So, first section looks okay. Second section also looks okay right now.

This section, second section. Um, I'm not happy with how this looks like. So I think that when it comes to this break point, maybe what I want is for this cell here um to basically span across maybe span across this whole um let me see how I'm thinking about this. [Music] So I've got this cell and let's do in the cell size column will span three columns. Okay. So now the first one is spanning all three columns or maybe two columns. Okay. This is actually better. It's spanning three columns. And here it would actually look better I think if it's just three rows. So let's instead of this spanning two columns, let's select this second cell. Let's have this span one. Um, no, no, no, no, no, no. This one should be row row number two. Okay, so let's go back to this. Let's make sure that this spans three columns and this is great. So, this cell is going to span one and this is spanning one. But this is this cell is bigger. Why is it bigger? Ah, because it was exactly this was one FR and these were two FR. Okay. So, now I think this is better. This is a better layout. So, as you can see, I'm figuring it out as I go. I'm trying to make sure that it looks good.

One thing that I'm also noting is that the 50 uh uh pixels uh spacing between these columns is a little bit big here. Here, I'm going to change this to 30. Yeah, I think this spacing looks a little bit better at this point. Logos. Okay, so the logos here, I think they have too much space between them, so they don't fit in one line. So, I'm going to reduce that. That looks great. Uh, this is for some reason uh what's going on here is too big. And I guess it's because this form I'm forcing it to be 400 pixels. Let's make that much smaller. Uh, actually maybe make it auto so that it has um yeah so that it has or just 100% maybe 100% of this column. Well, I'm going to keep it that way. This is probably we're going to make this much smaller. So let's turn that to 20. We've got more space. Now we can also decrease the spacing in this email block which was 30. Let's reduce that. So now things starting to look good. Even the two column grid here, by the way, which has this 50 pixels. We wanted to reduce that to 30 pixels. Okay. So now things are spaced out much better. Footer looks good. Okay. So looking at this, the tablet looks decent at this point.

Let's continue to this mobile breakpoint. This doesn't make sense at this point. So I'm going to go ahead and say okay when it comes to mobile for this um actually yeah when it comes to mobile let's make sure that this is not two columns let's delete this column just make it one column okay so that looks like this and the next images below already looks much better okay this also looks good but you know we're basically saying that this has a maximum width width of uh 510. In mobile it does not make sense. In mobile maybe we can just make it like 90%. Okay. And that would look good. I'm trying to think whether I think for that for mobile this image is just too tall. Now it looks good on our screen but you have to remember that mobile landscape modal is actually going to be very very tight. So let's actually go ahead and reduce. And it's also going to enable us to see more of the image. So I'm going to reduce the height of this mission block. Okay. So this looks good. This also looks good. But maybe these um top lab images which we defined as height of 290 pixels, we can also make them smaller and we can see more of the image that way. So this now looks great.

Now, these logos are not going to fit. Um, yeah, one next to each other, unless I make them a little bit smaller, which I can do. I can make them a little bit smaller. I can reduce the space between them even more. And that looks good. This looks good. Just this H3, actually, this H3, we didn't make it smaller. Um, we didn't make it smaller. We should have probably made it like 28 at this point. Um, it also has a lot of space at the top. So, let's remove that so that everything aligns. And now I'm trying to figure out, okay, so we can't fit or these together unless I make this um, and by the way, this is a two call grid. So maybe why are we still trying to force it into two columns? Can be this way and then this way. So now it looks better. Now it looks much better.

Okay, last one is mobile portrait. And I think that at this point, okay, the logo is too big. So let's go ahead and select the logo which we've defined as 250. Let's at this point, let's make it 200. And here I think can be even 180. Um, okay. So that looks good. Maybe the spacing here is a little bit too big, the padding that I created. But is the text here too big on mobile? On this mobile portrait, usually when you will have one word per line, that tells you that the text is too big, right? So, you need to make it a little bit smaller. So, let's go ahead and reduce this to maybe 30. Uh, not 20, maybe 28. Nah, still too big. 27. Okay, 27 is decent. It looks more readable that way. Um, we do have a lot of spacing here. Um, so maybe let's reduce the gap to 20. Yeah, I think it it's more makes more sense with a little bit less space. Also, each one of our sections has remember 50 pixels um spacing from at the bottom. That would space it from the next section. I can change that to maybe not 20, maybe 30. Okay.

So, first section looks great. Uh, this is a little problematic right now. First of all, I can reduce the top space so that the text comes here. Uh, I wonder if we make it smaller. I guess maybe I think I'm going to have to make this higher just so that the text does not fall on his face. So I'm playing around with this. I think this all at this point this looks good. This we need to make them even smaller here. So let's make them a bit smaller. And we can make the space between them even smaller. Maybe like 15. Um, I wonder if we need to make them now bigger. Um, just going to keep it this way. The logos at this point are very small. So, I'm not going to try to even force them into a single line. I think I'm just going to keep it this way. And that looks okay. Contact H. This huge uh button here is just too big at this point. Um, maybe let's reduce the reduce the spacing here and make this smaller. So I'm trying to see if we can fit it. We can fit everything here. And I guess we can. I guess we can. This can also be a little bit smaller. Okay. Um, where's the text size? Let's turn this into 20. Okay.

Okay. So, we've managed and reviewed all the different break points. And now we can see that even if I'm changing to a random breakpoint, things will look okay. So, that's it. We're basically there. All we need to do right now is hit the publish button and then hit publish to select domain. Now you can see as I'm building this website and so far I didn't have to pay for anything, right? Web flow gives us a free domain which in this case is massebsite.webflow.io. And I'm going to click here. This is already a live website. It's working. It has a domain name. You can go ahead and try it out on yourself. People can find this website. Right now we have a live website.

Okay. Now, of course, if you're not paying Web Flow and stuff like that, it's hosted on their domain. So, they're going to probably put a badge. This is hosted. This is a Web Flow website. And you obviously you don't want this for your client's website. So, the last thing that I have to do is to actually connect this to a custom domain. You can see I can do here add a custom domain. This would require me to purchase a hosting um a hosting plan and of course for my clients to purchase their own domain. So, I'm going to do this later on. We're not going to go into this right now. If you want to see how to do this, I'm going to send you extra resources. Web will have great resources on how to connect domains. But we're basically there now.

Of course, we can add more interactions and animations to make more wow into this. But I think for the scope of this course, I think we've got pretty pretty far. It's time to show your client the final website. Showing the website to your client and having a positive reaction is one of the best feelings in the world. Now, honestly, I'm getting comments on YouTube and from our students like, "You've changed my life." And while these make me feel great, there's actually no high like the one that you're getting when your client is just loving the work that you did for them. That is an incredible feeling. And while, you know, money is also an important factor when you're choosing what you do for a living, I have to tell you that I am addicted to this feeling of like wowing your client.

All right, so that's it. We designed and we developed a website and I hope you learned a lot on this course and I hope that you're following along this process and trying to work this out with your own either project or a client. Let me know in the comment and when you're ready to dive into web design and do it professionally, I do hope to see you in one of our premium courses. The mentors, the community and me are all waiting for you there. See you soon.