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

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 creating your website by thinking about and looking at website design i’m going to walk you through some of the observations that i’ve made about website design and then show you some of the tips 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 series on how to create a website i highly recommend that you watch the series inside of a YouTube playlist so you can automatically go 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 really 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 needs help and advice making a great website as part of that idea i’d really like to have your feedback in the comments below tell me 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 design and take a few steps towards organizing yourself and your ideas so you can get started making your website so let’s go ahead and dive in alright in this video I want to help you get quickly started building a website and part of working on getting your site done quickly is take a few moments and make some important decisions about our website and to get a couple of things organized here we’ve got the temporary landing page that we’re going to be building 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 area right here often called a hero area and what this is showing us is we’ve got the name of our company and then we’ve got the most important bit of information for people visiting 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 couple of other websites examples and we’ll look at their hero 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 company 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 site is figure out what the most important thing for people when they first land on your site to know is because when they click on your site you only have a few moments to capture their attention 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 design of these websites so here we are we’re on the square website and we can see we’ve got this hero image and it’s showing a person paying with Apple pay so clearly this business does something with payments and it says right here square works for every business and then down here a little bit lower we can see start selling fast so they’re giving the viewer of the most important thing about their business right up front and we can see that in hero image and get a text or what professional marketing people call the copy and a couple other things we want to look at is the colors using this website you can see there’s very few colors used and I think that’s what makes design look really good and elegant is by having just a few colors 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 tones in the images here and again as we scroll down we can see with that some blue a slightly different blue but still blew most of the website is just black and white and then we got this sort of earth tones were flesh tone here man with the white square as you scroll down here again we’ve got just blue-and-white nothing not a lot of colors keeping it very simple and making sure that our message stands out to our viewers as you scroll down here we’re getting some more colors we’re adding some yellow just to make things pop a little bit but again we’re not going crazy with the color keeping the colors simple got one bit of yellow here just 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 nice and elegant looking you just want to use a few colors grays and whites don’t really counts good way to balance out the background of your website but you want to just be very minimal with the colors that you use when you’re building your site alright let’s take a look at another example look at lift here so let’s got a really bright colorful website but again if you actually look closely at the colors you’ll see that we’re really just using a few colors we’ve got basically purple into the pink again here we got sort of a purple blue color at the top and then pink down here we’ve got the hero message was showing the new logo of lift at the time that i made this video and we’ve got a little message here sort of indicating people who want to be drivers turn miles in the money and then down here for people who are writers are right in minutes so those two messages very clearly displayed right the first thing you see when you go into their website and as we scroll down again you’ll see we’re using just a few colors on our website I mean this actual whole picture here they took is purple and pink so there are two main colors there and even this graphic here that they made going to see the pink and the purple you know popping up over and over again just to sort of unify the website unify the brand and unify the image as being part of this website and its part of this brand as we go down the site farther 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 hero colors showing 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 entire message here pretty much in this hero image so you’ve got this great image of a car so you know that you’re a car company and then they’re giving you what they think is the most important thing for you to know about their car which is full self-driving hardware on all cars look at this really big great message showing 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 pages here and Tesla look at the order to model s page as which gets to really look at the colors used on this page so the first thing we’re going to see again muted colors are starting off with a black car white background we’ve got this red button down here we’ve got this red showing up here again and we’ve got this blue highlight here and get this blue text here everything else is white black or gray the best way for your message to stand out and for the information that you’re putting on your website to stand out is to have really good high contrast text with background so either you’re using black text with a light color background or using white text with a dark color background as we scroll down here again you’ll see 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 bright red 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 you 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 light color background and scroll down farther you’ll see that even in their graphics here they’re using gray and then the areas they want to stand out there using this red color again so clearly there highlight color that they’re using is red and then they’re using this blue color as an alternate highlight color sort of less important highlight color 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 colors not by really going crazy with that but picking one really good standout highlight color and a couple of other colors to complement that and then keeping all the other colors really 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 beginning so that you can change it later you’re definitely 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 show you how to do that right now the best way I like to do that is by using a tool here called 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 color 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 the best I can on the websites that i create that’s gonna show 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 just 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 here but first let’s look at how I like to get my main color and if you have already an existing business you might have a logo that you’ve already created so I’ve already got a logo here and so you can see that the main color of this logo is this sort of turquoise sea green blue color and it’s not really important whether you have a logo or not you can always add a logo you later but you do want to try to pick a color like a main hero color that’s gonna represent what your business is and what it’s all about to find out what this color 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 can also find the colors using a web tool and i’ll link to that right in the top of the video up here but what you do with the digital color meter is if you go up to the top and you click on View and then display values you can set that to hexadecimal and then what that’s going to do is show you hear what your mouse is pointing over in hexadecimal so if we go over to this color that I’ve got here the main color in my logo 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 just type okay there we go so now we’ve got this main color here and paletton is here is already showing you some darker variations of that color and some lighter variations and now we can start picking a color palette what I basically do with these buttons up here which will allow you to pick three colors or four colors as your main color palette I like to do is just click on them and then find the color palette that I like the best and I think matches the best with this brand so this year’s a really good option you can already sense is it for a surf shop we’ve got some great color options here here we’ve got contrasting colors which i really like i like to have that that contrast between our main hero color and another color that maybe we can use as one either one of these button either one of these colors actually would be great for call-to-action buttons so i really like that and then here we go we’ve got another option here so we’ve got to sort of complementary colors we’ve got this turquoise-y green blue color and make of this blue color and then we’ve got this orange color and this yellowish color i don’t think i’m going to go with this color 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 sunrise or sunset which a lot of people associate with surfing so i’m going to pick this as my color palette and now what we can do is we can click on this tables and export button here and we can see all of the different colors and the different color variations so here we’ve got the main colors down here we’ve got the first color we started out with the 10 A 99 4 color and then the additional colors that were added or color palette + light and dark variations 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 colors are you can also save this link right here or use this link and i’ll take you right back to that color palette that you just created another thing that I like about using paletton is that if we close this here and say we want to make one page that’s like really light page or really dark page but we still want to use similar colors to what we created in our color palette if you click over here to this preset button over here now we’ve got a bunch of different variations on that same color palette so you want to really bright bold page or really bite bowled a flyer that you wanted to create you can use your same colors from your website that you created with paletton but use 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 color palettes gonna look like and then you can use the tables export and then you can export that color palette also so you’ve got it to reference later on so i think that’s a huge tip on making your website look professional right there just with that ok so now the next thing we’re talking about a really basic concept but one that I think is actually really important for keeping organized and helping you move quickly while building a website and that is to just create a folder on your computer we’re going to keep in store all the sort of the basic information and basic content like images that you’re going to use on your website so what I like to do they like to make just one big folder called website surf shop folder in this example so sort of the name of my website basically and then like to add these folders inside of it like that image optimized for surf shop going to show you guys how to optimize images later on so they’re ready to be used on the web and they’re not gonna take a really long time to load and we’ll talk about that later but that’s one folder like to have liked to have a folder with the plugins and themes that I bought just that I’ve got a easy to access a backup copy of those things and also so that it will help me later on remember all the things that have bought to use my website look at this raw images folder here so these are the images either the photoshop files that I’ve created or the images 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 highly recommend that you do I like to have one folder on my computer even if you’re backing it up online but i like 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 notes or folder with blog posts that I’m writing or something like that on there but I haven’t created that yet but what I would normally do is I would normally quit this this is a color palette for the website has just created that was just talking about so I’ve got that I basically 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 easily reference that and I were like we highly recommend that if you’re using this website for your business or for your brand that you just continue to reference that color palette for no matter what you’re doing whether you’re working on something on your website whether you’re making business cards making t-shirts whatever your flyers whatever you’re doing for your business you want to reference the same color palette so when somebody picks up say your business card and they go to your website they can instantly see the colors match 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 just by looking at the colors 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 create this folder if you already have a logo sort of play around with creating a color palette using paletton and your logo if you don’t have a logo you might go to someplace like fiver on you can look for logos on there basically we’ve got people that will design logos 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 just start scrolling down and finding the basic logo design that you already like something that you think would work well for your brand business organization whatever it is you’re making the website for and it’s really important to pick something that you already like because chances are the person who’s designing that logo is just gonna make other logos that look very very similar to that so you want to pick one that you already like and then selected if you already have on the colors that you know you want to use you can give that to them and they’ll be able to make your logo with that color and if you don’t maybe you can get some ideas from them I’ve used a fiver before I’ve had some pretty good luck with it and sort of little bit of a mixed bag I definitely think that to get good results are probably wind up paying more than 5 dollars uh-huh but it’s a definitely a great place to at least get ideas if not actually find somebody to help you make your logo and the next piece of sort 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 colors they used and see if you can sort of breakdown in your own mind what is it you like about them in what elements 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 want you to have your website not look exactly like the website i’m gonna show you how to make but i want to give you guys a base level of understanding on design and how to make your website so you can make a website that really matches which you want and what you think is going to resonate with your audience and in the next video we’re going to do is I’m going to show you introduce you guys to some great hosting companies that i recommend for you to use because you definitely need a place to build your website and a place to live in a place to host your website and i want to do is introduce you guys to a few different companies 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 definitely some opinions on what I think are the best but not everyone’s situation is the same so I’m gonna give you a few options to choose from and then after that you can select which option you want 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 making our website

