Web Design Tutorial: Start a website or blog with WordPress – How To Make A Website #1

so in this video I want to get you guys started generating your website by consider the issue and looking at website design i’m going to walk you through some of the observations that i’ve made about website designing and then show you some of the gratuities and techniques that you can use to easily turn those observations into actions on the website that you want to build this video is part of my video successions on how to create a website i highly recommend that you watch the series inside of a YouTube playlist so you are eligible to automatically travel from one video to the next you can do that by clicking on the link above me or look in the description below for the full playlist link i’m tim from real website hints and what I want to do is help you easily make a great website I’ve made a few websites for people that I know and for businesses and organizations that have been a part of and building your website is a huge step and I genuinely think that no matter where you are in life or with your organization making a great website is going to help you get closer to your goals I’m passionate about helping people who want to improve and want to grow so I look at this entire series as if you’re a friend of mine who are required to help and advice making a great website as one of the purposes of that mind i’d really like to have your feedback in the comments below “ve been told” about what’s helping you tell me about what you find confusing and you have ideas or suggestions that can help other people improve the websites that they’re making share them in the comments below so let’s get started looking at how I like to think about website intend and take a few steps towards organizing yourself and your minds so you can get started impelling your website so let’s go ahead and dive in alright in this video I want to help you do swiftly started constructing a website and part of working on getting your website done promptly is take a few moments and compile some important decisions about our website and to get a couple of things unionized here we’ve got the temporary disembark page that we’re going to be build for our website going to show you exactly how to do that in an upcoming video what i want to show you guys something that’s really important and that is this first country right here often called a hero area and what this is showing us is we’ve got the name of our busines and then we’ve got the most important bit of information for parties touring our site to know and that is that beach town surf shop is your source for custom surfboards and surfboard repair and what we’re gonna do right now is gonna take a look at a got a couple of other websites instances and we’ll look at their protagonist areas and something i want you guys to start thinking about is what is your hero area gonna say for your website was your website about what he tried to do what does your companionship do was the main thing the very first thing that people need to know when they visit your website because that’s what you need to do when you’re building your area is figure out what the main thing for beings when they first land on your site to know is because when they click on your website you merely have a few moments to capture their notice you want them to know that they’re in the right place so go ahead and take a look at some examples we look at and we’ll talk about to talk about sort of various different things about the specific characteristics of these websites so here we are we’re on the square website and we can see we’ve got this hero idol and it’s demo a person with Apple pay so clearly this business does something with payments and it says right here square works for every business and then down now a little bit lower we can see start selling fast so they’re giving the see of the most important thing about their business right up front and we can see that in protagonist idol and get a text or what professional marketing beings call the copy and a couple other things we want to look at is the complexions consuming this website you can see there’s very few dyes exerted and I think that’s what obliges designing seem really good and handsome is by having just a few hues so we’ll see here we’ve got a lot of white and then we’ve got this blue which is standing out and then sort of these earth tints in the likeness now and again as we scroll down we can see with that some blue a somewhat different blue-blooded but still blew most of the website is just black and white and then we got this sort of earth hues were flesh sound now husband with the grey square as you scroll down here again we’ve got really blue-and-white nothing not a good deal of emblazons saving it very simple and made to ensure that our sense stands out to our viewers as you scroll down here we’re getting some more colours we’re adding some yellowish only to become things sounds a little bit but again we’re not going crazy with the shade obstructing the hues simple got one bit of yellow here simply to make this section stand out and then again we’re down to the blue as we scroll down here again just a few colors so it’s important to keep your website neat and tasteful sounding you exactly want to use a few pigments grays and lily-whites don’t really weighs good way to balance out the background of your website but you want to exactly be very minimal with the emblazons that you use when you’re building your place alright let’s take a look at another example look at lift now so let’s got a really light colorful website but again if you actually look closely at the colours you’ll see that we’re really exactly abusing a few complexions we’ve got basically purple into the pink again here we got sort of a violet off-color shade at the top and then pink down here we’ve got the protagonist send was indicating the brand-new insignium of raise at the time that i made this video and we’ve got a little word here sort of indicating people who want to be motorists turn miles in the money and then down now for people who are columnists are quite right hours so those two messages quite clearly exposed right the first thing you see when you go into their website and as we scroll down again you’ll hear we’re use just a few complexions on our website I mean this actual whole picture now they made is violet and pink so there are two main colours there and even this graphic now that they started go to the pink and the violet you know popping up time and again precisely to sort of unify the website unify the symbol and integrate the epitome as parts of this website and its part of this label as we go down the locate furthest going to see black and white again keeping it very clean and very simple and get near the bottom of the page we’ve got the two protagonist pigments presenting up again we’ve got this pink for this purple and the pink again on the text is white here because that contrasts really nicely against this sort of dark purple background and go ahead and look at Tesla Tesla basically they’re giving their part letter now pretty much in this hero image so you’ve got this great image of a automobile so you know that you’re a car busines and then they’re giving you what they think is the most important thing for you to know about their automobile which is full self-driving hardware on all automobiles look at this really big great word picturing you what Tesla thanks the more important thing for you to know is about their cars right there let’s go ahead and look at one of the product sheets here and Tesla look at the seek to pose s page as which gets to really look at the dyes spend on this page so the first thing we’re going to see again softened colours are starting off with a pitch-black car grey background we’ve got this red button down now we’ve got this red showing up here again and we’ve got this blue highlight here and get this blue text now everything else is white black or gray the most efficient way for your sense to stand out and for the information that you’re set on your website to stand out is to have really good high differ textbook with background so either you’re using pitch-black verse with a light-headed shade background or squandering lily-white text with a dark colouring background as we scroll down here again you’ll visualize we’ve got our call to action button that’s what they call buttons like this that’s asking you to click on something and we got that colors maroon so it’s really standing out and then we’ve got the items that are selected here in this like like in this blue so it’s standing out but not as much as what the designers of the website ones you’d want “youre going to” do which to click on this button down here and again we’ve got a button here which is red so it’s really standing out from everything else you can find out more information about this and as we scroll down you can see all the texts dark against the flare colouring background and scroll down farther you’ll see that even in their graphics now they’re using gray-headed and then the areas they want to stand out there employing this red color again so clearly there highlight colouring that they’re using is red and then they’re using this blue color as an alternate highlight color sort of less important spotlight shade and that’s how you’re going to be able to draw attention to things in your website is not by using a lot of emblazons not by really going crazy with that but picking one really good standout spotlight color and a couple of other colorings to complement that and then deterring all the other colors very simple and basic so now what I want to show you guys how to do is how to sort of go ahead and figure out how to come up with your own color scheme for your website that’s really important to figure that out ahead of time it’s gonna be really easy to add that to our website in the initial stages so that you can change it last-minute you’re surely going to change it but it would be so much easier if you start out with a clear color scheme for websites i’m gonna testify you how to do that right now the most efficient way I are happy to do that is by using a tool now announced paletton P A L E T T O N. com because it’s a website that’s going to help you quickly and easily come up with a coloring palette I’m not really a designer what I do is I just go and look at what other people are doing and then try to implement that very good I can on the websites that i compose that’s gonna picture you guys how to do basically how to take these really easy-to-use tools and make it look like you’re having some sort of genius designer merely by using the basic concepts that real professional designers know how to use and that’s what we’re gonna do right now so to start out with our main color are going to enter that in now but first let’s look at how I are happy to get my primary pigment and if you have already an existing business you might have a logo that you’ve already composed so I’ve already got a logo now and so you can see that the main coloring of this logo is this sort of turquoise sea green blue coloring and it’s not really important whether you have a logo or not you can always add a badge you last-minute but you do want to try to pick a hue like a primary protagonist complexion that’s gonna represent what your business is and what it’s all about to find out what this pigment here is I’m going to use a little apple tool called the digital color meter and if you’re on Windows machine I’ve got another video that will show you how you are eligible to find the complexions abusing a entanglement tool and i’ll link to that freedom in the top of the video up now but what you do with the digital shade rhythm is if you go up to the top and you click on View and then display appraises you are eligible to named that to hexadecimal and then what that’s going to do is show you listen what your mouse is pointing over in hexadecimal so if we go over to this color that I’ve got now the primary color in my emblem you can see that the hexadecimal is 10 A 9 9 4 and we can enter that in to the paletton website so here we go now on our paletton on the paletton website you just enter in that information so it’s 10 A 99 4 and then you exactly type okay there we go so now we’ve got this main colour here and paletton is here is already showing you some darker variances of that dye and some lighter differences and now we can start picking a dye palette what I mostly do with these buttons up here which will allow you to pick three dyes or four shades as your main color palette I like to do is just click on them and then find the emblazon palette that I like the best and I review competitions very good with this brand so this year’s a really good option you can already sense is it for a channel-surf patronize we’ve got some great coloring options now now we’ve got contrast dyes which i really like i like to have that that differentiate between our main hero color and another color that maybe we can use as one either one of these button either one of these colourings actually would be great for call-to-action buttons so i really like that and then now we go we’ve got another option now so we’ve got to sort of complementary colors we’ve got this turquoise-y green blue-blooded colour and oblige of this blue color and then we’ve got this orange complexion and this yellowish dye i don’t think i’m going to go with this colour palette here for our website because its service says a lot about the beach to me we’ve got the blues are the water and sort of the orangish skies of sunup or sunset which a good deal of parties associate with channel-surf so i’m going to pick this as my dye palette and now what we can do is we can click on this tables and export button now and we can see all of the different colors and the different color deviations so here we’ve got the main colours down here we’ve got the first dye we started out with the 10 A 99 4 complexion and then the additional complexions that were added or shade palette+ light-footed and dark discrepancies and what I like to do is I want to click on this as HTML button here and I just like to make a PDF printout of this or make a PDF version of it and then save it to my website folder i’m gonna talk about my website folder and just a little bit after this and that way I’ve got easy access to what my hues are you can also save this tie right here or use this tie-up and i’ll make you right back to that shade palette that you exactly generated one other thing that I like about abusing paletton is that if we close this here and say we want to make one page that’s like actually light sheet or really dark page but we still want to use similar complexions to what we created in our hue palette if you click over here to this preset button over here now we’ve got a bunch of different variations on that same colouring palette so you want to really radiant adventurou page or genuinely bite bowled a flyer that you wanted to create you can use your same colours from your website that you created with paletton but apply this sort of brighter version of it if you want to make a dark page you can use one of these darker versions of it you can click on those just like that and it will show you what that colour palettes gonna look like and then you can use the tables export and then you can export that dye palette also so you’ve got it to remark later on so i think that’s a huge gratuity on representing your website search professional right there exactly with that ok so now the next thing we’re talking about a really basic conception but one that I think is actually truly important for hindering organized and helping you move quickly while building a website and that ought to just create a folder on your computer we’re going to keep in store all the sort of the basic information and basic material like idols that you’re going to use on your website so what I like to do they like to acquire merely one big-hearted folder announced website channel-surf shop folder in this example so kind of the appoint of my website basically and then like to add these folders inside of it like that persona optimized for surf patronize going to show you guys how to optimize personas later on so they’re ready to be used on the web and they’re not gonna take a really long time to onu and we’ll talk about something else last-minute but that’s one folder like to have liked to have a folder with the plugins and themes that I bought merely that I’ve got a easy to access a backup copy of those things and likewise so that it will help me later on remember all the things that have bought to use my website look at this raw epitomes folder now so these are the likeness either the photoshop records that I’ve created or the likeness that came straight out of my camera or that i’ve downloaded to use on my website got all of those in one place right here and then if you’re going to be backing up your website which i most recommend that you do I like to have one folder on my computer even if you’re backing it up online but i are happy to occasionally back at my website and then have a copy of it on my computer just sort of giving me that peace of mind and usually also have a folder with like documents or folder with blog poles that I’m writing or something like that on there but I haven’t originated that more but what I would normally do is I would normally quit this this is a color palette for the website has just procreated that was just talking about so I’ve got that I mostly to save it as a PDF to my computer and I saved it in my main website folder so i can always go back and readily comment that and I were like we most suggested that if you’re using this website for your business or for your symbol that you merely continue to reference that colour palette for no matter what you’re doing whether you’re working on something on your website whether you’re making business cards realizing t-shirts whatever your flyers whatever you’re doing for your business you want to reference the same color palette so when someone picks up say your business card and they go to your website we are to be able to instantaneously read the colours parallel and that these two things are part of the same part of the same entity part of the same business organizations that they know immediately precisely by looking at the emblazons that they’re in the right place ok so little bit of homework for you guys to do on before you go on to the next video and that is go ahead and let’s go ahead and compose this folder if you already have a logo sort of play around with creating a color palette expending paletton and your insignium if you don’t have a logo you might go to someplace like fiver on you can look for badges on there basically we’ve got beings that will design badges for you and what i recommend that you do it if you use fiver just go onto fiver click on logo or search for logo and then exactly start moving down and encounter the basic logo design that you already like something that you think would work well for your firebrand business organization whatever it is you’re making the website for and it’s really important to pick something that you already like because occasions are the person who’s designing that logo is just gonna form other logos that ogle extremely very similar to that so you want to pick one that you already like and then adopted if you already have on the dyes that you know you want to use you can give that to them and they’ll be able to attain your logo with that hue and if you don’t maybe you can get some meanings from them I’ve squandered a fiver before I’ve had some pretty good luck with it and sort of little bit of a mixed bag I surely considered that to get good results are probably wind up give more than 5 dollars uh-huh but it’s a emphatically a great place to at least get ideas if not actually find somebody to help you see your logo and the next slouse of kind of homework for you guys to do is just go ahead and look at websites that you like and start thinking about the design that they use the emblazons they used and see if you can sort of breakdown in your own mind what is it you like about them in what a number of aspects of that you would like to incorporate your website’s i’m going to show you how to make a website in this i’m gonna show you exactly how to use the tools but of course I require you to have your website not gaze exactly like the website i’m gonna show you how to represent but i want to give you guys a cornerstone grade of understanding on design and how to attain your website so you can make a website that really coincides which you miss and what you think is going to resonate with your gathering and in the next video we’re going to do is I’m going to show you introduce you guys to some great hosting corporations that i recommend for you to use because you obviously need a lieu to build your website and a region lives in a lieu to host your website and i want to do is introduce you guys to a few different business that i think are really good and allow you guys to make a decision on which one you think is the best for your needs I’ve got a certainly some beliefs on what I think are the best but not everyone’s situation is the same so I’m gonna give you a few alternatives to choose from and then after that you can select which option you require and I’ll walk you through the exact process of how to get that set up and get wordpress setup and and then we can start building our website so really exciting click on the next video and then go ahead and let’s start taking those steps to constructing our website

digital marketing

As found on YouTube

Share this article

Leave a comment