5 Website Design Hints. Web Design Tutorial For Beginners.

5 Website Design Hints. Web Design Tutorial For Beginners.

Ok, So this video 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, but
if you want to make your website look great, using a great color combination can be a great
way 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 this
sort of adjacent colors, color scheme. And you can see the color scheme right here
on the right. We’ve got this triad color scheme. So it’s pulling colors from different sides
of the color wheel. And then this tetrad. Where it’s pulling colors from sort of across
the color wheel here. And then if you want to make additional adjustments
here. You can adjust the distance that it’s pulling
it 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 like
to click on this tables and export button here. And then click on as HTML and then I just
print this page, or actually just save this page as a PDF. And I save it into a folder that I can use
to 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 here
to 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 and
then 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 color
of just about anything. So let’s pull up the digital color meter. Hover over what you want to find the color
of. And then you can see right over here that
we’ve got the hexadecimal color. Which are the colors that we are going to
use 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 can
just type it in to the Paletton color palette here. And there we go. Now we can just select which color palette
we 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 your
not 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 images
for your website is a great way to make your website stand out. And also have the images be extremely relevant
to you and your business. Now what if you don’t have any money to hire
a photographer, and you still want to use, and you should use, great looking images on
your website. What should you do? Well there are some great resources where
you can find, either paid stock images, like iStockphoto or Shutterstock. And then there is also some free resources
that you can use, like Unsplash and Pixabay photos. And actually I’ve shared some of the photos
that I’ve taken on Unsplash, so that anybody can use. It’s a great resource for designers and anyone
who needs to use great looking images. Now be sure you check out what the rules are
when you’re using these images. For example some images of people that have
recognizable faces. Where you can recognize the face of the person,
may have some restrictions on them. And then even inside the images there maybe
some restrictions. So for example if it has an image of a Coca-Cola
logo. Or if it has a image of an iPhone or a Mac
or some other recognizable piece of design, you may need to get additional rights for
that. So you just want to look into that and see
what the rules are for that. You definitely want to use great looking images
so Unsplash, Pixabay, iStockphoto and Shutterstock are some great resources for that. Ok, so now hint number 3 is one that I actually
struggle with all the time. It not that I forget. It’s just that I don’t know sometimes it seems
really hard to implement this hint. And that is space. Just adding a little bit of extra space around
all 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 between
lines might actually just be one line. And then you are going to have spaces between
those. And what that allow your viewers to do, when
they 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 elements
on your website, not only the text, but the images and the graphics. To allow your users to sort of see what they
are, 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’s
something 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 that
means getting rid of using sliders. And I’ll link down to some articles down below
that talk about why you shouldn’t use sliders. Why they’re bad for SEO and why they don’t
actually drive more interactions on your website. But when you just think about it. I feel that whenever I’ve wanted in the past
to use a slider. The real reason why I wanted to was I just
couldn’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 of
different things and I’ll just put a slider, and you know let people decide for themselves
what the most important thing is. The problem with that is that people don’t
sit 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 page
and looking for what it is that they are looking for. Now what I recommend doing is putting the
most important thing that you have at the top of your website. And then the subsequent things that you think
are less important, you can even make them look basically like slides, and put those
down as then next thing. So let your viewers scan down the page to
see what they want. Now one problem you might have is that you
just don’t know what the most important this is. What the thing is that you should put at the
top of your website, because you’re not sure what’s the most important this is for your
audience. The best thing to do is to test. And if you’re using a theme like the Divi
theme, which is one of the themes that I recommend using. They have a function for A/B split testing
right inside the theme. And this allows you to test, well just about
anything, but specifically you can test the header section. And see which variation of the header section
preforms the best for your audience. So you can come up with a couple of different
variations and then you set a target maybe lower down on the page. Maybe it’s having them scroll all the way
down the page. Maybe it’s having them click on a button. Whatever the target is, what ever the action
that you’re trying to get them to do. You figure out which of your test subjects
got them to take that interaction the best. And that’s probably one of the best ways of
finding 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 your
doing it on desktop computer. So it’s really easy to forget that people
might be viewing your website on tablets and mobile devices. And Google has made it abundantly clear that
people use mobile devices a lot for viewing websites. So you want to make sure that your website
look great on mobile. So what that means is taking just a little
bit of extra time. And tweaking your designs so that you’re sure
that they look good on any kind of device. Any size screen that your view might be coming
to. A lot of the great WordPress page builder
themes out there like the Divi theme, Beaver Builder, and Elementor, all allow you to tweak
your designs specifically for mobile devices. So, something you want to do is take a little
bit of extra time after you have designed your pages making sure everything looks good
on mobile devices phones and tablets. And one last tip one bonus tip here is font
combinations. And I think it’s something just good to decide
right when you start creating your website is font combinations. A lot of the themes out there particularly
the Divi theme, and most themes out there. Will allow you to decide what you wan’t your
default fonts to be. And so deciding that ahead of time can be
a great way of distinguishing you website from other websites and giving it a good characteristic
look. 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 YouTube
and on my website. Where I’ll guide you through step-by-step
exactly the steps that you need to take to build a WordPress website. And if you’re already following along with
that tutorial series, the next tutorial is how to install a WordPress theme. We’re going to be looking at how to install
the Divi theme. And then after that we’re going to learn how
to build web pages. So go ahead and click on which ever video
you want to watch next.