18 comments

  1. I want some suggestion on my blogging website www.dashh.in. Please review my website and suggest me to make it awesome.

  2. Hi Tim, Thanks for all of the great informative videos. Great suggestion on getting clear on a simplified color scheme and I appreciate the simplicity of the templates you used as examples in this video. I'd like to build my first WP site for my coaching business and after listening to several of your vids, I had it narrowed down to Divi (even tho I like some of the Avada themes better). Numerous people, including my virtual assistant, suggest I choose a free theme that looks ok, for now. Once things are cranking – go back and consider Divi or Avada. I'd love your thoughts on this. I'm a professional graphic designer and I'm very particular and can't imagine finding a free theme that live up to my standards. Do they exist? I thought about using Wix since I know this platform but it doesn't support affiliate tracking.

  3. Thanks Tim. Lots of great tips in here. I really liked how you took few examples of websites and explained what you liked about it. Breaking it down to digestible pieces was really helpful for me as my strength is in coding websites from PSD rather than designing from scratch. Thanks for the color scheme idea too. Simple and quick. I found you by searching for a beaverbuilder video tutorial which is another great gem. Looking forward to watching your other videos.

  4. Hello Tim, Before I dive in and take advantage of the incredible Divi deal, are there ANY other themes you'd recommend for a design diva like myself? I really like how intuitive WIX is but they're not set up to do affiliate tracking. I checked out Beaver Builder and was not impressed with design details. Do you think Divi is as intuitive as Wix or have any other recommendations? Thanks so much!

  5. Tim, I'm also curious if you've had experience with the Divi page builder tool as a standalone WP plugin with other themes?

  6. Great introduction tutorial Tim. Could you tell me the Windows equivalent to the Apple Digital Color Meter tool to use with Paletton.?

  7. Hello Tim I'm just starting but I'm needing some info for 1 and 1 I need a color chart for the website that I'm working on any suggestions

  8. I could not find the link to the Windows web tool that you talked about at: 10:25…. I am on windows and need the tool.

  9. Hi there! Is there anyway i can DM u or contact you? Youre an absolute inspiration to me me. I would love to just have a couple of words/quick conversation with you – kindest regards Jess

Leave a Reply

Your email address will not be published. Required fields are marked *