Website Design Hints
this is all about website design. And 5 hints, 5 hacks, 5 tips to make your website look like it was designed by a professional. Even if you really don't have any design skills at all. So let's go ahead and jump right into it. And my first tip. Hint number
1, is to create a color palette. And if you are like me, colors might not exactly be your thing. I mean if someone were to tell me to come up with a color combination. I would probably come up with something like,I don't know, uh black and grey and maybe a little bit of white. (laughs) Really not good with colors, butif you want to make your website look great, using a great color combination can be a greatway to do that. So how do you come up with a great color combination,even if you're not good with colors? One thing that I have found that is extremely helpful for this, is a tool called Paletton. Let's go ahead and check it out. Ok, so this here is the Paletton tool. It's a really simple and easy to use tool. Basically, all you do is you pick a base color. So right how I have this base red color here. And then you can just choose from either thissort of adjacent colors, color scheme. And you can see the color scheme right hereon the right. We've got this triad color scheme. So it's pulling colors from different sidesof the color wheel. And then this tetrad. Where it's pulling colors from sort of acrossthe color wheel here. And then if you want to make additional adjustmentshere. You can adjust the distance that it's pullingit from. So it's a great way of making... Of quickly making a great looking color palette. And then what I like to do is, I just liketo click on this tables and export button here. And then click on as HTML and then I justprint this page, or actually just save this page as a PDF. And I save it into a folder that I can useto reference whenever I need colors fro my website.
Ok and then if you don't know what the color of something is, but say you have a logo already, and you want to use the color that's in that logo as the starting point for a color pallet. It's really easy to do on a Mac. Let me show you how to do that. Ok, so if you're on a Mac just go up hereto the search. And then type in "digital color meter". And that's going to pop up right there. And then under the settings for this we want to make sure that our colors are displayed as hexadecimal. So we are just going to click on view andthen display values. And then make sure hexadecimal is checked. I've already checked it here, but as default it's set to decimal. So we're going to set it to hexadecimal. Ok and then we can use it to find the colorof just about anything. So let's pull up the digital color meter. Hover over what you want to find the colorof. And then you can see right over here thatwe've got the hexadecimal color. Which are the colors that we are going touse on our website. So it's E0 99 00 is what it is for this example. And then you can just take that and you canjust type it in to the Paletton color palette here. And there we go. Now we can just select which color palettewe think looks the best. Based on that. And you're off and running. Ok hint number
2. Is great looking images. Now this can be challenging. For me I like taking pictures. I really enjoy photography. If you don't enjoy photography, or if yournot so good at taking pictures. How do you get great pictures for your website? Well there are two ways of doing it. One way of doing it is to hire a photographer. If you can afford it, having custom imagesfor your website is a great way to make your website stand out. And also have the images be extremely relevantto you and your business. Now what if you don't have any money to hirea photographer, and you still want to use, and you should use, great looking images onyour website. What should you do? Well there are some great resources whereyou can find, either paid stock images, like iStockphoto or Shutterstock. And then there is also some free resourcesthat you can use, like Unsplash and Pixabay photos. And actually I've shared some of the photosthat I've taken on Unsplash, so that anybody can use. It's a great resource for designers and anyonewho needs to use great looking images. Now be sure you check out what the rules arewhen you're using these images. For example some images of people that haverecognizable faces. Where you can recognize the face of the person,may have some restrictions on them. And then even inside the images there maybesome restrictions. So for example if it has an image of a Coca-Colalogo. Or if it has a image of an iPhone or a Macor some other recognizable piece of design, you may need to get additional rights forthat. So you just want to look into that and seewhat the rules are for that. You definitely want to use great looking imagesso Unsplash, Pixabay, iStockphoto and Shutterstock are some great resources for that. Ok, so now hint number
3 is one that I actuallystruggle with all the time. It not that I forget. It's just that I don't know sometimes it seemsreally hard to implement this hint. And that is space. Just adding a little bit of extra space aroundall of the elements that you put on your website. This goes especially for text. So you want to have space around your heading,space around the body of your text. And one of the new trends in website design, and I think it's actually a really good one, is when you are making a point in text. So if you, your know writing something. Is to make your paragraphs really short. I mean your paragraph or the spacing betweenlines might actually just be one line. And then you are going to have spaces betweenthose. And what that allow your viewers to do, whenthey are looking down your website. Is to quickly scan for the information that they are looking for. So, adding extra space around all of the elementson your website, not only the text, but the images and the graphics. To allow your users to sort of see what theyare, scan them, and have that space around them to draw their eye to it. It's a really good technique. And it's one that I struggle with, but it'ssomething that everyone should try to implement on their website, in their website design. Ok and then hint number
4 is... It's about being decisive, and for me thatmeans getting rid of using sliders. And I'll link down to some articles down belowthat talk about why you shouldn't use sliders. Why they're bad for SEO and why they don'tactually drive more interactions on your website. But when you just think about it. I feel that whenever I've wanted in the pastto use a slider. The real reason why I wanted to was I justcouldn't decide what the most important thing was to put at the top of my website. So I just decided, I'll just put a bunch ofdifferent things and I'll just put a slider, and you know let people decide for themselveswhat the most important thing is. The problem with that is that people don'tsit around and wait for your slider to cycle through. What they do is they are pro active. You're on an interactive website. So they just start scanning down your pageand looking for what it is that they are looking for. Now what I recommend doing is putting themost important thing that you have at the top of your website. And then the subsequent things that you thinkare less important, you can even make them look basically like slides, and put thosedown as then next thing. So let your viewers scan down the page tosee what they want. Now one problem you might have is that youjust don't know what the most important this is. What the thing is that you should put at thetop of your website, because you're not sure what's the most important this is for youraudience.
The best thing to do is to test. And if you're using a theme like the Divitheme, which is one of the themes that I recommend using. They have a function for A/B split testingright inside the theme. And this allows you to test, well just aboutanything, but specifically you can test the header section. And see which variation of the header sectionpreforms the best for your audience. So you can come up with a couple of differentvariations and then you set a target maybe lower down on the page. Maybe it's having them scroll all the waydown the page. Maybe it's having them click on a button. Whatever the target is, what ever the actionthat you're trying to get them to do. You figure out which of your test subjectsgot them to take that interaction the best. And that's probably one of the best ways offinding out what should be at the top of your website.
Hint number 5 is to remember your mobile viewers. Now when you're building your websites yourdoing it on desktop computer. So it's really easy to forget that peoplemight be viewing your website on tablets and mobile devices. And Google has made it abundantly clear thatpeople use mobile devices a lot for viewing websites. So you want to make sure that your websitelook great on mobile. So what that means is taking just a littlebit of extra time. And tweaking your designs so that you're surethat they look good on any kind of device. Any size screen that your view might be comingto. A lot of the great WordPress page builderthemes out there like the Divi theme, Beaver Builder, and Elementor, all allow you to tweakyour designs specifically for mobile devices. So, something you want to do is take a littlebit of extra time after you have designed your pages making sure everything looks goodon mobile devices phones and tablets. And one last tip one bonus tip here is fontcombinations. And I think it's something just good to decideright when you start creating your website is font combinations.
A lot of the themes out there particularlythe Divi theme, and most themes out there. Will allow you to decide what you wan't yourdefault fonts to be. And so deciding that ahead of time can bea great way of distinguishing you website from other websites and giving it a good characteristiclook. And I'll link down bellow to some resources for some font combinations that you might want to use on your website. So if you're brand new to making websites,and you're not sure where to start. Check out my little free mini course on YouTubeand on my website. Where I'll guide you through step-by-stepexactly the steps that you need to take to build a WordPress website. And if you're already following along withthat tutorial series, the next tutorial is how to install a WordPress theme. We're going to be looking at how to installthe Divi theme. And then after that we're going to learn howto build web pages. So go ahead and click on whichever video you want to watch next.
0 Comments