75 thoughts on “5 Website Design Hints. Web Design Tutorial For Beginners.

  1. Thank you for the slider links. It's frustrating to explain it every time to my clients. Now I'll send that link and if they still don't believe it then of course we can look at heatmaps & recordings which will show how many people actually check those slides.

  2. Since you said that about the slider I'm wondering if I should use it. I am making a web page abt college, highschool comparison etc. My front page has a slider of 4pictures containing 2college buildings and 2pics of students. Problem rises with putting my welcoming title since it is not really visible on 3of the mentioned pics. THEREFORE should I keep it that way or just INSERT 1 wallpaperish beautiful picture instead?
    I hope someone understood something and will respond, it is my final task for highschool.
    Also not mentioned I am working in wordpress with Sydney theme.
    Thanks :3

  3. Great advices. Yet I would recommend http://colorhunt.co/ or https://flatuicolors.com/ for your web color palette.
    It's way easier.

  4. Yeah these are tips we look out for when reviewing websites on our channel as well! Thanks for compiling them mate!

  5. Wow. Thank Tim.. Great video. I've been using a MAC for years and didn't even know it had the Digital Colour Meter.

  6. 1. Color Palette
    2. use great looking image
    3. Extra space
    4. Don't use slider
    5. Mobile friendly. look great on mobile

  7. 68% of the people who come to my site are mobile users who hold their phone in portrait mode.
    if the tip about mobile should even be in, cuz it might be common knowledge, then it should be number 1.

  8. Great Great video! I'm struggling about recreating a website for my company with a limited budget. These tips definitely help me a lot! Thanks man!

  9. Great tips!
    But that "text with space" tip, is rather not a trend, its something that should have been implemented in WEB design long ago, but back in the old internet days, design was the last thing people used for design

  10. One of the biggest and most annoying problems i see on most websites is low contrast colours for text and backgrounds. If someone can't read the page it's bad.

  11. it is probably one of the most important aspects to make a website mobile friendly, as people tend to use their phone and not their computer

  12. I love these! In conjunction with http://webdesignexpress.com/ I know I am going to get the hang of this. Thanks again.

  13. Great tips! But I have one questiom that I've always struggled with. Generating a color pallette is easy what's difficult is how to use them properly on a website. How do you decide which element should be in what color. The demo feature on palletton seems helpful only for that kind of websites. What's the general sort of rules on applying the pallete? Is the primary color should be used for buttons? Secondary for background? What about text? How to apply all the colors in the pallette on any website?

  14. I use a slider just to give people a taste of what’s on my site along with different ways to get to the content they want. So far it’s gotten good reviews. You can see it at www.joefrechette.com

  15. There are a lot of important tips that should be taken into account.
    First of each tip shouldn't be applied to all projects, it all depends on type, is it a SAAS application, SPA, Tablet/mobile only, intranet, ….
    Also the type of viewers are important, are they design focussed, they will usually use larger screens. So pay extra attention to font-sizes and stretched images/designs (instead of fixed heights, start using ratios).

  16. Very informative, especially if you do not have a huge budget and looking for an affordable website solution.

  17. Good luck with that palette approach :q It may look cool as a palette, but as soon as you try to use those colours on an actual website, they'll most likely won't work as good anymore, because there's a difference between how a colour look like in a palette, and how it looks when used for larger areas of background or for text. It may happen that the colours will clash or have too few contrast. I mean, sure, it's a good starting point, but there's a LONG way from just picking some colours to making them actually look good on a website design.

  18. I don't understand why people would prefer or spend much time on websites using a mobile device. I WILL use a mobile device when I MUST but always prefer to use the largest screen available. At home that means my main TV screen. It is good that the web is available on mobile devices for valid situations, but to prefer it and design websites to cater to it, how boring.
    This common acceptance of making a single site for all devices is making the web very boring. If providers made separate website designs for each device we could leverage such things as multiple GPU capabilities for amazing 3D and VR websites. We could have all the power of a desktop at hand for websites for those with higher standards.

  19. Website Design Tips:
    1. Color Palette 0:18
    2. Great Image 2:47
    3. Space 4:31
    4. Be Decisive 5:27
    5. Remember Mobile Viewer 7:23

    You're welcome!

  20. I have been wondering if I should build my own site or lease one a annually. You give a person a lot to think about, Thank You for the video, I think I will subscribe to your channel so I can go back and watch a few more of your videos,
    good luck and God speed to everyone looking for a better way of life.

  21. But how do I decide on which color I should use for what part of the website?
    Always use darker colors for the background? Brighter ones for the foreground? Are there any guidelines to follow?

  22. The question is: how to match this pallete with images? Especially, when you must get the pallete first. Do you filter those photos? And if so, then how you should filter it?

  23. anyone else take a graphic design class and know the actual name for th complementary color patterns he chose from?

Leave a Reply

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