How To Design Your Website Like A Pro
In this article I’m going to share with you 5 simple tips for making your website look more professional and helping it stand out from the crowd. You can apply these tips to any website you build regardless of the tool or builder you are using.
Briefly the tips are:
- Limit the number of colors you use
- Limit the number of fonts you use
- Use consistent spacing
- Use consistent styling
- Take advantage of white space
So let’s get started.
Tip 1 – Limit The Number of Colors You Use
Keep your website pleasing and attractive by picking no more than two or three primary colors for your website. In fact, the easiest way to make sure your colors work together is to pick one color and use different shades of it, and then pick a contrasting color for your accent color.
If you have a logo, make sure your colors match the colors of your logo. The easiest way to create your color palette based on your logo is to upload your logo to a color palette tool and have it create a palette for you.
If you do not have a logo, you can upload a photo you like that represents the feel you want for your brand to the color palette generator, and it will create a nice palette from the photo.
There are several color palette generator tools available. One of the easiest tools comes from Canva. You can go to the Canva color palette generator here: https://www.canva.com/colors/color-palette-generator/.
Using a color palette generator
After you upload your logo or photo, Canva will generate a color palette with 3-5 color swatches. Pick one of those colors as your main color, and one as your accent color. Next, choose a light version the main color for the background and a darker version for dark backgrounds.
Then, all you need to do is add a dark shade of one of those colors for your text. I recommend using a color as close to black as possible without being black. You want to make sure your text is easy to read.
No matter what colors you choose, make sure there is enough contrast between the background and the color of the text, so that it is easy for people to read who have vision impairments.
The color palette generator will give you what is called a hex code for your colors. That hex code will begin with the # sign followed by six numeric or alphabetic digits, looking something like this: #tg780c1. You will need this number for your Color Picker in your website builder.
Now, you should have a great set of colors to use for your website.
Tip 2- Limit the Number of Fonts You Use
Just like with your colors, you don’t want to use too many fonts. Using fewer fonts will give your site more cohesion and balance, and a more professional look. I don’t recommend using more than two fonts.
Choose one font for your headings, and another font for your body text. If you have a logo, use the fonts from your logo if they are appropriate for text on a website. If you don’t have a logo, you will have to choose some fonts.
Of course, you can just use the fonts that are in the template you’re using to build your website. Or, you could go to Google Fonts and find some free nice fonts.
Try to avoid just randomly picking two fonts from the available fonts in your website builder. Not all fonts will work nicely together. Make sure you pick a font for your body text that is easy to read at smaller sizes.
You can get some nice font pairings from these websites:
Tip 3 – Use Consistent Spacing
One of the biggest problems I see on websites is inconsistent spacing. Some sections will be squished close to each other while others will have more space. Also, the margins and padding will be different in different parts of the website.
If you want your website to look professional, make sure you use consistent spacing throughout.
First, you should understand the difference between margins and padding. The margin is the space outside a design element, such as the space outside and around a box. Padding is the space within a design element, such as the space between the box outline and the content in the box.
Check out this article for a good explanation, CSS Margin vs. Padding: What’s the Difference?
The simplest approach to consistent spacing is to use a design system. And by that I mean decide how much space you will use between each section and apply that space consistently throughout the site and on different pages.
Websites are basically built on a grid. So you can think about your spacing in multiples of a square grid. So, you could choose a 10-point grid for example. Then, all of your spacing would be multiples of 10. Keeping your spacing consistent in this manner will give your design a more balanced and professional look.
Tip 4 – Use Consistent Styling
When I talk about styling, I’m talking about the design elements like colors and fonts, shapes, and the tone and mood of the site.
Colors
For example, all of your headings could be the same color. Or, you can make your title heading one color and then all the other headings the second color. But don’t confuse your site visitors by changing your heading colors a lot.
Of course, there are always exceptions to this rule. For example, if you’re using a dark color for your heading, but you choose a light background for that section, you’re going to have to change the heading color to something light.
The same idea applies to buttons. You will confuse your visitors if you change out your button colors too much. If one call to action button is red, and the next one is orange, you might confuse your site visitors about what is important for them to do on the website.
Other styling
Likewise, use the same font for each type of heading. So for all H1 tags, use the same font and same font size in general. Make sure the size and weight of your headings reflects the importance of the hierarchy of the headings. (H1 headings are bigger or bolder than H2 headings, etc.)
Also, be consistent in the types of images, graphics or design elements you choose. I wouldn’t recommend using a bunch of avant-garde photos along with hand-drawn illustrations. Similarly, keep the shapes of things like buttons the same.
Being consistent doesn’t mean you can’t be creative, or that every page needs to look exactly the same. You can think of styling as variations on a theme, similar to a music composition. You want each page of your website to feel like it belongs to the same composition.
I like to design a homepage first, and then make sure that the rest of the pages fit with the tone and style of the home page. Basically, I use the homepage as kind of a style guide for the rest of the website.
This doesn’t mean that every page needs to be laid out and look exactly the same. But, there should be patterns and consistency, so that it all looks like it’s one piece of work, and not a bunch of separate pieces of work bundled together.
Tip 5 – Take Advantage of White Space
Another big problem with websites is that everything is too squished together. There are simply too many elements too close to each other on the page, and too much going on on the page.
White space is the empty space between design elements, such as headings, sections, or images on your page. We have a tendency to be afraid of white space, feeling like we have to fill up the void.
But in reality, white space helps your design flow. The white space between elements draws the eye to the information you want the user to focus on. And, it helps make things easier to read in a digital format. It declutters the page, and makes it so much easier to understand.
Try to remember your design is not limited to one page like on a resume, where you need to squish as much information as possible on one piece of paper.
With web design, less is definitely more. Give your design some breathing room to make it easier to read and to understand.
Here is a good rule of thumb: when in doubt, add more white space.
Bonus Tip – Use Consistent Image Sizes
An easy way to disrupt a design is to use inconsistent image sizes. For example, you might have three columns, with one image in each. But if the images are all different sizes, the columns look uneven.
The way to solve this problem is to use the same size image in each column. When I say same size, I’m talking about the dimensions of the image or its aspect ratio, such as 800 pixels by 600 pixels.
The simplest way to do this is to create templates in your Canva account for the image sizes you want to use on your website. Then add the images you want to use to the Canva templates. Finally, export those images for your site.
Check out my article about using Canva to resize images: Use Canva to Easily Resize Your Images.
Here are some additional recommended image sizes for your website:
- Hero images that are full-width: 1920 by 1080
- Square: 800 x 800 pixels or 1080 x 1080
- Content landscape: 800 by 600 pixels or 1200 x 800
Summing Up
I hope you found these tips useful and not too difficult to implement. Even if you just try one or two of these practices on your website, you will notice a big difference in how it looks and feels.
Good web design takes time and practice. So be patient with yourself. The beautiful thing about websites is you can always update them and make them look better.
But, also understand that websites are never done. So don’t let perfection be the enemy of not getting anything done at all.
