Learn Web Design For Beginners - Full Course (2024)

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 sea 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 realized 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 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 profession profal 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 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 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 frontend developer there are powerful no code tools today like webflow 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 are doing the amateur process and 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 einon 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 strategy is to understand where we are today and where we want to be in the future 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 type there is basically five big categories of websites that they fall into first is eCommerce 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 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 into to consume information 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 Tech text image or video this is a Content website the forest 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 but 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 in 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 hard the website is going to play in their more broad business strategy and what content we 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're leading the way in a new medical use of syosin which you might know as magic mushrooms it's a really exciting project that has a potential to change how the healthcare industry is helping people suffering from addiction and PST trauma however it has a challenge people tend to associate cyos sain with heppes 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 Om 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 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 feature 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 you 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 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 reach 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 sitap the goal of a sitap is to map about 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 psych map into wireframes wireframes is what we call a low Fidelity 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 mass EX 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 massix 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 websites 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 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 sit map now let's expand that into wireframe again I like to do this on pain 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 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 align 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 I line of logos and contact form now that I have my ugly drawing I'm clear on what content I need I need these headings I need these paragraphs 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 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 sit map now we can generate a custom sitemap by describing the company right here so I'm going to paste my description MX is a new pharmaceutical company working on Innovative Healthcare solution basically a description of the company I'm going to set this up as one 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 massix with a strong and compelling image and video background showcasing the Innovative approach um about section team section 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 B 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 sitemap 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 sit 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 reloom 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 the stuff that you did with the 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 sitemap itself so it is worth taking some time in 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 relim give you are pretty Advanced components so you need to be an advanced figma user 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 reom 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 webflow master class students get two months of free of reloom 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 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 inigma 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 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 we're 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 teex 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 syosin 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 command V 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 xmission 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 massix 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 a 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 I'm not going to bring in the images at this point cuz 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 at 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 cuz that's going to be message and then we also need a button so let's do 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's 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 days 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 collor and type and visual to communicate a message now we already know what the literal message is because we already have the texts 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 collar 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 oursel the question what message the this Choice uh sends or conveys on everything that we do okay so 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 silos sain uh 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 so if if you've already registered for the free 5-day course you should have that resource accessible but for now I'm going to first head off to behs 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 behs 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 reference es and inspiration one more thing that I'm going to do at this stage is I'm going to go ahead and screenshot 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 sanserif 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 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 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 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 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 sensor 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 silos Sabin 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 En encyclopedia or something like this and also the the choice of a seraphon 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 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 sanserif uh fonts sometimes they are they're 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 VIS 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 have 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're 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 and 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 references 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's more intricate ways of doing mood boards um 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 colar the colar 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 font 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 rectangular 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 ey dropper 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 ey 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 to 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 collar palette somewhat of a collor palette let's think about fonts and type type faces so here we can see kind of like a very very clean sensor 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 uh for a heading and bring it here uh let's turn it white so we can see what we're doing and bring 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 iner um which is actually not a bad font you know it's a good good sensor 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 in uh actually make this bold and just so that I know okay this is option number one 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 sanserif Sans in France is without so this is without SF 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 rway 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 rway I have that here as it is and I can choose rway 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 you work for them 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 serf 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 type faces and walking around here and you know opening up this font and say hm this font is interesting that might look nice now when it comes to premium font I can't really test it out in figma some some places allow you to download tester font 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 um 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 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 U work for them 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 uhar I purchased both the the desktop which allows me to work in figma and if they would 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 with got a lot of content on this I'm running really fast on uh right now and let's try this zaffron 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 intra one which is a very very solid sanserif 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 TCH 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 even 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 type faces and font choices that we can use in our website we've got callers 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 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 connect 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 along 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 massix ma massic okay let's make this bigger um massix and I think we can we can make this a little Bolder or maybe the regular and maybe we'll use the Pharma 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 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 tool keit for the design of our website we've got a logo we've got colors and we've got typography The Next Step 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 customade 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 website for relatively cheap price 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 website that gives you free ready-made assets so free stock photographer uh 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 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 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 silos being the the hallucinating effect uh in magic mushroom 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 prod 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 you you're growing stuff every time it's a little bit different and when you try to standardize something that is naturally Source there's a challenge here to make it in a medical medical quality standardized so I think that the combination between naturally source and GMP and the like the standard is where their uniqueness comes into play and I'm trying to think how 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 so 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 reflection 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 making obiously because I don't have the budget to hire a real photographer at this point and also these sounds like very complicated things to shoot in real life so I'm going to use mid journey 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 in 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 F I I tried to uh do variations on this so I create 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 B 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 are 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 iteration to figure out what you want but works 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 um 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 chot of a single medical uh feel which is I guess I I realize how these little bubbls 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 mid Journey 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 M magic mushroom so you want to fit to exactly the type of mushroom that you need and these starting to 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 grass here now I like the the fact it's natury 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 uh statement here and here we're talking about you know uh the uh revolutionize the global Mental Health Care uh harness the power of naturally Source creating Innovative product 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 is going to be actually used in a medical in a medical context right so the way that the the treatment it's going to work is that people are going to come in for a treatment and kind of like a lab they're going to sit down 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 closeup 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 you know mid journey 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 taking 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 nice camera but that's okay if I 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 make things easier for me you don't have to have this obviously if you're working with photograph 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 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 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 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 a 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 icon finder 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 is 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's 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 proportion now What's Happening Here is that the 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 inra 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 look 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 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'm 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's 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 stop 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 reusing here and here uh and here so we have this kind of like subheading again and again and for this I want to enter semibold 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 enter semibold 18 uppercase that's not bad for this uh so let's create a textile for this and call this subheading or top heading whatever let's call this subheading create a 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 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 textile and call this body body is how we call the 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 Tex 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 ized so I do want to edit this text style so I'm going to choose it and 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 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 think it looks like a better composition New Era of medicine massm 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 is 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 and 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 want this I want to have this investor contact as an heading but it's not it's basically a subheading of this contact as it's 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 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 ass with an icon and we're going to do this later um 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 Tex stle 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 and 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 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 out 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 aligns 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 part 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 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 command VP 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 at it 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 to 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 a 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 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 Photoshop 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 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 changed as the color adjust 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 to do is I'm going to select this whole image command a select everything and I'm going to do copy marged it's going to merge all of these letters into an image and I'm just going to go back here and hit paste here B 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 all right 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 taken you can see the file format here RW to these are camera raw which basically enables you to do a lot of color adjustment so I double clicked 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 you we've got here temperature so I can you can see I can move it from yellow to Blue which is again in no 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 uhuh 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 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 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 it'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 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 let 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 2 Logo three 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 um 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 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 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 eye dropper 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 me search again for an 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 uh distinction between for the partner's 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 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 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 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 class 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 styleset which basically takes care of how things look remember that we created those Tex 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 Solutions 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 Square space 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 allinone 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 the website we designed in webflow I'm here in webflow creating a new website and you can open up a free webflow 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 webflow 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 uh 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 mid Journey 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 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 pixel-based images are pixel-based 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 or 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 colar 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'll 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 W 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 ort 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 a size this one we'll call lab 2 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 we 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 in 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 variance 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 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 inter regular 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're only using the mediums now you can see here under web fonts it's got a bunch of different F 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 up 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 webflow we've got a bunch of elements we actually already have a pre-built Navar 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 talking about what happens in Mobile how the things look like in Mobile and you can see here right at the top of web flows panel here you can see different break points of how the website is going to look like on mobile or on tablet and stuff like that 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 it's called the brand which is basically a place for the logo and 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 in 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 wevo 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 Styles selected and these are called classes so for the navbar I'm going to give this a name I'm going to call this 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 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 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 texts 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 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 navlink 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 right so um I can select nav 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 nav 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 the the font is not even in it's aial so we need to change the font now I can go ahead and change the font for naving however because we're going to reuse this font inter 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 iner uh let's see where we have in so that's it we've got in 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 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 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 up from the top as well so how am I going to style it I'm going to give 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 with 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 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 Navar 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 group group 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 in this section as well 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 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 the 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 an image on the right so to do that I'm going to create a simple grid and I'm going to do that using web flows quick stack which is a way I'm going to drag that inside so you can see it's a basically way to create layouts and grids in this case even the default is two CES 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 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 is going to be 46 and also here 46 so let's go here ah 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 this two call uh two call grid okay 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 pixel let's turn that to 40 let's make it 50 just for the sake of uh I'm 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 style 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 then we're going to call it round image round corers so we know what it does and we we're obviously going to reuse this on these othere 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 a 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 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 K uh 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 web flow automatically gave this a class and call 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 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 name your classes I'm not going to get into this right now so for now I'm just going to do 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 in uppercase this actually needs to be a little bit Bolder so I think the fact that I forgot to load the medium inch 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 boulder inter font so let's go here enter 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'll have the semi bold 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 um and I'm actually going to give this class 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 on 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 end you can see that the two col 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 cont 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 to change it from H1 to H2 which is unstyled let's also start copying the text so this is mass xmission uh that's great and this is new area of medicine so this is also great let's copy and paste that 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 on 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 set 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 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 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 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 texts 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 spacing here is not right so let me go ahead to editing the H2 and reduce the space from 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 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 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 colums 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 so let's duplicate this class and call this 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 not what we have one this is called one F FR and this is half FR and half 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 let's bring in which is the top image is 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 20 let's say 290 pixels so I'm going to add a combo class to this image that means that on top of of round corners it's going to have a different style that's unique only to it so let's call it top lab image and set the size here to 290 um but the width I do want the width to be 100% so it's going to span all across but no 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 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 lab image actually to this one as well top lab image yeah this is great and then let's apply top lab 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 containers stopping here they basically run through left to right all the way um and they have this gradient collar 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 2 PX and note the interesting thing sometimes you can use relative sizing like 100% s sometimes you can use fixed and exact sizing like two 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 colar 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 group greenish color let's add that right here as another grading stop hit return to save that last one is yellow not last one before the last here is yellow and the last one is actually I don't know if to call this orangish all right so the last one is the orange-ish okay so now we've got this linear gradient now it's difficult to see but I'm going to hit here play 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 it three times and just change the image this way replace image I'm going to pick this image uh and 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 out 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 uh um container and just this one so it's inheriting a lot of the properties of the mission tax 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 so let's go ahead and duplicate our first section our hero section copy and paste and bring the copy down 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 in a form element and there's uh label and the field label and the 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 us 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 widths 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 petting 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 the 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 how 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 this is fantastic I also want to bring in inside the email icon so let's bring in the email icon and 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 colar 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 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 idea let's call this Mission uh let's go into this section and call it product 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 in 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 in 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 w 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 rightclick this you can see that web flow 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 flex box 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 U 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 but 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 the little bit of text so let's edit 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 not 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 break points 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 breakpoints 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 Navar because the Navar is not a section so I'm actually just going to go here into the Navar and separately add this to the Navar 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 uh class menu button really don't know why we flow 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 have 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 can 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 in for this nav bar 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 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 cuz 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 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 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 the 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 spend one and this is spending 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 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 image is below all already looks much better okay this also looks good but you know we're basically saying that this has the maximum 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 that mobile landscape model 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 and 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 H 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 n 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 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 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 I'm 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 it 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 Tex 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 weow gives us a free domain which in this case is massix website.we flow.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 webflow 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 webflow 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 at 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 say 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 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

Channel: Flux Academy

Views: 799,691

Keywords: freelance web designer, ran segall, Flux academy, Learn to build websites, how to make money building websites, webflow, figma, become a web designer 2024

Id: j6Ule7GXaRs

Length: 187min 30sec (11250 seconds)

Published: Fri Feb 02 2024