How To Create A SUCCESSFUL Web Design Business with WordPress & Make $100K A Year

the demand in the web design industry is climbing to an all-time high the web design industry is estimated to be worth 40.8 billion dollars in the United States alone in 2021. the Bureau of Labor Statistics claims the web design industry will have a 13 market growth in the next few years which makes the growth above average compared to any other industry U.S news has ranked web development and design from now 10th place to sixth place as the best career to pursue in the world with all the demand for web design jobs this has also led to many people to change their Lifestyles there are now more than 21 countries who have created visas specifically for digital Nomads or remote workers allowing anyone who becomes a web designer to live abroad and to travel to countries they've always wanted to what's up party people my name is Daryl Wilson and a little background story about me I run a web design business for a few years with a partner and then later I decided to do my own thing and started teaching web design full-time here on YouTube it's really funny I actually built websites as a hobby I would go on hiking trails and I wanted my own hiking blog and I also built them for fun for you know family and friends and charge them small fees nothing very serious during this time I was interning at a courthouse and when my internship was up I decided not to take the job and I have been teaching web design here on YouTube since 2017. I've also been a digital Nomad for about four years I've been to South America been to Europe I've been to Asia I'm not saying this to like sell you guys a dream or impress you but what I am saying is that this kind of job gives you that flexibility of working abroad and a lot of the people that I've met in Asia they are full-time web designers now this is a very comprehensive tutorial that goes in detail in every topic and I've actually invited another YouTuber to help teach this tutorial and his name is Daniel Scott Daniel Scott is a web designer that teaches how to use figma he has a YouTube channel called bring your own laptop with more than 340 000 subscribers and knows the design process very well Daniel Scott focuses on figma Adobe XD and other design tools and in this video Daniel will break down how to use the designer tool figma figma is the most popular designer tool on the market and most ux jobs require it so after watching this video you'll understand how to fully design websites in figma and this will help give you that boost you need in the web design industry so before we start make sure to close everything you know get your favorite drink get a beer whatever it is that you do and pull up a chair and then today I'll walk you guys through on how to start your own web design business from scratch step by step now I do realize this is a long and detailed video so we have broken this video up into five different sections in the first section I'll walk you through the web design process in this part of the video I'll be explaining the basics of web hosting how to use page Builders and how to create Pages for your website I'll also be going through specific themes and explain how they work we've also created special pre-made starter kits for all of you for free which you can import on your website with one click adjust the title change the colors change the fonts and you'll have a brand new web design business website in a few clicks we went ahead and hired some of the best designers in the world to make these for you all for free to give you that boost you need in the industry in the second section we'll be talking about the business aspects in this section we'll help you understand branding branding is the single most important aspect of your business and tells people who you are and it also attracts specific customers we will walk you through how to write questionnaires how to create proposals how to make digital contracts and terms and conditions we will also talk about how to price your web design business offer recurring Revenue Services that get you extra Revenue every month we'll also talk about Ira customers and how to deal with them we will also be talking about how the web design process works from start to finish such as getting your email writing proposals all the way to handing off the website to the clients and getting to testimonials from your clients in Section 3 we'll talk about workflow workflow is how to operate the day-to-day operations in your web design business I'll be explaining things like how to manage web hosting for your clients how to migrate websites explain what wireframes are mockups prototypes and I'll also give you my personal opinion on WordPress page Builders and other UI tools like figma and Adobe XD I'll also be explaining how to hand off your websites and put them on a recurring Revenue plan if they decide to go that route in section 4 we'll talk about the design process we'll be talking about the design aspects of your website here we'll talk about colors and fonts it's crucial to understand colors and the psychology behind them have you ever noticed how all social media websites like Facebook Twitter and Linkedin are always blue and how expensive Brands like Mercedes Audi and apple are always silver there's a reason for that we'll also talk about landing page strategies like the importance of padding when to use animations and when to not use animations by the end of this section you'll fully understand the design aspects of how to design a web side the Right Way Daniel Scott will also walk you through how to use figma figma is the most popular UI tool in the web design industry and most web agencies require you have experience with this tool Daniel Scott is a pro with figma and will walk you through how to create an entire mock-up from scratch so you'll learn how to use figma for your web design business and lastly in Section 5 we'll be talking about marketing marketing should be the second most important aspect of Your Business Without marketing you won't make money we have created a complete guide on how to Market and start your web design business from A to Z we have created a complete marketing guide on everything you can possibly need to know on how to properly and successfully Market your web design business we will also be showing you the most effective free methods along with some paid methods as well now if you guys do have questions for me or Daniel you guys can let us know in the comments below if you guys do want to jump around also to different parts of the tutorial we have timestamps in the description where you guys can go to specific sections of the tutorial also if you feel like I'm going too fast or too slow there is a gear icon at the bottom right where you can speed up or you can slow down the video so with all that said let's go ahead and start this web design tutorial and let's first go ahead and go to section one and we'll teach you everything you need to know about WordPress all right welcome to section one so in this part of the video we'll be teaching you everything you need to know about WordPress we'll show you guys how to get hosting we'll talk about page Builders how to make Pages what are WordPress themes what are plugins we will give you the whole 101 on WordPress so let's go ahead and get started and the popularity of Wordpress is growing WordPress Now controls up to 40 of the entire internet making it the most popular platform for building websites in the world it's completely drag and drop really easy to use and anyone can get started with it today I'll walk you through how to build your website you'll have access to various templates and pre-made starter websites to help build your new WordPress website I'll show you how to pick a pre-made template adjust the color change the text and turn this pre-made templates into your new website for your business or personal use and the best part everything is drag and drop so you don't need to have any experience or knowledge of coding to build your new website you're going to love your new websites and I'll walk you through how to build your own step by step in this WordPress tutorial in this video I'll walk you through how to get web posting and our domain I'll walk you through how to install WordPress and get your website online I'll then introduce you all to the WordPress dashboard and show you how it works I'll show you how to create pages and blog posts for your website I'll walk you through installing a WordPress theme and explain how they work after that I'll be showing you what a WordPress plugin is with plugins you can build anything on your website you can build anything from a basic website an e-commerce website a booking website a real estate website a multi-vendor e-commerce website like Amazon or even a hotel booking website and the best part is you don't need any experience and I'll walk you through this whole tutorial step by step so let's first go to step one and get web hosting to create a website you do need to get your domain and web hosting this means a company will host your website 24 hours a day and make sure it's properly running this will also make sure your website's online and people can visit your websites you guys ready all right cool let's go ahead and start this WordPress tutorial and welcome to namehero.com now I'm recommending name here.com for years and people love it uh this week alone I've had zero downtime with name hero so you guys will have a reliable website and also my websites load at under one second with name hero so we do test these servers to make sure that you guys do get the best web hosting possible now once you guys are here you'll click on get started now and then it'll bring you to four different pricing options so we have the starter Cloud the plus Cloud the turbo cloud and the business Cloud now I personally recommend the plus Cloud if you guys are just getting started out like you're just getting your feet wet for the very first time but for those of you who have been using Wordpress for a while and you want to upgrade and get some more performance I would definitely go with the turbo Cloud because with the turbo Cloud you guys do get the new nvme storage which does just give you a little bit more performance with your website so you'll go ahead and pick a package that works best for you and your budgets and then once you guys figure your package out you'll go ahead and click on order now all right and here you're going to enter in your domain name so this is the name of your new website so uh portfolio website.com or you know my newswebsite.com or whatever whatever Niche that you're building you'll go ahead and put it here so I'll just put it in tutorial domain1.com and see if that's available all right cool it's available now I know it takes time to figure out the domain of your website so you know give it some time you know it does take some thoughts for your new websites uh once you guys figure it out you guys will click on continue alright cool so next we have the billing cycle and we have three years two years in one year now personally I'd recommend one year you guys do get a large discount and this does give you enough time to decide if this is for you or not however if you guys are feeling very confident I would recommend going with the two or three year plan you guys do get the deal the longer you sign up for so it really depends on your budget but once you guys select a billing cycle we'll scroll down and I don't recommend any of these upsells personally you can do this with free plugins so yeah you guys don't need those and then we do get a free SSL with name hero so that's pretty cool once you guys select your billing cycle we will then click on continue all right next we have the domain configuration now I personally recommend the ID protection guys this will protect your personal information from spammers and people trying to sell you SEO packages and Viagra and all sorts of nonsense whenever you guys get those weird emails in your inbox it's generally because they found your domain online so this will actually protect you so you don't get spam in your inbox so go ahead and click on ID protection and then click on continue and look at that for a year of Hosting you're paying less than a hundred dollars you're paying only 70 bucks you guys can also go the cheaper routes and get the cheaper plan if you're on a really tight budget but I think this is a great deal for web hosting for the entire year for this specific performance so you guys are getting a reliable and a fast server for this price so it's definitely worth it so go ahead and scroll down just keep scrolling now you're going to go ahead and fill out your billing information here so your first name your last name uh additional information you'll put in your password and also a support pin so this would be the pin that they would use to verify that it's you and then also we have a payment methods so you can pay with PayPal coinbase which is cryptocurrency and credit card here you'll go ahead and put in your payment details and if you guys do want to get their spam or their emails now they actually send some pretty good emails guys I'm not gonna lie they have some cool promotional offers you'll go ahead and check that box and then you'll of course agree to their terms of service right I'm sure you guys are all going to read uh this here right you guys are all going to read this I don't think anyone ever reads any of this stuff but uh yeah you'll go ahead and uh check the terms of service and once you guys have checked out I will meet you guys in the customer portal all right and welcome to your new dashboard so this is your current dashboard as you guys can see I had many different packages many domains and I also have tickets with name hero and they really help me out with all of my problems so this is just your interface on the left side you can see your hosting packages these are your current domains you can always register a new domain also billing so if you want to see your payments or you want to add funds or you want to adjust your payment methods you can do that here and also the support so if you guys run into something weird I know with websites things just kind of get weird sometimes you guys can always open a ticket here and they will help you out with all your problems and they are pretty fast I mean I think maybe under one hour they can help you guys with all your problems so once you guys are here let's go ahead and install WordPress onto our new domain you'll first click on my cloud now here we have hosting packages now you should probably only have one here so just go ahead and click on your hosting package and next we're going to see this log into cpanel go ahead and click on login to cpanel all right cool so now we're going to go ahead and install WordPress onto our domain so up here we'll type in WordPress here we go we have WordPress manager by Soft taculus we'll click on this all right and from here we're going to install WordPress you guys can see I have many installations of Wordpress already but right here you'll click on install and now we're going to look for the domain that we purchased so right here you have the choose domain section so you'll probably see your domain that you purchased I'll just go ahead and select this one but you're going to select the domain that you purchased and for the protocol make sure this is https which is the SSL now for in directory make sure nothing is here all right I don't know why that's there by default but oops whoops but I make sure nothing is there because that will install your domain onto like your website.com something and you don't want that there it's yeah just don't have that there make sure that's make sure that's empty now for the admin username go ahead and give yourself an admin username and a password and this is what we are going to use to log into the website so whenever you want to build your website you're going to use these login credentials so make sure you write these down I'll just put admin never put pass guys uh make sure this is something unique I'll just put uh paddy whack and your admin email make sure that this is an email that you have access to because when you forget your password they will send this information to your email so I'll put in my my Gmail account here my famous PC hoarder which I do get tons of spam and below that you can always select your language we can always adjust the language as well inside the WordPress dashboard and I'll show you how to do that in just a bit and we're going to keep scrolling down here to the bottom they have these other themes they want us to use but we're not going to use these and right here you'll click on install yeah they said three to four minutes that was not three to four minutes right now here we have installed WordPress and this is the administrative URL administrative URL so just go ahead and click on this link and this will log you in to your website all right awesome so now we have a WordPress installed and our website is now live on the internet and if you want to see what your website looks like right now on the internet at the top left right here you'll just click on visit sites and this is the current theme that they are giving us and it is really Bland really boring ugly but not to worry we'll make it look really good so to go back to your dashboard go ahead up here and click on dashboard now that we have our website online now let's go ahead and adjust some of these general settings the first thing we want to do is go to users and click on profile now in the future if you guys ever lose your password or if you want to change the color scheme this is where you're going to do it I think for this video we're going to use midnight I just like midnight it's really easy to see these other ones are just really really tacky I mean this that's way too much you know so yeah I think we're gonna go at midnight I just like that it's a lot easier to see and we're going to scroll down here now you can always adjust your email so you can always change your email and remember this is important because if you get your password the password will be sent to that specific email so you can always adjust that at any time and below that we have a new password this is where you're going to change your password so for WordPress if you ever want to change your password this is where you're going to do it and once you've made all the changes that you want you'll go ahead and click on update profile now let's say for example you guys speak a different language on the left side right here we have settings we'll click on General now here you can enter your email or you can update it at any time so if you get a new email address and you want to update it you would do that right there and below that we have the site language now if you change this this will actually apply to the back end so you can put any language that you speak so if you speak Spanish Portuguese Arabic Hindi whatever you can adjust the language for your backend options and below that we'll go ahead and click on Save changes the next thing that we need to do is we need to adjust our permalinks on the left side you're going to see permalinks now here we have a few options but you want to select this as post name and the reason why we do this is because when you go to a website you see like you know your website.com shop right not like all this you know numbers and it just looks really cluttered and ugly and the post name option is the best for SEO purposes so once you select the post name you'll scroll down and click on Save changes all right now let's say for example you guys want to log in and log out of your websites maybe you're at a friend's house and you want to you know mess around with WordPress first what I'll do is I'll log out so right here I'll go ahead and click on log out so right now I'm logged out of my website and there's no way for me to enter it so whenever you want to log into your website and make changes you'll go to your address bar and type in dash WP Dash admin and press enter from here you guys can enter in your login credentials that you guys use to install WordPress so I believe mine was admin and it was Paddy Whack right paddy whack we can always take a look here remember me and login all right cool so the next step is let's go ahead and create some pages so over here under Pages go ahead and click on all pages now whenever you create Pages for WordPress they will be displayed right here now these are just demo pages that WordPress created for us automatically like privacy policy and also the sample page but to create a new page just click on add new and this will be like the the home the home page right I'll click on publish and publish so let's go ahead and view this page right here so let's go ahead and view this page so right here I'll click on view page and this is our home page right this is the page that we created so let's make more pages up here under plus new we'll also click on page this is just a shortcut way to do it you can do this with posts and also pages so it's just a quicker way to access pages and then this will be the about us publish and publish on the right side let's create one more page so right here add a new page and this will be the contact us page I'll click on publish now right before I click on publish again you guys will see that we have these options you guys can make these Pages private if you choose to do that maybe you're working on it and you don't want people to see it you can click on privates and this will make the the page itself private so no one else can see it only the admins or people who are logged in on your websites can see it but uh yeah I'll just leave mine public for now and then click on publish so let's take a look at our website so let's go back over here and click on the W icon and go back over here and click on visit sites so right away you guys probably have noticed that we don't have any access to those pages right we can't really see those pages so let's go ahead now and create a menu for our websites so let's go ahead and go back over here to our dashboard Now to create a menu we're going to go down to appearance and click on menus so this is the name of your menu and don't worry about the name guys no one's going to see it but you so this will be like primary menu and I'll click on create a menu now here we have pages right I'll click on view all which will display all the pages so here we have the home the about the contact we also do have a second home page and I want you guys to go ahead and add that in there and click on add to menu so this is the home page right here is created automatically by WordPress and this is just a custom link so it's not really a page but we can move this around right so let's move this to the bottom here move the home page up here right so we have home about us contact now we can go ahead and change the name of this custom link so maybe you guys have like a Facebook page right or a Twitter or a tick tock or something like that we can go ahead and click on open and we can put the URL of the Facebook page right so like Facebook facebook.com Dash there Wilson L3 which is my fan page and then right here for the title we'll just put Facebook page so now it has nothing to do with the home page right it's just a link to our social media Pages now we can add in more custom Links at any time right here under custom links maybe you guys have a Twitter right so this will be like the you know Twitter write Twitter and then you know Dash you know your profile or something like that and then this would be like Twitter account or my Twitter something like that and then right here I'll click on add to menu so to close this just click on that Arrow so now we have the home the about the contact and then we also have our social media links right here let's click on primary menu and then click on Save menu all right so now let's go and take a look at our website and see what's changed next let's go ahead and click on visit sites and there we go so now we have the home page the about the contact uh the Facebook page and also the Twitter and if they were to click on these it would then take them to those social websites but uh here we have our normal pages and they're empty right now just because we haven't used a page builder yet but I'm just introducing you guys to the actual concept of making Pages now there's one more thing that I want to do is I want to assign this home page as the default home page if you guys notice when they go to my domain right here it takes them to this specific URL and I want to change that so I want to tell WordPress what is the first page people visit when they visit my websites well we can change that so let's go back over here to dashboard and we're going to go down to settings and click on reading here you can see that says your home page displays let's click on a static page now what is the home page of your home of your website right it's going to be the home page so basically when people go to my website the first page they're going to see is this page here and you can change that to any page that you want later on when we make blog posts we're going to assign a default blog page as our default post page but we'll do that in just a little bit here let's click on Save changes so now let's take a look at our website one more time and there you go so now you'll see that the home page is gone right and this home page is Now the default page that users are brought to when they visit our website so we have a pretty cool menu you know we have a pretty cool menu everything's everything's working out pretty well so the next thing that we're going to do is that we are now going to change this WordPress theme right because I don't like this style you know and this theme doesn't really have a lot of features and it's a little dated so let's go ahead and change the WordPress theme so let's go back to our dashboard here and we're going to go down to appearance and click on themes and at the top we're going to click add new now before we install a WordPress theme I quickly want to go ahead and talk about what is a WordPress theme and how each WordPress themes differ from one another first let's talk about what is a WordPress theme every website you make with WordPress requires a specific WordPress theme without getting too techy a WordPress theme is a general style and layout of your current website each WordPress theme has different options in the theme customizer the options can range from a header and a footer Builder different blog post layouts controlling the width of your website like a blocks or a full width or specific eCommerce features like product layouts or different shot page layouts a WordPress theme generally controls the layout and style of your current WordPress website a WordPress theme does not build the website itself but it's more of an outside shell for the page Builders and a starting point to build your WordPress website feel free to check out many of the WordPress themes to find a style that fits for you and your WordPress website so that is WordPress themes summed up each of these WordPress themes offer different features from one another now all of these themes are free however with everything all of these themes have a pro version so they might have extended features and functionality in the pro version and the free version is basically a light version right so it'll offer a majority of the features but if you want access to all the features a majority of these themes do have a pro version that you can purchase now just to get started let's go ahead and first install the Astra theme so this is the theme that I'm going to install right here let's go ahead and type it in just in case they uh I don't know they move themes around sometimes and that's really out of my control but this is the Astra theme so go ahead and click on install and then once you guys install it you'll then click on activate all right so we change the theme of our website let's go ahead and take a look at our website just to see what's happened here so now you guys can see that the entire structure has changed right so the menu is a little bit different we have this kind of gray whites and this blue scheme and also you can see the menu has like a different structure right it has this line right here with the white background and it just has a different look and feel overall now let's go ahead and access the theme customizer and just take a look at some of the options this theme offers so at the top right there just click on customize and here you'll see that we have a few options right like for example we have a header Builder with the Astro theme you guys can actually build a custom header from scratch right so a lot of themes have preset Styles however with the Astra theme you guys can actually you know kind of build your own header so you see here we have this little guy popping up we can move this over here I can add in more pages or I can add in a search or some social media icon so I'll go ahead and just add those in and then you know here I'll just drag it below so now we have three different kind of you know a rows right there so every theme does have its own unique features and it'll just be up to you to kind of go through each theme and figure out which works best for you and your WordPress website however I think Astro is probably one of the best free themes out there it's number one in the WordPress repository mainly because it's drag and drop it's really easy to use and it offers tons and tons of templates so uh yeah that is the actual uh header builder for the Astra theme but let's just quickly go ahead and switch themes really quick so I'm going to go ahead and close this box and you can see we've done some work right here right but let's go ahead and just change themes really quick just to give you an observation of what that does so let's go over here to add new here I'll type in bloxy right so Biloxi bloxy is another very popular WordPress theme here I'll click on install and then I'll click on activate now many of these themes will prompt you to install their um their plugin a lot of these themes do require plugins to make them optimal but let's just take a quick look at the websites now you guys can see that we have this different scheme style how it looks a little different and let's just click on customize here so right away you guys have noticed this theme customizer looks a lot more different in fact here they have this light scheme and a dark scheme which I really do like I do like this theme as well they do also have a header and a footer Builder where you can kind of drag in elements here so we can drag in a button right there we can drag in some social icons now here you'll see the button I think this looks a little bit cleaner than Astro to be honest but we can just rearrange these to make it look a little bit nicer now if you guys are interested in this WordPress theme I do have a tutorial on the bloxy theme this theme is very Dynamic it has a lot of options so I don't have time to go through all of them obviously but I'm just giving you guys an example that every theme has specific features so kind of just go through each theme see which one works best for you and if you guys do need help you guys can go ahead and visit my top 10 best WordPress theme video and I will leave that in the description below of this video all right so the next step let's go ahead and import a template that we can use to build and work on our website so let's go back over here to our dashboard and now we're going to go to appearance and you're going to see this Astra options now this is only available if you have the Astro theme installed so if you don't see this it's because your theme is not set to Astra so make sure to reactivate Astra and then your Astra options will be available on the right side you're going to see this install importer plugin go ahead and click on install importer plugin now it's going to prompt you right here with this little video you guys can just go ahead and skip this they're just introducing you to the theme but right here click on build your website now here we have three different page Builders now before we go on any further I quickly want to talk about what the page builder does and how each page builder is very different than one another all right let's talk about page Builders like we talked about earlier WordPress themes are the shell of your website allowing you to control the structure and page layout of your WordPress website a page builder designs the website and creates the actual website itself with a page builder you can add images texts colors rows and columns for every WordPress website you do need to have some sort of page builder in order to design the website there are several page Builders to choose from and many of these page Builders are completely free there is Gutenberg Gutenberg is the default Builder with WordPress Elementor which is the current leading free page builder for WordPress Brizzy which is great for beginners and Divi which is one of the most popular premium page builders for WordPress to be honest there is really no Best Page Builder I do believe whatever works best for you and your WordPress website is the page builder that you should choose you need to spend your own time to go through each Builder and see which one works best for you as they do I have all different styles and benefits for this video we will be using Elementor this is the most popular free page builder for WordPress with tons of Integrations templates and resources to use so to summarize that is what a page builder is it's essentially needed to build your WordPress website and gives it the overall look and style of your website so that's what a page builder is summed up right it controls all the content within your website and the WordPress theme sort of acts like a shell outside of your website now we have three different page Builders we have the default editor we have Elementor and we also have Beaver Builder most users tend to use Elementor it has the most features and it's free I will be talking about the default editor a little bit later in this video and there's also Beaver Builder which I just don't use you know you guys can try it if you want but I just don't use it that often so go ahead and click on Elementor all right and here are all of the starter templates that come with the Astra theme the reason why Astra is so popular is because it has a lot of free templates available for its users now there are some premium uh templates right here so you guys can see there's this sticker that says premium so those you guys will need to upgrade to the actual pro version but you guys can use a lot of these templates available in the free version of Astra but uh let's go ahead and scroll up right here and we can go ahead and categorize these templates right so we have business agency hotel and travel local business and you guys can go ahead and pick a category that can help you with your website so I'll just go ahead and click on agency right here and it's going to filter all the templates by agency so I want to install this Roofing one right here so even my dad he's in the roofing business so here we have the roofing agency I'll just go ahead and select this one for now so once you guys select the templates don't worry you guys can always select another template a little bit later and I'll show you guys how to reset your sites where you can install every template from scratch here is a logo uploader so if you guys do have a logo you guys can upload it right here if you do not have a logo yet don't worry you guys can do this later and I'll also give you a really good resource on where you guys can get a premium logo for your business but right here let's click on Skip and continue now what I like about Astra is this new Option of changing the colors because you know this is like a burgundy color right and you know burgundy with Roofing doesn't really go well right so we can change the actual scheme of the website right so we can go ahead and pick these different colors and if you guys notice right here it'll go ahead and apply throughout your whole website so you guys can go ahead and pick a color scheme that kind of represents your business you guys can also do this with fonts as well so you guys can go ahead and switch this between different fonts on your uh on your website I'll go ahead and just select Poppins for now and I want to select the blue color you know I think for construction blue makes the most sense if you guys are like in the Echo or you are in the finance sector I guess green would make more sense because that deals with money but I want you guys go ahead and select a color and a font you'll click on continue now here they just want a little bit more information about yourself I'll say my name is Daryl all right here is the email you guys can choose to sign up for their newsletters if you guys choose to do that it's not mandatory but I'll just say I'm a beginner with building websites for myself I want to make sure that all this is selected so I want to select the customizer settings the widgets import the contents and this is up to you this is sharing non-sensitive data this just helps them if there's like crashes or glitches it'll help Astra improve so you guys can you know leave that checked or unchecked but right here let's click on submit and build my website right now it's going to import all the demo content and it's going to install any necessary plugins to create your website all right so the website has been created for us we got this congratulations little uh banner and this guy is saying yeah thank you so uh but we can leave this right here by just clicking on view your websites and here we go so now you can see that our website looks fantastic right it looks great we have this landing page we have all the content here that is set and everything looks fantastic so you guys can just go ahead and scroll down take a look at your websites make sure everything looks good and but as of now this is your new WordPress website and it looks great now there is one thing that I do want to talk about really quick and that is the home page many of the times when users actually create the home page they create it as home and that might cause an error so if you do get that error all you need to do is just assign the new Astra home page as your default homepage if you guys don't see any errors no problem but I'm just going to go ahead and walk you guys through maybe you've got like a 404 error or like oh this page does not exist you'll go down here under home page settings and you just want to make sure that your home page is selected to the Astra home page because if I click on home page this is the page that we created right and there was nothing on that page so you just want to make sure that the home page for the new astro template is selected and it'll be displayed right there so that's you know that's that but I'll go ahead and click on publish and I'll close the theme customizer all right now before I show you guys how to use the page builder I quickly want to go ahead and talk about how to make blog posts right because maybe you're a blogging roofing company and you want to create blog posts right let's do that up here we have plus new let's create a new page and this is going to be our blog page so this is going to be the page where our blog posts display and this will be blog right just just blog there we go keep it simple keep it simple and then here I'll click on publish and publish and let's go back to our website so let's click on the w and let's go ahead and click on visit sites now whenever you guys make Pages for your website you will always have to add them to your menu because you notice how we have that blog page that we created it's still not on the menu so we need to go ahead and assign any page that we create to the menu so let's do that let's go back over here to dashboard appearance and then we'll click on menu again you guys can close these notices these are just the themes and the plug-in companies they're like begging you like please give us a five star review you guys can't do that if you choose to do that but um yeah I'm just gonna close it you know I love Astra I love the guys over there the owner's a great guy I've met him but I I've already given them a five star you know it's like stop begging stop begging geez so uh here you can see on the left side we have pages right let's click on view all and here is our current menu so right here we have blog and then add to menu you guys might also notice how we have duplicates right we have the contact us and then we have contact us Elementor the reason why we have a copy of the about us and the contact us is because we created the about us and the contact us however the Astro theme already created another page called the about us and the contact us so I'll show you how to delete that in just a bit but uh I'll go ahead and just move this up here right there and click on Save menu all right so we added those to our menu let's go back over here and go to pages and click on all pages so here you can see we have contact us Elementor because remember Elementor is a page builder that we are using to create our site uh here we don't have anything right we created the page however there's nothing really on it so here I'll click on view and you can see how nothing's on this contact us page right but also click on this contact us with Elementor and this is where all the content will be on our contact page so if you guys ever want to just delete a page just go ahead and click on trash and that's how you guys can delete a page right so also we have the sample page we can get rid of that one this about us page right here we're not using it so click on trash now if you guys do want to actually see the pages that are in the trash can which is your recycle bin you'll click on trash you guys can always restore these Pages at any time if you choose to do that or you can just delete them permanently so essentially this is just a recycle bin for your pages all right so next let's create a blog post right here we have posts and let's click on add new so this is going to be the name of your blog post like 10 things men love about I don't know woman that's a great title right so that's very controversial so people would probably click on this right and this is going to be the demo content now what is the image that represents this article well we need to assign it so over here under post we'll go ahead and click on featured image and featured image is the actual image that represents this blog post so right here I'll click on set a featured image and here we have media library now Astra does also upload all the images to your server however with Astra we can actually use the images from a website called pixabay so here we have free images right and we can go ahead and insert images that relate to our article so this would be like uh no we put men right I kind of like that bird that's a really nice image I like that bird but uh here we go this is good this is a good one a nice manly uh you know image right there so this is the image that represents the article however you guys might also want to create categories for your blog posts right so for the category I'm going to create a new category called dating right this is the dating category maybe you're running like a dating Roofing website I don't know you know or we just put Roofing whatever but I'm just explaining to you that you can create specific categories for your blog posts so let's click on publish and publish now before we go to this actual blog post let's just go back to our website here and just make sure the blog page was displaying so let's go back to visit site here all right so you'll see that we have this blog right here so we'll click on blog however you guys might notice here that the blog is empty and the reason why the blog page is empty is because we need to tell the theme that we want the blog posts on this page remember earlier how we talked about that so let's go back to that let's go back to our dashboard here we'll go down to settings and we'll click on reading here we have post page so just assign the blog page as the actual page for your posts and then click on Save changes we can now go back and visit the websites and then we'll click on blog all right cool so here we go we got uh 10 things men Love About Women and then this is also the default post that comes with WordPress so let's click on this article here all right the image is a little big maybe we didn't have to use such a big image but uh here we have the article we have the content and people can say great blog posts and then click on post comment and then anyone that visits your website they can then leave comments and they can register on your website you can always adjust the actual comment settings in the back end of your website by going to the reading section in the general settings so let's just have a quick rundown before I go on to the actual page builder so here we have posts right and all the posts will that you create will be displayed right here this is the default post with WordPress so we can just go ahead and trash this you know we don't need that here are the categories and everything else next we have the media section now whenever you upload anything to Wordpress all the images will be displayed right here it's just more of a big folder and a database to hold all of your images you guys can delete images from your database at any time by clicking on the image and then clicking on the delete permanently button right there and that will delete the image from your server next here we have the pages section so these are a list of all of your pages right now whenever you create a page or you're using a page you guys can go ahead and sign that page on your menu okay so just remember when you add pages you need to assign them to your menu next we have comments so you'll see here how we have a comment from a user right so that makes sense I commented and people can comment on your blog if you choose to have that option here we have Elementor now this is the actual page builder and this is the actual templates in this video I'm not going to cover the theme Builder or you know the technical developmental works I'll be making a whole nother video on the Elementor page builder for another video uh this right here is a form Builder so this is a plug-in that was installed automatically uh using the Astra settings we'll talk more about this plugin in just a little bit it's not um you know this is not a default WordPress function this is only because we installed a a plug-in here we have appearance now again you guys can go ahead and switch between themes at any time if you guys do want to adjust the actual starter menus or the startup templates you'll just click on starter templates here and this will bring you back to the screen where you guys can import another startup template on your WordPress websites so the next thing is the actual menu right here so menus is again this is the actual primary menu of your website so this is the menu for our websites now remember earlier how we created our own menu the primary menu here click on primary menu and I'll click on select now this is the old menu that we created when we first used WordPress but we don't really have to use this menu anymore because obviously we don't use the about us page the contact us page and we've already had this other menu that the Astra theme created for us so to delete a menu just click on delete menu and then click on OK now here we have the primary menu right so if you guys do want to add custom links to this menu all you have to do right here is click on custom links you know this can be your Twitter right you know or your Facebook or whatever and then Twitter or I don't know sorry here we go hold on I'm tripping out guys here we go Facebook you know whatever Facebook so this can be like your social profile to Facebook whatever and you can always add your pages to your menu you guys can also add posts to the menu as well so remember earlier how we created that post for our blog you guys can go ahead and add that to your actual menu you guys can also add in the categories for your blog which I think makes more sense so if you want to turn your website into like a Blog you can just click on The Dating category and this will take the visitors of your website to every blog post that you create within the dating category makes sense pretty cool right so I want to capitalize this really quick there we go that looks better right so that looks a lot nicer right so let's go ahead and click on Save menu now we'll be talking about widgets in just the bits but first let's click on plugins right here and then we're going to click on add new now before we start adding plugins let me first explain what a plug-in is and how it can help increase the functionality of your WordPress website what is a WordPress plugin a WordPress plugin is an add-on for your WordPress website think of a plugin like applications for your smartphone with plugins you can extend the functionality of your existing WordPress website for example you can turn your website into a booking website an e-commerce website a hotel booking website or a car dealership website there is virtually no limit on how flexible you can make your WordPress website and this is why WordPress has become so popular over the years just a tip don't install too many plugins like more than 15 because this can have an impact on the speed of your website lowering the performance if you have too many plugins on your website you might find yourself getting errors and glitches on your site so to summarize a plugin can give your website additional features and extend the power and the functionality of your WordPress website and this is why they are essential to Wordpress so that's pretty much what plugins are plugins are applications for your website so for example right we have popular this is a contact form this right here helps you with SEO the woocommerce plugin this will actually turn your website into an e-commerce website the really simple SSL plugin this actually gives you the green padlock on your website if you're having issues this is a security plug-in this is a migration plugin I mean there are over 50 000 WordPress plugins out there however the one plugin that you guys should always have on your website is the lightspeed cache plugin go ahead and install this plugin caching is great it helps beat up your websites and it actually cleans up the cache from your site so I'll go ahead and activate this plugin and whenever you guys install a plug-in you guys might notice that you might see it on your dashboard or you might get another option for on the left side so whenever you install any plug-in you'll see that an option for it should display somewhere within your WordPress dashboard now one quick tip guys is do not have too many plugins if you have like 20 plugins on your website your website will start getting random errors and it'll also get very slow so just be mindful about installing too many plugins on your WordPress website so as you guys are using Wordpress feel free to explore all these plugins on your own free time I do have a video on some of the best WordPress plugins as well like for example uh smush this is actually a pretty cool plug-in this will actually reduce the image sizes of all the images on your website so it loads faster this one right here is an optimization plug-in this will delete the comment section from your website if you want to do that this is a cookie notice some countries do require a cookie key notice and a gdpr believe Europe does require the gdpr notice and there's just a lot of other plugins to go through guys I mean a social feed and to be honest I have not used all these plugins I really can't speak for all of them but uh there's just so many of them and I love plugins I mean they're great I mean this is a great plug-in rank math I have a video on that one as well and there's just some other really cool uh plugins to choose from so feel free to explore plugins on your own time however the contact form that we are using here is called WP forms and this will allow contact forms on your WordPress website so right here you'll see you have WP forms right and here we have all forms and you might notice that there's two forms now WP forms will create default forms for you automatically so right here I'll click on simple contact form and this is the actual contact form on our sites now you guys can actually drag and drop more elements onto your contact form so for example if you want to add in like a paragraph text we can drag that there you know and then you can change this to like you know tell me about yourself something like that I don't know maybe you're a boss and you uh you know you have an interview box or something and you can make this box required right so they must fill something out in order to continue but I'll just go ahead and save this box or save this contact form now since we created this form the Elementor page builder actually integrates very well with this contact form so I'll just go ahead and close this and let's go back and visit sites and then we'll go back to the contact us so let's go ahead and scroll down here now this is the contact form that will be displayed on your website so enter your full name tell me about yourself your phone number your email and anything that you adjusted on that contact form will automatically be applied right here now we will be talking about how to create your own contact form and how to design the websites in the last section of this video but I just want to demonstrate this is where your contact form will be displayed all right so lastly we're going to be talking about page Builders and how to design the website using the Elementor page builder now I quickly want to go ahead and just give you a small overview about page Builders before we jump into the actual page builder itself now there are various page builders in the industry you know for example there is the Brizzy page builder this is another free WordPress plugin that you guys can use and you guys can see here they do give you a preview of the actual page builder Brizzy is a very popular page builder it's free and you guys can access it in the WordPress repository which I'll show you in just the bits there's also obviously Elementor Elementor is another free Builder and with all these Builders they do have a pro version so they give you like a small little preview of the page builder but if you want like the advanced features and the good features there is a Pro Plan for all these free page Builders there's also Beaver Builder as well this is another free page builder and you can always purchase the pro on their websites and last there is the Divi theme which is only a premium page builder so this is not available in the WordPress repository however it's a very popular page builder I think in fact right now it's the most used WordPress theme in the world I think so I think Astra and Davey are definitely top two but it does have its own builder and you guys can see it's really easy to use but uh I have a video on this and we'll talk about this another time but I'm just introducing you all to the different page Builders with WordPress now if you guys do want to access these page Builders you guys can go ahead and install these on your website so right here under plugins I'll just give you an example here under add new we can type in Brizzy right b-r-i-z-y and this is the actual page builder so you can always start out with the free version and then later on you can always purchase the pro version there's also Elementor right so you can just type in Elementor right here and here is the Elementor website builder you can see the active installs and the review for each page builder so that might help you make a decision and then there's also Beaver Builder right there's Beaver Builder as well which is another very popular page builder it's right here it has 200 000 active installs and there is one more that's kind of new that some people use I don't use it too much and that is WP page builder uh which is I think it's down here somewhere right wvp page builder with 10 000 active installs there is also the site origin page builder this page builder was very popular back in the day however they've been depreciated since then a lot of people have stopped using it because this was like the original OG of page Builders but later on more competition came out and they were sort of Left Behind so that's a quick little rundown of Wordpress page Builders you guys can switch between page Builders but if you do your website might break and the contents you'll have to basically remake your website so just be mindful that if you do switch between page Builders generally the website will break and you'll have to kind of reconstruct it with the different page builder all right so now that you guys understand the page Builders let's quickly go ahead and talk about how to use the Elementor page build folder so at the top right here I'll click on edit with Elementor alright so the Elementor page builder works like this right where you can go ahead and drag in columns and elements onto your website so for example right here we have the content that was uh created for us automatically with Astro we can go ahead and change this right so I'll put we are you know the best roofing experts on the internet internet something like that and if I want a little space here I can just you know put in a little space and then it'll go ahead and apply right there and with the Elementor page builder you can go ahead and change the alignments right we can kind of move it around like the middle also right here I can click on this element put it in the middle and then click on this button here and also align that in the center so if you do want to have like that sort of approach you guys can go ahead and do that but let's say for example you want to add in more elements right so here we have the text editor I'll just drag in this text editor and when you see that blue line you can just drop it right and for every element on the left side you'll see you have content right now the content tab this controls the actual contents of the actual elements the style tab this controls the alignment and also the color and the topography for example if I want to change the color you'll see all I need to do here is just change it to whites and then I can Center that and then also here we can adjust the top right so we can change that to something else now the advanced tab this is where you would adjust the padding and a lot of these other motion effects for example I will unclick on this little link values together and I want to add padding now padding is space right so the more space or the more padding that you have the more space it creates you see how it's creating a lot of space so if I want to add space on the top and the bottom all I have to do is just increase the padding and then the page builder will create space above that just to make sure it's not so cluttered and next to each other right so let's go ahead and scroll down here and we can keep adjusting this right so for example uh here we have these images right but let's say for example I want to put in my own image right I'll just click on the image click on choose the image and then here I can upload my own image right here by clicking on select files and uploading my own image or I can use the pixabay right the free images here I'll just type in Roofing maybe that'll give us something good here they also do have a safe search guys because this site does use like nude models sometimes so so if you're at work you know and you're looking at like you know that image pops up behind your co-worker they're going to be like dude what the hell are you looking at you know and that could be bad you know but uh here we go so let's type in roof here maybe that'll give us a better all right here we go so we got this guy he's he's a roofing right we got this guy right here so I'll go ahead and click on insert media and I'll see how that image displays on our website now I can also click on this image here and I can adjust it as well so I'll say you know what instead of uploading a new one I'll just use this one here you know there we go or actually that one doesn't fit too well we'll go ahead and so let's say for example we want to add more stuff onto the site right so we can just take this heading and I can drag and drop I can also put it below the image here and just put like uh you know your new home or something like that now let's say for example you know we have all a lot of this stuff right here but let's say for example you want to add in your own section right here I'll click on this plus section and first let's click on this little folder so Elementor does offer free templates as well they do also have some templates in the pro version but you guys can use some of the free templates that elements or offers they do also have blocks as well now blocks are free blocks that you guys can add on your sites however you guys will need to sign up and connect with Elementor but it's all for free so what I'm going to do here is I'm just going to go ahead and insert one of these blocks so I'll go ahead and put in this one right here I'll click on insert and now it's going to prompt me to sign up with Elementor so I'll go ahead and quickly click on get started and I will log in and then I'll click on connect all right so now you guys can see that we have the content but they made the video private but not to worry we can just always put in our own URL from YouTube so over here I'll click on YouTube now this video right here I'll put this in the description uh this video actually shows you how to use Elementor step by step it's about an hour and a half long and it covers all the basics from Elementor from the beginning all the way to the end so I'll go ahead and copy this video and I'll go back to the main website here and I'll go ahead and paste in that URL so I'll just paste it in there so now we'll go back to the websites and I'll click on this little pencil icon and here I will paste in my YouTube video and there you go so now we added in the YouTube video right there on the websites so you guys can go ahead and go through each of these elements and then just keep dragging and dropping these elements these are the pro elements but you guys do not have to purchase the pro version I would recommend just to use the free version you know just explore some of these options like for example this little icon box where you know you can adjust things as you're liking um but yeah if you guys do want to delete elements remember just right click and delete you guys can also clone elements and clone rows for example I will right click on this whole row and click on the duplicate section and this will just duplicate the entire row and I can always just go ahead and delete that as well now you can always duplicate just columns as well so you don't have to duplicate the entire row but maybe you just want to duplicate one section right you can always do that as well and then also delete it so you'll just go through the website and change things to your liking so for example if you want to change the color right here I'll just go to style and then for the color I'll change this to like red you know or something like that so everything's really done for you it's just up to you to just kind of go through each of these little sections and adjust it to your liking now I do want to talk about the contact form so on the home page here you can see that we have this contact form and we even have this element right here called WP forms remember earlier how we created that contact form go ahead and type in WP forms and I want to delete this one here I'm just going to delete it and here we have wforms right and I will just drag this in here now here we have select the form remember earlier how we created that simple contact form I'll just go ahead and select that form and then it'll display right here so when you do create contact forms you guys can use the wp forms element and drag them onto your website to adjust the contact form and put it anywhere that you want on your site now once you guys are done building your website you guys will just click on this update Tab and then on the burger menu up here we'll click on view page all right and there we go so now you'll see that we have this beautiful websites everything looks great and all you need to do here is just add in your images change the colors and the fonts to your style and you are all ready to go let's go ahead and take a quick look there we go so we got the YouTube video there looking good and then we have our contact form everything looks great so let's go ahead and scroll back to the top of the website now before I let you guys go I want to talk about the theme customizer one more time and also how to reset your WordPress websites to factory settings just in case you want to install all a new template so the top right here let's click on customize and here we have the global setting now you guys can go through these options on your own time but if you ever want to change like the color palette of your website you guys can do that through the theme customizer remember earlier how we had those options you guys can go ahead and adjust them right here to fit your liking so you guys can change the color palettes or change it back to whatever color that you want on your sites also if you want to build your header up here we'll click on a header Builder and here you can always adjust the header now I will be having a fun other video on Astra because as you guys see this is very Dynamic and we can easily talk about you know every part of this website for at least another hour but some of you might not need it so I'm not going to really cover it but I'm just showing you where you can go ahead and just you know drag and drop elements here like for example we can add in a widget or something like that or another menu or something and we can always rearrange this so if you want to move the site title you can just move the title there right and so on and so forth now we also have the same option for the footer Builder so I'm going to scroll down to the bottom of the page here and here we have the actual footer Builder so the footer Builder works the same way right so here we have widget one now what widgets are guys widgets are essentially just little features that you can add on specific parts of your website so for example here we have we have a widget four right here I'll click on got it and here we have this plus icon so these are widgets right so we can add in a paragraph we can add in a a gallery an image or any of these things to our specific footer however the Astro theme does do a really good job at creating a preset footer for us but let's just say for example you want to add in like an image on your footer right so here we have our media library I'll just put in this uh I'll put in this little you know this to text right here right and there you go now you'll see that we had we have this little uh logo right there right but let's say you want to add in something else right let's add in a video or something right or I don't know here we'll click on browse all and then uh here we can go ahead and just click on video and insert that to URL I'll paste in my uh my YouTube video and there's the YouTube video so you guys can do this for every column right so we have four different columns we have widget or column one two three and four so you guys can go ahead and add in more features and move stuff around to your liking and if you do want to add in more widgets just click on the plus block where you can add in more blocks to your footer and we can go back over here now whenever you guys want to change anything on your site like the blog itself this can all be done through the theme customizer so let's go ahead and scroll up here and go to the blog now here we have the blog right but you might as might notice maybe you want like a different style right so right here under blog we'll click on single post and here we can go ahead and change the design so here we have our blog right but uh let's click on blog archive now we can go ahead and design this stuff right so maybe you don't want to have the featured image right I click on this little eye icon and this will hide the actual uh the blog featured image right we can also choose to hide or add stuff right here so this section right here just kind of controls the actual archive page which is the blog over here under custom we can change the custom width of this so if you want it a little bit smaller you guys can do that and then also we have this design tab the design tab here will adjust the fonts and the post title font size as well now let's say for example someone actually clicks on your blog post right so they click on it how would we design this well we'll go back right here to single post and this is again the same option so you guys can make make the font bigger and we can always go ahead and adjust the actual um you know we can even get rid of the featured image or you can adjust the size of it or get rid of any of this other stuff if you choose to do that so the single post just controls a part of your blog post where you would make your blog posts all right so feel free to explore the theme customizer guys on your own time um again I'll be having a full another video dedicated to every setting but as you guys can tell it can get quite long so I don't want to make this video too long but just make sure to check the description where I may have another tutorial on the Astra theme so once you guys make the changes you guys will then click on publish now let me quickly go ahead and show you guys how to reset your WordPress website just in case you want to start over right because sometimes you're working on stuff things get really weird maybe you might get errors and you're like oh my gosh Daryl I just want to start over no problem over here under plugins we'll click on add new and all you need to search for is the reset plugin now I do want to warn everybody once you do this your website will be gone forever so just be mindful about that so you can't get anything back all right I just want to make that very clear but this is the plugin that I use right here it's called WP reset so you'll just go ahead and click on install and then you'll click on activate once you install this plugin we can then use it by going over here and clicking on plugins and then you'll see WP reset and then I'll click on open reset tools and then we'll scroll down here and then we're just going to type in reset so under site reset just type in reset here reset I'll click on reset WordPress and right here it's saying are you sure you want to reset the website so all the content will be lost just be mindful about that but I'm going to go ahead and say yeah I'm done I'm tired of it we're we're checking out you know we're gone so there you go and if we go back to our sites you'll then see that the WordPress website has been reset and it actually installed a theme called 2022 which is the new WordPress theme that will be coming out very soon but uh if you guys do want to go ahead and activate themes again just go over here and click on themes and then you can go ahead and find the theme that you're using and start all over again from scratch all right and the last thing I want to show you guys is just give you a quick overview about the default WordPress editor so right here I'll go ahead and activate Astra again and I'll go ahead and import a starter template so right here I'll click on get started now go to the process one more time and I will import another starter templates however this time I'm going to go ahead and use the block editor so block editor and let's just install something very simple right let's just install this Outdoor Adventure I'll click on this one we will Skip and continue and then I'll just click on continue I'll fill this information out and then I'll click on submit and build my website now while that's installing I do want to introduce you guys to Fiverr if you guys do need a logo for your website this website can make logos for very cheap you'll just type in logo right here and these guys can make you a logo for a little as like five bucks it's really cheap but um for example we'll scroll down here and we have logos under 20 uh premium logos and then you know top rated Sellers and they can make some really nice logos for your website because I know it can get really hard at times you know getting inspiration and ideas uh for your logo you guys can also use placeit.net this is also a really cool logo maker where they'll just get some information about your logo and then they'll go ahead and propagate several different styles of logos for your sites these look a little gamey but uh don't worry they can make some for Tech websites they have tons and tons of logos for you guys to choose from so I would highly check out placeit.net and also Fiverr these are like paid websites but you guys do not want to use free logo makers because you guys can never copyright those logos so they're virtually useless so uh get your own logo you know copy it or copyright it patent it make sure it's yours but never use free logo makers because those logos can never be copyrighted and they're not yours because remember thousands and millions of other people are using those same logos but anyways let's go ahead and go back to our website right here and let's click on exit a dashboard and here I will click on visit sites alright so now we have the website up and running but this time let's use the default editor with WordPress so right here I'll click on edit page and I'll go ahead and close this Now the default editor is a little clunky you know it's developing and over time I think it'll be a great option for a page builder but at the current time of making this video I don't think it's that great and you'll see why all right so let's go ahead and introduce you guys to the default Builder with WordPress now uh here we have this website right and let's say you want to change the text so I can put like my amazing websites and like Elementor has that right column section Gutenberg does as well which is the default editor here I'll click on the uh I guess you want to call the toggle blocks and here you guys can add in more blocks right so let's say for example you want to add in like a text below this text I'll click on the plus and I will take the paragraph and drop it below that and then this is where you'd enter in your text so this would be text now we can't see this text because it's black over this kind of like this blackish darkish background so over here under the actual block section we have color and we can adjust the color so we have we have this white color now and then we can also align it right so we can align that to the center and we can always bold it right we can bold this we can italicize it and let's say for example you guys want to move it around here we have these arrows and you can put this above it or below it and the text Will kind of move around there so instead of dragging and dropping you guys can use these arrows as well alright so let's go ahead and add in another element here so uh here we have like an image right we can go ahead and take this image and drop it right there and here we have the same option right we can upload our own image media library or we can insert from URL but I'll just you know grab the image Library here and I'll just put in something small right like this uh like this text right all right so next what I'm going to do is I'm going to move the alignments so I believe it's right here we can move the alignment to Center something like that and there's some other options on the right side so for every elements you do get a little bit more options like you can make this rounded or default or something like that and yeah there's just some general styling options for every element so let's click on this plus section now I want to introduce you guys to patterns so patterns are just basically new features that they have added for the Gutenberg Builder so there are a lot of patterns which you guys can add if you want to build your page from scratch now I think a better way of showing you how this works is by creating a new page so let's do that so I'll go ahead and go back over here and click on leave page and I'll just add a new page just so you know just so that we can work on the patterns from scratch because I showed you guys a little bit how to edit everything so those will just be like a demo right and over here I'll click on the plus again we have patterns now here we have some patterns right so for example we can go ahead and insert some of these patterns like for example I'll click on this event one and drag it right there and then if I want to add in some more patterns I can go ahead and say all right I want this three columns right there and then below that we can kind of add in something else right like uh I don't know like these flowers and then below that we have these boxes right here where we can go ahead and drag and drop right there okay and then we can go ahead and close it so now we can see that we can edit this according to you know how we want this to look so this can be like you know my new website and we want to make sure that we adjust this color right here so under the color section we can change this to something like whites like something like that and then you guys can also add in more elements inside of this so here I'll just grab an image right here and I'll put it below the RSVP under the media library I will just select a quick image just something small right just so we can see what's going on here so here we actually have the image and you know I can go ahead and change alignment to the center or to the right as you guys can tell it's it's you know it's it's so so you know the Builder is getting better and I think over time it'll improve but there are some limitations to it like I want to put it in a specific area but to do that with Gutenberg it is a little hard like you can but it's definitely challenging uh then right here we can go ahead and change this text to whatever we want and we can bold it italicize it and then remember you guys can always add in any images or any elements below this section right here so next we'll go ahead and keep scrolling down here and you guys can obviously change these to whatever you like now there is one thing that I do want to mention and that is to add in a new row and column so for example right here here let's say you want to add in more stuff but you don't want to use the patterns let's just click on this plus section here and under browse all we will then find the columns and columns will select I don't know three by three by three right something like that and here we can add in more blocks right so here I'll click on add a block media and text Library contents and then we can add in like an image right here and then this is content so as you guys can see I'm not a big fan of this editor just because I feel like it's a little clunky and it's just not ready yet to have that full-on website experience so personally if you guys are going to ask me which Builder to use I would highly go with Elementor even myself I'm very I'm not an expert on this Builder because they constantly change it every few months and it makes it hard to adapt to so uh personally for beginners I would definitely go with Elementor if you guys do also want to check out Brizzy Brizzy is probably one of the fastest Builders out there I mean you can quickly use this block section and build a website in like five minutes it's a great Builder if you guys do want to spend some money I'd recommend Diddy for beginners it is one of the best Drag and Drop Builders out there for WordPress and I do have a tutorial on this Builder as well alright party people thank you guys so much for watching I do want to give you guys some parting videos to look out for so if you guys are looking for like some of the best WordPress themes I would highly watch my video where I really went in depth and I tested out like the top 10 best work press themes that I made a video on it a lot of people found it very helpful so I'll leave this in the description for you guys as well because finding a theme can take some time you know it's a lot of trial and error and stuff it's gonna be quite annoying next I have a video on the page Builders and how exactly they work so here I give you a visual example of how each page builder works so if that's something that you want to check out again I will leave this video in the description next I have a tutorial on the Divi theme so if you guys do want to use Divi which is a great page builder I'll go ahead and leave that tutorial in the description if you guys choose to use Divi to be honest most beginners tend to favor Davey because the dragon drop Builder makes it really simple to use and it's very visual so a lot of beginners love it I also have a video on Elementor so this video shows you guys the step-by-step guide on how to use Elementor Elementor is probably the most stable pageable they're out there it also has the most Integrations yet it can have somewhat of a learning curve but I think it's suitable once you spend about an hour using it you'll get the hang of it real fast and then also right here we have a video on the Brizzy page builder which shows you how to use Brizzy which is that other one I showed you earlier and also if you guys do want to watch a video or you want to know about the best WordPress plugins out there I have made a video on that and I will leave that in the description below of this video so I truly hope this video helped you guys out hopefully this WordPress tutorial really put you in the right direction on how to use WordPress if you guys have any questions for me feel free to let me know in the comments below so as you guys can tell WordPress is really simple to use right you have various drag and drop pillars to pick from you can reset your site and with plugins you can pretty much do anything so it's really incredible what you can do with WordPress if you guys have any questions for me about page Builders or themes let me know in the comments below I've also put the videos like for the plugins the page Builders and the themes in the description below this video because if you're a beginner it's kind of overwhelming on where to go but trust me watch those videos and that will definitely put you guys in the right direction all right party people this part of the video I'll be showing you how to import the free Elementor toolkits onto your WordPress website now we have created uh three more tablet kits specifically for this video however we do have tons of template kits that you guys can use me my designer we spent a long time creating really nice design kits for you guys and you guys can use these for free on your websites or on your clients websites absolutely free with no cost whatsoever there's also no restrictions so you can use this on as many websites as you guys choose to do that and we do this because we want to provide value and help out beginners we just need some you know some small creativity uh when creating websites now in order to access these toolkits you guys can go to my website derwilson.com right here and click on view layouts once you do that it'll prompt you to select either the elements or templates or the Divi theme templates go ahead and click on Elementor templates I will be adding more Divi theme templates a little bit later guys and here are the toolkits that you guys can use now for this video I'll be first showing you guys how to use the free version of these tool kits and then I'll be showing you how to use the pro version so let me explain the free version you guys will get access to a lot of the content on the actual layout right so you guys will get all the pages all the content however the pro version gives you access to like the menu the footer the theme Builder options for Elementor so I'll go ahead and walk you guys through on how to import the free version and also for those of you who decided to upgrade to the pro I'll show you guys how to use the pro version as well now for every template kit that you click on you can actually view the demo website right here so I'll click on check out the demo websites and this is the actual website that we're going to show you how to import and you guys can see it has all the uh you know all the content has the header the footer and it's just a really clean and nice looking website that you guys can use for your web design business also so if you guys do get any errors right here you'll click on here has how to import the kits so you guys might get some small errors down the road but I'll walk you guys through on how to prevent those errors in the next section and for those of you who want to upgrade to Elementor Pro you guys can click on the Elementor Pro and you guys can purchase the Elementor Pro if you guys should do that we monetize these layouts by you know creating free layouts and we hope that you guys use our link so that we can continue to pay our designers and keep putting out more and more template kits for you all now personally I would just go with this 99 a year plan if you guys choose to upgrade to the pro you don't have to it's not mandatory but I find that most beginners buy the 99 plan uh this one right here it's about 200 it is a little bit more but it does give you access to 25 uh websites so let's go ahead and just show you guys quickly on how to import this toolkit so I selected the arise toolkit and at the bottom right here I'll click on add to cart all right now click on view the cart I'll scroll down and click on proceed to checkouts all right and then right here I'll go ahead and click on place order once you put your first name and your email address a copy of this will be sent to your email address as well so right here I'll click on place order all right and now we'll go ahead and select the arise kit and once you click on this download right here you will then see that it has downloaded onto your computer and it'll be in a zip folder so don't open it just leave it as is now that we've actually downloaded the kit now let's go ahead and go back to our WordPress websites so here's my WordPress website and it's a blank website right there's nothing on this you can see it's using just like a default theme I'll go ahead and go to dashboard right here and the first thing that we want to do is make sure Elementor is installed obviously so for the installed plugins you just want to make sure Elementor is active I'm not going to activate the pro just yet this section right here I'll just close this this is like this new Setup Wizard they have but all I have right here is the Elementor installed now before we actually upload the kits I just want to adjust two settings that might cause errors uh for this thing to upload so right here under the settings you'll see that it brings you to this page you'll then click on Advanced and you just want to make sure that this section right here is enabled all right so make sure this is enabled and then click on Save changes now there could be one small other issue that may cause the toolkit not to import and that is memory limits so I'm going to go to my hosting right here now whatever hosting that you guys are using you guys can ask your host to adjust the memory limits but I'll just go ahead and show you guys how to do it in cpanel because name hero and a lot of these companies like hostinger and Bluehost a lot of them use the same cpanel right here I'm going to type in PHP all right select PHP version okay all right go to options scroll down and I just want to make sure the memory limit is set to 256 or better sometimes when it's set to like 128 or lower sometimes it doesn't import and you also do get white screens that does happen sometimes and I find that 256 memory limit does help prevent these issues so once you have done that we will then go back to our go back to our little uh section make sure you save this right here and now we're going to import it now before we import it I just quickly want to talk about themes to use right so over here we're going to go to themes now if you guys are using the free version of this toolkit I recommend using Astra Astra is a great theme that works with the actual free version of these toolkits however if you're using the pro version of these kits I recommend using hello Elementor the reason why is because hello Elementor is more of a blank sheet and it allows you to add the header and the footer very easily however the free version of the toolkits don't have the actual header and the footer options so I think Astra is a better fit for that because then you can create your own header and footer with the actual Astra theme Builder so right here I'll just click on activate for Astra all right go ahead and close this now let's go ahead and import the toolkit so over here under uh Elementor we'll go down to tools all right import kits here we have import a template kits I will start the import and I'm just going to select that file and I'm going to now uh just drag and drop that what is it the Orion or the orias right Aria's kit all right so I think the one I download was here I don't I don't have quite a few you guys can you guys can see that right so here I'll just click on open now here they're saying you have to go pro for this but we're going to use the free version in this example so I'm going to close that and then click on Imports so now it's going to go ahead and import the toolkit for us all right and once that's done you will see that your kit is now live here I'll click on close okay now let's just go ahead and take a quick look at our sites and you'll see that we have the menu up here we have this logo and then we also do have the actual toolkits and it's a little uh compact right now we just need to change a few settings for this just to make it work so I'll just go ahead and walk you through on how to do this the first thing that we want to do is we want to go ahead and adjust this menu so over here under appearance we'll go down to menus and then we'll go ahead and create a new menu so this will be like the main menu right I'll create a menu and I want to go ahead and click on view all and I'll just select the pages that I want right here so we have our team blah blah blah and there's a lot more that you guys can add I'll just click on add to menu and this will be the primary menu and I'll click on Save menu all right and we'll go back to visit sites now see that the menu looks a lot better right it's more compact everything looks great now the next thing that we need to do is we need to adjust the actual page width so this is actually contained that's why it looks like that so right here just click on customize all right and for Global I just want to make sure the container is set to something like full width stretched and then I'll publish we can also get rid of this menu or sorry this logo it's really big right so I think under the actual header Builder we have the site title and Logo now I'm not going to go through Astra verbatim I'm actually going to save this for another tutorial because Astra is a very popular theme and a lot of users are asking me how to use it more often but I'm just going to go ahead and quickly set a logo here all right and I'll crop that image and voila go ahead and reduce the size of this a little bit too big right make a little bit smaller and we'll also get rid of that tagline right so there you go now we have a beautiful header right there it makes sense and the website looks great and we can go ahead and check out all the pages right here so here's the home page the about us page we can scroll down and we can see everything is propagated and everything looks great so here's the career page and yeah everything looks great so that's how you guys can import it again for the free version I do highly recommend to use the Astra theme because then you have more control over the header and the footer option but uh now that I've showed you guys how to use the actual free version Let Me Now talk about how to use the pro version of this toolkit all right so let's go back to our dashboard here so I'm first going to go ahead and activate the Elementor Pro so now activate Elementor Pro I will then connect and activate this all right cool so now the pro is activated now for the appearance I'm actually going to switch over here to the actual hello Elementor kits now remember guys if you guys are switching between themes don't worry the content will not get lost it's just switching like the shell you know the outer part of the website so if I go to visit sites the website will still be here it's just uh obviously the header and the footer are going to be a little bit different all right so now that I've actually done that what I first want to do is I'm now going to upload the template kit again with those actual settings that we missed earlier so over here let's go to the Elementor and I'll go to tools import a kit I will start the import I will select the same file which shows the arise right arise here we go now I'm just going to do the templates part because we've already actually imported the other parts as well uh however I'll just select the site settings because that will apply to the theme settings but I don't need the contents because we've already done that so I'm just going to do templates and site settings and click on import now if it's your if you have like a fresh install on the Elementor Pro you can obviously just install everything but since I've already established the content and imported it I don't need to do it again but if you guys do try it for the first time with Elementor Pro you will need to select all three options all right so now click on close and I'll go ahead and view the site and there you go so now you'll see that the header has been created for me and also we have this beautiful footer also if you actually go to this website and we type in the wrong address you will then see that we have this custom 404 and other various parts of the theme that were created for us so this is the difference between the free and the pro version the main difference here as well is that remember you are making the header and the footer with the Elementor Builder I will be having a full another video on Elementor again that goes in depth and talks about the Elementor theme Builder that talks about the toolkits and everything but here I selected the actual theme Builder and here we can see that we have the header and the footer right here so let's say for example if I want to just you know edit it or something like that I can just click on edit right here and then I can actually design the actual header of the actual toolkits so you can see here I can start editing it and design it and customizing it however I want so that is how you guys can use the uh free version yet also use the pro version of the toolkits for your web design business hopefully this section helped you guys out if you guys have any problems or any questions or if you guys got any errors please let me know in the comments below but again we create these all for you for free to help you guys give you that boost in the web design industry hey guys welcome to section two of this video so in this part of the video we'll be talking all about the business aspect of owning a web design business so we'll first talk about stuff like branding you know like who are you and what kind of customers are you trying to attract well then talk about proposals digital contracts term to conditions and also questionnaires also we'll be talking about additional services so let's say for example you guys wanted to you know offer like a third-party service like SEO packages or content writing we'll be talking about additional Services where you can make recurring revenue for your business with that said let's go ahead and get started alright party people in this part of the video we'll be talking all about the business aspects of running a web design business now we're going to start from the basics here so we'll talk about branding and we'll go all the way to the end of things like building clients and contracts and stuff like that so let's go ahead and first talk about branding now when starting your web design business you have to ask yourself who are my clients like who do I want to serve right so branding is a mark marketing practice in which a company creates a name symbol tagline or design that is easily identifiable to the average consumer for example you guys all know the McDonald's logo right I mean it's so easy because we've seen it they've branded it and it's in our brain that that is the McDonald's logo so next we have branding helps identify a service or product and distinguishes it from other products and services so just like we talked about McDonald's we also have Taco Bell right now they're not direct competitors but the thing is that you can understand the difference between Taco Bell and McDonald's so you don't want to make your website or your logo looking like everyone else's because it's very hard to distinguish you from your competitors right makes sense branding lets users know what to expect from your service for example Honda versus Mercedes right also for web design we have something like clay Global versus Wix let me give you guys an example here is Wix right we all know Wix and the thing is if you have a budget of a hundred thousand dollars and if you go to wix.com and you you know give them a hundred thousand dollars they're gonna say no you know we only have plans for four dollars a month you know eight dollars a month twelve dollars a month and twenty five dollars a month they're looking for like beginner slash small size businesses these people are not looking for something on a very large scale because that's just not who they operate right that's not what they want that is not their clientele their brand is is geared specifically more for smaller people so you can see on the websites um that that's what they're going for it doesn't really matter if it's a very high ticket client or a cheap client it's just picking a audience that you want to work with now if you go to something like clay Global which is another web design company uh these guys are big you know they do a lot of the websites and web design work for Facebook for Google for slack you know just a lot of a lot of a very big large corporate companies so you know that this company is going to have massive budgets and they're going to be wanting a lot of money but I just wanted to demonstrate that you do need to pick an audience ends depending on how you present your brand branding is important because it creates a memorable impression for your visitors you want to create that experience where people remember your logo and they remember your website like oh yeah I remember that color it's the orange website or oh yeah that was the purple one you want them to remember it so they can remember it maybe down the road they say oh yeah I remember that one website you know it's a it has that orange color and then bam they find your website because of your brand so it's very important to distinguish your brand next now let's talk about questionnaires so let's say for example you do get an email from your clients right maybe they saw your website they saw your brand right and they want to send uh you know they're like hey uh what do I do you know I want to get a website what do I do you as a web design company need to First send out a questionnaire a questionnaire helps you understand where you and your customer are at it also helps weed out serious or non-serious clients keep questionnaires brief yet effective right let's talk about questionnaires now so let's say for example I'll give you guys an example questionnaire in just a bit but let me give you guys an example of good questions to ask on your questionnaire and then I'll give you a real presentation of a real life questionnaire do you have examples of websites you like you know that's that helps kind of understand uh what they're looking for you know we can't read their minds you know so uh number two do you have a website already did you want to carry anything over to your new website so let's say for example they have some sort of website but you can tell like it's not really there like you kind of understand what they want what they're trying to do but you're not they didn't get it you know like we can say all right let's let's take to some of the design aspects here and I'll make it my style and then you can let me know what you think about it something like that number three do you have a logo or colors or a style that you want are you open to revamping your website the reason why I asked that is because let's say for example they are a vet or like a dog cleaning business yet they want to kind of upgrade to like a luxury jury dog grooming business right so if they if they tell us that saying hey you know I want to kind of improve the overall service of my website and offer more money you know I'm a little bit more higher now you know I've had a few years of experience and I think we're ready to take large ticket clients it's important to get the information because then you can base your design on how they want their website to look here we go number four do you want any special uh functions be as specific as you can guys I can't stress this enough be as specific as you can I first started building an e-commerce website for a client a few years back and then later down the road they said oh I want this feature oh I want this feature oh I want this feature turns out later they wanted like a a multi-vendor e-commerce website with multiple booking Integrations and all this stuff and I says this was kind of not what we talked about you know and I put myself in a really bad spot so when you are um you know when you are sending out the questionnaire just try to be as specific as you can or as they can because if they want a booking website that's fine you know we can use booknetic we can use Emilia but if they want like a multi-vendor booking integration then we'll have to find a booking plugin that integrates with a multi-vendor capability or functionality so it's important you ask that question number five what would be the main purpose of your website signups leads General online presence so why are they making this website if it's just a general website sure if it's a lead generation website well we might have to adjust some colors or we might have to change the structure of it because they're looking for fast leads so just make sure you ask them that next we have how many pages would you like to see now I'm kind of against the pay structure of per page we'll talk more about that in this section A little bit later but just asking like how many pages were you looking for like the home the about Services contact because maybe they're like well I want like a a document a documentation page and I want a sub page about the documentation just get a feel for what they're asking for you know they don't have to give you 100 percent uh an exact answer but uh you know if it's like a 10-page website that's cool if it's a 55-page website all right then you know we we'll take it from there we got to see what you want you know number seven are you in the USA well personally a lot of my audience who watches this are the United States and the reason why I asked this is because of payment issues I did have clients in the Middle East and a lot of the times when we were trying to make payments the payment processors were a pain in the butt they didn't work or they said oh we restrict this part of the world or something like that so just ask your clients where they're from just to make sure that your payment merchants does do business in that specific region all right and we'll talk more about building payments or building customers a little bit later in this video okay do you have hosting and a domain already just ask them that just ask him that if yes cool if no then you'll have to get your own hosting all right number nine do you do you or an employee want to edit the website if so what is your technical experience so basically saying do you guys want to have your hand in the website are you going to be operating it for example if it's a booking website they're going to have to be able to understand how to use the booking software right so you need to like maybe make an explainer video for them and explain to them okay this is how you use Amelia booking plugin but if it's like just a regular website you know just like an online presence website I would limit their um their reach on the website just so they don't mess it up number 10 anything else you wanted to let me know or see about your new website you know is there any questions any questions at all let me know you know just ask them that all right all right and these are great upsell questions to ask these questions right here will make you more money I promise because I've actually made money on these questions number one and look at this look I'm such a Salesman I'm such a sleazeball but listen to this so would you like to be found easily on Google with a boosted SEO plan for your business like how do you say no to that you know like if someone says no it's like oh okay so you don't want to be you don't want to be boosted on this okay but then we'll we'll just give you the the default plan you know so and this is a great way to make recurring Revenue okay and again we'll talk more about recurring plans a little bit later but uh number two would you like someone to write content for your website on a regular basis to make it more lively right so when you go to a website and you see active content writing you assume the business is in business and that they're operating and they have maybe a large clientele we don't know but it just looks like that if you go to a website with no blog post or the very old from my two years ago I'm just going to assume the website's outdated and they're not business no more because that's all I really have to go off right is there is the content on their website number three would you like help with social media or be interested in a dedicated virtual agent we'll save you money for example if they need some sort of help with their business you know saying hey you know I got a friend who can help you guys out now this is optional you don't have to do this but this is just additional ways if they do need help because a lot of these people they're operating businesses and they don't have time to sit there and you know fiddle with social media and campaigns and email marketing campaigns all that stuff it's a job itself so maybe you you can pick up someone or you can do it yourself as like a side hustle and just try to make some more extra cash for uh getting recurring Revenue all right never ask these questions ooh I love this what kind of fonts do you want to see now why do I say this because if they're going to tell you about the website and what they want and their business why are you going to convolute everything and start asking questions that will confuse the customer like oh what kind of fonts do you want like they know like like they know anything about fonts okay just uh you're the designer you know what's good you know how to make it look nice don't ask them okay don't put too much don't let them take over the website you do it this is your job all right that's why I say avoid that how many pages now earlier we talked about like how many pages are we looking for like oh like uh you know 10 pages 15 pages but kind of give them like um something to work off like the home about the services contact and something like that help them out make a decision right but when you just say like how many pages do you want and just give no reference to any Pages at all they're gonna say I don't know man can you help me out how about your client you know don't just leave them in the dark give them like oh all of our clients usually get the home to serve Services about the contact and like the fax page you know help them out give them some sort of some sort of platform you know to work with right number three what's your budget I hate this question and don't ask your clients ever again it's very annoying it's very dishonest right so for example if I say that my budget's a thousand dollars will you build my website for a thousand dollars if I say fifty thousand dollars you know in my my brain is a client I'm gonna say are you gonna rip me off are you gonna charge me fifty thousand dollars for a website that could be potentially worth five hundred dollars don't ask them what's your budget it's a very outdated term in the web design industry I've seen people ask this all the time and me personally if someone asked me this I just say you know I don't know you know I don't know like I don't I don't know what my budget is you know and just tell them your prices okay you're the boss you present it don't leave this in their uh Circle right you make the decision you're the boss right and also it's just rude I I feel like it's just rude it's just like someone asking how much money do you have in your bank account man how much money you got it's like don't worry about it it's not your damn business you know so number four when are you looking to have your website finished if your client is in a hurry and they want it now now now now do not take them never ever ever I repeat this never ever ever take clients who are in a hurry because that is their problem not your problem because what happens is they're on like a three-day deadline you rush you rush it and they're like oh this isn't what I wanted this is terrible I want my money back this has happened to me before you want to make sure that you you give yourself enough time to build the website at a relaxed pace and you're not under I guess the word is duress or under stress where you're you have to do something by a certain time frame and if it's not done then everyone uh you know that no one's happy also I've noticed is that people who usually ask for this who want a fast website are usually high-risk clients high-risk clients means they tend to charge it back they tend to not pay you they tend to be a little rude so just avoid people who want rushed websites just avoid them all right number five what Builder feature or slider would you like to see they don't need to know about Elementor they don't need to know about Divi Brizzy they don't need to know about side Revolution or anything like that don't ask them anything technical about the website this is your job as a web designer and no one else's all right make sense all right cool all right now let's talk about proposals digital contracts and terms and conditions oh I love this section this is this is so we don't get screwed all right because I have been screwed by chargebacks before and I'm sure people watching this video have heard the term chargeback that's basically where they call the bank and they say hey I don't know who used my credit card you know it's fraud I want my money back and a lot of the times if you don't have a contract you're screwed you're screwed plain and simple and it really sucks like it's happened to me you know and it's very frustrating let's go ahead and talk about this do all this in one documents all right sending frequent documents will get the customer tired and annoyed and may cause bounce rates so what do I mean by this now I like using the all-in-one solution if you want to send them a questionnaire and then questions and then a term to conditions and a proposal and a digital contract all one by one by one by one that's just annoying I don't want to deal with that it's like you know dude just forget about it just give me this give me the signature and I'm done you know that's all I want as a business owner right and a lot of designers and people in web design businesses they tend to do this they want to give their clients various documents and it just becomes annoying and tedious and I don't want to work with that so make sure you don't do that number two use proposable panadoc or DocuSign for great templates I'll give you guys an example in just a bit it's a very great service uh number three is more important and I really wish this was around when I was doing web design but it kind of wasn't all right get signatures on proposals as this helps reduce bounce rates with payment Merchants oh yeah versus with payment Merchants all right so what does that mean let's say for example you are working with stripe and someone calls uh you know calls their bank and they say hey man uh this guy's this this credit card uh someone stole my credit card you know you have a digital contract right already any digital contracts they integrate with stripe and they integrate with PayPal so with that said stripe's gonna know no no no no no no no this guy signed the contract and we can verify an R API so these guys did make a deal and this helps reduce bounce rates now I can't guarantee that the bank will say no you know sorry you know but it does help reduce bounce rates it might convince the bank to say Hey you know customer uh you did have a contract here uh you know you're working with uh or they have a verify with stripe and proposable so uh maybe you need to just honor your contract or work it out with them but from the bank's point of view they believe that this was not fraud so it does help reduce bounce rates okay next create a reasonable time frame after you have received the questionnaire alright so give yourself enough time to build a website that's basically it now this is a very important one you must inform them that you are using Wordpress and that updates will be required the reason why I say this is because let's say you build a website for a client and then you bounce right if you never said that you're not using Wordpress and a PHP version updates or plug-in updates and the website breaks guess what it looks like you sort of scammed them because they're going to say hey this this guy built me a website and uh something updated it broke and now I'm screwed and he just left and he's gone and that was actually a lot of my clients my clients were actually other WordPress designers who abandoned the websites didn't update it and as a result their website broke so for your own protection you need to tell them that you are using Wordpress and if the website is not updated over time the website will break this is very important that you say this because this protects you and it also protects your clients you have to tell your client that but at the same time you should offer plans that accommodate this saying well we'll offer a maintenance plan so this doesn't break and we'll go ahead and give you like a five-year guarantee something like that just make sure that you do give them some sort of heads up and that you give them you know some sort of protection that their website won't break or something like that put the name of domain and be as specific as you can names dates business names and work that was agreed on when writing the contract guys I again you know many of you guys know before YouTube I was into law and I worked in the child's Court you know I handled the I handled uh divorce I handled a lot of uh just a bunch of legal stuff you know and if you're not as 100 specific as possible people can use that against you if one little name or one little letter is not on the documents they're gonna say oh my company name is uh darylwilson.com not darylwilsons.com the entire contract is is voided and everything is is screwed so just be as specific as you can alright make sure you get the exact dates the business name and everything because if things ever go south you just want to make sure everything is uh correct on the paperwork and the next one do not put anything in the contract that you think you will not be able to fulfill you as a web designer you do want to also carry a good reputation you want to help your clients I know I've been kind of saying that clients are nightmares and they kind of are but your job is to provide them with a great service and a good website and you don't want to sell them empty promises you don't want to be the bad guy but you just want to make sure that if you are building a website for them and you do you know tell them that you can do this that you actually can do it okay don't be the bad guy and remember referrals are the number one way to get more traffic so if they trust you then they will trust telling their brother they will trust telling their sister about your web design services so let me give you guys an example of some real life digital contracts before we go on to that let me first show you this questionnaire now I'm not really going to go into detail in this questionnaire but uh here is a questionnaire list and you guys can use this I also have made a video that goes in depth and talks about like how to actually present everything in the questionnaire you guys can watch this video on your own time it's about 15 minutes but it just kind of goes over the questionnaire in detail now let's talk about the digital contracts now I personally recommend websites like proposable.com and also pandado.com the reason why is because these websites here they're the all-in-one solution so for example this is proposable.com and this is something that you can actually send to your clients right so for example we have a web design proposal right I'll go ahead and just go to page two now this is like an introduction right you can introduce your company you can say darylwilson.com is a top provider professional website Services whatever you can talk about your skills your services you can introduce your staff and this creates like a more personal connection right it's like oh yeah these are you know my staff these are real people and you know these guys work for me and you know they have families and their son's place with my son's a baseball whatever you know we all play sports together we have barbecues it just creates that sort of like personal connection with the actual uh with the client right all right so number three or page three now what do you guys do you guys can you know give a brief description about your business you can talk about yourself uh you guys can also talk about what you guys use like WordPress HTML CSS whatever all right and here we have project details this is where you guys can actually plan everything out show them like the actual process of how you guys work right so you know just to give them a heads up saying we're not over here just sitting around on Facebook you know we actually have a detailed guide and we're really going to help you with your uh websites and over here we have deliverables so this is kind of putting the a time frame with the actual like uh you know with what you're doing this kind of keeps the customer in the loop with everything right so we have planning wireframing developments review and testing and then final acceptance and this will actually help your customer get an idea of like what's going on and when they can expect to have their website completed right and here we go we have number six which is money so here we have the prices right so this is an estimate we have to always say estimates because if the client wants to change something later in the contract you should write if you do want to add on other services we have like a 25 an hour service that we can keep working on your website outside of the scope of this project something like that so here we go we have web design we have the coding which would be like programming usually like old school like back in the day we would just have Photoshop and then we'd have to send that photoshop template to a programmer and they would have to program the functionality of whatever we wanted that was like before WordPress that was a long time ago but now we have WordPress so it's like you know we can just do everything here it's a lot it's a lot simpler and here we go you know we have the uh the payments right and we also have an optional Little check box and this would be like a recurring fee right so uh it would be uh almost twelve thousand dollars right and we would charge them 100 a month all right so that's pretty cool and number seven they would have to sign this yes you want to make sure that you guys have them sign this because this will drastically help reduce bounce rates all right I can't stress that enough I mean if you have a contract and nothing was signed you know and they want to charge you back you have no legal protection whatsoever so just make sure that you guys do have some sort of signed documents for your uh from your clients and then over here you guys can just deliver this to their email it's really cool you can deliver this to their email once they sign it it will then just pop back into your email signed and you're all done and ready to work it's really an amazing service I really do like it so this is proposable.com there's also Panda Doc and also DocuSign as well so this is pentadoc.com now I'll be very honest guys a lot of these websites they are paid right there is some sort of like monthly fee like you know 19 bucks a month but this gives you access to all the templates so it creates like very professional and well-designed contracts for you so you don't get screwed over and also it has the signature which you can see here how they're very stressing they're saying you know you got to have that signature because if you don't uh it's going to be uh it's going to be hard to uh it's going to be hard to prove to anyone that the contract was even there right and also we have DocuSign as well DocuSign is another very popular website where you can make e-signatures any contract in fact I recently bought a house and my house they use DocuSign for everything you know so it is a service that even I use now also I realized that a lot of people might not have the money to sign up a service so don't worry uh we have provided free templates for uh contracts for proposals and also questionnaires now I'll be very honest these actually are created by Elementor so Elementor I'll leave a long I'll leave a link to their blog post they have actually created these for you so the page builder Elementor these are created by the company these are not created by me I want to give them credit for making this you know it's really helpful that Elementor actually made these templates for beginner web designers and you guys can download these for free right so this is like a web design contract and this is just something that if you just want to get started out really quickly not sign up for services you guys can go ahead and use this um this contract right here we also have uh proposals so if you guys do need help with proposals Elementor has provided free proposals for you guys and this is actually pretty helpful right here it kind of goes through like the ins and outs of what to put and what not to put on your proposal and then also they have a questionnaire or it's just saying like different questions about how you can uh you know just asking them questions about their website and stuff like that so I'll go ahead and leave a link to these downloadable files in the description below this video but again I just do want to credit Elementor for making these uh these are not mine it's very frustrating because as a YouTuber I get a lot of other YouTubers who copy my thumbnails who copy my scripts who copy stuff and it's like you know it's like I made that you know so I want to make sure that these guys get the full credit for it so again thanks to Elementor for providing these free templates I will leave a link to all these templates in the description of this video alright so now we talked about contract and all that stuff now let's talk about pricing how should you charge your customer this is this is fun you know I'll give you guys a few methods and I'll give you my personal opinion on what is the best method to charge your clients so let's go ahead and talk about the different pricing models these should differ depending on your brand so like we talked about earlier I don't know if you're trying to attract very large ticket clients or just you know Mom and Pop shops depending on your brand you should charge a different price okay and that'll kind of be up to your discretion to charge prices kind of depending on your brand and how you want to present yourself all right these prices will also depend vary depending on your experience Niche type of website and features now guys I'll go ahead and give you the same advice I gave other people when they are building their other services if you're an amateur if you're a beginner don't pretend that you're a professional just be honest just saying you know we're just we're a new web design company we're getting started out uh you know we did a lot of work for these clients they're really happy and uh you know this is our work and you know what do you think about it now if you go into someone you say well you know I'm a big hot shot I build fifty thousand dollar websites and stuff like that and later down the road they ask for something that's big hot shot feature or functionality and you have no idea what they're talking about you're gonna look very stupid you're gonna look like an amateur and they're gonna know it's gonna come out and you're gonna look really bad and you could get a bad review and people will start talking negatively about your business so just be honest okay just tell them if you're getting started out I'm a beginner and I'll work very hard for you if you are experienced just tell them we're experienced you know like yeah you know we've made some websites and you know we think we can really help you guys out you know see how I talk I should I should just be a Salesman full-time you know like I love this stuff but uh yeah so don't act like a big hot shop if you're not a big hot shot all right I'll just I'll leave it at there here we go first we have flat fixed rate this is one Method All right so method one is Fox flat fixed rates so we have like the basic website right 500 bucks right three to five page right premium fifteen hundred bucks for like a five to ten page website premium plus maybe like 15 pages with functionality or custom something that's just a little bit more custom and unique you know like I've had to build like a tarot card website once for some lady and that was like that was scope creep it was it was terrible it was it just kept the project kept getting bigger and bigger and bigger as we went on and I was like lady I only charge you like three grand and this is like turning on to be like a three month project you know but uh yeah so you can go with the flat fixed rate this is actually a pretty standard rate a lot of companies do this um my personal opinion on it I don't think it's a bad option I think it's uh it's a suitable option uh I preferably would go with custom pricing or flat fixed rates but uh yeah this is actually that's something that's doable it's not something crazy uh but these rates will always you fluctuate depending on your experience and also your brand the hourly rate let's talk about hourly rate you can also charge hourly rate let's say for example you're working at twenty dollars an hour you can estimate the hours for the project and let them know what this would be or like an estimate now what are the pros of this well it's more security for you right so you can charge the hours you know how much you worked and you can say well I work this hour so this is how much you should pay me right makes sense with more experience it would be easier to understand what the cost would be so as you do this more and more you develop you learn more and you're saying oh a 10-page website oh I know that's going to be this many hours so it's this price you know what I mean so it kind of gives you like you're building experience there at number three we have more practical so with this method you can work at your pace and get paid so it's just a little bit more you know it's more practical it just makes more sense right now there are two cons about this pricing model that I personally don't like either creates tension the clients can't see you work and doesn't know what you're doing right like me as a designer or me as a customer I really really can't see you know the hours you're working and I don't know how long it takes so I'm really left in the dark here and I kind of don't like that feeling number two client is left in the dark with the pricing so again you know if you're not experienced you're just going to tell them oh this will probably take some time and maybe it'll be this much you know it's kind of not convincing as a client I'm gonna say yeah I don't know about that man you might be trying to screw me over here I don't really know so that is the cons of it I personally don't like hourly rates because it's easier to sell a customer a price than no price plain and simple all right now we have option number three custom pricing I do like this a lot so custom pricing is a popular method because it gives you more time to estimate the cost of the project it also gives you more time more room to price projects a little higher than expected for extra profit all right now here are the pros depending on your client you can charge more money right so that's also that's that's a good one makes the client feel like they are getting more so for example you can say well we're going to put together this big package for you and it's going to be a custom project and it's going to be it's going to be amazing and when you say like custom and a custom project custom websites you know as a client I'm like yeah you know I'm getting my own personal custom website you know I feel good you know and that's really uh what you're selling there and number three gives you more time to sell your client by offering services and packages so let's say for example you give them the custom pricing you can also add in the recurring Revenue plans saying well you know this is the big custom website you're getting and will also create a custom detailed SEO package for you that will boost you to the top of the search engine and get you money money money you know and they're just like okay that sounds good I want that too versus hourly rate where you're like oh yeah it's going to be hourly rates and then oh do you want SEO you know it's like it doesn't sound good but this is like you get a custom plan we'll give you the SEO package we'll give you the the custom uh boosted Google plan you know it's it's a great way to sell your clients so the cons let's take a look at this now this could sort of be a pro just depending on how you look at it and I was talking this with my other guy and we were just kind of going back and forth but I'll explain why I put it as a con so it helps you without cheap clients now that is a good thing however if you are someone that is charging a lower rate you could lose that client because they might not want that big custom website right they just want something small and they want a price and that's all they want so if you do try to sell them too hard you could lose your client and that's happened to me once or twice you know this is debatable right here but I just wanted to present the yard argument that custom pricing sometimes can deter people away from it saying no no I just want a two thousand dollar website you know I don't want it man you know so that's just how it is now the customer may feel like you are overcharging them with custom pricing you're presenting a price and they don't really have anything to go off they don't know if that's expensive or not so they can be like well you know I want the pricing table you know like these are more geared for people who are like lower end ticket clients who want the pricing tables like Wix you know so this can make people feel like you know you know how come Wix charges a little bits and you're charging me this much you know like it can make them feel like you're overcharging them but that is just the con of custom pricing but I personally I would recommend custom pricing I think it's great and also flat rate flat rate's also really good per page pricing is another model but I would highly recommend not to do it per page is another approach but I wouldn't recommend it it's an outdated way of selling Web Design Services it might also cause conflict and it just mainly has cons right that's basically saying uh it's going to be 500 per page that's what you're saying so if there's five pages that's twenty five hundred dollars right so let's talk about the main cons of doing this and why I don't really recommend it so the home page and the contact us page are significantly different let's be honest the home page is going to be a lot more harder to make than the contact us page and it wouldn't be fair to charge the client the same price as the home page and also the contact us page because obviously there is way less work required for the contact us page it's like maybe just a plug-in and some colors and you're all set uh the client might think you didn't add enough content on the page so let's say for example if they are if you're paying per page or if they are paying per page and you know you make the about us page but it's not long enough they're going to say hey man like this doesn't have enough content this sucks like I paid 500 bucks for this like this is a joke you're a joke you know and there you go you just lost your client so that's another thing that I ran into I did this myself one time and I did have that same experience and there is no personal connection it feels like this is strictly a per page basis there's really no like there's really no like uh clientele here it's just like oh this is per page and that's it you know but with custom pricing you can say you know we're going to make this custom for you this is going to be great we're going to tailor it around your brand it's going to be beautiful here it's like well this is just per page or and 500 per page you have the 500 per page it just doesn't have that same connection with the customer so I don't really like it so those are the four different options for pricing plans personally I like custom pricing and I also like like the flat fixed rates the reason why I like this one is because people can visually see the price and they they can just pick from a plan that works for them and you know they're getting what they paid for they don't feel screwed over Uh custom pricing you can go ahead and charge them more money and you can upsell them different services but also you know provide them with a really good website so I'm not just saying like oh just just overcharge your clients more but if they're happy with their website and they're happy with what they paid for then that's all that really matters so I do like custom pricing and I also do like a flat fixed rate hourly rate I'm not really a big fan of and per page pricing I'm not a fan of this either because this is a very uh easy way to create conflict with the customer now the last pricing is going to be set up fee and monthly plan now this is sort of a very risky approach but I have seen businesses do this for clients who are really low budgets but uh it really depends on you know how how much you want to spread your risk factor so this method is getting more and more popular many web websites like Wix have this approach but you are not Wix so I just want to make that very clear okay so you can start this project for 2.99 and have an ongoing monthly payments this can help evenly spread over the price of the project and might help users who can't afford one large sum for this method I would hold on to the domain on your name now the reason why I say this because let's say they want a website right now personally I would go ahead and buy the domain and I would have it under my personal name right and if I completed the website and they completed the payment in the contract I would tell them if you completed all the payments we will give the domain over to your name okay so that's how you can kind of reduce your risk factor here all right now let's talk about the pros and the cons of this method the pros easier payment plan for low-income customers yeah that's true recurring revenue is always good it is it's always a good thing easier to sell web design services so you can like kind of charge like a website for eight thousand dollars but you can spread it up on payments you know you can you know break it up and this might actually help the client pay for you know pay for the website cons it's less money up front and that's always a risk because if you build an 8 000 website and you're charging them 500 bucks a month it's going to take you a while to get all your money right so just just be mindful about that and number two now this can also be a pro and con depending on how you look at it so let me explain this can cause more support because the client is paying monthly now in the client's brain they're saying well I paid eight thousand dollars for their websites and it's going to be spread over a few months right therefore this should also include technical supports and this support and that support no you have to tell them saying look this payment plan is strictly for the website only if you want technical support hey just throw on another 100 a month something like that so it can help you get more recurring revenue for your clients but at the same time you need to be upfront with your client and tell them if they don't want technical support or they don't want a maintenance plan then this payment plan is only for the websites and not for personal support okay so it could be a pro and con just depending on how it all works out with your client and what they can afford and number three there could be issues if the payment stops or the credit card gets declined let's say the client goes broke or their car declines or they just don't want to pay the website no more that's a big risk and that is the main risk of this strategy so it can help you guys more because you guys can charge more for a website and spread it out but if the client doesn't afford it or if they don't want to pay no more or if their card tops working you're going to have issues there so that's kind of the biggest con with this payment plan now if you're going to ask me right now Daryl which planet would you make for your web design business I'm just getting started out well I would definitely go with the custom pricing right because this gives you enough time to uh you know create the project create the budgets find out how much it's going to cost you and then you can set your price accordingly I do like this it also gives you the ability to upsell your clients and it does also give them the custom made websites just for them it makes them feel a little bit more special so I do like this method also flat fixed rates this is also a very good method I like this because people can visually see what they're getting and I do like that I don't like hourly rates because I'm left in the dark too much as a client I also don't like per page I think this is very outdated setup and monthly plan uh I I do like this a little bit but it's it's very risky you know like it's a very big risk to do this but you can charge more money since you're spreading it out over a long term so it just really depends on the Integrity of your clients if they're going to make the payments so that's really up to you I'm gonna stay neutral on this one I can't really give you an honest 100 answer but if you want to go that route go for it all right now let's talk about the initial design right so it's very important to Showcase your work for your clients like colors fonts tone and the style of the websites number two it could be a collection of fonts colors Styles and a general branding of the website to help you point in the right direction let's say for example the client you know you charge your clients and now you're ready to start building the website you first want to give them an initial design right you just want to showcase the colors the fonts just a very quick brief mock-up of the actual website right maybe just like you spend maybe a few hours on it saying are these colors are these fonts is this you know is this the right direction we're going going in just so that when you're building the websites and you're like 90 done they're gonna say no I didn't want all this stuff you know you just wants to kind of get a ballpark of what they want so next we have scope creep oof and I have ran into this myself and it sucks right so a website tour that refers to the Project's initial requirements tending to increase as the project as the job progresses for example your client wanted an e-commerce website but now they want a multivender e-commerce website but you initially agreed on an e-commerce website so what I've you know this happens to a lot of web designers and let's say for example they want a five-page website and now they're like oh but this also looks cool can you add this feature and you're like yeah sure and that small feature turns out to be a massive project you have just kind of turned your three thousand dollar job into a ten thousand dollar job but you're charging them three thousand dollars so what you're doing here is you're adding in too much work and the products getting larger and larger and larger but you only charge them a set price so now you're kind of locked in and you're just burning your own time at this point so when you are you know building websites you do really want to take a big project Overlook out of everything you want to see okay will I run a scope creep here I want to see if the client's going to want this or that now once you write your contract you should tell them if you want additional services this must go on an hourly basis and that's why custom pricing is great because with custom pricing you can charge them a custom price and then say if you want additional work and services this will be at a rate of twenty dollars per hour all right this will help you avoid scope creep because it is very frustrating I have run into this and many people do because one small project gets larger and you know it's not the client's faults because once they're building it like oh yeah I also want this I also want that you know and that's that's the that's the nature of this business guys and there's no way around it so that's that all right now let's talk about SEO packages and recurring Revenue if you guys are looking for additional ways to make money from your clients these are some great great methods and I'll go through each of these and explain to you how all they work web hosting you guys can easily charge your client 25 bucks or 50 a month now you might be saying oh that's a lot you know your clients don't care all right they got their own business they're doing their own thing this is your this is your uh you know domicile right this is your little home so you're going to say well we can offer all these services at these specific grades right you can charge web hosting right 25 50 a month they can host on your plan or you might have to purchase a reseller plan and host their website on those hosting plans Website Maintenance now I think you guys should always make this mandatory because everyone watching this video is using Wordpress right WordPress does require updates and maintenance packages right so if they are using Wordpress and a plug-in updates or a PHP version updates uh the website could break right so you need to offer this service and if they decline it just tell them that uh you know that this could happen and leave it in the contract you know just protect yourself SEO packages 200 to 400 dollars I'll talk more about that in just a little bit uh content writing this is where you would hire a Content writer for their website and then they can you know they can write content for their blog and this helps the website have that Lively presence right and explain that to them saying hey you know what's uh you know when you go to websites and you see people blogging the website looks very active right we can do this for your company we can actually hire a active writer that will continually write great blog posts that look professional she's really trained to it's a great University and she's going to make your website look very professional they're going to say wow okay done sign me up right makes sense and then also explain to them saying if they go to a website with no blog you know they're not really participating so it looks pretty boring you know explain that to them social media marketing like we talked about earlier social media marketing is very tedious uh maybe you can find like a virtual assistant on upwork and then you can Outsource it for your clients and maybe make some extra recurring Revenue secondary Services logo or Designer work so when you're working with your clients what I've seen is they tend to say Daryl like how's my logo do you like this logo did it like this do you like this do you like this they want to get your opinion and this is your opportunity to either be honest with them and say your logo looks like crap dude you know but it is a good logo tell them it's a good logo but it just gives you that um it gives you that that opportunity to sell them additional Services if they ask you for something okay so that can be anything you know just uh keep your mind open you know who knows and then also affiliate programs with affiliate programs if they want to you know purchase something like a plug-in or something else um just give them your link saying hey can you use my link I get a small commission at no cost to you it helps us both and uh we'll add it to your website there you go everything's done so now let's now that we talked about all these plans let's quickly go back to SEO packages so this is one website that I've been using it's called sealreseller.com I like SEO reseller because uh the customer gets a lot of analytics they can see uh their traffic they can see their positions and they have their own personal custom dashboard which they can log in you can also white label this service right right here and put in your logo and act like this is your company which is really really cool they do also have various plans now so here we go we have three different plans right and you guys can Outsource this so you can tell your clients well we have this plan right here for 100 and then you can charge them like 300 a month right because 200 a month is your profit and then we also have like the agency plan which would be like 200 and you can charge them something like 500 right and then we also do have the Enterprise which are for larger websites uh this would be 300 a month and uh you can charge them like I don't know seven eight hundred dollars a month now if you guys are still interested on like okay what does this do the time frame how long is this going to take for my client because I don't want to look stupid what you guys can do right here is actually just go ahead and talk to the sales agents and just get some information you know you don't have to just listen to me only you can ask them say hey I saw some guy on YouTube uh he talked about your company you guys are you got a lot of good reviews what do you guys offer how can you guys help my client how does this all work and they'll explain everything for you guys I've seen nothing but great things about them and I think I'm actually going to switch my website SEO to SEO reseller if you guys do want to try this company I will leave a link below to purchase it uh it is an affiliate link but I only make like six dollars or something it's really not a lot of money it's it's very minimal but uh like we talked about affiliate marketing with links remember how I'm offering a link you guys can offer for links for your clients too see how that all works out everyone wins here you know we only charge the client you know they're the only ones that actually pay all right so now that we talked about the SEO packages and recurring Revenue let's keep going here Freelancers help now when you guys are building websites you guys might come across websites that want you to upload 50 products or they might want to do some photoshop work or they might want to do something that is kind of out of the scope of what you usually do but since you are in this industry you have to accommodate it let me teach you guys how to properly hire Freelancers the right way all right let's go try to find Partners to work with you on your projects if you're not a developer try to find someone part-time that can help now with WordPress a lot of these plugins you know everything is open source so you can modify you can adjust things to kind of fit your clients uh what they want so if a plugin needs like a small tweak just hire a developer you know hire a developer you guys can probably pay them like like 100 bucks or 200 bucks just say hey make these changes and we're all set but try to build a relationship with these people because as you get more clients you kind of want someone on the side to always help you out right and I've actually met developers that I still work with right now that I've been working with for four years and we've maintained a great relationship here we go number three try to find someone who can grow with your company not someone who's already very well established upwork and freelancer are good Fiverr can be good but you need to do your research now what do I mean by this one right here try to find someone who can grow with your company let me give you guys an example all right so here I'm at upwork.com and I'm looking for someone helping with web design right and we have a few uh people right here right we have this guy right here and he's made a hundred thousand dollars on upwork right we also have this lady right here Anna and also Max now look at Max if I were to hire Max or Stefan uh and I wanted them to work part-time with my company that doesn't make a lot of sense right these guys are already making a lot of money on upwork and they don't need us right so unfortunately I would not hire these people because they already have large ticket clients they're already making a lot of money and it just wouldn't really make sense for me to have small time jobs for these guys because uh these guys right here obviously are overqualified so what I would do over here is I would actually go down this list and look for people who are making who are new to upwork but already have some experience so I want to see people who have made just like a few thousand dollars in upwork you know maybe like uh you know maybe two thousand to five thousand dollars in upwork they're getting started out just like I am you know but at the same time uh they can help me with my with my problems so here on this filter right here we have talent quality now I want Rising talent I don't want top rated because obviously these guys have their own business they got their own stuff going on so they're their own company they're not really going to partner up with us here so I want Rising talents and for example we have Luna from El Cerrito this would be someone ideal that I would want to work with because they've only made around two thousand dollars the rising talents and I want to get them before they go to the top you know wait wait wait let me let's be let's be partners here you know work with me you know I can guarantee you work but uh you know you'll have to be available for me which is a trade-off also if Sandra right here you know she's made around 2K obviously I would see their work before I hired anybody but um I want to hire people that are on the rise yet also have some experience that also have some good quality so it will take you time to kind of go through each person find out what works best for you but uh go for the rising Talent do not go for people who are making like 400 Grand on upwork they are definitely not going to help you out and they probably have no interest in working with your company all right so that's how you guys pick Freelancers let's go ahead and go to the next section which is maintenance services so let's say for example your client wants to actually have maintenance plans or they want reports every month or something like that where do you go well use manage WP you can offer monthly SEO packages website speed optimization and many other various tools to show monthly progress so this is managedwp.com now this is a paid service but it's really really cheap it's like two it's like two dollars a website so it's really cheap and what I like about this uh manage WP is that here you can see that we have all these different websites right so we have all these different websites and these are disconnected so these ones are offline if there's a problem with something it'll tell you right away and they'll notify you via email saying hey the website went down go check it out so I really do like that so you have like some sort of service to help you out but let me just give you an example right here I'll go ahead and just give you an example of this little website so with this website this would always be your clients you can have like a security monitor right Security check and you can give them reports you can say hey here's the reports right right now they're saying that this is a problem detected something's vulnerable you know whatever I wouldn't tell them that but you can give them reports also performance you guys can actually print this out and show them saying hey look your website is getting an a grade on page speed it's very fast and this actually helps you keep your client because if you're always showing them like good stuff that we're working really hard on your websites you know as a client I'm going to say this is great man thanks a lot you know this is so perfect you guys are sending me all this stuff this is great you know also we have the uptime monitor you guys can uh like we showed you earlier this will uh monitor the uptime SEO ranking now this actually is a fee I think it's like one dollar or something like that per website so it's really cheap and then you also have the client report so let's say for example you know you're you're recording all this and you want to send it over to your clients you guys can actually email this and this will go directly to your client which is really helpful so uh in your email or your client's email they'll get something like this right here this will be like your web design company and this will be like hey this is Daryl right you know and and here's the overview you know this is what's going on on your websites uh this is the uptime uh here we go we have the analytics this is your traffic and the performance and we have all this you know analytics we're constantly working on your website I mean this looks like a lot of work and when your client sees this they're going to say man this is awesome they're like thanks so much man like I love this guy dude like I'd recommend them to anybody you know and that's what we're after we're after the referral so I would definitely use manage WP to manage your clients websites uh you can pretty much do everything from one location I really do like that and it also offers really professional reports for your clients all right so next let's talk about how to talk to your customer learn to be a Salesman guys I know a lot of developers and designers are very awkward and they're just like this and this is the price live a little bit talk a little bit you got to loosen up you got to talk to your clients uh to be honest web design itself is like 80 selling and 20 actual web design I'm telling you right now if you don't know how to talk to clients it's going to be hard so just practice right so sell yourself offer your services showcase Your Design skills and see how it all works out learn to be a friend agree and accommodate clients even if the conversations are not work related now guys remember our job is to make money that is it if the client likes a certain politician if they like Joe Biden or Donald Trump it doesn't matter just agree with them and say all right cool yeah I agree with that yeah yeah yeah just just pay me and you know don't take anything personal if they want to vent out about their relationships to you so be it I've worked in web design for years and I always found that I was more of a psychologist than a web designer because they're like oh man my girlfriend broke up with me man I think she's cheating like what do you think you know like she didn't come home this night and she got drunk with their friends and I'm like yeah like I don't know man like that sucks you know but I'm the web designer I'm not really uh you know I'm you know and I had to just accommodate it you know so I remember don't take anything personal and your job is to make money all right that's why we're doing this now put yourself in your client's shoes accommodate them every time if there is something that they just want you to work with try to work with them try to accommodate them and that's just part of the business guys it really is all right so SEO for you like we talked about SEO earlier uh you can try upwork and freelancer uh focus on the name of your websites right so when you are signing up for SEO companies uh tell them that you want your website named as a priority so if you're if your website name is uh Joe scott.com then you want Joe Scott to rank higher than any other keyword okay so just keep that in mind so ask SEO companies for a mix of non-competitive keywords and competitive keywords what I mean by that let's say for example you are a web design company and you have best web design company okay that's very hard to rank for but if you have something like a great great comp great web design companies in Pittsburgh that's a little bit easier to rank for so ask your SEO company saying hey can you make a mix of competitive keywords and also non-competitive keywords but also make sure to focus on our brand name because that is the most important all right I included this section because a lot of people go to SEO companies and they don't know what to ask for so this is what you ask for and this is what you're looking for all right and uh here we go guest blogging and Outreach is good as a web designer you guys might come across other like websites who are talking about other websites right like oh this other company is talking about this web design company that's because they're outreaching so if you are working with other companies in the area or you want a website to talk about you you might need to do some guest blogging or outreaching this is where you might pay them like a few hundred bucks and they will say hey we'll go ahead and include your company in the next blog post at a fee of 500 you know it's up to you and depending on the traffic it probably could be worth it so if you do see companies out there that are talking about web design companies or you know they have some relation to web design Outreach to them make relations and see how it goes from there next we have content marketing so content marketing is effective create topic for business owners or starting business owners this is great so for example if you're blogging on your web design company you don't want to talk about uh this is the best web design company uh Web Design Services you don't want to talk about that what you do want to talk about is like how to start an LLC uh top 10 best things for a logo how to pick a price for web design you know you want to go ahead and create topics that relate to business owners because business owners will be typing this in on the search engine and they want to find you and your website in these results so for example here we go we have a web design company and uh this is a web design company and this is their blog right now what they're talking about right here are really actually vital things to improve websites and also help small businesses but what I do like about this company is they create a lot of Articles strictly for small business owners who are looking to get started out for example top logo design trends for 2022 as a new business owner I am more inclined to click on this than to click on something that's going to sell me on Web Design Services right so just remember people like to buy but they don't always like being sold to right so this right here you're not selling them but you're passively inviting them to buy your services Top logo trends for 2022 five signs you need a new website and also just some other things that small business owners might be looking for like how to optimize your Instagram bio I do like all these topics I wouldn't go just based off of like you know you need a new website a website best web design Services because that's just boring and it's also very competitive so try to create topics that correlates to new business owners or something business owners have problems with all right and lastly try not to get wrapped up in a competitive war with web design companies if you see competitors and they're doing something and they're like oh they're higher rank than me this is no fair don't worry about them focus on yourself don't look at anybody just just do this okay because if you start looking at all your competition and you start getting overwhelmed you're going to get burned out and you're going to think that you suck don't worry about anybody just focus on yourself so next we have SEO for your client let's say your client didn't actually want SEO Services earlier I did mention uh SEO reseller right so that's a great uh way to get SEO for your clients but uh multiple designers white label their SEO Services if you offer SEO charge them around 240 a month and show the monthly reports and progress of what has happened to the website so if you guys do decide to get SEO you need to tell them this is what's happening on SEO this is the key we're changing this is the rankings just keep them informed because as a client if I don't get anything back I feel like I'm getting ripped off right so these reports help the clients understand to see how the rankings are improving it just helps them know what's going on so if you do get SEO services for your clients make sure to send them some reports so you have something to show for all right now let's go ahead and talk about irate customers so sometimes you get customers that say FU F this F that and guys we're going to go ahead and talk about that because that's actually happened to me and it sucks all right number one don't accept customers don't accept work from customers who are in a rush like I told you guys about earlier uh when you have clients who are in a rush in a hurry it's a risk factor a lot of the time they might be aggressive uh they might be you know come on do a hurry up man hurry up you know they're they're just a risk you know there's a lot of different factors that can correlate to customers in a rush so just don't accept those customers from day one all right now if a customer starts a bad math you and you're in a contract just tell them they're going to talk to them through emails all right so if you and their the customer just build a bad relationship and every time you guys talk he's saying Fu or you voted for this guy Fu the only way to kind of get past this guys is just communicate them through emails and you actually have that's uh proof that you're communicating with your client so they can't say that you're not uh that you're not going through with the contract you're saying yeah I am but unfortunately me and you just disagree on many things so we have to talk through emails now if the customer gets upset and yells at you over and over and you made a mistake just agree with them tell them that they are rights and that you'll fix it okay be patient guys it's very easy for a web designer to say you know what man F this but just remember you're in a contract you know if you need a break step back relax and just take a break you don't want to ruin everything over one heat of the moments which has happened to me before it sucks just do your best and just remember that uh once this is done it's done right after the clients the job is completed you don't have to talk to them no more so just keep that in mind although at times the customer might seem like your enemy remember that you can influence them positively on a positive note they'll refer work for you to from other people what do I mean by this well even on YouTube I get comments who are saying F Daryl this guy's an idiot you know when I respond to them as saying hey you know sorry you guys had this experience uh what did you need help with like how can I help you out they respond to me in a very uh days uh manner they're just like oh sorry man I was just having trouble with something sorry I was being I was overreacting they do act like that and you know a lot of times when I tell them this they you know they say yeah I was I was just acting like an idiot you know people make mistakes okay your client might not be the best person but uh if you can work with them with some sort of positivity it might influence them to say you know what man Daryl sorry dude I was just I was just acting like an a-hole you know I'm really sorry you know let's do this you know let's let's work on it you know and that that's how it all works you're right and then maybe down the road they'll tell other people saying you know I was acting like a dick to this guy but he was just really positive and you know he helped me out so I recommend to all my friends you know this guy has a really good web designer he's really patient he knows how to work with me you know because I remember I was a jerk and he accommodated everything and he just he was just on par man great great guy Daryl Wilson great guy that's how you can get more work from even your worst enemies okay so just keep that in mind all right try not to take anything personal your main goal is to make money this mainly this mainly involves like politics it involves current events so right now there's like the whole Ukraine Russia thing just don't say nothing all right you just want to make money don't get opinions don't get involved this is their thing leave it out of your business all right you don't want to lose a customer saying well you know I think this country should do that they're going to say what what you know and you don't want that to happen so just stay neutral stay as neutral as you can and just make your money right because if you have a family you got to feed them and you don't want to put your emotions into something where it's going to destroy everything all right so even if you're 100 correct okay just just okay just ignore it just stay neutral as much as you can all right now let's talk about how to build your clients so we talked about proposable and all those other factors but if you guys are using free methods or if you guys do want to uh build them I'll show you guys how to do that now I recommend PayPal and stripe right and there's also proposable and there's also panadoc I highly recommend those Services they're really really good if you guys cannot use these two Services then we're gonna have to go with stripe and also PayPal all right so this is stripe.com and this is also uh paypal.com now a stripe is a free service it does not cost you anything at all there's no credit check and all they do is charge you like two or three percent now this is available in most regions available in Europe uh South America United States parts of Asia and also they recently put their service in United Arab Emirates I think in the earn Qatar it's one of those one of those places also you guys can use PayPal as well to invoice your clients and I'll go ahead and walk you guys through on how to do this it's really really simple now the first thing that you guys will need to do is sign up with PayPal and stripe okay now let's say for example you guys sign up with PayPal and Stripe Right and this is your dashboard right and you need to build your clients okay I'll show you guys how to do that really simple over here at the top right we have create you're going to see invoice now if you are creating a subscription for your clients you would click on a subscription right this is a recurring charge so let's say for example they paid for a recurring service like a Content writer or SEO package or whatever you can charge them right here with a subscription however for the initial web design invoice I'll click on invoice right here and we're going to go ahead and create an invoice right I'll just go ahead and put myself and this is the memo right you're gonna you're gonna put what the invoice is for right so this this is for Web Design Services right and uh there we go we're going to email the invoice to the customer with a link to the payment page and this is due in 30 days or whatever now how do you want them to pay you I do like this because you can make a payment with card with bank transfer and there are other settings you guys can do maybe they have like cryptocurrency you know if you guys if you guys do get an offer for cryptocurrency I would take it you know because cryptocurrency it's very liquid once you get it they can never charge it back it's yours and it's yours to keep maybe this website will introduce cryptocurrency in the near future right so here we go we have the email right so this is uh this is a general uh link that they're gonna see in their email right so this will go to their email this is what they're going to see now once they click on this they will then be brought to their invoice PDF right so they'll see what they're going to pay for and then they'll see the payment page right here which is actually on stripe so it'll say this is for our Design Services you'll enter your credit card information right here and then pay that once this is done you you will get an email notifying you that they have paid this okay so this is how you can build your clients and then you'll go ahead and click on review invoice and then you'll go ahead and send this invoice to the client right right here you can send it or you can continue editing so that's how you guys can create an invoice for your clients and also for the items just make sure that you guys create like Web Design Services right Web Design Services and the price is like I don't know three thousand dollars something like that you know there we go we'll save that and then uh there we go that's good and then the invoice will change to three thousand dollars okay so this is how you can invoice clients very easy very simple to do also right here we do have the actual um we have the subscription so if you do want to charge people on a subscription basis you guys will go right here and do the same thing create a new product where you can charge them a subscription for your Design Services now let's go ahead and go over here to PayPal so I showed you guys a little bit about how that all that works I'll go ahead and log into my PayPal all right so this is my PayPal account right here you guys can see I got around eight thousand dollars in there so I'm ballin all right now we're gonna go over here to pay and get paid and this is invoicing so this is where you're going to create and manage invoices now when you create invoices again this will be sent over to your client's email and then they will pay you and then the money will go into your PayPal accounts and then you'll get an email notifying you that they have paid the invoice so it's really simple create an invoice right created invoice and uh this would go to your customers email right so just uh put their information right and then over here you'll put the item name so this will be like obviously Web Design Services right so under this you'll put web design services at a price of two thousand dollars uh I don't know if there's tax fee or not for Digital Services I don't think there's any tax at least not in specific States like Las Vegas and California I'm not sure if you guys do need help with actual rates on taxes for Digital Services go to taxstar.com and they can help you guys out there there's a lot of good resources on if you should charge tax for Digital Services and once you guys go ahead and you put in the actual price here there we go there what happened there where do my items go oh there it is Web Design Services okay that's weird yeah you guys will go ahead and fill all this out this is where you'll create it and then right here you'll just click on send and you can click on this little preview little icon right here and this will give you an example of what the invoice will look like so that's it that's all you guys have to do to uh send invoices to your clients so it's pretty simple but that's that's the process you guys will go through once you get a paying customer so the web design process get the email right respond to the user send the questionnaire review and send proposal and contract once you get the money you start the work once you start the work you establish hosting design website initial design color palettes fonts tone the goal of the websites what I mean by here is you're going to first give them initial design or design the website like the colors the fonts the initial design is like 30 of the progress something very small we're going to talk about all this in the very next section so it's going to lead up to the workflow section and then you know color palettes and all this stuff so this is the actual process of the the whole web design overview this is how you should be working in things in order right all right so you started your web design business but now you need to pick a legal structure now when you're first getting charted out with web design I would recommend just staying with a sole proprietorship this is basically saying like you know I'm just doing business as myself later down the road once you get more bigger clients and you're dealing with a lot more money then maybe it's time to consider something like an LLC an S corp or C Corp starting at web design business you can pick from a few different structures you have a sole proprietorship an LLC an S corp and AC Corp there is also something called an LLP and that is a limited liability partnership but that's when you're starting a business with someone else but I'm not going to include that because I don't know if you're you know going to have a partner or not so we'll just focus on these ones here so now let's talk about how to avoid scams right there's going to be a lot of people trying to scam you and you would be surprised about how many people are out there trying to steal money from web designers in fact there are a lot of people in my Facebook group who have been subject to this I'll give you some examples of scam emails and also scam messages where people are trying to scam web designers alright so let's talk about that there are many tactics and many new ways to get scammed all the time always be mindful when accepting work and be skeptical if you can try and take payments with bank transfers or ways where users cannot dispute the charge later what that means is credit cards and checks in fact checks are the number one biggest liability I would not take checks we are in 2022 there's really no reason to text anymore because they can always bounce and for those uh for the for the the new generation who don't doesn't know what that means is what checks balanced that means the checks are no good all right so yeah I mean like uh even my parents we had to balance our checkbook and stuff like that so I understand the old school School versus the new school so just remember that uh try to take payments where they cannot dispute it later all right credit cards they can but with digital contracts you can add some sort of protection when accepting credit card payments all right so number one for customer overpays the original invoice this is a number one very easy to spot scam essentially let's say the job costs three thousand dollars and they give you a check for four thousand dollars they're then going to say oh sorry I gave you a payment for four thousand dollars give me back one thousand dollars you give them one thousand dollars back and then they charge back the initial three thousand and they get your one thousand therefore they just got a free website and they also got one thousand dollars and their money back you you lost all the money that you had and you gave them uh one thousand dollars so now just be careful about that there are a lot of uh that is a very common way to get scammed number two the customer pays in bogus checks or random names if they want to pay with checks just don't accept it that's my rule don't accept checks there's no reason to accept checks there's way better secure ways to accept payments any name that does not match with theirs uh I would not uh go with it if they also do say I have a private associate or someone else you have to pay don't trust them all right it has to be their name on their ID no one else's information because that person can claim fraud therefore they will get the money back from your account so just be mindful about that all right number three the customer has very strange requirements if you don't trust it then don't trust it if they start asking for really weird stuff like you know send the money there or this or that or if they ask for certain credit cards just don't trust it you know and number four this might actually kind of help scammers but it'll I don't know you guys let me know I think this will help you guys uh when people use the word kindly endear those are foreign words all right in America we don't say kindly endear right I never say oh hi dear in fact when you say dear to a woman it's very disrespectful it's like oh hey dear you know it's very uh disrespectful to not just women but also men and a lot of people claim they are from America which they are not in fact a lot of companies who approach me with different business offers they always claim that they're American it drives me nuts it's like look man if you're not American don't say you're American all right if you're if you're a German say you're German if you're English say you're English you know but when I get people that come from me or come to me and say oh I'm American and I hear them talk I'm saying you're not American I don't know what's going on here I don't want to get involved you know so that is that but uh yeah so if you see these words uh don't accept it all right kindly and dear are very common scam words that people use from various countries from wherever they're from all right number five if they ask for personal information don't trust it run there is no reason for them to ask you for any personal information in fact you can work under an alias you know with web design all you need to do is when you write the contract you then need to put all of your legal information and stuff like that but you can just put your business name they don't have to get all of your personal info like your home address your phone number none of that stuff right so uh yeah never give them personal information number six high pressure demands are a red flag if they are very pushy and they really want it fast and they want it now this is a common scam pressure tactic stay away from it don't trust it and number seven and I've said this before and I'll say it again avoid checks this is an easy way to get scammed if they pay with credit cards get a contract all right guys please get a contract uh make sure you protect yourself as much as possible so now let's talk about some real life scams now these are actually emails and messages from people in my Facebook group that have been a victim of scammers and I'll go ahead and walk you guys through this and show you what to look out for so here is an initial response so someone emailed this guy and says hey we want a website can you make it for us he says yeah sure he then says oh this is my budget I this is what I want and then he proceeds to talk about uh caching and cashiers checks and Bank transfers and stuff like that so he's just basically talking about his form of payments right now the conversation keeps going so he says all right cool we can make that payment uh we can make this website for you this is the price you have a logo let's make it happen all right the scammer responds by saying all right cool I'm located in the United States now one thing also to look out for guys is these generic names Jackson Paul like you know John Doe I mean these are like very uh very traditional American names and um the way they speak doesn't really make sense with a lot of their generic names because they don't have that correct American pronunciation so just do like your due diligence and just read the actual paragraph and you'll be like yeah Americans don't really talk like this you know but if they have these very generic names it just doesn't really go hand in hand there's definitely something off there he says hello I'm located in the United States I always prefer to deal with check and money order contact your relative or business Representatives United States that can help you receive this payment now right away uh to me this is a red flag you know I don't know what's going on why do you want me to contact other people to accept a payment on my behalf now the whole thing just seems a little flawed right here and I don't like where things are going so if I did see this right away I would say I'm not really sure what's going on uh later he says please get back to me as soon as possible I prefer to pay you by PayPal or credit card machine but I was warned by my bank to use uh not to use my card or PayPal against any Merchants you know he's all over the place here so obviously this guy's a beginner scammer doesn't make a lot of sense but the scam is right here he says he has a private project consultant essentially with these guys do is they have some other person pay you they overpay you and once they overpay you they then ask for that extra money and then they charge everything back so that is an example of a scammer right so this right here is a scam email if you are skeptical on it and they do talk weird or they ask for some weird stuff or like personal information just walk away from it so this right here is an example of a scam email all right number two we have our boy Amir alright so here's an example of a second scam email so my boy Amir he actually sent a quote to the scammer and the scammer responded back with this message after reviewing the price quotes I think we should continue with the next step since we have already a deadline to meet so they're presenting the tone that they're in a hurry right you gotta hurry you gotta hurry remember earlier I talked about if people are in a hurry just walk away they're probably scammers and in this case they are please I need your payment information so that I can issue your deposit payment in the form of check payments that is my only available payment method right now never accept checks just walk away so right now I just said gone no thank you no problem right if if so I am willing to pay 50 upfront and pay the rest when the project has been done do you have someone in the United States that can receive a check payment on your behalf see why this is weird you know why are they asking for other people like I'm doing business with you right so there's something off right here already right kindly get back to me with the person's information so uh kindly like we talked about right weird weird scam uh scam word now they want all your personal information like your your name your address your cell phone and all this other stuff and of course they always have this random consultant all right so whenever they say they have a random consultant it's a majority a scam don't take it and even if it's not a scam just tell them that you don't do business this way and they're gonna have to find another way of payment right there's also a really cool blog made by Alex Wright and this guy actually has a lot of example scam emails and they're very similar to the emails that my Facebook Community have also received so for example another another good scam too is whenever people uh give you these massive budgets where they're saying oh my budget's five thousand to twenty five thousand dollars uh it's usually a scam right no one just says I have 25 000 to give you you know there's something off about that right like I'm gonna be like why do you want to give me 25 Grand like this is kind of weird you know I don't understand this you don't even know me you know so this person is saying uh my budget is this much money uh he's trying to seem genuine right here you know he's trying to sound like he's dedicated and he really wants a nice website and uh and would like to know if you are the owner that's none of his business all right it's none of his business if you're the owner or not either way you're representative of the company and he should not be asking this information so right away I would see this as a scammer however in the email the person did also say I have a project a private project Consultants again don't do it and the guy actually played along the guy played along and like I told you guys earlier he charged them a large amount yet he wants like a tip or something he wants three thousand dollars back they're basically paying too much money and then you have to give the money out of your pocket and that's the money that they keep and scam from you so just be mindful when you are dealing with uh web design emails and you just get random quotes from your website just be mindful of the scam as time goes on guys a lot of these scammers they think of new ways to scam people um I would never or you know it's a good way have them pay you with cryptocurrency right if they pay with cryptocurrency with a coin that you trust like Bitcoin or ethereum not some weird scam coin that's a good way because once they pay you there's no way to get that money back and that leaves more protection for you but uh again you know as time goes on guys just be mindful of scams there's various ways on how people think of new ideas to scan web designers and this is an ongoing problem you know and uh if you don't trust the email don't trust it walk away from it you can always get a new client and you're not you know you're not committed to these uh emails obviously so always be mindful of web design scams all right guys well congratulations on finishing the business section and hopefully this section covered everything business related uh if there was something that I missed feel free to let me know in the comments below but now that I talked about like initial designs and designed the websites and how are you're supposed to work on things now let's go ahead and go to the next section and talk about the actual workflow of the web design business hey guys welcome to section three so in this part of the video we'll be talking all about workflow there's a lot of tricky things in web design like for example if they have hosting and they want to migrate it to another host what do you do uh we'll talk all about that in this part of the video we'll also be talking about terms that you need to know like what is a mock-up what's a prototype uh what is UI what is ux we'll be talking all about that in this section of the video it's important to know these terms because in the web design industry these terms will get thrown around a lot and a lot of users don't know what they mean so it is important to know what this all means also in this part we'll be talking about how to hand the website over to the client so once you finish the website and you give it to the clients I'll show you guys how to White Label the services and also how to restrict parts of the website from the client you'll find out later that a lot of the times and you give the website to the clients they might mess it up you know and then you have to fix everything they they messed up so I'll show you guys how to prevent that in this part of the video so with that said let's go ahead and start with section three and talk about workflow alright guys welcome to the workflow section of this tutorial so in this part of the video we'll be explaining how the actual workflow goes like for example when you get the client what do you do how do you migrate websites all the things that you'll need to know when you first get a client and how to operate a web design business now a very popular question that comes up all the time is hosting and this is long long debated between many web designers and everyone has their own way of doing things but let's just go ahead and dive into this right here so managing hosting is a crucial part of the web design process you have a few options to manage hosting along with their pros and cons I'll go ahead and dive into each of them and then I'll explain what I think is the best so the first one is you host a website on your server so you would purchase a hosting package and then you would host a client's websites on your server that's also an easier way on how to charge them like on a monthly basis so this is a good approach because you have more control over the client and the web design process now the big Pro is you don't need to ask the clients for their logging credentials you know you have everything right there so you can't manage everything from one location it can be very frustrating when you're trying to ask them for stuff they don't get back to you and it's like they're wasting your time uh the second Pro is you can charge a monthly fee to host their website and also gain that recurring Revenue so that's also a really big plus now with everything there is always cons you'll be on the hook for support if you host a websites you're kind of liable in a way so if anything happens to the websites you know with the hosting or something it's really on you and this kind of interferes with like the recurring Revenue plan because you are hosting the website so as a client I'm going to assume that you're also maintaining the website and that's also being taken care of however if they didn't purchase like a maintenance package it kind of you know gets convoluted there but uh so the second con it's hard to walk away from the clients many of the clients want to work with you but you probably don't want to work with them and this is very very common so uh once the job's done you're going to get phone calls from them saying hey Daryl this is what's this what's that and over time it can just become a nuisance and it's like you know what maybe uh maybe we were brought off just parting ways and this happens all the time so I've worked with many clients some that I maintain really good relationships with and we were like really good friends and others where they would call me all the time and just you know they're like oh so what are you doing how's this how's your business and they're just kind of absorbing all my time and you know it's really hard to say hey I'm busy but you know it's just part of the business so just keep in mind it is hard to walk away from the clients and that is probably one of the biggest cons when you host the websites now another one they host a website it's important to note that you should recommend the hosting provider of your choice you don't want the client to get free hosting and have their website fail so if they watch a bunch of commercials and they say oh uh this website said they're super fast or this hosting they said they're super fast no you pick the hosting you're the designer saying you know what uh if you guys like pick cheap hosting it can drastically interfere with the web design process I highly recommend to go with Cloud hosting like name hero or hostinger or something like that and then give them a link and then have them purchase it and make an account I don't like when clients pick hosting because you're kind of working like on their terms and I like working on my terms that's kind of how I see it so the pros it's easy to walk away from the clients that's the first one and the second part well it's kind of a pro is any hosing problems will be on their end so if there is problems with the hosting you're really not on the hook as much is if you hosted it yourself but you know if it is hosted with the company they chose and there is a hosting problem you're kind of obligated to help them regardless so uh yeah just keep that in mind oh sorry just looking at my phone really quick uh now the cons it's easy to get scammed it's funny people in my Facebook group um what they do is they would work on the clients websites that gets 50 70 done and after the website was up to the client's liking they would just change their credentials lock the web designer out and get the websites and this has happened a lot and this is probably one of the biggest drawbacks when they host the website now in order to protect yourself from this you need to charge them a bigger fee so you'd want to charge them at least 50 percent to get started with this will kind of give you some protection if they host the website because I have I have I've I've personally experienced it when they'll they hijack the website and then they take all your work and they leave and it's like hey like we were working on this they're like no no it's okay uh we got it you know and at least you got your 50 right so at least you got some money back this the second part it's hard to get clients info from them sometimes so sometimes they're just busy they don't return your phone calls and you're you're chasing them around saying what are your credentials or you know maybe they change something on accidents and that's just one of the problems uh when they have their own hosting let's say they already have hosting which is another very common thing if they already have hosting get all their credentials if you can ask the client to add you as an authorized user on the account so a lot of these web hosting companies they have the option to add authorized users or anyone can call and get all the information on the website as long as the owner add them as an authorized user I would go that route um uh ASAP just because it does help you get more control over the situation with the pros again easy to walk away from the clients right kind of like the first one and the seconds any hosting problem will be on their end obviously it's pretty much the same thing as they host a website but with this one um just make sure that you get added as an authorized user econ's easy to get scammed it's very easy for them to walk away from the entire project and the second it's hard to get clients info from them sometimes now if you guys are going to ask me which one do I like I'll be very honest I personally like number two I like this one where they host the website the main reason why I know recurring Revenue can be very good you know I I I'm not denying that but when you are working with clients sometimes sometimes the recurring revenue for maintaining a website might not be enough you know if it's not enough and it's not worth it like they got to be paying at least maybe like a hundred dollars a month because then it's kind of worth it for me but if it's something like 25 50 bucks a month and something goes wrong you could be spending a lot of your time you know on something that really isn't even you know related to the website it could be a hosting issue could be something else you know so I I personally like this one here because it gives you the ability to walk away a lot of the clients are going to find out they expect the moon and the stars they want everything because they're thinking well I'm paying you monthly therefore you have to provide minute support for everything which is really not the case you know so I like this one because it just gives me the ability to walk away plus I can give them an affiliate link where I'd make like a 100 commission off them signing up with the hosting plan the first one is also very popular where you host a website and I have done this before but the biggest problem I had was when the relationship was over migrating the websites a lot of the times they didn't know how to do it they wanted me to do it and that is fine but you just need all the credentials for everything and you can charge a monthly fee for that which does help you could make recurring revenue of 50 to 100 but just keep in mind sometimes when you do this customers will expect technical support and they'll call you a lot and that can be just one big drawback so that's what I've experienced with it with this approach but I have done it and if you guys want you know sign up with the hosting package you guys can host a few websites on a few accounts however keep in mind some web hosting companies have terms and conditions where they want you to purchase reseller hosting meaning they want you to purchase a reseller account and host all of the client websites on a reseller account versus like a cloud or a shared account so if you guys do decide to go with a hosting company where you can host multiple websites on one account just make sure you it's allowed under terms of service and if they say no then go ahead and purchase reseller hosting which is like the same thing you just host a bunch of websites on one server it's just a different plan so but that's what I personally recommend for uh hosting I just like this one because I just find clients over time the relationship just doesn't go doesn't go well and it's just easier just to walk away and get your big payment and you know be done with it but if they are on a lot of recurring Revenue plans then I would probably go with this one here all right so that's my opinion all right next migrating the website use a migration plugin with WordPress you can install various migration plugins like WP migration and this will allow you to migrate your website I recommend WP all-in-one migration if you have errors always feel free to ask your web hosting to migrate the website for you let me give you guys an example we got this website right here right and let's say for example you want to migrate the websites there are various plugins and very easy ways on how to migrate websites so the first thing that you guys will have to do is log into their websites if they are using Wordpress if they are not using Wordpress tell them that you have to make the website from scratch okay you cannot import uh like Wix websites to Wordpress it doesn't work like that you know if they're using um Ruby on Rails or if they're using some other building platform uh you cannot migrate there's a bug on me weird you cannot migrate the website from those other platforms however if they are using a WordPress website or if you want to build this website and then migrate it to their server or something like that all you need to do here is just type in migrate rates and there are tons of plugins you guys can use there is a WP online migration a very popular one also duplicator I haven't used it really but they have really good reviews and also I think Vivid WP Vivid that's also a really popular one uh yeah Cyclone they have their own little migration plug-in that's new to me but they do have a lot of migration plugins I do have a video on how to actually migrate the websites uh you can see a lot of people liked it you know and what I do here is I work on one website from localhost and then I actually migrate it to the actual live websites but I will be making another video on how to migrate your websites but you guys can watch this video I just didn't really want to go show you because I already have a video explaining how to do that so just make sure to check out this video and also make sure to check out my channel because I will be making new videos on how to migrate your WordPress website alright so that's the migration process right so you can easily migrate websites from one location to another with a plug-in it's really simple it's like copy and paste it takes takes like 10 minutes it's really not that hard now let's talk about terms to remember so now that you're in the workflow there's going to be a lot of different terms thrown around from various companies and other designers and it's going to be very confusing on what they're talking about so let me go ahead and talk about each one and I'll give you a visual example of what all of these uh what they are so the first is wireframing you probably all heard of wireframing a wireframe is an initial sketch of the structure of the website it's a set of the boxes content and placeholders to show how the website will be structured let me give you an example so this is an example of a wireframe a wireframe is like the first initial design of the actual website it's just a structure so it's just showing what it could look like and it's going to look terrible so don't worry but it's just giving you that foundation so it's like okay we have the landing page here maybe a call to action here and then some buttons and you guys can do this with you know paper I do it with paper it's old school you know I'm I like doing that you know you guys can also use a Photoshop in the next section where we talk about design I will be showing you guys how to use designer tools like figma but we'll talk about that in the next section but I first just want to explain what these terms mean before we go into the design tools so this right here is an example of a wireframe next we have mock-up so a mock-up is a sketch or design of the initial website it shows the design choices like the colors the fonts the styles of the website so here we go this is example of a mock-up so it's like almost completed right we have some placeholder images here and I just got these from the internet guys I'm just uh you know I'm just you know I'm just using this as an example so here I would say all right you know we got the color scheme down because at first the wireframe was just the actual structure now we're going to add in colors we're going to add in different uh designer tools and make it look a little bit more like a website so it's just the second phase of building a website so this is the example of what we call a mock-up all right so we went over mock-ups next we have prototype now this is what the website may look like once it goes live so it's very near the end of the web design process here is when you would make like the final touches and the last revisions to the actual website so let me give you an example this right here would be example of a prototype so you would just show this to your client saying how does this look does this look good what do you think about it because if you like it we're going to make it go live right now and you know this would be like the final stage of it so they're saying yeah I think everything's good maybe maybe we can change this to green or something like that and that would be like the final touches and that would pretty much go live after this uh step right here so this is an example of what the Prototype would be alright so now that we talked about like the actual stages now let's talk about ux and UI and these terms get thrown a lot sometimes I feel like a lot of these terms are just terms to make web design sound a lot more complicated than it really is but unfortunately in the web design industry a lot of these terms are used all the time in fact if you're looking for work they're going to be asking people for a ux or a UI designer so I'll explain difference between both of these right now the ux is the user experience so it's my actual experience on the website like the process the workflow the signing up the call to actions like how does the user interact on the website the entire experience from the moment a user visits their websites till they leave it's the overall user experience and how the structure of the website operates in simple terms think of a ux designer as a project manager so as a ux designer my first goal is to understand how the user operates right so the user goes here and then what what I want him to do next well I want him to click on this call to action once he clicks on this call to action I then want him to go to this website let me give you guys an example okay so this is namehero.com now as a ux designer my job is to understand how we get conversions and how do we make the user purchase products or how do we make the user sign up with something so it's the entire process of understanding the behavior of your visitors so right here we have get started now right away I'm brought to this page as a designer her I didn't really tell the website to do this but the ux designer saying I want the user to do this right here I'm like all right we have a few different options I'll go ahead and click on order now and now we're brought to this page this is kind of the ux designer's job it's how the website operates and you know going from start to finish all right so next we have UI and this is the user interface so it's basically the designer it's the person making all the colors and making it look you know really nice so the UI is the overall design of the website it's the colors the layout the structure and how the website is branded a UI designer is more Visual and focuses on the design of the website and how it looks and feels so whenever you guys go to a website and you kind of see like the colors and the design and how it looks this is all from the UI designer let's go ahead and take a look at my website alright so this is my website darylwilson.com and you guys can see uh you know I'm a designer as well and I chose a color scheme right and all the colors everything that you guys see right here this is all from the UI designer so this is the person who decides to make all the colors not necessarily the experience of the website just how it looks and the tone of the website but uh here you guys can see that I kind of chose this like kind of like a techie color but also like a red color because I want to keep it a little friendly you know I don't want to be very professional so you guys can tell the fonts I use were kind of bolded right we use Poppins bold I like that also the images they're very bright and colorful so I want to have that like user friendly atmosphere and then here we have like the Subscribe button we have this uh this black bar right here we've also have this little like Circle and the little dots and the X's this is just the brand so this will actually showcase throughout the entire website so uh here we have the WordPress blog we have a little bit more uh information down here like a call to action and then the actual footer here at the bottom so uh yeah this is just an example of UI right it's the design it's how it looks and uh you know we carry this color scheme throughout the website so everywhere you go it looks the same we use the same colors the same fonts uh pretty much everything is the same here that's what they mean by a UI designer so it's the person who actually creates all the design and the style of the actual website alright so now let's talk about UI design software there are various UI tools you guys can use now I'm going to give you guys my opinion on WordPress tools versus tools like figma and Adobe XD and then you guys can tell me what you guys think about that in my opinion a little bit later but uh so figmore Adobe XD can be very helpful for large scale projects these tools can be helpful with the revision process with clients and can help you keep projects organized now in the very next section we're going to show you how to use figma and it actually really helps because if you have Pages or a project that are like 20 30 pages it's very hard not to keep that organized so you have to use some sort of designer tool back in my day I use Photoshop so I would put a screenshot of everything and I put it in Photoshop and I would show the clients that's how I did it but today with today's tools uh it's kind of debatable and I'll explain what I mean in just a bit all right so let's go ahead and move on to the next section so this is where we're going to talk about like the workflow and the handoff so once you guys are working on it until you guys give it to the actual client and then I'll walk you guys through the actual handoff process so number one create an initial design and show it to the clients like colors fonts Styles you do this to see if you're on the right track so before you guys even start working on the website create like a very small visual just show them some colors like a color scheme of color palettes show them the fonts the tone of the website and the style and see if they like it you know just to see that if you're in the right direction before you start you know completing 50 of the website and they're saying hey this all looks terrible you know it'll really save you guys uh from like the a terrible revision process right so uh yeah just create initial design let them know if you're on the right track number two show 30 to 50 of the website completed and offer a revision tool I will give you guys a tool in just a bit this helps them adjust the design to the rest of the website so once you guys show the initial design you work on the websites and then you would show the clients maybe 30 to 50 percent of the website actually completed now personally don't show them the wireframe show them the mock-up if you show them the wireframe they're going to get confused they're going to say why does this look terrible why is there no color there's nothing and they're going to think you're a bad designer so if you do show them work show the actual mock-up or prototype and not the wireframe all right and here we go number three then after you know you get the revision revisions done and everything and they tell you this looks good you then show them 100 of the website and offer the revision tool again so once they say okay uh this is the final uh website what do you guys think you give it to your clients this is the Prototype at this point so this is like the final touches and then you're done right and then offer the revision tool for the final changes this helps the client add the finishing touches and then send it back for the final draft and await further changes number five once finalized you give them the website and the work is completed now before we go on to the next section let me first explain what I mean by the revision tool and then I'll also explain my opinion on page Builders versus UI tools alright so this is Project huddle and this is a plug-in that I do recommend that you guys get for your clients this will make the process a lot easier guys the revision process can be very very difficult it's very hard for you to send something to the clients maybe they don't respond maybe they're doing something and it's it's also hard for them to explain what they like you know and it's really hard to do this without a meeting face to face but with recent technology there is so much available tools to make things a lot easier so this is a plug-in that will streamline the revision process so let's say you give the link to your clients and you're saying what do you like about this website what do you want us to change all they need to do right here is click on this comments and they can skim on the website and just say you know what's uh can you change this change this font and then they can add the comment right once they add the comments they can close it now on your records you'll get this little note from the client saying we want you to change this right and the client can just keep going through this website and say you know what uh this is incorrect so incorrect please change all right and they can add the comments and close it and they can go ahead and add any revisions and add any suggestions to the website using a link once you give them this link they'll be brought to this screen right here where they can make all the changes automatically it's so simple it's really easy I really do love this process and the customer can always see what they wrote if they click on those comments they can say okay uh yeah this is what I want this is what I want and also you know let's go ahead and change this right here you know I like this much easier than a face-to-face meeting this is actually very easy to understand right change this right and they can add the comments now again once this is all done you'll be notified in your uh back end now this does not reflect the actual website okay so they're not going to see this on the website this is all going to be in the back end and it's going to be in the actual section in the project huddle uh area so right here we have an overview section and here you can see that we can see the adjustments right and under the website section we can actually actually see the website and then we can view it in the back end and make all the changes for them and then we can apply it on the actual website so it makes the process a lot simpler for the revision process now one thing I do want to say I do have another video that goes in detail it's about 20 minutes long and I explain how to use this tool step by step it's a great tool I highly recommend it I mean if you want you can just go ahead and screenshot the websites your clients and show them and go that route or you can have this more visual approach where the user can actually interact on the website and change everything like that I think this is a lot much better than the old school like I used to do with Photoshop and stuff but so I have this video right here I will go ahead and leave this video in the description as well and this will show you how to use the tool step by step now another very big common question that I get and this will actually cause a lot of controversy because people can agree with this or they can disagree with this was actually using a UI tool so do you really even need to use a UI tool like figma or adobe XD now I recently asked my YouTube Community do you guys use a UI tool like Adobe XD or figma and around 88 of people mainly use WordPress as their UI tool so this is like the the UI tool the ux tool everything inside of Wordpress 12 of people said they do use UI tools like figma and Adobe XD now these 12 right here are probably using these designer tools on large scale projects Because the actual process of managing a very large project with WordPress it's going to be very complicated and you write might run into a lot of Errors so so just note that a lot of people do use WordPress for small scale projects but in my opinion I think that these designer tools are very necessary for large scale projects so I'll go ahead and give you guys my personal opinion on UI tools versus WordPress now when I was using Wordpress like back in 2014 there was no UI tools you know figma and Adobe XD did not come out till 2016 until middle of 2016 late 2000 16 and even then they were just beta tools they weren't really that high in demand a lot of people weren't rushing to use figma back in 2016. however they have definitely improved since then however so has WordPress page Builders so just to be clear if you guys do want to use UI tools go for it I think it's a great way to keep the project very organized however if you don't want to use it that's also fine now these new page Builders like wordpression Divi these are UI tools you guys can build wireframe from inside the Builder you guys can build mock-ups you guys can screenshot and send it to your clients and there's a lot of features these page Builders have like a global fonts you guys can do search and replace there's so many features these page Builders offer where you can immediately change the website to like one color scheme to another or just the font so it is somewhat debated in the WordPress Community I will give you that but personally I think that these page Builders they are great UI tools and you don't need necessarily have to use designer tools like Adobe XD and stuff like that because WordPress itself is a UI tool it's also hard to say these UI page Builders like WordPress are not as efficient or better than Standalone tools like Adobe XD or figma plus today we have access to theme templates and template services like templatey or theme forest or Elementor template kits I do believe that making a website from scratch can be somewhat of a waste of time it really depends on the client like if you have a five page website I really wouldn't build a mock-up a wireframe and a prototype when I can simply just go ahead and get a template from one of these third-party providers and just adjust the colors change the font switch the images and Bam the website's done I do believe that it's all about working smarter and not working harder however I know designers I know how they are and a lot of designers they get very emotionally attached to the website because they created it so they want to build it from scratch and there's nothing wrong with building a website from scratch all I'm arguing is that uh the amount of templates and amount of tools that we have today was not available five years ago so if I were into the web design business five years ago uh I was forced to use like Photoshop and just you know whatever I could but today we have companies that provide thousands and thousands and thousands of templates that look amazing in fact on my website you guys can go to my websites where I have tons of toolkits for you guys and you guys can use those absolutely free so I do believe using uh template Services is a better way to manage your time versus than building it from scratch now I recommend using Wordpress UI tools when the project is smaller so if you have anything less than like a 10 page website I don't think it's necessary to use like Adobe XD and stuff like that because you can just go ahead and screenshot the images and send them to them and build everything inside of Wordpress however once the project gets larger I do believe that you do need to have a UI tool like something like figma or adobe XD or even Photoshop because this will really help you manage the project for example if the client gives you a 30 page website how are you going to show them all this on WordPress it's going to be very hard it's going to be very messy and it won't look professional so you do want to make sure that if you do get a you know large-scale websites that you have it organized on UI tools like figma or adobe XD so I'll go ahead and read this for you guys so in conclusion I do believe that UI tools are very helpful this is where you can display the wireframes the mock-ups and the prototypes I believe this process is only necessary for large scale projects however if you're working on like a five to seven page website I don't think UI tools are needed like Adobe XD or figma I also don't think mockups wireframes or prototypes are needed on smaller websites because this can actually slow the web design process down and in a sense you are working backwards with all the web design tools at your disposals like template kits uip Builders revision plugins it's hard to say not to use any of them because it can make the web design process much easier just remember this is a business and time is money so it'll be up to you guys I personally think if you're building like a small website you don't need to use mock-ups and wireframes and prototypes that's way too much and it can be Overkill but if you are working with a large ticket client with a lot of pages then yeah I would definitely go with mock-ups prototypes and also have those on a UI tool all right but let me know in the comments what you guys think about what I said there is a lot of commotion in the WordPress Community about UI tools versus WordPress UI tools because the page Builders are getting a lot more easier to use they have sections and blocks and it's really easy to make everything from inside WordPress alright so now let's talk about the website handoff so this is the process of actually giving the website over to the client and I'll walk you guys through a visual process of all this but first let me explain if the client has signed up with a maintenance plan or package and a and you offered a service if either on some sort of plan you're going to follow these steps okay create a role and give the user limited access options the reason why you do this guys is because a lot of these clients are going to find out they're going to log into the website they're going to start updating stuff they're going to move stuff around turning stuff off and on they're nightmares and this is just the nature of the actual web design business I personally don't like them having access to the page builder they just mess stuff up so if you can restrict the access don't let them know what kind of Builder you're using don't let them know anything all right the less they know the better and I know that sounds a little mean and effed up but it's really true they tend to get their nose and stuff and they mess stuff up and just try to White Label everything white labeling means you guys hide the name of everything so for example instead of Brizzy page builder it'll just say Daryl's Page Builder and a lot of these page Builders and plugins and hosting companies that all have white labeling options so whatever tool that you're using just contact them and ask them for the white labeling option and every page builder has a white labeling option however at the current time Elementor does not have a white labeling option but you can have a plug-in that can white label it for you okay I don't know the name of the plugin just do a Google search all right that's something else you know I can't really go into that but uh yeah now if the client chooses no package no maintenance and there is no future involvement then you're gonna follow these steps all right you give them all their credentials you give them access to everything okay do not white label anything or do not white label anything at all because remember uh you know this is their websites and they want to see the tools that you use they can see it for any page builder or Plugin that was used tell them they have support services so whenever you buy something for your clients all of these websites they have Support Services where if something happens you can help them out or they can help them out so just let them know that the support is included for those specific uh products and if you hosted it migrate the website to their new host all right pretty simple all right so now let's talk about the actual things that you have to do when the actual website handoff takes place you add an editor role like we talked about right use an editor role and this would apply also to maintenance plans right so you just want to give them limited access now I recommend right here give them a page builder role for example with page Builders they do have roles right I'll show you guys in just a bit but you can restrict the actual page builder from giving the user like the roles to change the background images or something like that you're just going to give them limited options like maybe changing the fonts but they cannot move stuff around page Builders like Elementor do offer this feature add an explainer video so I would recommend creating like a YouTube video just tell them like just record something saying hey this is how you do this this is how you do this and this is how you do that when you make this explainer video it makes it so they don't have to keep contacting you and saying hey Daryl how do I do this how do I do this it can get very annoying so make an explainer video put it unlisted on YouTube I have many unlisted videos where I would just make something and I give it to my designer and only they can see that link just email it to them or something like that and also view all websites with manage WP so I did show you guys manage MVP earlier just make sure that you can monitor their website for them just you know just so you have your hand in it a little bit just to like see if the website's online what they're doing and stuff like that so I always add all websites to manage WP all right next you're going to get a backup you want to back up the website first just in case things go wrong if they do something to the websites and something happens at least you have a backup so make sure you have a backup and in that video where I showed you guys how to migrate a website I also do show you guys how to use backups as well so just follow that video and you guys should be all set upload a favicon add Google site kits and white label again whatever you can let me go ahead and go in the back end right here and just explain to you where all these options are all right so this is the back end of my WordPress websites and I'll go ahead and walk you guys through on how to do all this ignore this this damn notice I don't know why they keep saying this my version of PHP is updated I don't know why they keep saying it's hot up it's it's not updated it's just I look very unprofessional but I swear I have updated it I don't know what they're talking about it's it's very annoying right uh the first thing I want you guys to do over here is go to users and click on add new now what you guys can do is create a specific user for your actual clients right you'd go ahead and put in the email right here daryl99 aol.com you put their first last name and then you go ahead and you would create a password for them and here under the subscriber you guys can put this as editor and we'll go ahead and adjust the editor role in just the bits but uh this will actually notify them that they have a new role once they have this role they can then log into to your website just like you would log into WordPress normally but when they log in with this role it does have limited features so that's why you create this role you don't want to give them admin access because they might mess something up once this is done you guys will just click on add new user and voila and then the user will be created now I have around 29 000 people on my websites and that's just because a lot of people sign up on my websites and you won't have this so don't worry you'll just have like one person right so once you guys created the role you would then go ahead and go over here to Elementor or whatever pageable that you're using and assign the capabilities for that specific role the person that I uh created was an editor right what I'm going to do right here is go to Elementor and go to role manager now every payroller does have this okay so it's not just Elementor Divi has this as well Divi is a great Page Builder and also Brizzy Brizzy is another really good page builder as well but uh right here it's saying okay so what can the editor do I'm going to say no access to the editor or or I can say access to the edit content only so I only want them to change like the letters and the fonts and stuff like that or I can just say you know what nothing I don't want them to do nothing they can log in on the back end see what's going on but I don't want them to change anything right and then once that's done I'll click on Save changes all right and there you go so now we have restricted access for that specific user now we also talked about uh favicon and that's important you see these little things here at the top right here these are fav icons I'm sorry I call them favicons but what you guys can do right here is just make sure that their logo and brand is there because sometimes it's not and the customer will call you and saying hey uh it's like you see this right here this is an example of something that's unbranded right it's just a little gray thing and that sucks no one likes great things right so what you'll do right here is go over here to site identity you'll add in the logo and the site icon right here so every theme has this so just make sure that you guys do add this to your clients websites because if you don't they might call you and uh the more times they call you the worse it gets I'm just joking they're not that bad guys I swear I'm just a little cynical sometimes because I've worked with them so long and at times I could be very nice big nightmares but at the same time I love them you know they pay us so we have to be very respectful now let's talk about Google site kits right so I'm gonna go over here to dashboard and right here we have Google site kids now I love this because when users log in on the websites uh they will see this right so we have the actual traffic they can go ahead and see the contents of what people are doing on our websites like how are they finding our websites we also have the speed which hopefully doesn't cause that much conflict with customers because if they don't get the green light for everything they might start panicking but um it does show your speed all right good so here we go so you can see that we have the the green light which is good but we might need to work on the mobile device a little bit more not a big not a big issue uh right here you can see that we have our Impressions our clicks uh you know how many people are visiting the website so we had around almost 300 000 Impressions and these are the actual visitors and it also explains where they are coming from so you'll have all this in the back ends now if you guys do want to install this plugin you guys all you need to do is integrate it with Google analytics right now I will be making another video on Google site kit and analytics because that can easily take another 30 minutes and I don't want this video to drag out but it's very very simple I'll show you the plugin it's actually created by Google so Google actually got involved with WordPress and created their own plugin and before you had to like get like Google analytics plugins and AdSense plugins and you have to get all these plugins from various locations and it was very time consuming so now there is the Google site kit so this is the plugin that you need right here it is called site kit by Google the great thing is guys it's completely free there was no pro version you don't got to upgrade to anything like that it's completely free and it's great because it it grabs everything so it integrates Google search console it integrates analytics and also integrates AdSense all from one location and this is a Google plugin so they constantly update it you're gonna find that a lot of the plugins that are used by Google analytics from other developers they abandon the project and they no longer develop the plugin so at least we know that Google is making this and it's very simple just go ahead and activate it go through the process I will be making probably another video on how to set all this up step by step but um that could take maybe like 20 30 minutes and if I do create it I will put it in the description of this video alright so that's how you guys would hand the website over to the client so that's when the payment goes through and then you have to do these last things just to make sure that your client's happy and they can log in and check everything out all right so that is the handoff process now let's talk about the last thing just a parting gift for you guys uh you guys can get some free resources like pingdom GT metrics manage WP and Tiny jpeg so I recently made this video it's called the 25 most useful websites for web designers you wish you found earlier guys I highly recommend to watch this the websites and the free resources will make your life so much easier uh you won't have to use Photoshop to shrink your images there's a lot of optimization tips and tools in this video so I highly recommend to watch this video my party people that is the workflow section of this tutorial hope you guys enjoyed it let me know in the comments if you guys have any questions about what I talked about so let's go to the next section hey guys welcome to section four of this video so in this part of the video we'll be talking all about design right so how to get that good eye for design I'll be very honest guys when people first start web design they think their website looks great and then you ask someone say how does this look and they're like it looks terrible and you're like you don't know anything man you know that's what happened to me you know I thought my websites all looked great and everyone was just out to get me it turns out you know my websites looked bad and I just thought it looked good because I created it and I had that personal connection to my websites so I'll make sure that you guys don't run into the same mistakes that I did design is crucial eighty percent of people decide to purchase your product based off how the website looks and 60 of people will leave your website immediately just depending on the colors and how it looks to them you guys should let us know who's a better designer me or Daniel let us know in the comments below if you guys think Daniel has some good designs let me know in the comments below and we can have some sort of dialogue here about design we went ahead and we hired some of the best designers in the world to show you guys what a good looking website looks like versus like an amateur website so I'll go ahead and give you guys examples of great looking websites and also mediocre websites and how one small change on a website could make it go from an ugly website to a great looking website so this is my favorite topic let's go ahead and talk about the design of websites hey guys welcome to the design section of this tutorial I love design I love talking about this stuff so in this part of the video we'll be talking all about the design of your website so we'll first be talking about fonts colors the structure showing you all goodnesses versus bad web design practices so there is a difference on how to properly structure your websites we'll be talking about padding and animations and all that stuff in this part of the video get your thinking caps on and let's go first let's talk about fonts fonts are a very under talked about topic but they actually represent the tone of your website so choosing a font is important it reflects everything about your business and helps users understand who you are the font reflects the professionalism of the business and the nature of the business it attracts certain customers here's an example right we have seven popular fonts right here we have open Sans monsterat Roboto Poppins which is my favorite font which is the one I use on my websites lado Playfair and helvetica I think that's how you pronounce it right this is like the Final Cut Pro starting default for those of you who use video editing but you can see all these fonts right here represent something differently right so depending on what website you're going to build you do want to pick a font that corresponds to the tone and message of your website so for example if you're using like a very uh corporate website you might not use Playfair you know I think Playfair is more for like modernized digital agencies right so this would be good for agencies or something more down to earth right but if you're creating a corporate website I think Poppins is actually a really popular font for corporate websites also monsterat as well so you guys can see just by looking at these fonts how they would play roles on different websites I'll give you guys an example in just a bits but let's keep going here now fonts one to two Max fonts on your website guys do not use more than two fonts okay you can have like a primary font and maybe a small sub font but try to be consistent if you add multiple fonts on your website you're going to lose your identity and your brand and it's going to look terrible all right this is your chance to grab attention all right it sets the tone of your website that's very important font and colors both at the tone of your websites it helps establish the recognition for the website users will see the font and remember your business all right so the first font right here you guys can see it's Poppins right and it's a great font because it's it keeps the professional approach yet it's also welcoming and inviting and you guys can see that I keep this consistent throughout the websites I did use pop-ins on a smaller I don't want to keep Bolding it right you might want to bold your headlines right here and then for your subtext make sure it's not bolded and don't italicize it either don't underline it it just really depends on your on your style of the website but uh for good web design practices you want to make sure that this um that this subfont supports the actual heading text so this is like the main text and this supports the actual heading text so just make sure that you carry that throughout the websites that you create now let's take a look at this font it's a very friendly font right and the reason why we chose this friendly font is because hospitals can be a scary place right for a lot of animals it can be very frightening and scary but we want to create a friendly font because we want to invite them in you know we want to invite you guys in the vet hospital yet we also did keep it professional right here with this actual uh supporting text or the supporting font right is friendly approach yet it's also professional at the same time you can do that with two fonts you see we're using two fonts here but we're using it correctly right we're going to keep it consistent throughout the entire website we have friendly fonts friendly fonts but also we have a professional font that backs up the friendly font right and we keep this consistent throughout the website now my best advice guys is there's like you know there's hundreds of fonts you know you just got to find a font that kind of represents uh friendliness or something like that and uh you know just pick a font that works for you and your web design business or your websites that you're making but I mean just look at this it looks great you know it's a very friendly font yet it's also professional so this is how you can Implement two fonts on your website but we don't use more than that okay we keep it consistent with two fonts and that's it so uh you guys can actually view all these websites that are actually on my uh my websites under the Elementor template kits you guys can download always for free for your own clients just change the images or change the title and Bam you got a brand new website oh colors guys colors are so important you have no idea well maybe you do let's find out so 85 percent of purchases and services are influenced by color so 85 percent of people will decide to go with your service just by the color of your website that is a true fact colors boost the brand recognition by up to eighty percent you guys know what color McDonald's is right what color is McDonald's it's red and yellow right what about uh Chase Bank it's blue what about uh Mercedes-Benz it's silver right Apple silver like these colors are recognizable because we know the brand and we know the color right first time color Impressions is responsible for sixty percent of acceptance or rejection of their product or service so what this means is right when I go to the website and if I don't like the colors or I do like the colors I will make my decision based on the color of the website so for example if I'm a very wealthy person and I go to Mercedes-Benz and I see silver I'm going to say oh yeah this is silver this is for me I got a lot of money but if I am a poor person I'm gonna say no no no no silver this is going to be expensive right when you see like Rolex the gold and you're poor you're gonna say this is not for me however for poor people if you go to websites like uh what's a what's a cheap car I don't know Toyota Right Toyota that I think that's the cheapest Right Toyota if you see Toyota's you're going to say oh cool like red you know we got green colors we have a call to action colors so that person would be influenced to buy a cheap car but if you're a millionaire and you go to Toyota you're gonna say yeah this these are like the little little kitty cars not for me you know that's fine you know you're just establishing a brand right but um this is why the uh first time color impressions are very important first we need to understand the psychology of colors and how it impacts users right we'll talk about that in the very next section pick a color that helps represent your brand so for example if you guys are attracting High ticket customers you might want to use white black or silver those are very luxury high-end colors but if you're attracting very low end clients you might want to use like red green orange friendly inviting colors something like that the color is an identity about your service and it also represents you so just keep that in mind all right the colors of the website sets the tone Oh Oh We spelled that wrong oops so it says the tone of your websites right so it sets the tone so whatever color that you introduce on the website this kind of represents the entire tone just like we talked about Mercedes-Benz and Toyota right you guys got that the colors help attract a specific customer so gray equals high end and orange equals friendly like a Nickelodeon you guys watch Nickelodeon you guys are growing up it's an orange color it's for kids it's friendly you know rest in peace they're gone you know it's so sad kids today don't watch Nickelodeon it is uh this new generation number six color set an immediate impression for first time Impressions so right when they see it they'll be influenced keep that in mind all right now we're going to talk about color psychology and how it's used right now every corporate company picks colors specifically by their color and this sets the tone of the actual business for example red right ambition confidence bold passion energy aggression this is why um companies like McDonald's use red because it's urgency we want you to hurry and buy our products Coca-Cola right come on and get a Coke you know come on get a Coca-Cola oh come on Netflix come watch a video you know they're inviting but they're also asserting themselves with like some sort of dominance right they want to uh they want you to watch their stuff they want you to buy their products it's a call to action it wants you to do something right pink love respect sensitivity uh inspiration dreams it's more of a feminine color most feminine products use pink right next we have purple deep modesty luxury royalty distinguished and companies like Thai Airways which is like a very high-end uh Thai uh uh airline company they use purple right because that's royalty they're kind of like high-end but it also represents many other feelings right modesty and creativity so Ben Q it's not necessarily a very expensive brand but they're just trying to say like we're modest we know we're we're in the middle here we'll help you guys out you know so it's kind of like a luxury color and it's also somewhat like a modest color all right black black is professional accuracy strength formality value sophistication now black can also be luxury as well a lot of the brands like Dior a lot of the makeup brands like uh Dior what about makeup brands you have Dior right uh I don't know a lot of those makeup colors they use the skinny black fonts right and that represents like a high-end tone so you know when you walk into Dior you know it's going to be very expensive right but if you bold it it becomes friendly right so if it's thin it's luxury if it's bold it turns into something like Nike or Vans or it's more just professional right like Nike says just do it right orange here we go we have youthfulness motivation playfulness right and here we have Nickelodeon right yeah we've also used Hermes and this can be something to like motivate you to buy their products right it's like come on come in you know like we're you know coming in by us you know we won't bite you guys but they are a very expensive brand you know uh next Blue this is a great one why do you guys think social media companies like Facebook Twitter LinkedIn are all blue because they want you to trust them so they can take your information and they can sell it and that is the cold hard truth they all do sell your information but they want you to trust them that's why Banks as well banks are all blue right like Capital One Chase Bank many other Banks right they're always blue I'll give you guys examples of real life websites in just a bits yellow we have youthfulness Optimus now notice McDonald's chose yellow yet they also have a mix of red because they want you to take action they want you to buy their products yet they also combine it with the yellow font because they're saying oh we're fun we're we're friendly you know we're down to Earth but they just want your money and that's really uh that's that's business right great we have solid neutral uh practical classic mature right they're mature so usually silver products are for mature people they can also be luxury Brands nature positivity stability growth equality and Harmony right and also we have brown which is earthliness rustic durability Simplicity nature and rugged have you guys noticed how UPS the uh the company that delivers mail is also brown right because they are earthliness right they're boots on the ground they're walking to live over mail so that's why they chose Brown for their branding color now let's go ahead and take a look at some real websites and give you some real life examples here we go we got Chase Bank the first one and right away you guys noticed Chase Bank chose a blue color scheme yet they also have this green button the reason why they chose a green button is because they want to create wealth right so green also has an impact with wealth I'm very curious as to why they didn't carry that color scheme oh there we go okay there's more green buttons I was gonna say like what the hell happened there so if you introduce colors on the homepage guys you must carry this throughout the actual website that's how you can keep your brand consistent the next one Capital One so they chose this blue color yet they also have a red you know they want to have some sort of urgency right so they have this blue with the green right blue green and they want you to buy their products and uh yeah so that's pretty much it all right McDonald's you guys can see I'm in Thailand right now that's why it looks like this but they use a red because they want you to take action yet they also have a yellow because they want you to know that they're friendly all right so that's why they chose this color scheme same thing with Wells Fargo they chose the exact color scheme as McDonald's they want to be friendly yet they also want to carry this yellow color scheme that they're friendly and that they're inviting right and uh yeah those are some examples of some color schemes and how they're used I have a fun of the video that goes in detail and talks about colors but that is a general rundown about how to use colors on your WordPress website alright so now let's talk about the purpose of the website so you should coordinate the colors the fonts and the structure of the website depending on the purpose of the website that's why I asked you or I told you earlier to ask your customer about what kind of website this is for like what are you using this website for so why do I why do I say that why do I ask that well a funnel website trying to make sales uses colors like urgency or trust and and the font would be something like you know an inviting font or a friendly fought in welcoming fonts this helps with conversions and helps users understand your website more so if you have a very luxury website you'd want to create some sort of fonts and colors and structure depending on what you're offering or what your client wants right so uh yeah that makes sense you guys got that all right cool so the website structure the structure helps the user understand the website culture okay I'll give you guys an example of what I'm talking about in just a bits portfolio websites are generally more modern and fruitful because you are trying to impress and attract new customers corporate websites are more structured simple and easy to follow funnel websites are more geared to pressure users to purchase with one with one large button clicks right you have those big call to action buttons and it's just like a guy doing this you're right like they just want to pressure you into buying the product all right next section so let's talk about consistent design keep the fonts colors and the structure of your website consistent throughout the whole website I cannot stress that enough a lot of amateurs fail at this right here so let me repeat this one more time keep the colors and the fonts and the structure consistent through your whole websites all right so you guys are beginners you're going to make this mistake I promise you once you start developing the landing page you're going to go to like the middle section you're going to start doing something different and it's going to look terrible this is a very very common mistake I've seen from amateurs now whatever colors you introduce on your home page keep them consistent this is your brand so if you guys noticed whatever colors and fonts you introduce on the actual landing page which is also called the hero image or the hero page section or whatever this is your brand keep these colors and fonts and design consistent throughout the entire website I'll give you guys examples in just a bit and don't change the color scheme or fonts on different pages your website loses its identity if you start changing stuff on one page on another page it just looks like multiple websites on one website it looks terrible and it's a quick way to lose your identity and your brand so let me give you guys some examples of good web design practices this is the new life template this is more geared for counseling and therapy right away this image sets the tone of the website so you see this guy he's kind of in despair he needs help and that's why they're coming to our websites to get help right so we have these friendly fonts and colors right so we have this professional yet it's also welcoming at the same time and we've also chose a yellow color scheme because we want to be inviting we want people to say hey we're here to help you guys you know we'll help you out and you know come on in we'll we'll give you guys a we'll have a free consultation right I wouldn't want to use something like red here I don't want to pressure these people I just want them to be like a like a more of a friendly welcoming right you know what I'm saying and down here we have just a little call to action right and the same thing right here so we've kept this color scheme right here and we keep introducing this throughout the website so we have sort of like a it's like a it's like a black and also a brown font that we chose and uh we combine that with a yellow button uh the reason why we chose Brown was because Brown is down to earth remember how we talked about it's down to earth it's kind of like you know we're we're just normal people don't worry about it this is the message we are trying to send to people visiting our website so here we go and we got the little trees you know we got the cute little trees and stuff like that here is our psychologists and uh right here you know we we added these guys in they look really professional yet they also represent like help you know so we wanted to make the uh this part of the section look a little stronger because these guys are going to help you so we want to make sure that this section represents help you know for these people right and then below that we have a picture of a woman counseling this man and here we have a b empathetic and patient so uh we're basically creating this sort of environment where we understand the actual problem and we want to help you so you can see that this website uh truly does represent uh something that would want to help people with their issues and problems and we understand what you're going through right and then it's going down here we have leadership business family and organization now this is reinforcing the actual image so here we have the image right and after they see this image they kind of scroll down here and they see this like oh we're reinforcing the image right I like that and then here we go we have the same color scheme and the uh the button and here we go we've kept everything consistent all the way to the ends and that is the end of the website so uh you can tell right here that we did a lot of work we actually picked the color schemes according to the tone of the websites like we talked about earlier it really depends on what you're trying to build you need to really pick the colors schemes uh that really represents what you're trying to do so right now I'm going to talk to you guys about padding right I did mention something about padding earlier and I do want to talk about that but uh here we go I'll just give you guys one more example and then we'll cover padding and the importance of it so here we go you know we have this big sale today now we have this little line right here and with this little shop now now this line right here is also part of the brand now I know right now on the page it doesn't look like much yet we're going to keep this consistent throughout the entire website so we have this black this red and this little line as our brand right and if you scroll down you guys can see we've kept it consistent we keep introducing this brand because this is uh who we are we want people to remember us based off this design right here so you guys can see that everything here is consistent and also notice the padding of this website right we we have kept the same padding right here right so padding is space now in the next section I'll give you guys the importance of padding so just stick around but uh yeah so this is an example of a correct color scheme and a correct way to carry the brand throughout the website we don't use a bunch of random colors we're not going to introduce like four or five colors we want to keep it very consistent here that is how you guys would keep this consistent on your website now let's go ahead and talk about padding this is how important padding is this website looks nice this website looks terrible right just because we don't have the correct padding padding can destroy your website so you want to make sure that you have correct padding now the reason why this looks terrible is because this text right here is way too close to the edges anytime that you have text close to the edges it looks clunky and it looks lost right so this padding right here it looks very well structured and people can understand the message this one right here no when you guys are building your website you guys do want to make sure that you incorporate enough padding onto your website obviously here I can go ahead and change it to something like boxed which will kind of you know fix it a little bit but um yeah on the outside of the message you're trying to send make sure that you are consistently needing enough padding notice right here we also do have a lot of padding because we want the message right in the middle we don't want it at the bottom we don't want it too far to the left because then it just doesn't look correct now a really popular website that uses padding all the time is Apple notice Apple always has this sort of approach where they have so much padding on both sides and they do this because they want to Center their image to represent something very uh luxury right like look at this like so they clear up all the padding and just put the message right in the middle with this kind of approach it adds more of a high end and more detailed approach versus something like uh you know this or this is just like a you know just a general website so here they've used padding right here here to kind of represent this product and create importance for this product if you guys do need help with padding I would highly recommend to just take a look at a lot of these websites it's very hard to teach people how to correctly use padding but if you just take a look at enough websites and understand how we use padding right here like we probably added maybe 50 pixels right here you can kind of get the idea of when to adjust your padding and when to you know when to add more or when to put in uh less but Apple also carries this consistent throughout the website right so even right here you know they have just put this in the center they have created a lot of padding here because they want you to focus on this product now then the same thing here and also right here now right here you guys can see they switch up the padding a little bit more right so but notice here how the the padding is not too close to the top yet it's also kind of far away from the actual end of the box and it just represents like a good structure right and they carry this throughout the website so they carry the structure all the way throughout their websites and Bam there is the footer at the bottom so when you guys are using padding just use it use it to what your website is trying to accomplish so if you're trying to have some big message have enough padding right here if you're trying to create something else a little bit more creative you can you know do something else maybe you know put it to the left and try to get creative and stuff like that so yeah that's how a padding is very important it plays a big role on the tone of the website the structure and the message you are trying to send to your audience all right so now that we talked about the actual structure let's now talk about landing page strategies all right offer a straw a strong call to action navigate the users don't let them get lost tell them what to do alright limit the choice the user has don't give them five buttons there's no reason to do that it's going to look tacky they're going to get lost and there's no direction for the actual visitor buttons with start here or shop here helps navigate the users right like start here visit here give some sort of action to your visitors social counters or some sort of social proof encourages the user to act so if you have you know like social pop-ups or something like that it just creates a more social environment so the user's not so isolated right they're kind of like oh everyone's everyone's here you know like all right cool I'll join too and that's really what it comes down to all right the make the brand clear and easy to establish like we talked about earlier with the brand and the structure make it easy to identify right show a contact form ways to contact colors can immediately impact users to make a decision now this is for lead generation so let's say for example you are a contractor and you want to make appointments have the actual contact form on the home page right invite them to do something but if you have the contact page on the very last page and not on the home page and you're trying to collect leads that would just defeat the whole purpose so you do want to make sure that you do have a some sort of sign up form or a contact form if your goal is to get leads see how see how everything works now with structure you guys are getting it cool now number seven use images that reflect your service and are relevant to your brand like we talked about earlier with the actual therapy websites you can see that people are in despair but at the same time it reinforce those images with the lady at the bottom trying to help the man get through and you know overcome his problem so we're trying to create an environment where the images do represent what we're trying to accomplish on our websites number eight first and only impression guys make it look good you gotta make it look good that is your only chance to get a customer's business to get their money all right that's your only chance all right so make sure it looks really good and number nine don't write too much keep the message keep the message fast brief yet effective so let's take a look there we go we have Chase bank right guaranteed uh closing or get 2500 fast message right Capital One unlimited rewards no annual fee fast quick message Wells Fargo simplify your life a quick fast message let's take a look at my templates Innovative brand right Bid Farewell and misery to your pain so this was a little bit longer but uh I would probably keep it under like eight words again you know but uh I think this message uh definitely sends the message to the uh the customer that we are trying to help them Finley big sale today all right so keep it short don't write we are the best company in the world you must buy us we are number one don't do it don't do it it's terrible right uh Apple Peak Performance just keep it brief okay so you guys got the message all right let's keep going here importance of padding like we talked about earlier Believe It or Not padding sets the importance of your website and makes it look clean like I showed you guys earlier if you have padding that's too close to the end of the website it looks broken it's very very important to implement correct padding on your website padding can all padding can't help you present products and add importance to the landing page like we talked about apple right so apple is setting the importance of the product based off of the space so it's like right in the middle the padding is you know they had a lot of padding on the right and the left side because they want to uh showcase their product padding also sets the style and the design of your website remember earlier how we had the portfolio website and then we had the other websites they all have some sort of different structure right and they do that because they're trying to also represent some sort of brand right so padding does also go hand in hand with your brand as well all right padding can dramatically make your website go from a clunky websites to a clean website uh just like I showed you guys earlier with the Findlay layouts if it's if the padding is not correct the website looks broken so it's very important to have good correct padding all right and I didn't mention this earlier padding a space okay it's the space all right that's what it means so uh yeah let's keep going animations guys don't use too many damn animations it will make your site look tacky don't do that you know don't do it it just keep it simple on all these websites I used very very little animation right I'll give you an example website with really good animation but you guys should keep it as brief as possible also remember uh the animations are CSS and this can slow down your website so just keep that in mind I recommend using animations to a very minimal level I personally like animations when fading in small parts of text I'll give you an example of that in just a bit if you do add animations be consistent with them on your website so if you do add an animation on anything you have to kind of carry that throughout the website because that is your brand all right do not overdo animations guys let me repeat this one more time do not overdo animations it can make your website look unprofessional and may look like beginner work and this is usually very true if you're not sure if it looks good don't add it if you're not sure get rid of it all right plain and simple now let me give you an example of websites with really good animations alright so here we go we have our Credo layout and I'm going to go ahead and refresh this page here and right away you'll see how that kind of Fades in right there I like text that fade in I think it looks professional let's go ahead and keep scrolling down here now these were images that we added for our portfolio websites now we've kept this consistent right it's like they're falling down as you scroll I do like this but take a look at this text right here as you scroll on the left side right here here we go right there you see how it just it slightly fades in not too much a very subtle fade in it's very brief and it's not like you know it's it's really chill right so if we keep scrolling here we'll keep seeing that right we'll see it fade in right there it fades in right and there you go it fades in so I do like that it's a very soft fade in I feel like that adds a very professional corporate approach but anything that starts doing this or starts doing this I don't like it it's a very very brief fade-in it just it's just enough not to make it look too much right there we go we got it again right all right so let me just go ahead and show you guys one more time here just in case you guys are complete noobs and you didn't see any of that I'll go ahead and refresh the page all right fade in right these fade in the text fades in beautifully right fades in beautifully right fades in beautifully fades it beautifully I do like that that is fine but we've kept it consistent so that is our brand as well so remember when you do on animations just keep it brief alright so now that we talked about the importance of animations and everything else now let's show you guys good web design practices versus bad web design practices you guys ready all right so in this section I'll be showing you guys good wireframes versus bad wireframes and how to fix them so when you guys are building your website you guys might be looking at websites and you're kind of confused on how we actually picked and designed the structure of the actual website so first let me give you an example of a bad practice explain why it's bad and then we'll go on to the good good section and we'll explain how we actually did all this right so let me go ahead and zoom in really quick right here and show you guys this specific wireframe here we have the title of the website right so we have a good message right and we have a call to action and we have a sign up form now personally this sign up form it's two clutter right it belongs probably a little bit lower right here or we can even make a new section for this uh this book now right so if you guys do want to add like a book now or a lead generation just have it you know just have one there's no reason to add a book now and then also a button here because they're confusing right you're telling them to go to two different random places and it just doesn't make a lot of sense now on the next section right here we have another call to action now the reason why this is incorrect is because we already have one up here but we don't have anything in the middle right here so maybe if we had a section in the middle and then introduce this section it would make more sense so when you have call to actions don't stack them on top of each other it's incorrect and bad web design practices because we have already invited them to click right here so why are we doing it again right here we could have remade this right we could have added something else to improve it next we have the section title so this is just like a section you know about your staff and everything and also right here we have uh some uh testimonials about that person now below here this section right here I don't think you would need this right so this is reinforcing uh the testimonials right because the testimonials uh this is reinforcing the actual staff right and this section right here it's not really supporting anything and at this point it's just kind of like clutter and it doesn't really make sense to have this section right next we have the call to action now this right here is not bad right so we don't really have any call to actions uh below here I personally would mix it up though I would probably put the call to action on the right side to kind of change up the button oh it's always on the left side because right now if you look at our website from a long point of view all the buttons here are on the left side and it just I don't know I would want to mix it up just a little bit here so uh yeah make sure to change that up you don't want too many stacked options on top of each other there all right and then below that we have the blog section which is fine now here we have a supporting text now this is maybe correct or incorrect so you might want to add things here like as seen on uh so and so website as seen on something else but adding the features again here at the bottom uh might be incorrect it really depends on what you add I would personally make sure that you add something like as seen on something but you don't want to talk about your features all over again at the bottom of the page because that really wouldn't make sense and here we have a call to action now this call to action is also a little bit incorrect because uh the way it's structured you'd probably want to add something in like a middle call to action and then close it right you wouldn't want to add in a image on the bottom of your website because people might not even scroll to the bottom of the website so you'd want to make like a bar right here so overall this structure of the website it's a little incorrect you know there are some things that we can do to sort of improve this with these sections on the right side so right away what I would have done right here is I would have taken this section and I would have dragged it right there notice that makes it look a lot cleaner right so now the buttons they're not all stacked on the left side and it's like you know I am all about consistency but uh that just looks very repetitive when you have all the buttons on the left side and it just might not it might not look correct and then now we have the section now this makes sense right now that we added this section see how one small section just influences the entire website it's really crazy how that works so now that we uh we have these sections we can kind of drag these in right so I would go ahead and also drag in this section like that so notice here how we have this call to action yet now we have this different section where they can book appointments so it's not so clutter because before it was all the way up there it just didn't really look correct I didn't really like it so now that we added it down here now this looks much nicer and clean and notice here how we have this color that introduces the next section so now we have this other call to action and now this now this is correct right now we can have a call to action on the left side because uh we don't have all the buttons stacked up on the left side right let's get going here let's see what we can do to improve this so next we have this section right here and this section is okay right it's not a bad section to add but we need to distinct it from this section so the fact that these color schemes are the same as a user I am inclined to believe this is the same category so we need to add some sort of background color to take it away from that previous section so for example I'll take this section right here and I'll drag it over now notice here how we added this different color scheme let me go ahead and step back here a bit there we go there we go oh that's weird hold on let's there we go like that so notice here how we added in this color scheme uh now it's different from the previous section so we want to reinforce the user saying uh this is a different section and we're going to be talking about a different topic right so that makes a little bit more sense now if we take that away and just leave it like as a white section like oops sorry about that like this right here it sort of becomes confusing because I don't know if this is the same section or not so this is an example of good practices where you'd want to distinct the section uh from each other right and below that we have a call to action and this right here makes sense right because we have created a brand new section we have the blog articles uh also right here again we're using uh the same color scheme so it's too white so you notice here how the entire page is white and there's no real different shades to represent new sections you want to create very subtle uh sections and colors like this just to let the user know that it's a new section all right so let me give you an example here I'll go ahead and just take this section right here and we'll just slap it down there notice how this just makes such a big significant impact on the website like now we can see here at the bottom of the page that this is a oops sorry this is a brand new section and it looks much cleaner it looks much structured just because we added a simple uh background color now this section right here I would get rid of it now the main problem is I probably would want to not showcase a large image on the bottom of the page in fact I might even want to move the button somewhere else right so let's go ahead and drag this over here so see here how this call to actions on the right side but if we take it away right here you'll see that it just kind of looks we don't need to add in that image at the bottom of the screen so this right here is correct web design practices and this right here you really want to make an inviting call to action at the bottom of the page but you would want to make a call to action that's somewhat inviting yet also it's closing at the same time so this right here is too strong to be at the bottom of the page but uh here we have a more subtle call to action near the bottom of the page and that's fine all right so let me give you guys the correct web design practice now in a in a in a nutshell right so uh this is our wireframe does this look similar well it should be because I showed you this website earlier and I'll show you that websites uh in just a little bits but here we go you know we have the hero title we have have the call to action on the left side we have another reinforcing call to action we have the section title now we have this section right here and this reinforces again this section right here and this section right here also this would just reinforce the user saying yeah check out this websites it's cool whatever and then below that after they read this reinforcing text they might want to take action right so we want to give them that call to action below these icons right here and then below that uh if they're still not sure we'll show them some blog articles uh try to uh you know create some sort of friendly tone where they might want to visit you know parts of our websites below that we can add in some sort of like you know as seen on or we can add in something right here that would reinforce the user to take action at the bottom of the page we can make something a very subtle call to action and then add our logo here at the bottom so this right here is an example of a correct web design practice and do you guys know where you saw this wireframe at no well let me show you and here it is so this is the same wireframe that we used for the new life template that we created so let's just uh take a look here how it's used in real life so we actually have the message right here the call to action in the middle right we have the call to action the book now on the right side we added this on the left side right next we have the team of psychologists and then we have the reinforcing section to reinforce the previous section and then here we have some general little upsells you know seeing what we're about again we have a call to action in case they read this right here and then they want to take action on the very next section here we have some latest articles and news we have some other little gadgets and widgets that might want to encourage people to engage on the websites we have a button right here where it tells people to take action and then we have the footer at the bottom of the website so you guys can see how the wireframe and the website go hand in hand so that's the importance of creating wireframes and how you can implement it on your website did you guys like the design of this websites if you did let me know in the comments below what do you guys think about it if you guys didn't like it or disagree I'm always interested to hear what people have to say no problem if you guys think it sucks just tell me let me know I'm always interested alright so last week I asked my subscribers if they have websites and if I can use those websites and show them on this video and also revamp them so let me give you guys examples of some amateur websites and how we have created a remastered version of it and you guys can let me know what you guys think because you guys can participate here at this point you guys know the design process pretty well so this is a subscribers website they watch one of my videos and they made this website so the first thing right here is this message is a little confusing right because the call to actions over here on the left side and it should be maybe centered also this section right here I'm not really sure why why it's you know why it's on the left side and also this header is very very large so this should be a very thin header so this right here is just a lot of white padding a lot of space and we want to reduce that as much as possible right so let's go here and keep critiquing this website so we have this candle okay so I guess they're selling candles right but I would probably put this call to action somewhere else I do like the actual uh hover though that's pretty nice they've actually kept this consistent right black and pink which looks nice uh this section right here I would go ahead and adjust the padding right so uh the problem with this is the padding's too high and also these lines right here they're touching the top so it's kind of confusing right it kind of looks a little cluttered it looks a little messy so I would go ahead and rearrange this section as well uh debut EP collection now this design right here I haven't really seen it anywhere else on the website right so this is just like a random design and it would make sense if this was on the home page right because then they can carry that throughout the website but since this is right here so I just don't know really why it's there also I would have added more padding right here so uh this is a little bit too close to this section right here so I would adjust the padding here I would push this section down a little bit more uh keep going here and then we have this uh call to action or this I guess this is uh I'm sorry this is a footer with this section here at the bottom now this section here I would go ahead and rearrange this the footer also is a little strangely structured we have a lot of space right here and I think we should reduce this as much as possible now I went ahead and I revamped this website so let's take a look ready this is what uh me and my designer did right here uh we decided to kind of rearrange the whole website wanted to make it look a little different um let's go ahead over here and zoom in right uh we instead of this this section what was going on right here we decided to put it here at the bottom and we've actually combined this section uh to kind of mix with the landing page so if we take a look at it zoomed out uh this looks a lot cleaner right we have this call to action and we also have these blurbs right here to reinforce people to take action so right under the get it here we have free shipping eco-friendly and hand poured so we're trying to encourage people to push on the button and buy the product so that's why we implemented it like that also right here we added in these images you know of the actual product I feel like this right here just makes a little bit more sense because they can see the products we have the button to buy and then we have the text to reinforce the purchase so it's nicely put together and you know we added enough padding and it makes sense and we also added in the little pink bar like the person wanted to add right here we just put it below the actual uh the below the image and then the next section we have the images right here now I believe this looks a little bit more I guess you want to say cleaner right and friendlier so the thing is with a lot of these products I don't like the products with the sharp edges at the end I feel like that is a little aggressive sometimes but when you add this little soft little uh when you add it's called border radius when you add the Border radius to the ends of the actual box it creates a more friendly tone and it's more welcoming it's more inviting so that's why we did that and yeah so we added that section in there and then on the footer right here we just added everything in one little quick bar right because uh this is very quick it's very brief yet it's also effective we have our Instagram we have our Tick Tock we have the Spotify and it's in a very nicely clean and organized little section and over here their footer it's just a little bit all over the place so they just needed to kind of combine it make a little bit more Compact and nice that is the revamp of the uh website that the subscriber gave us voila all right we have Max kynon developer Community uh right away uh there's a lot of padding issues going on right so this is way too close to the top of the websites and also this text width is way too far they should have probably uh made this a little bit more closer uh made it look more Compact and also we have this little uh design now this is fine if they added it on the rest of the websites but they didn't right so it's just right here and also these buttons are very small and their colors are a little random right so the brand is kind of getting lost right here we have one color two colors the blue colors three colors we have this gray four colors so there are a lot of colors on this page and it can be somewhat confusing all right next section so we have some blurbs this is fine you know this is this is just fine you know uh I I obviously would have added some more padding right here these right here are just a little bit too close we probably could have cleaned this up a little bit let's make it look a little bit more uh not so compact not so cluttered uh this section right here is also very confusing I don't know if this is two sections or one section because here we have this um you know we have these blurbs and then we have the button right below that and we have this price it's just everything's too close to each other and I'm not really sure uh what to make of it right now we have this section right here um so we added in this new color and that's fine but uh we should have added this on the home page so now we're breaking down into this teal section right so we have this uh teal section and teal color and we have this little uh this little bar ends I would have made this a little bit more larger right so the text is kind of scrunched up into this bar I would have given it more space and we have this little design right here with the new brown color so I'm not really sure you know maybe this brown maybe they're trying to incorporate that brown onto this button but you see how easily it get lost like how now we we don't really know where this color is coming from so to me this is just a random color because if I didn't hover over this button right here I would not have seen that color on the actual home page so I would have probably changed this color right and this design this little Arc right here uh I would have got rid of it all right um this is all right you know this little animation they want to be creative that's all right you know but also right here we have a padding issue so you can see here how this Google AdSense it's just too close to the edge of the section we need to give it more space right we need to give it um some place to breathe uh here we have this email section now there's really not enough text here to have the user take action right so we have this subscribe but you're not saying anything you know like sign up to our mail list get a free something get a free template get a free evaluation you want people to sign up for a reason right you can't just leave a box right there and just not say anything like you know No One's Gonna No One's Gonna Do it but if right here you said get a free quote hey I might sign up because I saw the free quote and then here we have the footer here at the bottom this is actually a pretty clean footer I'll give you an A on that we have a clean footer right here maybe a little bit too many icons but a clean footer not bad at all so now let's take a look at the revamped website we have made for Max Max kainan you guys ready let's take a look all right so this is the actual new uh website I wish I can zoom in just a little bit more there but uh that's all we can do so notice here we have just kind of rearranged the instructions so here we have the max kinon developer Community hire us and find out more so uh right away we're just creating a little button right here to kind of uh spark some sort of call to action up here this call to action is just not welcoming you know there's no real reason why I want to click this button you know it's just it's just not inviting you know it's kind of cluttered it's at the top and it just doesn't really make sense but here you can see we have a very strong text Max kynon hire us you know it's like all right cool you know we have this image right here that kind of reinforces uh the brand of the website now this next section you can see right here how we just cleaned all this up right so we made it look very user friendly and we just you know put one two three four and then if they want to see all of our services they can click on the all service is here at the bottom this section here you can see that it's just a little it's just a little cluttered you know we just got to fix it up a little bit and that's what we did right here we just fixed it up we made it look a little bit nicer and also more user friendly all right and the next section so you guys can see it from the outside the inside we've added a lot of nice padding right here we added a quick little image of the products and we have more details so what we're doing here is we're talking about the product we are inviting them to click on the product and then we are showing them the products over here we have uh let's see we have just this section but it's very easy for your message to get lost because now we have this text up here and we have this image on the left side the button here it's a little bit too low you know it's just it's down there and it's not inviting us to click so just kind of rearrange stuff and make it look a little bit more structured all right and then below that we did the same thing so just like he kind of switched it around we did the same thing but we just wanted to be a little bit more inviting right so um here we added in a more inviting section right where we also kept it consistents and we also did get rid of the brown uh the brown was just a color that we just didn't need on the website you know there was just real no real reason to have the brown there it's very easy to get lost with the brown so we got rid of it and then here we have the uh the call to action see here we're telling people if you sign up to our newsletter you will get a discount so this is very encouraging for people to actually want to subscribe and then here we have the footer but we kept the same footer so we get an A for the footer so don't feel too bad if you're watching this and this was your website uh you just needed to add some padding you just needed to add a message for your call to action but the footer was great so this is an example of how we revamped the website let me know in the comments what you guys think about the new revamps did you guys like it or not like it let me know in the comments below so part of people now that I showed you guys all about the design I am now going to hand this video over to Daniel Scott where he's going to show you guys how to use figma so earlier like I showed you guys with those wireframes and mock-ups and how we use it for the new life templates Daniel Scott is going to show you how to use a UI tool that can help you create your own wireframes and mock-ups so here he is Hello thank you for the introduction Daryl uh yeah Dan Scott figma designer ux designer today what we're going to be building is this we're going to create this really simple website just to give you an overview of what figma does and what its role is in web design so my goal here is kind of just a brief overview of figma and what it's for and you know if you do want to go further the I do have a figma Essentials course there'll be a link in the description for that but what I want to do is get to the end of this section and for you to be to understand figma's role in web design but also maybe be a little excited about using figma and going a little bit further with it so yeah that is my goal here today let's uh let's get started first up let's go through the what why and who it's for for figma this might be the very first time you've ever heard the word figma okay or you've heard it and you might not think it's for you we're not sure where it fits in the process so let's talk about the what first uh the what is it is a bit of software that you download and install doll and it is for rapid prototyping your website so you'd prototype your website before you'd start building it in you know WordPress or Elementor or code or whatever you do so that is the what it is bitter software to help the design before you make the website the next is why why would you use them why not just build it in you know Elementor or WordPress or whatever the technology you're going to build it in because it kind of feels like double handling it is speed it's about rapid prototyping and kind of iterative changes so let's say my process when I am as a ux designer take the brief and what I'll do is I'll get back to the client very quickly with a mock-up at a figment it looks and feels like a website it can be kind of tested in terms of the functionality and the flow and how it might work and I can get that process and get feedback from either the client or potential users super quickly make changes and get them back to them like Ultra fast okay so that's why we use it it's super fast you can get it looking very close like you can get it looking exactly like the website you want to build later on and you can use a lot of the images and fonts and all that sort of stuff you've done in figma okay some of the code more of the styling okay so it's not wasted time okay but it's more about yeah figma is about going fast getting getting changes done getting it back to either the client or the user super quickly make more changes back and that process is where figma really shines and why you should use it all right in this part of the video I'm gonna give you guys a quick overview about figma and explain what it is and how to sign up now essentially what figma does is allow you to create some really nice mock-ups wireframes and prototypes for your client it's essentially a Photoshop for web designers so let me go ahead and show you guys how to sign up with figma it's completely free it does not cost you guys anything at all so this is figma.com you guys can go to figma.com I will also leave a link to figma in the description of this video Once you guys are here just click on try figma for free all right so first we'll go ahead and create a free account with figma so I'll go ahead and put in an email and then also go ahead and put in a password for your figma account once you put in your email and your password you'll then go ahead and click on create accounts next you'll go ahead and put in your name so I'll put in my name right here and they want to know why I'm using figma so I'll just say I'm using this for design and I'm going to use this for work and then I'll click on create accounts all right cool once this is done you'll go ahead and verify your email address they will send you a link and all you have to do is go click that link and then go ahead and log back in with figma alright so here is the email they sent me I'll go ahead and click on verify email all right cool so now you'll be prompted to the back end dashboard of your figma accounts now right here they're going to prompt you to enter in a bunch of information however you can just go ahead and click on do this later we don't need to fill all this out as of right now so right here just click on do this later now they're going to ask us what kind of plan we want to select we're going to use the starter plan so the starter plan is completely free it does not cost you guys anything whatsoever so right here click on start for free so next they're going to ask us which one we want to use however just go ahead and click on I'll explore by myself and Daniel will actually help you guys with figma in this very next section so go ahead and click on I'll explore by myself all right cool so there's one more thing I want to show you all before I hand this video over to uh Daniel uh if you guys do want to use the desktop version this is the actual desktop version of figma however if you guys do want to download the free application for figma on the right side right here you'll click on get desktop application and then you guys will see that you guys can then install figma as an application onto your computer if you guys decide to go that route Daniel will actually show you the difference between the application version versus the browser version to see which one's best for you alright so I'll go ahead and excuse myself and hand this video over back to Daniel all right we're going to start making stuff in figma in this first section we're going to describe what we're going to create our first document and look at something here it's this little grid pattern here it's called a frame basically Pages we're going to make it and add little columns to get us started all right let's get going okay so you have got figma you can either use the desktop version which I'm going to use in this tutorial or you can use the web version I'm just kind of toggling between the two you can see they look very similar I'll point out the differences but in this tutorial it doesn't matter web version Oh that's the desktop version you can kind of test this fig metal on top and this one I'm using Chrome you can use it exactly the same way it's pretty cool so whichever version you've got I want you to go to drafts okay and then this little plus button and we're going to start with the design file okay that's normally where you start it's like a new document and it's very blank okay so in this uh document here I am going to all this design file the first thing we need to learn is something called a frame a frame does a few things the the best way to think of a frame is a page okay so is a frame tool up here okay I can hit this little drop down there's a frame and a size I want this top one called frame okay and I can draw out a frame okay or page of my website or a mobile app okay but it's better to use the default so I'm hitting undo okay so edit undo there it is there command Z automatic control Z on a PC okay so I'm going back here I'm going to go to my frame tool but instead of dragging something out on the page over here can you see under design you've got a bunch of presets we're going to work with design desktop to start with and we're going to use this generic desktop size okay uh 1440 wide uh 1024 high it's going to click on it once there we go good big giant page now we won't go through too many shortcuts in this course because this is an overview there's again a few that you're gonna need so if you hold down the command key on a Mac control key on a PC and hit minus okay you'll zoom out plus Zooms in miners zooms out okay so that's what that does so I want to be able to see a bit more because what I want to do is actually add another frame okay and when you're designing here we we're going to design the desktop but this is where you could go through and say I'm going to decide what it looks like on uh you know a tablet as well so I'm going to pick I don't know the iPad Pro the one I've got okay and I might go back to the frame tool and we'll do a phone version as well well okay so I'm going to use my I don't know whatever size is popular at the time okay and you can be designing across all three of these what your website looks across rather than getting you know it can be tricky working in kind of responsive media query stuff whereas in this it's quite easy just to kind of see all three of them all together I'm going to put those down there so if you grab the name see this the name of the top there okay click hold and drag it and you can kind of drag it around we're going to work on desktop though now with the name of it selected at the top here desktop one I'm going to turn on columns just because we're going to do a bit of you saw at the beginning there was kind of like three boxes down the bottom and it gives us some kind of grids to work in okay they're not essential but it gives us some consistency especially when we are going to break it down for tablet and mobile later on so name of the frame selected okay and we're going to go over here and we're going to say layout grid okay we're going to hit the little plus button so we want a grid actually I don't want a grid I want to change it to columns and it's very common to work in 12 columns okay for experienced web designers you'll be like yeah of course 12 columns if you're new yeah 12 columns is the default for lots of Frameworks okay and it'll become more apparent later on so we're going to use a count of 12 and a margin because I don't want my website go all the way to the edge okay you notice at the beginning there I had a kind of bit of padding either side so I'm going to use a doesn't really matter I'm going to use 200 okay so I've still got my 12 columns but I've got a bit of space either side so my logo is going to start about there okay and you can turn these grids on and off by clicking the little eyeball they will disappear click off in the background you're like oh where did it go you go click on the name of your frame okay and then you can get back into here all right that is a frame AKA a page and we also added some columns just to give us a little bit of consistency and it's going to allow us to do a bit of responsive design later on but yes let's move on to the next section okay so this is what we're going to do in this next section we are going to look at typography we'll put in a kind of a basic logo some navigation and a big kind of powerful amazing marketing message uh so yeah let's get started okay first up we need to get our company name and the project we're working on so if you're playing along you can play along um this is a site that I made called randomprojectgenerator.com okay and it generates a project okay so click on this ux UI option over here into your name I'm putting my last name put in friend's name pet's name anything you like current location okay I'm going to put in I live in Croak in Limerick in Ireland okay and uh put it in generate project and it's going to give you something to actually design here I'm going to be Scott bikes probably plural okay and it gives you a bit of a brief to work too we don't really need this for this tutorial but in the larger figment courses is what we use but for the moment okay this is going to be the brand name okay if you hit retry you can't do it more than twice okay so go get your company name and the thing that you are designing for okay and come back into figma so back in figma okay we're gonna put in some type I'm using my zoom tricks member command minus and plus on a Mac control minus and plus on a PC grab the type tool click once we're gonna put in our little logo up here I'm going to paste my text in mine's gonna be Scott bikes okay and actually I'll pop up my socials here okay if you do if you are following along I'd love to see what you make I love these little tutorials and see what people end up making what uh What uh actual um object they got and the designs they make anyway the thing to think about when you are doing fonts and using typography and figma is that this font here was just the last one I was using okay the trouble with using something like this one here is that especially on the desktop version of figment it goes through and allows you to pick any old font okay from my computer that I've got installed it might not be one that we can use online okay I'm not sure how much you know about fonts and online font stuff okay but there are just some fonts that you can use on a desktop okay on my computer here that just can't work on our website okay so a good place to start you probably already know uh something like Google fonts.google.com okay this is a great place to grab fonts for because um you know you can use it and know that it's going to be actually usable on your website and it's free okay you can filter this is what I spent uh probably about half an hour doing before I started this tutorial is going oh I want something kind of thin and I want the thickness to be up a little bit and you spent ages scrolling and downloading and so you do that on your own time okay we're busy and what I ended up doing was I ended up using this work Sans okay because I want to do some I like this okay so pick a font and what I'm going to do in terms of you might already have a logo or want to design a logo I'm just going to do something like this and it's like a black version and a light version that's a bit light here we go not I like that okay so in terms of size select it all I'm not going to go through how to change fonts sizes and stuff that's pretty basic right okay so I'm just going to pick something bigger and moving it around is this tool here so this is your move tool okay and I'm going to click off and just kind of drag it around click in the middle and drag it around how big does it need to be and when you are deciding on things like font sizes and you know image sizes and layout and stuff it's handy to be at 100 okay so up the top here I was at 200 which is fine when you're doing delicate work or Zoom didn't work 100 is better because that's the way it's going to appear on the website okay so in my case it's a little small so I'm going to click in here and I use my app arrows can you see that if you click in that little panel there and just hit up and down I don't know I do that you don't have to you can use a little drop down but so I've got my font okay and I've got the text here I'm going to put in some other fonter bits okay so I'm going to put in some navigation over here so I'm going to type it in okay I'm going to type in what do we got we've got home I'm going to do mine in caps for no good reason now you might be well you can put in space space about us you can just you know do that space space contact us something like that and but it is better in figma to actually have these in separate type boxes so I'm going to get rid of all of that okay I'm going to have home and then I'm going to create a second box now you could grab the type you know at the moment if I keep typing keeps typing forever okay what I want to do is create a new text box you can grab my selection tool just click off on the background Okay click off so I've got nothing selected grab the type tool click again and do about us actually I'm going to do our store or microphones in front of the keyboard when I'm typing here so you could do that or it's handy just to copy and paste it so just your regular copy and paste like you normally do so I've selected with the selection Arrow or the move tool copy paste and there's two of them they they I don't like it it ends up being right on top of itself so it doesn't look you've pasted it but drag it off it has okay and this one's going to be a contact us okay what we can do is we can select more than one thing so pactile it always defaults to our move tool so you don't have to go back so I'm going to select all of these just drag a random box around them all and over here I'm going to go to my kind of regular I'm going to make an appropriate font size 16 is like the default size for stuff that is accessible to users and people that find hard to see things can see it okay um it's just a really good default size and you will notice that some of the perks or one of the really good perks for figma is now what I could do is I could select them all and there's options up here to do the whole let's look at this one here I want to line them all vertically okay and then there's an option in here that says distribute centers okay and it kind of distributes them out I'll undo that remember command Z on a Mac Ctrl C on a PC watch this if I go I want that there okay watch this it just lines up nicely okay and watch this when I put the third one in can you see it goes oh can you see oh did you mean there's 31 I'm not doing anything I'm just kind of getting it close and it goes oh you mean line up and do you mean also 31 pixels away you're like yeah that's awesome so there's a lot of this sort of intuitive stuff for design okay and we know if we're doing this with CSS and padding and stuff we're you know we're playing with em sometimes and some tricky stuff whereas obviously dragging this stuff around and figma is super quick and easy all right um so up until now we're using the type tool just to click once and it types forever okay you don't always want that so I am going to delete that you can drag out a type box okay and what it does is it gives you a fixed width because I want it to be kind of I don't know that wide-ish I don't know how wide I want it to be but if you drag out a box what ends up happening potentially can you see it breaks so it's good for body copy so click and drag for body copy click once for the never ending text box okay and I'm just going to type in here I'll speed this up okay so if you've got a better product and you can think of a good strap line for it okay your marketing message put it in here I couldn't think of anything great here uh so I'm going to do this I'm going to go the font size up I'm just kind of making sure 100 moving my head back and kind of going that's it oh there we go that's nice and I'm going to go to all right that's what I want to do and you can resize it afterwards using your move tool okay so click off kind of click back on it and you've got these edges here you can start messing around with it here we go that's what I want to do for the moment and all this work you do here kind of like uh foreshadowing for the end of the courses or the end of the um little figma section is if I click on this you can go to inspect and can you start to see the things that web designers like to see Okay so we've got kind of iOS code we've got CSS code that we can kind of just grab we don't want positioning but you can see font family and style and bold and size stuff that you can just copy and paste out okay so you can do this work get it right and then go and edit your CSS later on anyway let's not get into the inspect panel just yet okay that's later on let's keep designing all right so that is the a quick run around with typography let's get on to the next section hi there in this section we're going to look at making buttons and basically buttons are just rectangles okay but we can add swishy little rounded Corners to them and then we'll use that rectangle skills just to make these cards down the bottom here plus throw in some other interesting figma related bits but buttons are the focus so let's get going okay a couple of things I want to throw in before we get too much further is we'll name it at the top here it says Untitled just double click it and we're going to call ours mine's going to be Scott bikes and um website okay V1 okay up to you just double click it up here and give it a name um the other thing is there's going to be people using the web version and the desktop version okay so the desktop version here the big difference is along the top here you've got figma I can go to I can select this and say actually let's go to text and here's my underline okay so I can find lots of stuff along the top the difference with the um web version okay you're using a browser so this is the same document okay I've actually got it open in both of them you can kind of see them there you can see me this is kind of cool because you can collaborate right so if I point my little pointer there on the U and I switch back to the desktop version look there's the other version of Daniel there's two of me working on the same document so yeah you can work on more that yeah more than one person can be working on a document collaborating okay but um the I got sidetracked there the reason I showed you this is that the desktop version K doesn't have the file on the top can you see figma text underline here there is none I've got the Chrome stuff but I haven't got figma so they just hide it in a different place so if you're using the web-based version over here it says this like that's that figma F click that little drop down and here's all the menus so there's text and there's underline so you just have to go to a slightly different place so I'm going to try and avoid that in this particular short course but um yeah there'll be times where you're like hey why can't I see arrange Cinder back it's because on the website version it's there object arrange Cinder back there it is okay so there's the those are the other differences everything else is basically the same all right back into here so we've named it we've saved it and the other weird thing about figment is that it doesn't save it onto your desktop it's saved in the cloud as part of this okay so um there's no way to kind of you can download it and save it you can go file save as and if you really want a thing on your desktop you can but it's really uncommon to do that because it's just magic and it's always there Works offline as well it's a pretty amazing connection but you came for buttons buttons are just rectangles let's grab our rectangle okay let's draw out our button okay and I'm going to grab the type tool and slap some type and I'm probably going to just click over here once and I'll line them up in a second so this button is going to be my shop now button shop now okay and let's grab the font size get it down to member 16 is a good kind of default smallest size and it's probably going to be good for me grab my move tool get them in there and you'll see that can you see that oh it just wanted to be in the middle okay you can remember select both of them and go line Center align Center okay but it should do it by default okay and although it looks like a button it doesn't do much button stuff now we'll do that in a second okay we'll add the magic but for now we need to see the other magic rounded Corners buttons have to have around the corners they don't obviously but um the rounded Corner option is you can do it manually over here and where is it so I've got my rectangle selected there's an option over here that says around the corners there's that one there okay I can click hold and drag that little icon you can see the little round of Corners appearing okay or you can just type it in there save five pixels and you've got round of five pixels what I tend to do though is if you've zoomed in enough so command plus or Control Plus you'll see these dots if you're far enough away you can see those dots that disappear if you zoomed out zoom in you can just grab them and drag them kind of get them where you want to okay and I don't know this is not important this is meant to be like a brief overview but why is he showing us this because check this out if I click on this option here independent Corners then click on this little dotted line here this is I love like iOS okay the Apple um operating system look at the rounded Corners watch them magically become more magical look at that without it with it without it with it you can't see the difference can you let's do two of them uh you without the magical iOS rounded corners let's add full maximum ones here can you see they just look more do they look better I think they look better they're more friendly inviting okay uh ignore that bit and so we've got rounded Corners we've got a button if we need to make a second button now instead of like trying to duplicate both of them okay and bring both bits over what we're going to do is Select them both okay so remember just move tool drag a box around them oh just around this thing right click it and we're going to say group that selection just so that when I click off move it across it's kind of like a nice little unit so that's grouping you can ungroup it by right clicking okay and say ungroup there you go everything can be found under that little figma option as well okay so you can you know you will find all of these things object ungroup if you can't right click because you're on a Mac I'm on a Mac but I'm using a mouse that has a right click so you can find everything in here I'm just going to give you one way in this tutorial okay the next thing I want to do is I want to add our little cards that you saw at the beginning there okay these down here so this I'm going to create a card so just using rectangles again so I'm going to have like an image along the top now this is where columns are really handy because you might decide you want a card that is say four columns across that's why 12 is a handy number because it's easily divisible okay so I've got this first one here I'm going to copy and paste it okay and I'm going to the second one I'm going to paste it again okay I'm gonna go through them so they you can see how the spacing Works nicely and when I get down to say the uh phone version okay I can decide that these get restacked like this okay so that's handy if you want you know 12 columns is great for like three columns as well so I go this and delete you delete you okay you decide you want four options you can go across three columns okay oh did I do this I did a little shortcut a little sneaky one um so when you're dragging if before you drag hold down the option key on a Mac ALT key on a PC it will kind of drag out an option I do that mostly rather than copy and pasting so that's option on a Mac alt and a PC before you start clicking and dragging see 12 columns awesome so I've got four now it's up to you I'm going to do three so I'm going to undo come on Z until I had them all kind of working there we go and you can do I fast forward this I don't know I'm going to do this bit and probably now that I've you know columns are useful for getting the kind of structure in and then they're annoying because they're like messing with this so why remember over here and you're like well why can't I change the columns you remember how do I get it over here do you remember it's a test you remember oh how did he move around like that let's do a couple of things let's turn the columns off so let's click good desktop and let's turn the eyeball off there you go on off the other thing is how did he move around when he was zoomed in okay that is the spacebar key you can use the hand just use the hand the hand's easy go back to the selection tool I don't do that I just hold the space bar down so watch this I'm on my move tool hold spacebar it turns into the hand look at that transforms okay so I'm going to select all of you I'm going to use my option slash alt trick to duplicate it I'm going to pick a random color for these so I've got them all selected the fills over here I'm just going to randomly pick now the Color Picker here you pick the Hue that you want okay I'm picking green for no good reason just wanted to Green okay and then you'll still see it's gray can you see this little dot there that's because it's in the green zone but it's totally desaturated you can drag that that way fully into the corner in the top right is going to be super saturated okay down here you need a full black full weights over there I'm clicking holding and just dragging it around so I'm going to put it somewhere there and then drag this up and down until I get something that I kind of like actually I don't care and I just want to show you the colors so we've got that I'm going to add some more type now what I might do is you end up kind of just borrowing stuff you're like you you okay I'm dragging this down here I'm going to put it there I'm using my ALT trick okay holding down alt on a PC option on a Mac and you're like there he is but if I drag it there huh I can kind of see it where is it okay it's the layer order okay because it was this was made earlier on in the document it's actually underneath this because we made this last so there he is Hello uh so what we can do is select the top green box okay I might do it for all of these I'm holding shift and clicking them all okay or we do it one at a time then right click I'm going to say send to the back please so send to back here we go and now I'm going to kind of just lay this out you I'm going to do this fast 40 mode because this is not anything you haven't learned already okay you're back um this is not doing the break that I want you can actually transform the mint power last time we drew a box okay uh having a width and it kind of broke down onto two lines this one's not because I duplicated this thing okay so what you can do is with it selected okay over here here's the different options if you click once you get this thing called Auto width the one I want is auto height okay nothing's really changed except when I go to off click you know click off on the background click back on it if I resize it now here you go that's kind of what I wanted so I'm going to copy and paste that twice just just to fill a text I'm going to duplicate this and go back into my Speedy mode you wait there actually no we're back from Speedy mode now this was grouped so if I want the rectangle in the background I kind of can't because it's kind of grouped I changed too many things at once so if I want just this I can have two options I can right click ungroup it change the color you know of the font in the background and then group it again or watch this if I have it selected once and I double click it I kind of go inside of that group you can kind of see how my layers panel over here if you're not on layers go to layers you see there's my group that's my button there's inside of this group is shop now and rectangle so you can either click on it over here or watch this if I click on it once I've got the whole group selected if I double click on the gray bit get selected just a rectangle there you go so that's kind of what I want here it's very intuitive all right so that's kind of what I want duplicate those guys I'm going to turn my upwards back on or my columns you remember how to do it you click the name click on there is shortcuts like if you are doing this on and off you can find the shortcuts for it all and layout grid what is it I can't remember uh professional uh how do you figure it out this is what I do now I'd actually pause the video and do this I pretend like I'm a Rockstar figma using just know all the shortcuts but hey click on the little question mark keyword shortcuts okay and there's this is where you find those things so um I don't know where it is let's have a look tools nope view pixel grid there it is loud grids okay so this one is Ctrl G on my Mac whatever yours is on a PC it's bound to be probably control okay so you can find those stuff out things that you're doing often either hover above them like this move tool here is V you see type 2 is T V so you can toggle between those quite well and now we know com Control G turns that um grids off a little toggle and turn it back on what I want to do is grab all of you and move across move it across nice okay Ctrl G to turn it back off to have a little look at what we've got yeah I'm just going to kind of do a little bit of rearranging this is kind of where I want to start anyway so what we need to do now is at the moment it's just a design tool okay and you could be doing this in Photoshop or canva or something else PowerPoint there's no problem with that okay where figma gets quite useful is for the next step which is prototyping so yeah let's end this section about buttons we got we did buttons plus other stuff um but let's get on to some prototyping all right in this next section we're going to prototype we are going to get things like this button when it's clicked to go to this page okay let me show you the little preview look click the button jumps to our shop page so we're going to create a second page I'm going to show you how to connect the two up in figma all right before we prototype one other little interesting tidbit between the two different versions okay desktop version versus the website version is that you know here you can go between home and your file that you're working on but on the web version is that you you know there is no home so you have to go to you and go to files okay and then go back into your document that sales there okay and then back into files so that's how to toggle between those two kind of spaces so anyway carry on okay so to prototype and let me show you the first thing is you can preview what you've made okay go to this little present option up here okay and it will show you your website and this is where you can interact with it we don't have any interactions yet but this is where we kind of get started because I've got a button but it's got nowhere to go so let's connect it up so I'm going to close down this little preview okay and have this back to our kind of like working document so we need two pages so I'm going to zoom out a bit you can go to your frame tool and just make a new desktop version and just start designing the second page what I'm going to do is actually just duplicate this desktop that I've got actually let's rename it double click the word desktop and call this one homepage like down here with the rectangles I can hold down the option key on a Mac ALT key on a PC and just click hold and drag a duplicate and do the same with the page watch this click on the name hold down the option key on my Mac here and I can just drag out another one this one here is going to be called the shop and you wait there I'm going to design a shop real quick all right so there is my shop very exciting the way to connect them up is we're going to switch we've looked at design view that's what we've been in this whole course so far we kind of little snack snuck in here to the inspect option and we're going to go to this prototype option and what that does is it allows us to select things like a button okay and then click hold and drag this to there look at that okay so when this is clicked on click navigate to the shop using an animation of instant let's give it a go so let's click on the word home page because whichever page you have selected will be the one that gets previewed first I want to preview the home page okay so click on the little present button there we go and watch this when I click the shop now hey we've got it kind of prototyped super quick super easy how many got no way back now so we might have to go to U and say actually when I can go back to home so I can click on the word home and just drag it out that's why we separated them out earlier so that we can add these different options okay for dragging so you just have to be in Prototype mode click on stuff and say actually I want the logo oh the logo when it is clicked to go back to the home page as well look at that is that an animation just for Giggles so I'm going to click on the little line and say actually instead of using instant let's use uh push just because it's more of a mobile phone option that one but hey we like it let's go click on home page let's go to present and let's say shop now look at that let's go up to that little drop down along the top there is kind of covering my button it's a bit of a pain so I'm going to go to options say turn off this show figma UI just so it's kind of got rid of that you can turn it back on can you see the shortcut down there command backslash okay you'll probably control backslash on a PC but now I can reach my buttons I can say go back to home click on this and this one should have my sweet animation oh nice okay so I don't know hopefully you can see how easy it is to kind of quickly mock something up using kind of simple design tools rectangles and text and add a little bit of interactivity using the prototyping function now you don't have to close the preview down a car often just leave it open and just toggle between these two okay so I'm going to stay in here but yeah that is how prototyping let's get on to the next section all right this video we're going to look at adding some color we'll learn how to use the eyedropper tool down here you'll see we added some drop Shadows I'll show you how to use your corporate color if you've already got one and I'll show you how to get inspired with color a couple of places that I use and how to get it in two figma all right up until now we just kind of picked colors from this random selection over here so oh good point uh where did my colors go for this rectangle okay from prototype we can only do prototype stuff like dragging that to there okay what I really want though is to do designs and colors so go to design okay so now with this selected you can see over here I can have a fill I can add a stroker on the outside okay I can make it nice and thick it's not what I want to do but we just randomly pick colors okay so actually a little color inspiration first so and there are lots of places to get inspired by color and this is my favorite color.adobe.com okay you don't need a paid license to use it you can sign in you don't have to it's just a really good site for especially this explore option here you just end up like finding like I find it sometimes really hard to bust out of my kind of regular old colors that I use quite often so let's say I'm doing bikes okay you might find and here just kind of colors that might get you out of your kind of normal color choices okay so bikes is not very exciting like if I want Cafe okay you'll find like really strong kind of already mixed kind of five color swatches for a cafe and you know if you don't work for a bank I know banks have become cooler but um yeah banking kind of colors some of them are pulled from images just really handy place to get started with color so I'm gonna go back to bikes I'm going to pick something now you can't tell because the editor cattle that out but I've been staring at the screen for a couple minutes I've gone into the Zone mode all right Dane just pick anything oh you freaking thing so hard it's hard without a brief because we haven't have a brief here or at least I skipped through that step very quickly it's very hard to pick colors because we don't know who the client really is so Dan's the clients I'm gonna pick this one so what we're going to do is we're going to click on it and what we can do is just click on this copy okay and just copies the hexadecimal code and in figma I can say u r and just paste it in there hash and all hit enter there we go okay it's the same if you've got a corporate finder if you already know what that you know RGB or the hexadecimal number is okay you can just copy and paste it into here so go into here paste it okay if you've got an RGB number that you have to use because it's kind of predefined by the logo you can click in here or click on the actual color option and switch it from hex to RGB okay and you can type them in there if you want to kind of happy with that three-way split that thing here is probably going to be have to be white but that's okay um so those are going to be my starting colors anyway if you do want to kind of Steal colors from different parts okay because you don't want to be remembering them or copy and pasting them all the time you can say I want to I want to grab the button remember I double click to go inside so I've got the gray box selected I can grab my eyedropper tool which is I for eyedropper Tool and you can say actually I want to use this one here there you go so we've done colors let's say we've done colors so color inspiration I really like uh color.adobe.com there are some other things to explore in here I'm not going to go into them in this class okay but for right now I want to show you just one little effect okay so I'm going to pick kind of a off-white so white just down a little bit just a little off-white I'm going to pick maybe my eye for eyedropper tool for that color no I'm going to use no drip tool for that color oh I don't know if I can use that color anyway let's let's look at the thing I wanted to show you is drop Shadows so with the outside box selected this thing okay I want to go to effects I want to drop shadow perfect and to adjust the drop shadow you click on this little icon here and it gives you like the X and Y coordinates I want mine kind of a little to the right and a little down and the blur I want it down that this is the kind of my default one for most things okay two two two okay just and I might lower the actual opacity of it so with it selected remember this is grouped so I'm going to double click it to get inside I'm going to say you are going to be maybe down to maybe 15. 50 anyway so that's going to be my button I don't have any Pages for these to go to at the moment so I guess I'm just showing you some of the effects look how nice the other line up you definitely can't use that there's not enough difference in contrast for that color to be used but I've done it now so there you go so picking colors getting inspired by colors and drop Shadows you get a bonus and the eyedropper tool more bonuses but now we've got a little bit of color going on we've got some text you know what we need next images let's go do that actually I couldn't leave the colors right so I changed it to gray there you go got it out of my system also fun fact did you know that rounded corn is around the corners but if you add that uh kind of special rounded Corners like I showed you okay this thing here corner smoothing it's actually called a squircle I kid you not that's what it's called squircle anyway now that's the end hi everyone in this video we're going to look at images okay we're going to show you where to get some how to bring them in how to crop them and how to make them dark in the background I'll also share with you some of the sweet tricks that makes figma figma something like smart selection alright let's uh jump in and get going all right uh first up let's get some images um you probably already know great place to get free commercial use images if you don't unsplash another one is pixels pixels is another really good one okay but we're going to use unsplash in this case and I'm going to just type in bikes so type in whatever you got earlier on in the random project generator with it though they're trying to sell these options okay so this is istock they have bought unsplashed do they buy them I can't remember and but these are the premium ones so I'm going to go underneath these and I'm going to get these ones so I want bikes and what I'm gonna do is just kind of work my way through I'm going to click on them and I'm going to say download I probably don't need the giant version it's going to pick the in my case just the maybe medium or small original size is massive depends what you need them for I'm going to go through and download a few of these to my hard drive and I will be back in a second okay first start bringing in a bike uh bringing in a bike bringing in an image as easy and I've got nothing selected so I've kind of got my move tool and just click off in this gray area in the background and in here we've got rectangles which we've used okay uh there's one here it says Place image okay and I downloaded some of these I've downloaded a bunch of images so if you want to bring in an image Okay click open it's going to just place it now you've got two options you can click once it'll bring it in at full size way big okay I'm going to undo that so I'm going to do the same thing again you you you and I'm going to click and drag to get a kind of a more appropriately sized image okay those are the two options of getting it in there okay and you can move it around you can resize it and now when you are resizing it okay if you want to hold shift or you're dragging the corner it will lock the height and width so it won't kind of distort it it's up to you how you want to do it and so that's one way of doing it often when I'm working I'll kind of do a real simple prototype first okay no colors just real basic to give to the client and and then afterwards I fill these images so what we can do is kind of get here I'm going to click off let's go to the same thing before Place image I'm going to bring in that BMX okay and watch this instead of clicking randomly I can click inside this box and it will just fill the existing box so I'm going to do that for all three of them you end up learning the shortcut that's shift command K the hieroglyphics there okay on our PC it is shoot control shift okay okay and I'm going to say I've got these ones okay so I've got some images in the box now with images these are kind of already cropped right we knew that was Square kind of when we came in and if you look at this one if I double click it you can kind of see over here it's actually quite a tall image okay so how do we readjust it because I want to move them up a little bit so by default it wants to use something called The Fill function if you know a little bit web design there's kind of a fill so it will try and you know fill the div that it's in okay so that's what it's trying to do there is other options so all I need to do is double click it double click this one and go from fill to crop okay and this is again watch this I can drag it there you go so it's kind of weird you can now do two things you can adjust the frame that it's in okay so I can decide to do that it's not what I want I'm going to undo and or I can decide to adjust the um image itself and watch this you just need to kind of like well be told by a handsome ux designer that watch this if you just wander over there it'll resize it there's just like there's no indication that you can do anything up here but if you just move your mouse it'll just adjust and if you hold down shift it will adjust it proportionally otherwise you can stretch them don't stretch them okay he's a holding shift I can make a little bit bigger and kind of get it how I want awesome the nice thing about fill Low by default is watch this if I adjust this okay the default one fill okay if I double click it fill will just kind of try and be as fitted inside the box as good as it can okay so I'm going to undo get back there so that's the basics of images I want to do that big dark background version here getting a little Advanced here for our intro class but hey ho so I'm going to bring in an image um let's bring it in actually I'm going to do it the other way around I'm going to grab my rectangle tool which is the r key on your keyboard just go straight to rectangle I'm going to do something like this I'm going to throw my image in first so remember command shift K or control shift K on a PC there's an image that I found that looked quite cool for the background that one there thank you one splash gonna click inside of it and what I want to do is move it to the back right click Send to back there we go and I need to darken it up so what I want to do is actually I want to select U text U text I'm just randomly clicking and getting lucky all the black text is now going to be white text okay I just clicked hold and drag that up to the top left corner okay and what I want to do though is actually this one works fine without having to darken it but that never happens so let's darken it up because you end up like this and the text becomes very hard to um see so I'm going to darken this up and what you can do is in figma remember we're getting Advanced here so if you're like oh man there's too much Stan don't worry ignore this next bit you can actually have more than one fill we've got a fill of image which is weird but even weirder you can have a fill of both image and color in this case it's added click on it it's added black okay so I can move it down to Black and the opacity see this is that I can turn it down to wherever I need there you go just to add a bit of contrast to the background and so that it's a background graphic that's not as I don't know overtakey or powerful or interrupting my text now one last thing before we move back into the I don't know the easiest stuff I want to show you it's not hard I guess but it's one of the I know it's the reasons that I love using figma and why a lot of people do I guess I want to share with you some of those things because at the moment we're just kind of using like a little quite a simple layout tool but let's say that I want to I got feedback from the client I'm going to group these cards okay so I'm just dragging a box over them and hitting command G on a Mac Ctrl G on a PC and we get some feedback right and first of all I'm going to select them all and rather than feedback I just know that these are badly spaced with them selected you've got this kind of like tidy up option which just kind of tidies up stuff which is nice okay the other thing I want to do is it's if you've selected something automatically it's smart selected okay uh it's fancy word but what it does is you see these little pink dots that appear okay we've got these gaps okay which is awesome okay so we can adjust the spacing all together but what it's really awesome for is watch this is I can click this one and say actually the client wants this one first oh look at it okay so little simple things like that really make my day as a designer uh you know and just kind of making amends really easy for this prototype rather than trying to kind of Shuffle things around okay so yeah those are some of the small little touches I want to throw into this demo just to kind of show you why why people love figma and why I do and why you might but that's it we've got some images in we learned a little bit more about figma let's get on to the next section okay so we're happy with our design our cells or our client has said yep love it love the way it works let's go build it so in this video I'm going to show you how to pull out um parts that you can then use um some of the codes some of the images ready for your web design project or sending to your developer or kind of putting into WordPress or Elementor um yeah let's jump in and check it out all right so first thing is let's get some images out of our mock-up okay so um let's say that you know this is the cropped image we want to get out uh because I grouped it earlier remember it's kind of one unit I can either ungroup it or I can just double click to go inside I've got the image selected and it's pretty easy um you just click over here okay you say I want to export this image as what and you can decide in this case I want a JPEG okay and then I hit export it's called rectangle 2 which isn't very good we can adjust this on the fly but it's a let's actually just do this okay so let's click export I'm going to put it onto my desktop messy desktop where is it so uh figma images okay and there it is there you can name it on the Fly we might call this one uh BMX bike 01 okay and just work your way through okay and Export the images that you need for either yourself for your project or for your developer if they're helping you you can actually make it a little easier because every time I'm going to export this thing again it's going to be rectangle two what you can do is you can say over here it pulls a name from your layers so you can say in here this is actually called BMX bike O2 okay just to say some time so now I can go through and say double click you export you get the idea okay so yeah that's how you export images svgs you know this this logo here let's say okay it's a logo we can do the same thing and just use that scalable vector graphics so that it's scalable or if you're not sure about svgs yet definitely go look at them but if you're not ah you can go do a good old PNG so you get the transparency if you want to export the whole thing as a PDF okay you can click on the actual Pam frame name and then go to export and just export the either the jpeg if you're just going to email it to someone or a PDF okay so yeah that's exporting images and that's for you like you've designed this thing you're exporting it and what you can do is you can hand over the responsibility if you are designing this and you're not actually going to do the development well half my jobs I end up making myself and half the jobs I end up getting somebody who's way better at coding to do the work so let's look at doing that part so we've got our developer she's ready to take the project on and start building it okay so we need to send it to our fictional developer named Karen so Karen needs we need to share it with you okay and she doesn't need a paid account all you need to do is put in her email address you can just send her a link okay just copy and paste it into an email or send her a proper email one and the top here and you can decide whether she wants to edit or view it is going to be probably too freaky for Karen if unless she's used figma before okay it basically gives her full like exactly what you see in figma which is probably a bit much you might uh freak and scare Karen out so we need to just go to view okay send the invite and I will show you what happens when Karen gets it so let's pretend that I am Karen it was kind of tricky getting into this dress and this wig is a bit scratchy but I'm here to do what it takes to help you learn figma okay so you kind of need to help her a little bit okay um as in if she's never used Pokemon before okay the inspect one is the main thing she wants inspect and Export let's look at export because we're doing images a second ago let's click on export what she can do is she can click on these you can see I can click on this image okay and she can go to export and say export rectangle seven you should name it better for her okay but she gets the same sort of controls as you do it's just a few if it's view only it's just a bit more limited okay so and that's probably good more limited just the kind of simple stuff they need so she can go through export a JPEG just like you did a second ago okay so you might have to get there's a little bit of Education there working with a developer you might just be sending them a Dropbox link with all the images exported for you they might just not want to be part of this whole experience so that works for Karen now the next bit is the inspect okay so you can do this either by yourself okay let's let's go back let's Karen has got what she needs okay we're back to being Dan the web developer or want to be web developer web designer let's say okay I'm now going to build this in in something okay and I need some of the code okay so figma doesn't you know you can't go print website okay you've got to go and build this now and something else okay but there's parts that you can like if you spend ages picking the fonts with the client okay the sizes of the buttons the colors that stuff that I can pull out now and copy and paste so I've got the text selected okay that's this last option in here we kind of hinted it in Spec later on okay so I'm going to go and build it and in here it's going to give me the stuff I need okay in terms of the colors okay in terms of the font okay and this sort of stuff I can use to build my CSS I can go further let's say down here depending on your coding skills okay you might decide that like here it is here okay there's font family work Sans okay that's what I need okay or I can grab all of this okay I probably don't want position and any of that sort of stuff but here's some of the CSS okay you can view it through different kinds of ways depending on how copy and pastry you want to be same with like this button here okay I'm probably not going to use a whole lot other than depending on how you're creating it okay width and height you might be converting it to Eames whatever you're doing but at least it gives you kind of parts to start with so again figment isn't like the finished website it's just kind of the starting part things like padding okay if I double click this watch this I can hover and I don't really need to go to the CSS I know it's 25 pixels along and you know 57 from the top and things like this say drop shadow that we spend a bit of time doing you can see in here if I click on my button double click on the rectangle you can see that's actually something I just copy and paste because trying to figure it out I'll probably grab all of that actually that's all super useful trying to work out the Border radius and the Box shadow in the background all that sort of stuff I can just go and copy and paste to my CSS super handy same thing with Karen Karen can pull that same data okay so I can send the link to Karen I'm back to being Karen okay and she can do the same thing she can hover above stuff to get all the padding and spacing that she will need okay to line things up zoom in come on in okay space between cards how big things are how far away from the margins they are but also she can select on things go to inspect and start pulling the drop shadows and stuff off as well all right that is it for grabbing some of the code and getting out images thank you for your support Karen and thank you Daniel that's me and thank you for watching the video and staying this long it's a long one huh but good stuff I hope all right let's get out from this uh screencast and get out to that big camera all right that is going to be it uh thank you Daryl for having me and yeah it's a pleasure to introduce you all to figma I hope you enjoyed it remember just an overview if you do want to go further and you're excited to learn figma check out my figma essentials course there's stuff on the screen here are the things that we create in that course I also have an adobe XD Essentials course as well if that's your preferred flavor I think for all of that is in the description okay that's it for me I'm Dan Scott uh check out my YouTube channel as well it's called bring your own laptop and all my social medias if you do want to follow me but for now hang around Daryl's got more web design goodness to share with you uh but for me hi Dida Daryl what'd you think oh best figma tutorial you think you've ever seen oh that's that's lovely of you all right Party People welcome to section five of this video where we will talk all about marketing now marketing should be the second most important aspect of your business number one is the business itself but number two is the marketing without any marketing you're not going to get any business I think one of the biggest mistakes I've seen from web designers is they always turn to paid marketing right they get burnt out they spend money they get frustrated and then they quit and this is like one of the most common things I've seen you know web design is like a tree right you have to grow it slowly so you have to make content for it you have to make social profiles for it and if you're consistent people will find you and business will come to you and I'll also tell you guys what is the number one most popular way to get more clients I'll talk all about that in this section of the video so let's get started now let's be honest here you know uh starting the web design business is the easy part right but finding clients can be challenging so we've created key ways and great strategies on how to find clients for your web design business now for every marketing technique I show show you guys I'm going to give you guys real life examples and websites where other web design companies are already marketing their web design business so this will really help give you that boost to get more exposure and to get more clients all right so I've created a bunch of slides here and we're going to go through each one and explain how they work now uh the first one obviously just tell your family and friends this is the most basic one of them all but it really does help because you never know this can give you one client and then that one client can refer you to others now the number one way to get more clients in this industry is by referrals I'm telling you guys right now it beats SEO it beats Facebook it beats everything referrals are the number one way to get more clients so start with your family and friends just say hey guys you know I got a web design business uh you know if someone asks send them my way and that's all you have to do and maybe down the road your brother or your sister or your gaming buddies whoever they'll say oh yeah my my friend does that you know and there you go he just got a client just because you briefly mentioned it to one of your family or friends so number one tell your family or friends number two SEO for brand name now make sure your company can be found let me give you guys an example all right here we go so for example if I type in Daryl Wilson you're going to see that my website is at the top of the search now other keywords like WordPress tutorials web design tutorials that's very competitive right so you just want to make sure that people can actively find your business if someone starts to talk about it here's an example right here uh you know I typed in this one website from Las Vegas 702 pros and you can see right here how they are at the top of the list now if we type in like something like web design marketing you know they're not going to show up as number one right it's a very competitive keyword but I will give you alternatives to be found if someone types that in a little bit later so make sure to keep watching but uh when you are starting your web design business you just want to make sure that your company name is found that is the most important part right now you might be asking yourself well how do I get started with all this like how do I who do I go to right well there's various companies and places you guys can go to first one is is something like upwork right you guys can you know reach out to an SEO company on upwork and just tell them saying hey you know I want to be able to get found on Google how can we do this and they'll probably charge you around maybe two to four hundred dollars a month just depending on how aggressive you want to get you know for SEO but just tell them you know start off small just so you know two three hundred dollars a month and I just want to make sure my company is found I also do want to compete for other keywords like you know web design in Las Vegas or good web design companies in Reno or whatever you know but the main focus is for your company to be found another really good SEO company that I found was SEO reseller SEO reseller they actually offer some pretty good packages and you can actually use this also to white label for your clients so let's say down the road you guys use uh you know SEO reseller and then you want to Outsource it to your other clients this website specializes in that so this kind of gives you another way to make recurring revenue and it gives you a lot of really good analytics like you know traffic sources uh the backlinks do you have any malware you know how fast is your websites a lot of crucial information that you need for SEO and over here they do have a few plans right so they have the starter the agency and the Enterprise now if you guys are just getting started out with web design I would go with something like agency right just spend like maybe 100 to 200 a month on SEO these companies they'll try to rank you for specific keywords like best web design or web designer in so and so and also your name of the company which is the most important you guys can go ahead and look on your own but SEO reseller they really do have some good reviews and they're actually pretty cheap and you can also Outsource it for your clients as well so you can be a customer and then you can also Market it to other users as well if you guys do need more help they do actually have a sales person you guys can talk to and just tell them what I'm telling you just say hey you know I'm starting a web design business I want to be found on Google uh you know how do I get started with all this but just don't let them oversell you okay you don't need to spend 500 extra month that can be a little bit expensive and there's other ways to spend your money uh in my opinion so yeah make sure to start your SEO campaign all right so now that we talked about SEO let's talk about content marketing now content marketing is the best free alternative for marketing your web design business so content marketing start creating blog posts and content for business owners like how to form an LLC or how to start your business now you might be asking yourself why are we going to write about uh forming an LLC Daryl we're a web design company like what are you talking about you stupid no the reason why we're talking about these topics is because we are targeting business owners right we're not targeting other web designers so someone's starting a business will need a new website right but they will also need a uh you know how to form an LLC they might need to create a logo right let me give you guys an example of another web design company that's creating blog posts uh sort of to what we're talking about here so here we go we have the top logo design trends for 2022 and as you guys can see this company has uh they've created content about the history of logos and negative spacing and funky fonts and all sorts of different subjects that relate to logos now I do like this because they're helping the business owner get inspiration and ideas and as a business owner if I find this website helpful and saying hey you know this blog post really helped me you know what does this website do and then oh wow they're a web design company okay sure I'll just go ahead and buy one of their services which is what this company is uh aiming for and what people really do if you trust someone or you like the way the website offers their service you're more inclined to go with that company so when you are making content for websites I'm sorry for your for your website just make sure that you appeal to new business owners all right so we went ahead and we talked about SEO telling your friends and content marketing let's go ahead and go to the next slide here all right Google my business this helps when people search for web design business in your area like web designers near me now this I believe is the number one best hack for SEO no matter what let me explain why so here we go I just typed in web designers near me right and right here we have this advertisement where this person probably paid like I don't know five dollars right this guy probably paid four dollars this guy paid you know maybe three or five dollars and then here we have a list of these other companies but before we talk about these companies let me scroll down right here now these companies right here probably spent hundreds of thousands of dollars on SEO they probably spent big bucks on SEO they're probably corporate companies with very massive budget it's that you cannot compete with sorry guys you guys can't compete with the big guys you know these guys have massive budgets you know and uh that's just that's just the industry however if you submitted your website on Google my business guess what happens you're given that extra chance you're giving that boost so now you'll see that you have all these small timers right these are small time uh web designer companies and you can see that uh they're boosted before these other companies with massive SEO budgets so for example if I live next to this guy I'll say you know what uh cool this guy is right next to me let me go ahead and click on his website and I'll see what he has to offer so by adding your website to Google my business it boosts you to the top of the search and it also shows people in your area that you're like a web designer so I do like this approach and I think that if you are a in the business of web design you must add your website to Google My Places because this right here is like maximum exposure it really helps you get local clients and then remember those local client can tell other people about your service if they liked your service so make sure to do a good job alright so now we went through Google my business now let's talk about Yelp business this helps you get more exposure backlinks and shows reviews about your business oh this one's great let me show you guys a little bit about Yelp this is yelp.com and here I just typed in something like best web designers in Las Vegas right something very generic now instead of actually going to SEO and competing for this keyword which can be very competitive and very expensive why not just join Yelp directory where if someone types this in you'll be listed for free right that makes a lot more sense than trying to compete with help itself right so here we go you know we have some companies with some reviews it shows a location it even shows response time oh so think about that the faster you are to respond to people you get the little green little check mark or the green little 50 minutes you know and you can request a consultation request a quote I really do like this and this is a great way on how to get more exposure for your web design business because people can see the local location of your business yet they can also see what other people are talking about and reviewing about your business now in case you guys think well y'all probably gets no views and no visits Daryl you know that's old school no no no no it's Auto School let me show you guys this is yelp.com yelp.com gets around 100 120 million visits a month right so in November they had 118 million uh December they had 128 million and in January we had a 100 or they had 126 million uh visits so these director websites are far from dead I've I've seen blogs argue that but I'm just like what are you stupid look at these numbers like how would you argue with these numbers you know so um I recommend putting your website on these websites and earlier we did talk about SEO and I feel like trying to get keywords like best web design Services can be very competitive but if you don't have the budget for it no problem you guys can submit your website to Yelp where if someone types that in you'll be found so make sure to submit your websites uh to Yelp and other directory websites now one tip of advice as well when you are submitting your information to these websites please please fill out everything possible I know you guys are going to stumble across like 20 you know go to 20 directory websites and you're just going to try to fill it up as fast as you can take your time okay so put in your logo right give some great description about your business put in photos put in put in as many photos as you can I don't care it's free you know it doesn't cost you anything and it's just opportunity for you to get more clients fill out all these services offered make sure to verify it right go through the description talk about the business um you know here anything where they ask you to put information put it in as much as possible because the more you put it in Yelp will actually boost you up in the search because they're finding that your content is more relevant and has more information to help users so make sure that you put in everything possible and uh yeah once you guys do that you guys will be on your way so yeah make sure to add your website to Yelp business all right so we talked about Yelp business right now let's go to directory website so this helps you get found by more visitors and establishes your brand and business let me go and give you guys some examples and explain how these affect social signals this is a directory website it's called clutch.co and this website is like a directory of web design companies in specific regions and you guys can see that they have the price they have we know what they charge the staff uh they have like their their focus so are they good for design are they good for coding you know whatever and then they also have some general description we have a profile and you can contact and also visit the website now adding your website on as many directory websites is very helpful because what this does that this sends social signals to Google this basically adds backlinks to all these different websites and it tells Google that your website's up and coming and that you're participating with all these websites so if you add a bunch of backlinks on these director websites your own website will start to get higher and boost up in the search engine so that's another reason on why you'd want to use these directory websites now again when you guys are using these directory websites fill out as much information as possible the more information the better because these director websites just like Yelp if you add in a bunch of information they believe that it's very helpful and this will help boost your website up in these directory websites now this is just one right and I actually have this other article here from search engine journal and they do also have Emilia Wilson wrote it we have the same last name how cool is that so they also have 21 different uh websites where you guys can list your website on these directory websites and I know many people haven't really heard of these websites but these do get like hundreds of thousands of visits maybe even millions and people really do use these websites on a regular basis so I'll go ahead and leave this article in the description below they do have quite a bit of businesses here where you know being places Yahoo places Yelp they have hot frog Foursquare like I said just put your website on all these websites it will take a lot of time guys it's a very tedious task but once it's done it's done right you're going to get the traffic people will start calling you and business will start to come another tip on to find director websites in your area is just by going to Google and typing in something like top 10 best web designers or top 10 best web design companies when you do this a majority of the time mind you're going to find a lot of directory websites for example I just type that in right and I scroll down here we have pledge.co we also have designrush.com we have creative block we also have we have a bunch of directory websites you know and you guys can reach out to these companies sign up and then saying hey you know we see that you guys have this list we're going to go ahead and add ourselves on your directory and that helps them and it also helps you so if you guys are you know having trouble finding directory websites this right here is a great strategy all right cool so we've finished number six now before I go on any further make sure to like this video and let me know in the comments if you guys have actually tried any of these strategies and just let me know how it went you know did you guys get a million dollar client who knows you know like you never know what's going to happen just just do it just do it like Nike says just do it all right here we go all right neighborhood councils and Chambers of Commerce many people don't even know this stuff exists it's crazy let me read this through you guys these organizations for referrals and networks with small business owners this helps get the word out about your business many people don't mind helping out people in the community so let me go ahead and give you guys an example this is Santa Clarita Chamber of Commerce this is where I used to live and I will you know I'll probably move back there in the future I love Santa Clarita I mean I've I grew up there it's it's like my home you know I love this place but people don't know that every city that you live in they do have their own special Chamber of Commerce and these businesses are designed strictly to help out the community right so let's say for example you live in Santa Clarita right all right so uh you live in Santa Clarita and you're starting a web design business right how can this city help you well let's find out over here we have a directory all right so this is the Chamber of Commerce website for Santa Clarita and look at this they have listed a bunch of businesses right so we have all these different businesses HR Consulting Advanced Auto Parts AAA companies I mean we have up to 45 pages and someone in the community probably wants to work with people also in the community I know you might see this and saying well I wouldn't use this I wouldn't search for you know companies but a lot of people do I mean if I lived in a city I kind of want to work with people in my city right so we can help out the community and you know keep the economy going in our town you know but uh no matter what city that you guys go to make sure to look up a chamber of commerce I believe these are also do follow backlinks so this will also help you guys with some SEO right because once Google finds out that a major uh you know gov website is linking back to your site then you know that could help with domain Authority so make sure to go ahead and go to the Chamber of Commerce in your city I'm sure if you just do a quick Google search you'll find your city and also the Chamber of Commerce for your City all right next number eight attend meetups and camps that relates to owning a business and web design all right so here we go so we have some business meetups and you can go ahead and attend these meetings and then just you know ask them oh do you need a new website and you'd be so surprised a lot of these people they own businesses and their websites are like terrible like it's it's it's a shame you know and a lot of them they're just like yeah man I work with this designer and he screwed me over you're going to come across that a lot where are these other guys you know web designers they abandon the project that happens quite a bit but um you can go ahead and attend these meetups and gain new clients for your web design business all right so we went ahead and talked about number eight let's go to number nine and ten so number nine add all social networking profiles to your websites I should have put that in there to your website so create a Facebook page create a Twitter LinkedIn you know I see I don't know if Tick Tock applies to web design I'm like that's debatable I don't think it does but I I can't deny it because it's the number one like app in America I don't use tick tock I know these kids do but I I don't use it so uh if you guys do use tick tock and you feel like it might help your business yeah sure you know make a web design Tick Tock profile also dribble behance and stuff like that now when you are managing your Facebook page or your Twitter make sure to post regularly and you might be thinking well no one's liking it or no one's commenting it doesn't matter the reason why you want to establish these profiles is to show that you're in business and that you have some sort of uh like a life you know that like oh this company's active right because if you go to a Facebook page and no one's posting nothing for two years you're gonna think they're out of business so you won't even go to their website but if you see a Facebook page or a Twitter or LinkedIn that's posting regularly once a week you're gonna say oh they are in business okay let me let me go ahead and check them out now let me give you guys an example of a Facebook page that I made alright so here is my web design company and you can see that we have this Banner at the top we have this image now make sure again like I talked about earlier fill in as much information as possible okay so add in your banner uh you know your title add it in your description your about us your phone number anything that allows you to put in more information about your company uh put it in right so right here we have you know a post right and this is actually an advertisement now right now I'm actually experimenting with Facebook um Facebook ads specifically for web designers and right now ABS put testing stuff so I'll follow this video up with a Facebook ad tutorial for web designers only and I'll walk you guys through on which one works the best and which one you know they they don't work but uh here you guys can see that I am running campaigns and uh people are clicking my ads you know a lot of people they're they're engaging in my posts in fact let me go ahead and just view the results here and just show you guys really quick so this one reached around 11 000 people you know we got a hundred website clicks I actually did get some emails from users who were asking me about my business and they found my website because I linked darylwilson.com and they're like wait a minute you're a YouTuber and a web designer in Las Vegas like who are you you know can you build me a website and that's kind of how these people found me and over here I do have insights on the campaigns that I ran so you guys can see that my campaigns are reaching a lot of people and this is kind of spreading the word right right now they might not buy my service because maybe right now they don't need my service however if they see my website in the long term they're going to say you know what there's that one company I saw let me go ahead and give them a try and you guys can see that uh I am getting a lot of new Facebook page visits and here you'll see that these are just passive searches so people are just visiting my page just how to random now just because I advertise and you know we do have a lot of Impressions you know a lot of people are finding our company and the word is getting out about our company so uh I'll be you know I'll be making another video on Facebook ads a little bit later but I just want to let you guys know that creating a page and establishing that uh live presence and that social proof is very important to get new clients for your web design business all right now let's go to number 10 ask for referrals guys don't be shy don't be scared no one likes a person who's shy and scared and I can't talk you know just just ask them don't be scared ask your current client if they know anyone that needs a website people are 80 percent more likely to buy a website from someone that they know trust or versus someone that they do not so what does that mean that means if I just ask some random stranger on the streets saying hey do you have a web designer and they recommend one to me I'd be like yeah whatever however if it was my sister or my cousin or my brother and I asked them and they recommended some a company to me I would be 80 more likely to go with that person versus a stranger feel free to ask for referrals you know just say hey you know like we're we're getting started out you know we're a good web design company and we're trying to get the name out and we're building momentum some and we really need your help you know and we offered you guys a great service and I really hope you're happy and if you guys can can you guys please uh you know refer to someone else who needs a website would really help us out or what you guys can do is put the website at the bottom of the footer of the website you created so if you guys do build a website you know just ask them saying hey can we put our website at the bottom so if someone likes your website they find our website they'll click on it and then they'll go to our page and then maybe we can do business with them just ask them it never hurts to ask I find a lot of web designers are too chicken to ask clients for this which doesn't make any sense to me just just do it like like Nike said just do it here we go now we got these other ways tutorials places and Google my maps so I get a lot of people asking me to build websites for them why are they asking me to build websites for them because they found my tutorials on YouTube if people find your tutorials very helpful they gain your trust and I have a lot of people's trust because they watch my tutorials and they say hey this quality is you know the content's great you know can you build a website for me unfortunately I have a full-time job here on YouTube and I can't do that but if you are you know just getting started out just create some small tutorials let me go and give you guys an example really quick so here we have a Weber right and a Weber created this little video on how to create a custom thank you page you can make other videos you know how to do this how to do that you know and try to try to gear it for business owners or people who are looking for a website this always helps gain that trust from visitors who are looking for a web design business all right and next we have placeits and what is place it let me show you guys what place it is so place it is a new website created by envato and I feel like this is like the all-in-one solution these guys make logos they make mock-ups they make videos they make everything that you can possibly need for marketing material for your web design business and they have some really cool stuff you know besides the templates and their advertisements and their logo makers they also do have like these videos where you can actually put your company on these uh like coffee cups or sweatshirts or whatever so you see here how we kind of hover over it and it turns into the company let's see here wait wait wait come on wait come on okay that's not working but this girl does see how it says hi right there there we go so maybe they gotta fix that who knows and then also here we have like these two girls and you know they're wearing logos from other companies I really do like that and what that does that that creates like social proof If you have a bunch of like people wearing your shirts saying oh like this is so cool this company's great people are gonna go oh man like if they're liking that company you know I'll probably like it and here we go we have this uh this looks like an advertisement 40 off all orders I do like this this looks like a uh Instagram ad or something like that right I don't know here we go we have two hoodies all right and we got this gamer yeah look at that man you know so the sky's the limit you know you guys can have like a lot of different marketing materials so they have mock-ups uh prints print on demand digital stuff apparel we have designs right they have uh business cards book covers gaming you name it you know they also have music as well and if you guys do need a free logo oh this company has amazing free logo makers I highly recommend check it out they also do have videos they have this new Express video maker now I can't go through everything on this website because this video can easily get another 20 30 minutes long so I just recommend to go to this website and check it out I'll leave a link below to check it out I don't have a coupon code for it yet it is a paid website unfortunately it is like a 12 a month but for what they give you I mean it's really hard to beat it yeah it's really hard to beat it they also do have free templates look at that I just found that go to the bottom and get the free stuff all right so make sure to check out places.net all right so we're back on our slides here now the next one add location on Google Maps and Apple Maps now the reason why you do this is this helps users find your business on their phones in case they want directions or want to find web design businesses near them so where's my phone do I have my phone all right yeah so here's my phone right and sometimes when you're using your phone you might go to Google Maps right or Google My Places or Apple Maps or whatever and sometimes you're searching for something right if you want to be found on your mobile I would highly recommend to add your websites to Apple Maps and also Google Maps as well and uh yeah I mean that will just really help you guys get more exposure it also shows your location next to other businesses so let's say like someone's at a pizza shop and then they click on the pizza shop and your website company is next to the pizza shop your business will display next to it so it just shows you on the map just so you're visible and stuff like that so I highly recommend to add your websites to Google my business and Apple Maps let me go and give you guys one more example here just over here just to give you guys an example if you guys do add it you'll appear like something like this right you'll appear like on like on the map so you're visible and people can find you and this is just another way to make more money all right so we are cruising here so you guys are now like kind of understanding different marketing techniques and you're finding out different strategies so let's keep digging the next one answer questions on quora if you see questions asking about good Web Design Services answer them feel free to ask your own questions about your own web design business to start the conversation so let's say for example we go to quora and here we go there's a lot of questions about web design right what is web design who are the best web designers under 25 how can I learn web design whatever you guys can go ahead and go to these questions and you can answer them with your own company and give a back link to your company so for example I'll just go to this one best web designers under 25 I mean people are asking these questions right and here you can go ahead and answer this question and then you can kind of give them a link back to your web design business now a lot of companies do this I have seen many people ask questions about their own business like oh what can we do to improve our service or what do you think about this or what do you think about that it just starts the conversation so people can answer it and helps people find your website alright next we have create accounts on Yellow Pages up City Thumbtack and other directory websites like we talked about earlier this is just again going back to directory websites just link your websites to other various directory websites go to all these websites put in as much information as you can there's like hundreds of directory websites I left you guys that article where it shows you guys a few directory websites so remember that the article is in the description just take the time and go through the process of filling out all the information I know it can be time consuming and you don't have to do it in one day okay you don't have to do it all in one day just make sure it looks good good and that you have a lot of information on those profiles let's go ahead and keep going here keep pushing forwards and Facebook groups this is a good one I get a lot of these guys in my group and let me explain to you how not to get banned okay but first feel free to answer questions and ask questions about your business don't go into groups and start spamming about your company I have I have band guys that you know hey guys check out my Fiverr gig five dollar website you know or hello guys go to my upwork profile you're going to get banned if you do that however if someone asks a question about web design or they need help then you can say yeah we're going to help you here blah blah blah blah here's also my website if you want to check it out you know a lot of people in my Facebook group they actually do ask for help with their websites I'm not saying to go in my group and spam I'm just saying that like you know other Facebook groups they do ask questions like hey do you know this good designer uh blah blah blah blah also what I've noticed too is that you do have web design companies who are new and they're really not good at design and they ask you know they ask people is this a good page and someone might say no this is my website and then that person might see that other designer and say you know what could we work together you know can we have like a like referral system here because you're obviously a better designer than me and yeah so just asking questions or if people do ask for help you know you can help them but do not go into groups and start spamming your company uh you're gonna get banned it's it's just gonna happen all right so just don't do it just don't do it also forums I mean forums are still a big thing you know there are forms but if you do find forms you know answer questions but do not spam okay you do that you're gonna get banned trust me and the moderators they know what you're doing okay like like me like I'm not stupid okay when I see people are like oh this company is great uh does anyone else know it's like okay I know you're working for this company you're gonna get bad dude you know like you're out of here you know so uh just be mindful that's all I'm saying uh cold calling script now if you just cannot find business or you're impatient and you and you and you want to get the business we can start cold calling no problem I cold call for a few times and I do have a script that can help you guys out I have created a cold calling script for users who wants to cold call maybe you're just one of those social speakers who have that Gift of Gab kind of like myself where we have that gift of get right I actually have created a cold calling script for all of you now before I go ahead and talk about this script I just want to let you guys know that I do have another video that goes through this entire script verbatim I explain uh what to say if they say something what to say back and uh yeah this video covers all of that right here we have the ultimate cold calling script web designers so I do kind of go through this and say look this is what you say if they say something like uh depending on their response we would give a different response back so right here you'll see if the owner says no if the owner says yes if the owner says no I have not seen the website or if the website if the business owner says I'm busy this is what you should say uh we have you know we have the response for no the response for yes the response for I'm busy and so on and so forth how do I know this how did I make this well because I used to I used to cold call I used to work for an SEO company in Valencia I'm sorry in Malibu no not Malibu no Calabasas I work for an SEO company in Calabasas and I was a full-time telemarketer and I would call businesses and try to get them to sign up for very overpriced SEO plans and then we would just Outsource the all to India and charge these guys like ten thousand dollars a month and then we would just charge these guys in India like a thousand bucks so that was uh what I was doing and I did it for a few years so I kind of understand and what to say when people just say like no I don't want it you know it's like wait wait wait let's talk about this you know like let me let me push a little bit here so uh yeah you guys can go ahead and go through this uh script also you guys can go ahead and check out this video alright so we talked about cold calling script let's go on to the next we are almost done showcase your work on behance and dribble this helps users see how good your work is this is your time to shine many users search these websites to see the skills of specific web designers and it's also indexeded by Google images for more exposure back to your website so how do these people know that you're a good designer right you can just be some craft designer we don't know that but if you add that proof saying look at this beautiful website like doesn't this look amazing the customer is going to say yeah this looks pretty good like you did this all right make my website done sold right that is one way on how to get more business the second way is Google Images so first we have these websites at dribble right and you can see that we typed in web design and there are a lot of different mock-ups and websites that showcase their web design skills so this is pretty cool now also you can do the same thing for behance right you guys can go ahead and check out a lot of these other websites that people have made and yeah this gives you like opportunity to shine however these images are also picked up by Google Images so let's say someone down the road just says hey I'm going to go ahead and Google some you know web design portfolio examples and they see something and they go like oh what's this oh I like this and then they click on it this can lead back to dribble or your behawn's profile so it helps you in two ways right it helps you uh you know helps you showcase your work where people can look at your work and decide to hire you or not and they do have a lot of views I mean look at this 107 000 views you know what come on I can make a better website that looks like this I mean this is not that great let's let's take a look here you know I'm a little competitive with design here yeah yeah it's all right it's all right definitely not definitely not that great you know I can make something better all right I should I should email this guy saying hey you want to have a you want to have a design battle buddy you know but no it's not a bad side at all but um yeah also remember that it does get picked up by Google Images so that is the second way so it helps you in two ways so just make sure to submit your work to dribble and behawns for more exposure all right so now we have classified ads right so uh Craigslist and classified ads these websites often have post by users who want websites or they need help with websites or they even need help with WordPress sometimes these people who post on these websites they are familiar with WordPress but maybe they don't know how to use like the dokkan Plugin or they don't know how to use the booknetic plugin and they just need that little help right maybe later you can just take over the whole project which does happen a lot but always check these websites and feel free to post your services here remember you need referrals testimonials so grind hard when you're first getting started out guys you really gotta grind because remember once you build that small clientele uh you can get referrals and as I said in the beginning of the video referrals are the number one way to get more clients so let me go ahead and give you guys some examples of classified ad websites and also some Craigslist jobs all right here we go so we're on Craigslist right and I went to uh web designers in Los Angeles it's actually very funny I actually posted a job here and I got like inquiries from people all around the world so it was very funny but uh here we go we'll type in WordPress right WordPress and uh let's see what we get here all right cool we got some jobs for February which you know that's the current month that I'm in uh front end developer we have a person that needs help with Shopify web developer e-commerce specialist and also a web designer wait what is this part-time administrative and web designer okay okay let's see what this guy says I think this guy's saying you have to answer phone calls and use Photo Photoshop and illustrator and no WordPress huh very interesting I don't know about that job maybe they're asking a little bit too much and a little bit not enough pay so but uh this is one place where you guys can go you guys can also go to like oodle right this is another you know web place where you can uh post you know classified ads and get jobs now you might be thinking yourself they're all these websites they don't look like much you know and they look old and they look like I wouldn't use it who uses these websites the most I'll answer that question older people old people grandmas grandpas they like these websites who has money grandpas grandmas all right so never underestimate your customers I feel a lot of people that are older tend to use these websites but older people do have big budgets and you can help them by making them a great looking websites and filling their need because a lot of these older people what I've seen is they go to these like corporate websites they spend big money on these terrible templates it's like a disaster I have had a few clients who went to likeweb.com or godaddy.com Web Design Services and they just uploaded some WordPress theme template and charged on my four grand and I'm like yeah you got screwed you know like uh you got screwed I don't know what to say so you can you can help them you know we got to help the other community and also if you guys do need help with uh finding more uh directory websites I'm sorry classified ad websites I will go ahead and leave this article right here in the description this is from the web Hospitality some some websites and they've like pretty much listed like all of the classified ad websites where you guys can go ahead and submit your listing so yeah I'll go ahead and submit this in the description so you guys can go ahead and check it out and uh yeah make sure to publish regularly and also if you feel like that's too much work you guys can hire someone part-time to post on your these websites every single day so just make sure that's a you know that's an option for you Facebook ads and send emails to businesses with websites so first Facebook ads advertise on Facebook is a good way to start right advertising your city and start with five dollars a day and see how it goes don't spend hundreds of dollars guys Facebook is not like the golden ticket okay it's just another way on how to get more traffic and also we have send emails to businesses with websites let me go and read this to you guys you can hire someone to ask them about their websites scan the website through GT metrics sorry scan their website through GT metrics and show them the results and let them know you can help them improve their services now this is my personal strategy I made up this strategy this is what I did when I ran a business right I don't know about anyone else but this is something that worked for me and it probably worked for you this is caesarspalace.com this is one of the most predominant casinos in Las Vegas right and you guys have probably heard of Caesar's Palace many people watching this video probably gamble that a lot of these casinos including myself right and you don't really know but when you look at this website it's pretty slow you know they need some work right now maybe this company has been looking for a new web designer but they just haven't found one yet you're right so what I've done is I went ahead and I went to GT metrics and I ran Caesar's Palace through teaching metrics here's what I found fail fail fail right now I can go ahead and take this report and I can email it to a client saying hey you know we went we ran this through GT metrics and guess what your site got an F your FFF your site's slow it's bad it's terrible just send them an email you know and just show them this report you can download the PDF right here you guys have to create an account obviously but what I used to do was I would go to local businesses I would run all their sites through GT metrics I already knew their site was going to be terrible right because they don't know what they're doing they probably got their site from Wix or something and they got an F right so I would take this report I would send them an email and say you know this is your website it got an F on our audits uh it's pull it's poorly optimized you might have a lot of security problems down the road you might lose customers bad bad bad bad bad I would kind of pressure them into to you know to responding to me and they did half the time and once that happens I would say you know let's uh we can go ahead and fix this for you you know we can go ahead and make you a brand new website and we'll make sure that your score gets an A and we'll show it to you and we'll prove it to you you know and when you have that kind of confidence uh the customer is very inclined to say wow like you can give me the a cool and remember you these guys are not in the business of web design they don't really care about their website too much but if they hear that they can go from an F to an a hey that's a marketing uh that's a that's a marketing gimmick you know we can use GT metrics to make more money right so I would highly recommend uh you know looking at local businesses running their website through GT metrics and then emailing them and just tell them that this is one way we can help you what do you think all right party people thank you guys so much for watching this video I hope it brought a lot of value you know I know it can be very challenging and very frustrating when you don't get clients and you know even me like when I started web design I saw these websites that were designed by these designers and they look terrible and I'm like how come I'm not getting this work like I'm better than them you know it's it can be very frustrating you know I have totally been there I've licked the pot clean I totally understand but practice these methods and remember this is a long-term strategy okay you probably won't get customers on your first month okay I'll just say that if you know you won't if you do congrats you got it lucky all right you got lucky but remember this is a long-term goal so if you keep these practices up for a year you're gonna get found you will get found and if your work is good you know it can work out for you also if you guys do need help you guys can go to my website so this is my website darylwilson.com and if you guys do need help with design or you want free templates don't use like those Elementor ones or don't use those generic ones you found uh me and my designer you know we spend thousands of dollars for each of these templates and these are custom made right so you guys can use any of these templates and you don't have to use like the same exact templates you guys can swap the images you guys can change the color scheme here's an example of one right here right this is for uh therapists all right but you can make this about like corporate business you just change the pictures and the colors and Bam it's a corporate business right but I like this one it's really well structured right so we have uh the introduction right we have a sign up form uh you know we have this little uh little we've got little flowers the cute little trees you know and we scroll down it kind of goes back and forth uh but overall these templates on these websites they have like 15 pages and they're all for free you don't got to pay nothing for them however some of these do require Elementor Pro and that's kind of like how we monetize it how we make money that we hope you guys use our link and upgrade to the pro where you guys can go ahead and use the full package however you guys can use the free pageable Elementor and use a majority of these templates as well so if you guys do need help with design uh go ahead and check out uh these other uh templates and you guys can use these all for free so I hopefully uh I hope this video was very helpful you guys have any questions for me feel free to let me know in the comments below make sure to like this video and again uh I wish you guys the best you know it's a journey from here and good luck all right Party People congratulations on making it to the end of the video not a lot of people make it this far it's like less than like two percent or something it's a very uh very small amount if you guys do have any questions for me feel free to let me know in the comments below if you guys have any questions for Daniel as well you guys can let him know in the comments also feel free to go to his channel And subscribe I'll leave a link below to his channel where you guys can go like his videos and subscribe and you know you guys can talk about design let us know who the better designer is let's have a little competition here we should have a design a design competition but uh one thing I do want to say to all you guys is be consistent with your business it's very easy to get tired and burn out and you know just just quit you know don't do it just be consistent with your business keep at it you know and as long as you're consistent I promise you you guys will get clients even on YouTube you know I was on YouTube for about one year and back in my 2014 and 15 it was a lot harder to get views compared to today's standards but I kept posting videos every every month every week and eventually I got one video that got traction I got subscribers and then you know it all succeeded from there so I urge you guys to be consistent as much as you can don't give up and I promise you you guys will have a full-on successful web design business so congrats and I'll see all of you party people in the next video guys take care can we get some firm handshakes in the chat from Good Old Daryl Wilson

Channel: Darrel Wilson

Views: 266,032

Keywords: web design, wordpress, web design business, wordpress tutorial, web design tutorial for beginners, how to make a web design business, darrel wilson, wordpress website, wordpress web design, wordpress web design tutorial, web design tutorial, web design wordpress, web design business from home, web design business tutorial, how to make a wordpress website, wordpress for beginners, create a wordpress website, wordpress tutorial for beginners

Id: IBg1NwctLVY

Length: 364min 29sec (21869 seconds)

Published: Sat Apr 02 2022