How to Choose Website Color Schemes
Rules and examples for making an effective and eye-catching website design

website color schemes color swatch example
 

Dale McManus

Co-Founder & Web Developer

Jan. 27, 2020

 

Hey, my name is Dale! My partner Alex and I have helped tens of thousands of people build beautiful websites around the world. In this fully-packed, step-by-step guide, you’ll learn How To Choose A Website Color Scheme and we’ll compare different sites and color schemes to inspire your search. Let’s dive in!

  • Level of Expertise:
    Beginner
  • Time To Complete:
    30 Minutes
  • What You Get:
    Working Knowledge

For the record: It’s super important for us to keep this site 100% free for you and 100% high quality. To help us do that, we’ve partnered with some of the products we recommend and earn a commission if you buy through our links. Read our full disclosure and partners list here.

There are a ton of ways you can make your pro site stand out online, but your website color scheme is one of the most important.

It’s one of the first things people notice – and when your visitors have an average attention span of (at most) 8.25, the color palette you use to shade all the buttons, text, and backgrounds of your site is super critical for getting people to stick around.

So how the heck do you go about choosing your website color scheme?

Well, it all starts with this here post…

website color schemes color swatch example

What is a color scheme?

First a quick definition from our friends at Wikipedia (well, we like them; they probably don’t know we exist tbh):

“In color theory, a color scheme is the choice of colors used in design for a range of media.”

In less formal, wiki-style terms: a color scheme (or color palette) is the set of colors you use on your site to create your own unique style and appeal to your visitors.

Types of color schemes

Technically, a color scheme could be any number of colors in any combination – just two shades of blue to every color of the rainbow (heart eyes emoji).

But because some colors look amazing together and others are very wtf, you’ll typically find a website’s color scheme follows one of a few “color harmony” rules.

Analogous

website color schemes analogous wheel

Analogous color schemes use colors that are next to each other on the color wheel (that thing we all learned about in 1st-grade art class – thanks Ms. Zelwiger, hope you finally found a husband!).

Because the colors are all pretty close to one another, websites with Analogous color schemes are versatile and comfortable – but you’ll want to make sure you have enough contrast between different website elements so that things don’t turn into a jumbled mess.

How do you do that?

Use one color as your primary, dominant color used for more important pieces of your site, another color as your main support, and the third, fourth, fifth colors just as accents on smaller pieces.

Monochromatic

website color schemes monochromatic wheel

If you’re active enough on Insta, or you’re really into grammar/Latin, you probably know that “monochrome” means “one color” – usually black and white.

BUT monochrome color schemes can technically be based on any one hue (red/blue/yellow/etc) in combination with 2 or more shades, tones, and tints.

On the plus side, websites that use a monochrome color palette have a simple feel and are hard to mess up by using clashing color combinations.

But using one color for your whole site can make it harder to evoke an emotional response in your visitors that gets and keeps them interested.

And you can have problems with elements like text, buttons, etc. blending together.

So you’ll have to be careful about your use of other website design elements like layout and typography to keep things interesting and understandable.

Triadic

website color schemes triadic wheel

Triadic website color schemes use 3 colors (which you grammar nerds will know because the Latin prefix “tri-” means “three”) that are evenly spaced around the color wheel.

This means your colors will have a good amount of contrast with each other, but not quite as much as a complementary color palette – so you can use these to make a website that pops but not too much.

Complementary

website color schemes complementary wheel

This is the one we all remember from grade school – complementary color schemes use colors that are opposite one another on the color wheel.

Using a complementary color palette on your website can make for a site that really stands out because of the color contrast, but you’ll want to be careful with how you use your colors.

If you go too crazy with them, your site can quickly become super stressful to look at (for example, don’t use green text on a red background; no one loves Christmas that much).

Compound

website color schemes compound wheel

Compound or “split-complementary” color schemes as some design geeks call them use two colors adjacent to your primary color’s complementary color.

It’s a solid choice for beginner web designers because you can get the same kind of visual contrast and interest, but there’s less tension between the colors so it’s harder to make a site that wigs visitors out.

Why are website color schemes important?

Whether you notice it as you’re scrolling through Insta, searching through Amazon, or endlessly clicking the next video in Youtube recommends, colors have a major impact on how we feel – on the web and in the real world.

Example: science has shown red and yellow increase heart rate.

So choosing the perfect color palette for your website color scheme is more than just an “I like blue” or “looks good enough for me” kinda thing.

But before we dive into how to choose the best color combination for your site, let’s look at a few reasons why all that work is important in the first place.

#1: Color helps boost brand recognition (and that’s important)

If you were to picture Starbucks, what do you see?

Those Trenta Triple Caramel Macchiato you “occasionally” drink too late at night might be it.

But it’s more likely you saw the iconic green circle with the fancy fish lady in it.

green color palette starbucks logo
Source: Pixabay

It’s hard to imagine Starbucks without seeing “Starbucks Green,” and that’s the point!

That color serves two purposes for the coffee giant:

  1. It’s a simple, distinctive color that helps them stand out from the crowd and helps you remember them
  2. The color itself is calming and associates them with health and wellness (even though we all know mainlining their coffee as we do is not doctor recommended).

Picking a website color palette is about more than just looking cool – it’s a key part of creating your brand and selling any products or services you’ll offer through your site.

According to research by online marketing master Neil Patel:

  • 85% of shoppers say color is a primary reason they buy products.
  • Color increases brand recognition by 80% (and people are more likely to trust and visit sites with brands they trust).
color palettes in marketing and branding infographic
Source: Neil Patel

And according to a study from Northumbria and Sheffield Universities (they’re in the old UK so they must be solid… always trust a British accent/research we always say!), website first impressions are 94% design-related.

And color is obviously a huge part of web design (which is why we’re talking about it!).

It’s 100% essential that your site makes a solid first impression with people, one that’s memorable enough that they return to your site whether you want to sell them something helpful or just share more interesting and valuable insights (kind of like we do here!).

That’s key reason numero uno it’s important to have a mind-blowingly awesome website color scheme.

#2: Color affects how people feel about your site

Research from the University of Winnipeg (that’s in Canada for those keeping track of our research world tour) found two important things related to website color schemes:

  1. People make their initial judgments of a website/business/product within the first 90 seconds of their first interaction.
  2. 62-90% of that initial judgment is based on color.

Which makes sense: color is one of the easiest pieces of information to “understand.”

Your brain can sense and evaluate things based on color almost instantly, while things like images, words, and ease of interaction take more time and clicking/scrolling around to process.

So how do you use color to your advantage to make people more likely to come back to your site again and again?

By leveraging the power of (echoey voice) “The Psychology of Color.”

What do colors mean?

That’s right kids, there’s a whole field of science dedicated to studying how colors affect our behavior.

Through loads of not-so-top-secret experiments and research, it’s been proven that colors do, in fact, make us feel things.

And when it comes to creating pro websites, that means you’d best pick a website color palette that makes them feel the kind of feels you want them to feel based on your site’s purpose.

But how in the holy heck do you do that?

Well, it starts with knowing what feelings each color makes feelers feel (we’ll stop after this, promise).

Here’s the low-down:

Black
example dark color palette black website
Source: Bornfight

To get it out of the way for those of you who remember 1st-grade art class: yes, black is a color; no, black is not a color.

For our purposes here, though, it’s lumped in the “color” section of the website design tools and that’s good enough for us.

Black is the strongest neutral color (which also includes gray, white, and brown) and represents power, sophistication, luxury, and formality.

Because it’s both neutral and powerful, the impression black can make varies a lot depending on how you use it on your site.

When used as more than just an accent or text color, it can lend a sense of elegance or edginess to your website design.

Depending on the other colors you combine it with, it can also give your site a conservative/traditional or unconventional/modern feeling, as well as senses of sophistication and mystery.

Gray
vintage color palette gray example website
Source: Frames

Gray is another neutral color, which gives sites that use gray a sense of seriousness, precision, control and lack of emotion…

Which can be a good thing on sites meant for technology, banking, legal services, etc.

Gray can also lend a sense of sophistication to your site when you substitute dark grays for places you would otherwise use black, or light grays in places you would have used white.

White
color themes white website example
Source: Miriam Peters

White is the color of purity, cleanliness, newness, and simplicity, which makes it great for healthcare, charity, and technology sites in particular.

Though obviously it’s kind of a default background color for a ton of other kinds of sites on the web because it works well with just about any other color(s).

Brown
types of color schemes for websites brown example
Source: Keepers of the River

Brown is obviously a natural color (dirt and trees and stones and such).

Because of that, it’s typically associated with dependability, earthiness, and reliability.

When used as a replacement for black, white, or gray in backgrounds, it brings a feeling of warmth and wholesomeness to your web designs.

Blue
blue color palette website example
Source: Plink

Blue is a super flexible color – how light or dark the blue you use can change its meaning a good bit.

Dark blues are considered strong and reliable, while light blues are calming and friendly, and really bright blues are refreshing and energizing.

Whatever shades of blue you use, it’s a color that’s great for backgrounds and accents, though it shouldn’t be used for text as it’s hard to read.

Green
green color palette website example
Source: Eslam said

Green can represent a lot of things: new beginnings, growth, wealth, stability, and nature.

In general, greens are calming like blues are but has a bit of the energy of yellow as well, and can help balance out your website designs.

The shade matters here too: Olive greens represent nature, while dark greens tend to represent wealth and bright greens are more energizing.

Yellow
bright color palette website example
Source: Spread Systems Inc.

Yellow is the color of sunshine and happiness and hope that the future is a bright one!

Bright yellows are particularly cheerful and good for sites aimed at kids (or parents).

Light yellows are a bit calmer than the brightest yellows, and dark/gold yellows create an antique, “old money” kind of look.

Be careful with this one though: bright yellows, in particular, can be anxiety-provoking and are exhausting to the eyes – so in general, they should only be used as an accent color.

Orange
modern color palette website example
Source: Emotive Feels

Oranges are typically associated with energy and creativity as well as fall/the changing seasons/movement in general.

They’re also associated with health because orange is a fruit and doctors like it when you eat fruit.

Orange is bright yet easy on the eyes and more subdued than red, which makes it fairly flexible in web designs.

You can use it as a primary color for backgrounds or as an accent that gets attention without feeling overpowering.

Red
red color palette website example
Source: MOHAB

Red is one of the most powerful colors, in part because it’s associated with war and violence as well as love and passion.

Those opposing associations create a lot of emotional tension (see “red can raise your heart rate” above).

Brighter reds give a website color scheme an energetic feeling, while darker ones feel more powerful and elegant.

#PowerfulColorRed can be pretty overwhelming if you use it too much, so in general, we’d recommend you only use it as an accent color when you’re starting out.

Purple
cool color palette purple website example
Source: Purple Bunny

Purple is associated with wealth and royalty because, fun fact/short history lesson, in times past purple dyes for clothes were hard to come by.

Thus, only wealthy, royal people could afford purple-colored stuff (and now it’s the color of a bunch of Pokemon and a Teletubby lol).

In modern times of purple abundance, purple is also associated with creativity and imagination, with darker purples taking on the old wealth/luxury meaning and lighter ones lending a soft, sometimes romantic touch.

How do people respond to color based on gender and age?

Beyond the emotional responses each color makes, color can also affect who finds your site attractive and who doesn’t along on gender and age lines.

Neil Patel also compiled a bunch of data on color preferences by gender and created a super handy color preferences by gender infographic.

Let’s take a look at the highlights:

Favorite and least favorite colors by gender
good color combinations gender preferences infographic
Source: Neil Patel

A couple of key takeaways from that:

  • Everyone loves blue, so if that color communicates the information/feelings your site’s aiming for, go wild. Green, red, and black.
  • Everyone hates orange and brown, which are also associated with being cheap, so use them more sparingly (in general; if you really love orange go for it; if you really love brown we suggest you rethink your life).
  • Women love purple, men not so much (it was 23% of women’s favorite color while no men said it was theirs).

And we can add some layers to that with another piece of that same infographic:

best color combinations gender preferences infographic
Source: Neil Patel

Which shows us:

  • Men are way cooler with neutral colors.
  • Men prefer darker shades while women prefer lighter tints.
  • Men prefer brighter colors while women prefer softer colors.

What about age?

Well we had to dig a bit further on this one, eventually finding that study done by Joe Hallock from back in 2003 (aka “the good old days” aka “the reason why the graphics look so old”).

Favorite and least favorite colors by age
good color schemes by age
Source: Joe Hallock
color scheme ideas least favorite color by age
Source: Joe Hallock

The takeaways:

  • Everybody still loves blue.
  • Everybody still hates orange and brown.
  • Purple seems to become more popular as people get older, while green becomes less.

#3: A good website color palette makes your site feel organized

Choosing the right colors for your website and using them in the right places can also help your website feel more organized (aka “these guys know what they’re doing” aka “this site is really easy to use/understand”).

This happens in two ways:

Establishing visual hierarchy

Visual hierarchy helps people figure out what’s most important, the first thing they should look at on your site.

This can be done in a few ways (99Designs has a great post covering these) and as we know smart cookies like you have guessed, color is one of them.

How does this work?

Well, it all comes back to the emotions and our good old eyeballs.

Bold, bright colors like reds, oranges, and yellows are easy for our eyes to see and that makes them great for things like buttons or sections that have particularly important information.

At the same time, grays, blacks, and colors like blue and purple are emotionally less charged and take our eyes/brains more time to process, so these colors are better for elements like the background that are meant to blend in more or make other elements pop.

Contrast between elements is also important thanks to the Isolation Effect, which is a design psychology principle that says the more an item stands out, the more likely it is to be noticed and remembered.

The use of the Isolation Effect has also been shown in a couple of color studies (this one from U of Berkley and this one from the Journal of Consumer Psychology) to actually be something people prefer in color schemes.

The takeaway: using a website color schemes that include a high-contrast, attention-grabbing color is great for both drawing attention to certain elements and creating a website design people love.

Creating a sense of coherence

A good website color scheme also creates order through coherence. 

For example, if you use fire engine red for your “contact us” button on one page, you should use that same color for all the “contact us” buttons on your site.

Or, if you use a blue grid background behind all of your H2 headers (like this post here!), you should use that same color background for all the H2 headers on your site.

A sense of order/coherence is also a factor of the color harmonies/types of color schemes we talked about above.

In this case, using any one of them to choose the set of colors you use in your palette (analogous, monochromatic, complementary, etc), instead of a random mess of colors you like will help your site subconsciously communicate “everything’s organized and tip-top around these parts.”

#4: Choosing a website color scheme makes designing easier

Last on this list but first in our hearts, this is!

Whether you’re building one website and evolving it over time, or you want to build a bunch of sites for yourself or other people (who pay you money!), the less time you spend on basic tasks, the better.

On the color front, you can save yourself a lot of “what color should I use here” time by establishing your website’s color scheme upfront, then applying it anywhere and everywhere you need to.

Especially if you make it into a fancy document like Mailchimp did:

mailchimp color schemes guide
Source: Mailchimp

Now, they’ve got a ton of colors in their palette because they have a super complex website/app.

For most of the sites you’ll create, though, we recommend you stick to just 3-5:

  • 1 primary color that’s used on the most important elements of your site.
  • 1-2 secondary/accent colors that use a little less space on your site and/or are only used on a few elements.
  • 1-2 background colors that make your primary and secondary colors really pop.

This way, you’ve only got a few options any time you’ve got to add a page or element to your site.

But how do you choose that top 3-5?

Glad you asked!

How to choose your website color scheme

website color schemes mock website

A good website color scheme is one that finds the perfect balance between two things:

  1. The brand/business’ values and purpose.
  2. What your visitors like and want.

Easy enough to say, how the heck is it done?

4. Easy. Steps.

1. Know your website’s purpose and audience

Knowing what color palette you should use for your website color scheme will in part come from your instincts and preferences.

But a “pro” website color scheme will start with what the website is all about and who it’s for.

Because that’s how you take the color psychology info we dropped on you above and use it to make the best decisions for your website design!

How do you figure out your site’s purpose?

We’ve got a good bit of info on that in our How to Design a Website guide.

Your goals here: 

  • Determine what industry your site falls into.
  • Determine the values or “personality” you want your site to communicate.

That first part should be relatively simple with a bit of thought:

  • Want to sell fitness courses? You’re in the health industry.
  • Want to offer the website design skills you’re learning here to clients who will pay? You’re in the marketing industry.
  • Want to share stories from your personal travel adventures? You’re in the travel industry.

Etc.

For the second part, let’s use some research to help you pick 1-2 “personalities” you’re aiming to communicate through your site.

Stanford psychology professor Jennifer Aaker’s our go-to for that.

She found that brand personalities fall into one of five core dimensions:

website color palettes brand personality study
Source: Pinterest

You can maybe mix 2-3 of these types of personality, but it’s best to choose just one to start.

Looking to sell watches on an ecommerce site? Go for “sophistication.”

Want to share tips on camping, hiking, hunting, etc? “Ruggedness” it is!

Maybe you’re sharing your knowledge of a hobby like playing guitar. “Sincerity” might be right for you (could be “EXCITEMENT” too).

The brand personality you go with then ties into the color psychology we discussed above: red could be a good primary color for excitement, black for sophistication, or 

How do you figure out your target audience?

Well, if you’re really diligent, you’ll want to do some market research!

A few good resources on that:

To not spend a ton of time learning how to do market research (and actually doing it), you can also just ask yourself a few questions to get started:

  • Are you trying to attract younger or older visitors?
  • Is your site mostly for men or women?
  • What products are services are you selling? Do those attract people who like certain colors or have certain values like sophistication or friendliness?

What colors typically work best for your industry?

A solid shortcut/starting place for choosing the colors in your website’s palette is to look at what other websites with similar goals (aka “in your industry”) usually use.

Because companies offering similar things to the website you’re building are trying to evoke the same kinds of emotions and associations you are, going with their flow is a good place to start.

Lots of visuals from some great research done by other folks here!

First up, an infographic from research done by Towergate Insurance on the most popular brand colors in each industry:

popular color palettes by industry
Source: Towergate Insurance

In their study, Towergate analyzed 520 logos in a bunch of industries to figure out which colors each industry favors.

Here we can see blue, red, and green are solid for just about any type of brand/company website.

Now, with industries like “Courier” and “Specialized Chemicals” on this list, you might not find the exact industry your website will be in.

BUT if you think about what those industries are trying to offer and who they’re trying to communicate with, you can probably figure out where there are overlaps with your goals and theirs.

To help you out, though, we’ve got another similar infographic from marketing software company Marketo:

color palette ideas infographic
Source: Marketo

Loads of good info in there so take some time to digest it!

Finally, here’s another helpful snippet from a Neil Patel infographic on how colors affect particular kinds of buyers:

best colors for website by type of consumer infographic
Source: Neil Patel

Now there aren’t many colors on that chart and we’re not saying you should use those exactly.

Instead, here’s what it tells us:

  • If you’re planning to sell relatively cheap, easy to say yes to products on your site, darker colors, reds, oranges, blues, and blacks are good choices.
  • If you’re looking to appeal to budget-conscious shoppers, blues and greens are good.
  • If you’re looking to get sales from “traditional” (aka “older”) people, lighter tints like pink and sky blue work well.

Now you’re probably wondering: “if I use the same colors as other companies/websites like mine, won’t it be impossible to stand out?”

Well, that’s where choosing particular colors (like seafoam green in the “green” family) and putting together a unique color palette comes in.

Which leads us nicely into…

2. Choose your primary/dominant color

The primary or dominant color in your website color palette is the anchor for your brand, evoking the main emotions and ideas that you want your website to communicate.

Think “red” and Coca-Cola, “green” and Starbucks, “yellow” and McDonald’s.

If you’ve already made a logo, the color that stands out the most is probably the primary color for your website – so this part’s done!

If you don’t already have a logo or don’t have a dominant color in mind, a good place to start is this handy quiz from Grasshopper, which will help you learn whether blue, red, orange, etc is the best part of the color spectrum for you to choose your primary color from.

If the color that bad boy spits out jives with your preferences and all the color psychology we shared above, awesome.

Look for that color using the two options we’ve got for you below.

If you don’t agree with the quiz results, then sorry we wasted your 2 minutes lol.

Option 1: Get some inspiration

The first method for finding the primary color in your website color palette is to spend some time looking at examples of sites and color schemes you like.

Just visit the sites below to find color scheme examples you like:

When you find a color you really love, you’ll just need to grab and save its hex code, which you can do using the ColorZilla Chrome extension/Firefox addon to snag it.

You’ll need that hex code to use in website builders or WordPress to color different elements.

Option 2: Use a photo

You can also use Adobe Color to extract colors from an image (which could be a photo of something in the real world, a graphic you found online, or a screenshot of a website you like).

Simply upload a photo to their tool under the “Extract from an image” tab, then you can choose different color palettes based on various moods using the left sidebar.

When you find the set you like best, click back over to the “Color Wheel” tab to copy one of the color codes to use as your primary color.

Or you could just use the complete set as your entire website color scheme!

How to use your primary color on your site

Once you’ve chosen your primary color, where the heck do you put it?

Definitely not all over your site; it’ll make your design overwhelming.

Generally, you’ll want to use your dominant color in the key places you want to draw attention to (like contact us buttons, key information, and your logo):

website color schemes primary color example annotated
Source: Our Wix Demo Site

3. Choose your secondary/accent colors

Once you’ve got your primary color picked, figuring out your website color scheme is a downhill trip.

The next step is to pick your secondary and/or accent colors, which we’ll base off the first.

As we mentioned above, some sites like MailChimp have a ton of colors in their website palette because they make a very complicated web app.

For the rest of us, one primary color plus 1-2 secondary colors is plenty.

How the heck do you figure those out?

By using the color theory harmony rules we mentioned above!

No need to whip out your own color wheel and protractor (to figure out the right angles), Adobe Color once again has our backs.

How to choose your secondary colors using Adobe Color

First, pop on over to their site using this link, then paste the hex code of your primary color in the first box.

By default, Adobe’s gonna show you other colors using the “analogous” harmony method.

For our website design purposes, though, we recommend you choose either Triad, Complementary, or Compound using the sidebar, as these will give you a set of colors that are the easiest to use on a website (aka “it’s harder to f*ck up your web design when you’re still a beginner”).

Note: when you pick a new color harmony rule, you’ll have to re-enter your primary color’s hex code.

As you’re looking at the various options, you can also play with the little circles on the wheel, dragging any of your colors in and out, side to side to change the hue and brightness/darkness.

You can do the same with the sliders under each color.

And you can click the color boxes to change which is your “base” aka “primary” color.

No worries about messing things up doing this: Adobe will make sure it still applies the color harmony to any changes you make, though it will change the primary color/hex code for the primary color.

If you like the new color, though, go with that instead of your original!

As you’re playing around, you’ll be given 4 potential secondary colors (in addition to your base/primary).

You can use all of them if you like, but if you’re going to stick to our “keep it simple with 1-2 accent colors” rule, you’ll want to do this: make sure your base color is in the far left box (you can drag it over there if it’s not), then use that, the middle/3rd color, and the last/5th color.

The 2nd and 4th colors are generally for more complicated designs.

With your secondary colors found, be sure to copy those hex codes to the same place you have your primary color for use on your website.

Speaking of which…

How to use your secondary color(s) on your site

You’ll want to use your secondary/accent colors to highlight less important information/elements like subheadings, active menu items, and content that’s only useful for some of your users.

Aka “things you want to stand out but not too much.”

Here’s how accent colors are used in our website color palette example:

website color schemes secondary color example annotated
Source: Our Wix Demo Site

4. Choose your background colors

Your background colors are going to fill in the spaces where you don’t want to use your primary/secondary colors, like text, the background of blog posts, etc.

Now, typically the safe bet is to just use black/white/gray for these, as they’ll help keep people focused on places you’ve used your other colors and won’t break the color harmony we worked so hard to get playing around with Adobe’s tool.

If you want to just use neutrals, head back to the Color tool, chose the “shades” color harmony, then type “FFFFFF” into the first box (which is the hex code for pure white).

You can then drag the very bottom slider under that box around to use a slightly gray version of white as your base or click one of the other colors to make it your base to play around until you get a “basically white,” “basically gray,” and “basically black” set of colors to use in your backgrounds.

Depending on your site’s purpose, though, you might want to get a bit fancier than that…

Ecommerce or content-heavy site? Stick with neutrals

Sites that sell a lot of products (aka Amazon) or are mostly about sharing information and ideas (aka blogs like this ‘un ‘ere) want to put as much focus on those products/words as possible.

So it’s best to use neutral color backgrounds so that these pop as much as possible.

best background color for website ecommerce example
Source: Carbon

Business-focused website? You could use shades of your primary color

Because color is an important part of branding (like we talked about above), if your website is primarily about sharing background info on a business or charity (while maybe sharing information about services clients can pay for), you can use shades of your primary color for backgrounds.

This will really help plant your brand color into your visitors’ minds to make it more recognizable/memorable.

Neutrals are always the safest, but if you want to have a more colorful set of background colors, use the “Shade” harmony in the Adobe Color tool, put your primary color in, and you’ll get a set of background colors you can use that should look good together.

Just be sure to use more subdued shades, nothing too bright or bold, as you’ll still want people to mostly focus on your content/sections where you use your primary and secondary colors.

good background colors business website example
Source: Critical Software

Going for super stylish? You can use some graphics/images too

If you’re building a site in the restaurant, fashion, beauty, or creative industries, using a lot of images or graphics in your backgrounds can create a super-premium, very stylish feel.

Just be sure of two things:

  1. That your text is still readable.
  2. That your design doesn’t feel like there’s too much to look at because of all the details in your backgrounds.

Part of that will come from choosing images/graphics that don’t have too many elements in them.

But you can also use the “Shades” harmony in Adobe color to find either neutral color shades or shades of your primary color to overlay on your images and make them more subdued (you can either add overlays to the images themselves in Photoshop or in your website builder/Wordpress).

website background colors image example
Source: Maman Corp

Website color scheme examples

When you’re starting out, it can be tough to come up with design ideas on your own.

Which is where a little inspiration from great designs comes in!

So to help you get started with a few ideas for your own website color scheme, here are a few great schemes and designs from around the web.

1. Fun and Playful

Flatiron Collective website color schemes examples
Source: Flatiron Collective

#b200f8
#ff4247
#ffdb6c
#00545a
#002835

Somewhere between a softer and brighter palette, Flatiron showcases a diverse color combination that creates a fun and playful vibe. The colors are featured in animations and used as font colors, in icons and graphics and other creative ways.

2. Strong and Sleek

Martell website color schemes examples
Source: Martell

#8a211b
#b3925f
#f0cd95
#001446
#eaeae2

Featuring a bold, darker tone throughout its site with a midnight blue background, Martell breaks away from the traditional, cookie-cutter designs you see so often on the market. Shades of gold and dark red accent colors provide a stunning contrast to the prominently dark color palette.

3. Corporate and Creative

NetNatio website color schemes examples
Source: NetNation

#e9467d
#113b77
#2565c7
#4bb3f0
#e9e9f3

NetNation introduces a corporate-style website design that uses multiple shades of blue, a color that emits trust and professionalism to its viewers. The magenta color you see used in icons adds a pop of playfulness to the very corporate design. 

And other graphical elements create a contrast that breaks up the mostly blue palette.

4. Natural and Enchanting 

New york times website color schemes examples
 Source: New York Times

#fdc3b7
#f3d982
#a7dac9
#5178b1
#e7f4fd

Pastel, earthy colors produce a playful, natural, and somewhat enchanting look that directly correlates with the company’s core mission. A featured landing page on the New York Times website, this company uses their brand colors in pretty creative ways throughout the page.

5. Vibrant and Energetic

open website color schemes examples
Source: Open

#eeeeee
#cc5245
#58a9a5
#f3d33b
#231f20

This co-working space and start-up incubator, located in Canada, uses lively colors that are intentionally vibrant and meant to evoke creativity and inspire the viewer. Overall, they do a great job using four or five distinct colors in different ways throughout their site.

6. Powerful and Poised

slack website color schemes examples
Source: Slack

#4A174B
#5BB77E
#56C6F0
#E1405A
#ECB230

Slack is a leading enterprise chat app used by millions of people. They’ve invested millions of dollars into perfecting their branding and it shows. 

Their bold-and-bright color palette uses dark plum as its base color, which draws the user in and exudes power and independence.

With energetic accent colors, Slack does a great job pulling in the viewer using color theory.

7. Bold and Happy

the happy hero website color schemes examples
Source: The Happy Hero

#FFFFFF
#000000
#E93F33
#FEE533
#4F5CD6

With a strong 1950’s comic book-style design, The Happy Hero chose bold colors for their website including sunflower yellow, fire engine red, and pacific blue. Their goal is to spread happiness and their design reflects this mission well.

8. Calming and Earthy

titya ravy website color schemes examples
Source: Titya Ravy

#BEBDAA
#F6EEE2
#D4D8CE
#B29578
#000000

Topes, browns, and soft green colors are featured in the design for Titya Ravy’s website. A fine jewelry maker, Titya chose a very non-traditional color palette to showcase her brand.

The earth tones she uses are reminiscent of the natural materials she uses in her jewelry designs.

9. Clean and Bubbly

UMAN website color schemes examples
Source: UMAN

#E94734
#334F6E
#FFFFFF
#F8F8F8
#F9DFDB

The UMAN website may seem to feature a less sophisticated color palette compared to other examples we’ve seen so far, but sometimes, simple is better. 

A professional services company offering retirement and life planning services, Uman’s clean and simple design uses a combination of mid-tone blues, salmon, and red to exude professionalism and urgency.

10. Bright and Playful

whoa mama website color schemes examples
Source: Whoa Mama

#7a00f8
#ff003e
#f39190
#f3e513
#00bfd2

Whoa, Mama is a suitable title for the color palette featured on this website. Bright and playful with tons of 90’s digital art infusions, Whoa Mama is a gleeful example of branding done right.

Purple, red, yellow, and teal are paired perfectly with each other and featured prominently throughout this epic design.

11. Inviting & Trusting

nu website color schemes examples
Source: NU

#56909a
#b3d2d7
#aeaf71
#717b44
#df8956

NU is a unique project with a unique goal and uses an equally unique color palette on its website. Many purpose-driven projects use a softer color palette to appear inviting and mission-oriented, and NU is no different.

This compound color palette consists of deep-sea blue, summer sky blue, olive green, soft green, and sunburnt orange.

12. Creative & Professional

raiseyourwebsite website color schemes examples
Source: #raiseyourwebsite

#455799
#5f7add
#af6ac6
#f09686
#f7be3e

Raise Your Website is an online website testing tool and its website features a creative color palette that uses a unique combination of two complementary blues, along with magenta, peachy orange, and sunset yellow.

This compound color palette brings out a creative yet professional aesthetic that can easily be replicated on your website.

13. Professional & Inviting

access is website color schemes examples
Source: Access IS

#155799
#1d76d1
#0f7ce0
#53c3f6
#e9f2fe

The Access IS site uses a range of blues in their web design color palette, creating an intentionally corporate feel to their site that is inviting and professional.

With tons of custom illustrations that feature the four-tone color palette, Access IS shows us that a monochromatic color palette is not only doable but can work out quite well in website design.

14. Energetic & Playful

spotify website color schemes examples
Source: Spotify

#e85db6
#ea5467
#f2af37
#cdf564
#6fd862

As a leader in the music streaming space, Spotify’s bold branding speaks loudly throughout its website design. Spotify has been known to push the boundaries of web design.

This landing page uses 1990’s inspired neon pink, orange, and green color tones splashed throughout its site to create an energetic yet playful color palette that inspires users to download their app.

15. Wise & Illuminating

the ronin society website color schemes examples
Source: The Ronin Society

#ead6b7
#cba978
#9ea3a9
#14222d
#e34234

As a financial advisory service, The Ronin Society stands out from other players in the industry with unique sepia-style web design concepts used to create a trusting, professional brand appearance.

Royal gold, navy blue, and fire engine red are used in perfect harmony on Ronin’s site and, together, add a feeling of illumination and wisdom.

16. Familiar & Futuristic

psych x86 website color schemes examples
Source: Psych X86

#050c3f
#6474b9
#4a2c96
#9b75c5
#70edf0

“Psych” is a digital solutions company, so their futuristic color palette is a good choice, with deep blues and purples featured throughout the site. A bright turquoise accent color breaks up the mostly dark color tones creating a futuristic vibe that’s somewhat familiar.

Purple was a popular web design color in the late 2010’s and will likely continue to be used in many site designs.

17. Earthy & Complementary

care website color schemes examples
Source: Care

#333333
#a5502f
#e36f30
#f2bf20
#4b7803

Care is on a mission to combat climate change and its branding and color palette is a perfect representation of their social impact.

With an intentionally earthy color palette filled with oranges, yellows, and complementary colors including mid-tone green and dark brown, this is a perfect example of a complementary color palette done right.

18. Calm & Collected

slumber website color schemes examples
Source: Slumber

#deba93
#081521
#001f33
#23628b
#53b5c1

This website is calm, cool, and collected. With a dark overtone using several dark blues against a mid-tone aqua color, Slumber’s website breaks from the standard “minimalist” design approach and uses warm illustrations to elevate its branding and showcase their inspiring, analogous color palette.

19. Edgy & Vintage

mountain man website color schemes examples
Source: Mountain Man

#e3d279
#9faf8b
#efb48d
#c96346
#414042

Indie pop group Mountain Man wastes no time showing the world exactly who they are.

With a naturally-edgy and vintage vibe, this music group’s website uses peachy pink lettering against a yellow-filtered background with other complementary colors such as sage green to create a stunning, dusty, earthy tone on its website.

20. Warm & Comforting

cowboy website color schemes examples
Source: Cowboy

#fffafd
#fcf3f7
#f8dbe3
#e94363
#131414

Cowboy is an e-commerce brand and its website design uses four different shades of pink. The monochromatic, all-pink color palette is a bold choice, but one that sells its products with confidence.

Pink is a warm and comforting color that can relay a feeling of hope and alleviates feelings of stress or anger — making it a great option for web design.

More website creation resources

And that, folks, is what we have for you today.

The full low down, the full monty, the whole shebang on website color schemes.

On a hot streak with learning about all this website design stuff?

We’ve got you fam!

Here are a few more super sweet posts we’ve created re:web design.

And we’ve got plenty more over on our Youtube Channel if you still want to get after it but are just about done with reading for the day.

We’ll see you over there kids!

How to Design a Website
The Definitive Guide [2020]

How To Design A Website Featured Image

Solid web design is a critical part of creating awesome websites. Here are the basics.

 

Dale McManus

Co-Founder & Web Developer

Nov. 8, 2019

 

Hey, my name is Dale! My partner Alex and I have helped tens of thousands of people build beautiful websites around the world. In this fully-packed, step-by-step guide, you’ll learn all the basics about How To Design A Website. Let’s dive in!

  • Level of Expertise:
    Beginner
  • Time To Complete:
    1 Hour
  • What You Get:
    A Functional Website

For the record: It’s super important for us to keep this site 100% free for you and 100% high quality. To help us do that, we’ve partnered with some of the products we recommend and earn a commission if you buy through our links. Read our full disclosure and partners list here.

Lies: you’ve got to be some sort of artistic genius or coding wizard with high tech tools to design a website that looks and feels mindblowing.

Facts: With tools like website builders, themes/templates, a basic understanding of website design principles and a bit of practice, it’s pretty darn easy for just about anyone (you included) to design a website that drops jaws.

Especially when you’re armed with a super detailed (yet easy to scan and understand) guide like this one.

Today we’re going over the basics of how to design a website starting… now!

how to design a website

What is web design?

what is web design example site design

Before we dive knee-deep into the process, let’s start with the basics: web design is the process of creating the visual look and feel of a website.

Mostly.

These days “design” also incorporates the idea of “user experience” – which is a whole subject in and of itself, but for our purposes today it means web design isn’t just about how good your website looks, but how easy it is to do things like find information, important links and buttons, etc.

Hence “look” (what people see on your site) and “feel” (how easy it is to use your site).

Websites are built using the coding languages HTML and CSS, which tell a web browser how to arrange all the text on the site, what colors to make things, where to put images, etc.

In the old days, web designers had to hand-code websites from scratch – literally writing every line of HTML and CSS code for each website they made.

These days, you can be a designer without knowing any of that stuff thanks to “What You See is What You Get” website builders and Content Management Systems like WordPress.

These website creation tools do the hard work of creating code for you, so you can use your basic computer skills (dragging things around with your mouse, clicking buttons, copy/paste) to make websites. Fast and easy.

What “look” means

There are a few web design elements that determine how good (or bad) your website looks.

Colors

web design colors

What color is your text? How about the background behind that text? Your header menu? Buttons?

Color is a huge part of making a sweet looking site and a strong part of whether your site looks like it’s supposed to sell expensive watches to business executives or is just a place for your brother to share photos of your nephew’s birthday party.

Fonts

web design fonts

Fonts determine how the text on your site looks. The same words can feel super primo (like the always classy Helvetica) or casual and friendly (#comic sans) based only on the font!

Graphics/Images/Videos

web design cat illustration

These are things like photos, videos, icons, illustrations (where the whole “image” is drawn in a program like Adobe Illustrator – the cute kitty above being an example!), or composite images (like the “how to design a website” image at the top of this post).

The photos would be taken by a photographer, obviously.

The videos would be made by a videographer if they’re videos of the real world, or an animator if they’re made from other images/illustrations.

And it’s technically a “graphic designer” who would create icons, illustrations, and composite images

But, because there’s so much overlap, many web designers have graphic design/photography/videography skills because there’s so much overlap.

Once you have those photos/graphics/images/videos, the “web designer” is the one who adds them to the site in a way that looks fantastic.

Written Content

web design written content

Creating content/written text isn’t the web designer’s job but just like with graphic design, some web designers have content creation skills.

On the web design front, “content” is about arranging the words on the website so that they’re easy to read and attract people’s attention when they should (for instance, we wanted you to see the “Written Content” above before reading these last couple of sentences, so we made it higher on the page AND bigger so it’d catch your eye and let you know what this part of the post was about).

But again, because there’s a lot of overlap – and especially if you’re creating your own websites – the person who creates the website design might also write some or all of the content.

What “feel” means

Besides the stuff above, those visual elements that come together with a bit of web design magic to make a site look spectacular, there are a few elements that make a website “feel” easy and dare we say fun to use.

Layout

sketches of website layouts

Layout is the way graphics, text, and buttons are arranged on your page. 

Layout not only makes your site look good, but a solid layout also makes it easy to use because information is displayed in a way that makes sense, buttons are in places that people expect them to be, images are placed so that they help people understand what you’re trying to communicate without making text hard to read, etc.

Navigation

how to design a website navigation

This is how people get from one page to the next, and for your more complicated pages, how they get around the page.

Using this very site and page as an example (you’re here, why not), this includes things like

  • The header menu (that part with Home, YouTube Tutorials, Written Guides, etc at the top of the page on desktop, or the three stacked lines on mobile).
  • The floating table of contents on the top left (if you’re on desktop; if you’re on your phone like most people these days you saw it towards the top of this page, that part smartly called “Table of Contents”).
  • The “jump to top” button (the white arrow on the blue circle background at the bottom right of the page).
  • The “recently written articles” section at the bottom of the page.

The goal with navigation elements like these is to make it super simple for people to find the pages and information they want, when they want it.

Compatibility

website designs compatibility devices

Compatibility is how well your site/pages load and look on different browsers, operating systems, and devices.

Your site will have to look and function a bit differently for a 6” phone screen where people have to tap things with their fingers than it does on a 15” laptop screen where people use their mouse/trackpad (pro tip: if you’re gonna get into the website building game, get yourself a mouse; even Apple’s trackpads are just so much harder to use).

Web design vs. web development

web design vs web development comparison

As you’re getting familiar with the world of website creation, you’ll see “web design” and “web development” get thrown around pretty much interchangeably.

At the beginner level, they basically are – both are all about creating websites.

But we’re here to help you slingshot from beginner to expert at SpaceX rocket speed, so we’ll break them down for you a bit more.

Web design, as we got into a bit above, is about what people see and how they interact with your websites – the buttons, colors, fonts, images, page layouts, etc.

Web development is about actually getting into the code, writing the HTML, CSS, Javascript, PHP, etc that form a functional website.

If you’re building websites yourself using website builders or CMSs like WordPress, you’re basically both in a sense (even if you don’t write a lick of code).

As you get more advanced, you might want to build some samurai level skills in web design or web development.

Or you might want to hire someone to help you with certain parts of your website creation process.

So here’s a bit more in-depth into the differences between a web designer and a web developer.

What is a web designer?

web designer guy making graphics

Again, simply put, these are the folks that make websites look good and feel easy to use.

But in the world of big-shot websites like Amazon and Google, and maybe your sites one day, there are actually a couple of different types of “web designer.”

User Interface (UI) Designer

At the top levels of the website building game, UI designers are dedicated to just the visuals – the colors used, the fonts used, what images are used and where, the size and location of text, etc.

Just the visual “look,” the aesthetics, not any of the “feel” stuff.

So when a lot of people say “web designer” this is usually what they’re talking about…

User Experience (UX) Designer

But there’s another end of things in the web design world – the “feel” of your website.

When you’re getting started, and to be honest for a long time and a lot of sites after that, you can just stick to pre-built templates and some standard design forms to determine how things work on your site, where buttons go, where to use navigation menus and elements, etc.

For example, your site should have a header menu for your main pages (contact page, about page, home, blog, etc). Any website theme or template will have these, and just from using the internet you know header menus are a thing your site needs to have at the top of the page.

But deeper into the game, you start to ask questions like “what pages should actually be in that header menu?” “Should I have a button for my contact page in the header menu?” “Should the menu stay at the top of the screen and disappear when I scroll down or stay floating above the content?”

UX designers ask these questions, then do user research and testing to figure out the best way to layout your pages, which exact elements to include in order to get the most people to find your site fun, engaging, and maybe even a little bit addictive.

What is a web developer?

web developer guy with headphones

Again, these are the folks that make the actual code that runs turns a web design (“here’s what text goes where, with what font, in what size; here’s where the buttons go and they should be this color” etc.) into an actual website.

And, again, when you’re getting started out, you’ll use tools like website builders and WordPress to handle this end of things for you – so you’ll be doing the “web development” as you’re doing the “web design.”

When you get more advanced, though, sometimes you’ll want things to look a certain way that you can’t find in a template or can’t make happen with a web builder’s toolkit or WordPress plugin.

When that’s the case, you’ll need someone who understands code to make it happen – or become one yourself.

At that point, you’re definitely winning.

And at that point, you’ll need the help of one of three kinds of web developer.

Backend developer

Backend developers are the guys and gals that work on the core structure of a website.

They use languages like Java, SQL, and C++ to get certain information from databases, load a page when a button is clicked, send a new entry from one of your contact forms to a program like MailChimp so you can do some email marketing.

Basically, if it has to do with something that makes your website work but isn’t directly tied to what your visitors see, it’s a backend developer’s job.

Frontend developer

Frontend developers make the HTML, CSS, and Javascript that makes things visitors to your site see.

You need a button here? A frontend developer will add that to the code.

Need this contact form to have name, email, and message fields? A frontend developer will make those fields appear on your page and able to accept text from someone (but it’s the backend developer that makes sure that data is received properly on the server, and sent over to Mailchimp).

Full-stack developer

Now that we know about frontend/backend developers this one’s easy: a full-stack developer is just someone who can help with both ends of the “web development stack.”

Do you need to hire a web designer or web developer to help you create websites?

Short and long answer: nope!

Especially when you’re getting started, tools like the best website builders and CMSs like WordPress make it easy for anyone to create websites without having to spend a ton of time and years building experience in the finer points of web design or learning how to code.

When you get to a certain point, you might need a designer or developer to help out with some more advanced things you want to do (for example, we have one on our team who created some things like the jump to top button on this page – thanks Dan!).

But you can absolutely build some amazing looking sites without the help of these experts.

And, thanks to resources like this here blog post and our Youtube channel, you can learn to do a lot of web design and development things yourself!

Which leads us nicely into our step-by-step guide on how to design a website…

Step 1: Define your site’s purpose

website purpose compass hand

Yep, the first step in designing a website is a bit of a philosophical one: what are your reasons for creating the site at all?

Do you want to create a blog that gets millions of fans and readers?

Have an awesome online business idea to get some sweet sweet time and financial freedom that you just can’t have with a day job?

Are you learning to build sites so you can make money as a website creator for other people?

Whatever your reason for wanting to learn how to design a website, each website you create has to start with a purpose, a “raison d’être” as the french or people trying to be way too fancy would put it (#guiltyascharged).

Why you ask?

Well, if you’re new to website building, it’s super easy to overthink it; there are hundreds of blog posts on how to build a website, how to start a blog, how to make money online, etc. etc.

All sorts of ideas on what you should do to create an online business, what features you should have on your site, what tools you should use to make one.

Knowing why you’re building a website and what it should do can help you make decisions about what the design you create needs to have – and what’s #extra.

Plus, if you’re not clear on what the website should do/be from the start, you can end up with a “frankensite” that’s some sort of grotesque and confusing patchwork of 100 ideas you’ve had over 100 weeks of website building.

So to help you get clear and off on the right foot with your website design, we have three things for you: 

  • A list of general questions to answer about the website you’re designing
  • Some insights into the 3 basic objectives a website can have
  • Some examples of the types of site you might be looking to build

First, those general, get your Buddhist monk/Einstein on questions:

  • Why do you want a website?
  • What does a “successful” website look like to you?
  • Who do you think your audience/visitors are?
  • What do they gain by coming to your site?
  • What do you want them to do once they get to your site?
  • How does your website idea compare with others?
  • Are you aiming to make money from your site?

That last one leads us nicely into:

The 3 main website objectives

At a high level, a website can basically do three things for you:

  1. Establish your authority
  2. Generate leads
  3. Sell products

The first one is probably the simplest – a few relatively basic pages and a blog is all you’ll really need; you can get more fancy from there but those are the essentials to let people know what you’re about and connect with them enough that they’ll want to hear more from you.

The second, from a technical standpoint, is a bit more complicated but not by too much.

Without going into a whole business lecture, basically by “generating leads” we mean one of two things:

  1. You’re selling a particular service (like graphic design or web design for example), and you want people to be able to come to your site, decide they want to work with you, then have a way to get started.
  2. You’re building an affiliate website, where you want to attract people who will read your content, then click on links to products that they’ll then buy and you’ll get paid a commission from.

For these sites, you’ll need to think a bit more about what kind of people you want and need to attract (which is largely a marketing question but will affect your design as well), and what you’ll need to show and tell them so that they’ll want to click your affiliate links or fill out a form to work with you.

The third is the most complicated – in addition to some basic pages describing what your site/business is about, a blog, and some thought about who you need to come to your site and what you’ll want them to see when they get there, you’ll have to create ecommerce pages and functionality so they can buy products from you.

6 types of websites

Those three basic objectives can translate into a few different kinds of sites, each of which will affect the functionality and aesthetics you’ll need to consider when designing a website.

Here are a few examples, for your consideration (insert broad, sweeping gesture here):

Blog

how to design a website blog example

The heart and soul of a blogging website (like this one) is the almighty blog post (like this one!).

They’re generally informative and hopefully entertaining, there tend to be a lot of them, and more will be added faster than you’d add a new page to another kind of site.

You might have a blogging site that just shares your personal thoughts and adventures like fifty coffees.

You might have a blog that teaches people some skill you have (like this one!).

You might have a blog that makes money, or maybe it’s just for your own personal satisfaction (and that of at least a few visitors).

Other kinds of sites might have a blog, but your site’s whole reason and purpose might be the blog itself too.

Portfolio

how to design a portfolio website example

A portfolio site is primarily meant to describe the work you do and showcase some examples and case studies of that work.

A few awesome examples of this:

Most of the time these are for people with creative skills, though they could be a sort of online resume for someone in just about any industry.

A lot of times, they’ll have at least a contact form that could be for lead generation, but unlike a business site built specifically generate leads (that would have things like “downloadable guides” and pop-ups asking to “sign up for the email list”, that might be it on the LG front.

And sometimes these sites have blogs, other times they’re just relatively static pages that get updated every once in a while.

Brochure

how to design a website brochure example

Brochure websites are similar to Portfolios in that they’re largely informational but might have some lead generation features and/or a blog.

The difference is that Portfolios are sites for individuals, while Brochures are for businesses, groups, and nonprofit organizations.

Which means they’ll have a slightly different set of core pages; where a Portfolio site would have examples of work you’ve done, a brochure website would have a menu or upcoming events page; where you might just have a simple contact form on a Portfolio site, a brochure site might have locations and business hours as well (maybe no contact form either – no one needs to email that hot new gastropub asking about their daily specials).

Examples of solid brochure sites include:

The lack of need for real lead generation considerations is what separates Brochure sites from business from our next category; restaurants don’t really need lead generation, nor do some nonprofits.

On the other hand…

Professional Services

how to design a professional services website example

Professional services sites might include law firms, web design agencies, hotels, real estate agencies, etc.

Basically, if a site needs to tell a business’ story and provide information that persuades people to want to work with that company, it’s what we’d call a “professional services” company.

They’re not necessarily selling products through an ecommerce store, though there might be some level of ecommerce functionality.

The “customers” these sites are trying to get will need to talk to a real person at some point, schedule an appointment, maybe book online.

These sites aren’t “ecommerce,” though, because visitors either won’t be paying through some sort of “buy now” function or if they do, what they’re paying for isn’t simply a product that gets shipped or emailed to them.

Examples:

Ecommerce

how to design an ecommerce website example

This one’s easy because you definitely know this kind of site – Amazon.

But, Amazon’s not the only name in the ecommerce game, there are a ton of (much) smaller businesses that have websites to sell their products directly, without the help of third-party websites like Amazon.

The point of these: get traffic, make sales.

Some examples:

Step 2: Choose your website platform

Wix Versus WordPress website design platform

Alright, once you’ve got a basic concept of the purpose and type of website you’re building, it’s time to choose your “website platform.”

What the heck does that mean?

Well, you’ve got to get this website built (hopefully without having to know too much about coding), connected to a domain name, and hosted on a server so people from all over the world can get to it.

Technically, there are a lot of ways to do this.

Realistically, there are two main ways:

Website Builders

Website builders are tools that let you go from 0 to website super fast.

They take care of the domain and hosting parts for you, then offer a drag and drop interface to let you build your site page by page, button by button – without having to code or mess with the technical parts of building a site and making it available on the internet.

If you want the simplest website building process possible and don’t mind paying a few extra bucks over option 2, this is the way to go.

We’ve got a whole definitive guide to the best website builders for you right mere, in case you don’t want to all the way in atm a few of our favorites:

Wix

Best All Around

Wix
Wix
star ratings graphic
4.5/5
  • checkmark Features: 4/5
  • checkmark Speed/Uptime: 4.5/5
  • checkmark Support: 5/5
  • checkmark Price: 5/5

Pros

  • Tons of beautiful templates to choose from to get a solid start
  • The most powerful design and customization features around
  • Quick and easy answers found in their thorough knowledge base

Cons

  • No live chat (but you can call)
  • The editor is a bit harder to use than some – but not by much
  • Not the cheapest

Wix is what we’d like to call “the website builder’s builder” – it really sets the standard for everyone else. 

It’s not the cheapest and because it’s so customizable there’s a bit more of a learning curve. 

But if you’re going to fully dive into the world of website creation, you won’t go wrong here. 

Check out our full Wix review here.

Gator Website Builder

The cheapest… and that’s not a bad thing!

HostGator Logo

Gator Website Builder

star ratings graphic
4.5/5
  • checkmark Features: 4/5
  • checkmark Speed/Uptime: 5/5
  • checkmark Support: 4/5
  • checkmark Price: 4/5

Pros

  • By far the least expensive builder…
  • But that doesn’t mean their editor sucks – just the opposite, it’s powerful and easy to use!
  • Lot’s of extra features like built-in analytics and advanced elements that are missing or cost more in other builders

Cons

  • Templates could use some work – they look fine but aren’t amazing out of the box
  • The knowledge base needs more useful articles and a less buggy search function
  • Website speed could be faster

Bottom Line

We fully believe a good website maker is worth paying for… especially when it’s less than $4 a month! 

Gator is certainly the choice for the price-conscious website building beginner, but it’s also powerful and easy to use so you won’t be disappointed as you become a website creation wizard looking for a website creator you can grow with. 

Check out our full Gator Website Builder review here.

Constant Contact Website Builder

The best website builder for small business

Constant Contact Logo

Constant Contact

star ratings graphic
4/5
  • checkmark Features: 4/5
  • checkmark Speed/Uptime: 4.5/5
  • checkmark Support: 3.5/5
  • checkmark Price: 4/5

Pros

  • Their editor is the perfect combination of easy to use yet customizable for those who want an amazing website without spending a ton of time to learn how to build them.
  • Price, speed, and support are all top-notch
  • They’ve got some super sweet extra features like a built-in logo maker. Freaking A!

Cons

  • Can’t fully customize your site, great for people who just want a quick site but you’ll want more if you really want to dive into the website building game.
  • Knowledge base is good but needs more articles and better search
  • Their blogging tools could use some work

Constant Contact makes it super easy to make a professional website that looks great, with just enough customization to make your site unique without extra features that take time to learn.

Combine that with one of the best email marketing platforms around and a $10/month price tag and you’ve got a website creator perfect for a small business owner who wants a solid website without having to spend a lot of time or hard-earned cash! 

Check out our Constant Contact website builder review here.

WordPress

wordpress logo hand

The other main platform for designing, building, and launching websites is WordPress.

It’s a “Content Management System” (CMS) that makes it easy to create and customize sites without knowing how to code.

There are, technically, other CMSs besides the good ole WP, but WordPress is by far the most used and for good reason – it’s just a hands-down, no jokes, solid product.

WordPress itself is 100% free to use, which is pretty awesome.

You will have to pay for hosting and a domain name, though, but the total will be cheaper than using a website builder.

The tradeoff: there’s more work to be done.

You have to set up your domain name and hosting, which builders take care of for you.

And, while WordPress is way more customizable and flexible than website builders, that comes at the cost of a bit of a higher learning curve.

Check out the full lowdown on “what is WordPress” here!

Step 3: Choose your template or theme

web page design wix templates

Alright, now that you’ve got some clarity on the purpose of the site your building and the platform you’re gonna roll with, it’s time to choose your template or theme.

The two terms are basically interchangeable, it mostly depends on the platform you’re using.

Some nuanced differences aside, a theme or template basically covers a lot of the groundwork on in the looks department for your site by giving you an initial layout and set of colors to work with.

It’s like the structure of the house that is your website – the basic walls, rooms, colors are there, you’ve just got to fill it in with furniture, repaint a couple of walls, maybe swap out the toilet or add some recessed lighting in the kitchen.

Whichever platform you use, you’ll find a range of templates/themes – organized by the type of site, certain features, particular industries –  that you can preview to find the best starting point for your site.

A couple of notes before we get into some tips on choosing the best template or theme for your site:

  • Some themes/templates come with a set of pre-built pages, so things like your homepage, about page, and contact page are already started; others will just give you a few standard colors/fonts and types of page layouts, then you’ll have to create the pages you need from that starting point – these are a bit more work, but you still get a head start over the people doing it all from scratch.
  • Themes and templates for the best website platforms are all customizable, so you can make your site look exactly the way you want to, but it can be helpful to find one that’s got 70-80% of what you want already built out – saves you some time adding/rearranging things later.

Tips for choosing a website theme or template

Keep it simple

This is where it’s really important to know the purpose of your site.

Some themes come with a lot of flashy animations, complex layouts, and tons of built-in features that can all seem really impressive when you first see them.

But these things can distract visitors.

They can make it more complicated to customize your site.

And they can slow down your site.

So start with the basic features and functions you’ll need to fulfill your website’s purpose.

You can get double backflip fireworks grand finale fancy later.

Check out the competition

Especially with your first few sites, this is a hugely helpful place to start.

Because until you’ve got a few sites under your belt, you’ll probably have a tough time brainstorming ideas for what you want in your website designs, and you might just have zero idea why you should choose one template over another.

So, start with what’s already working for people making similar moves, check out your competitor’s sites, make some notes about what you like and don’t like, then use that to find that badass template you’re searching for.

Be careful not to feel like you have to do everything your competitors are – they could be working with much bigger budgets and they’ve been working on their site for longer than you have.

Just look for some basic good/bad pieces and keep moving!

Pay attention to fonts and colors

We’ll get a bit more into fonts and colors in step 4 below, but this is a big part of choosing a template.

Again, customization is always possible; if you find a theme that’s got the perfect layout but the button colors are terrible, go with it and change those later.

But that can take some work, depending on the website platform and particular template.

So look for something that uses a set of fonts you can at least live with if you don’t absolutely love them.

And pick one whose overall color scheme is close, if not spot-on; if you’re building a super fun and bright kids clothing store, don’t choose a template that’s mostly black, white and grey.

Likewise, if you’re building a site for a law firm, probably best to leave the pastels and comic sans behind.

Keep mobile in mind

You’re probably reading this post on your phone.

How in the world would we know that?

Because most internet traffic these days is from mobile devices.

And we’ve got Google Analytics data that says most of our visitors fit that bill.

In your web design journey, you’ll come across other posts that remind you to “make sure your site is mobile responsive.”

“Mobile responsive” meaning your site shows up one way that looks fantastic on desktops, and automatically shows up a different way (that also looks fantastic) on mobile devices.

We agree, your template should be mobile responsive.

Where we disagree is in “making sure your template is mobile responsive.”

Everyone’s known that’s important for years; any template or theme you choose will be responsive.

So “keeping mobile in mind” isn’t so much about checking to see if the theme you love is mobile responsive at all, it’s about checking that out before you choose.

Some platforms will have a “mobile view” in their demo so you can see what the template looks like on smaller screens.

A hack if that’s not available: just resize your browser window to the smallest width you can.

Just because everyone else mentions “SEO”

Again, like “mobile responsiveness” this isn’t a thing to worry about too much.

SEO (“search engine optimization”) has been important for a while, so any website platform, theme, or template you choose will have SEO in mind.

There are some particular things you’ll want to look for but that’s for another post and a later stage in your website building journey.

So for now, just know you don’t really have to worry about this; whatever theme you choose, you’ll be fine.

Step 4: Choose your initial branding

website design branding

It’s just about time to start getting your hands dirty with some in the weeds page building and website designing, just one more “let’s think about this first” step – choosing your initial branding.

Branding is a big topic, but from a beginner’s standpoint, this basically means the colors and fonts you’ll want to use on your site.

“But wait, shouldn’t I figure out the fonts and colors before I choose a template? Won’t that change what template I choose?”

A smart question to ask. And no, you shouldn’t.

Well, you can but you don’t need to.

Why?

Because when you’re getting started, figuring out what the branding should be is pretty hard; there’s a lot of experience and practice that goes into really understanding the best colors, fonts, and overall style a website should have, why Helvetica would be better than Times New Roman, why burnt orange is a better brand fit than fire engine red.

That’s where taking a look at what the competition is doing is helpful; if they all use a lot of dark backgrounds and sans serif fonts, you probably should too.

Likewise, if you really like the look of a particular theme, it’s going to include certain fonts and colors anyway.

Maybe you should change those, but you might not have to.

So by choosing a theme first, you can provide a bit of structure to your “what’s the brand” decision making, instead of a world of options (which can be confusing and time-consuming to navigate), you’ll just have a few good options that are perfectly great starting points.

That being said, color and fonts are important parts of designing a website.

So let’s go over a few basics about each.

Website Color Schemes

website branding color palate screens

Color is a huge part of defining your website design and overall brand.

There’s a ton of psychology behind what colors mean and which colors are best for your website and the business it’s representing.

There are whole books and websites covering the topic of “color theory,” but we’re here to save you the hours it’d take to read those.

Here are the basics of what colors mean in relation to branding and websites:

  • Black represents luxury, power, elegance, and sophistication. 
  • Gray represents simplicity, neutrality, logic, and “the future.”
  • Red represents urgency, excitement, danger, and passion.
  • Pink represents sweetness, femininity, innocence, and romance.
  • Yellow represents optimism, cheerfulness, and youth.
  • Orange represents creativity, friendliness, and enthusiasm.
  • Purple represents success, wisdom, wealth, and royalty.
  • Green represents health, wealth, peacefulness and nature.
  • Blue represents security, stability, trust, and calmness.

Cool, but how do you choose the colors for your site?

Well, most brands have one dominant color, then two or three secondary colors and a background color.

You’ll want to think about your audience, too – don’t just choose your favorite colors, choose ones that will communicate well with the people who will visit your site.

Building a site for a classy (aka expensive) restaurant? Black, red, and purple are good starting points.

Building a site to sell baby clothes? Blue, pink, or yellow could be the move.

Maybe it’s a portfolio site for your website creation services. Gray, blue, and orange are solid there.

Once you have a general idea of what dominant color is best for your target audience, it’s time to give Adobe’s Color wheel a spin.

It’s a 100% free tool that will let you pick your dominant color, then it’ll automatically suggest secondary colors for you.

And it’ll give you the hex codes (like “#231885”) which are what you’ll use to tell your website builder/WordPress exactly what color to use in certain places (rather than relying on your eyes to try to match – that’s just not the pro move lol).

Once you’ve figured out your color scheme, how do you use it on your site?

The dominant color should be used in most important parts of your site like:

  • Your logo
  • Menu tabs
  • Call to action buttons
  • Backgrounds for important information
  • Headlines

Your secondary colors should be used as accents in places like:

  • Subheadlines
  • Backgrounds for information that’s important, but not the most important
  • Hover effects

And your background colors, which might be white, gray, black, or one of the secondary colors you got from our friends at Adobe, should be used in… the background.

Duh. More specifically/helpfully:

  • Use lighter color backgrounds when you want the words and images of a section of your page to stand out.
  • Use darker colors/your secondary colors to help create some distinction between sections of your page; use these a lot/instead of light or white backgrounds if you really want to push your branding on your website.

Website fonts

website fonts laid out on printing press

After color, fonts are the other big way your initial branding will apply to your web design.

Is your website going to cover serious business? Then classic, classy fonts like Baskerville and Arial are the move.

Looking to do something more fun and lighthearted? Copse or Museo are a good place to start.

One important thing to keep in mind when choosing a font for your website design: make sure they’re readable.

There are some super classy script fonts that are nice for wedding invitations but are just terrible for websites (we’re looking at you Buttermilk; because we can’t tell what you’re saying and we don’t know why that’s your name).

Also, you’ll want 2, maybe 3 fonts for your site max: a primary font (for headlines) and one or two secondary fonts (for your subheadlines and body text).

Cool story, we know, but how exactly do you choose the right fonts for your site?

Well, like we mentioned above, this is where choosing a template first is helpful; you’re probably good to go with the fonts they included by default.

If you want to choose new ones, that’s gonna take some time and exploration.

But to help you get started, here are a couple of handy infographics from our friends over at DesignMantic:

designmantic font moods infographic
Source
designmantic typography commandments infographic
Source

Step 5: Create your website layouts and initial pages

website layout and sitemap graphic

Awesome, now we’re getting into the dirty dirty, hands-on stuff – it’s time to get your initial website pages created.

First up, you’ll want to start simply with a few key pages any website will have.

From there, depending on your site’s purpose and the particular business you’re building it for, you’ll need more.

BUT any site you’re going to make will have the following:

Home page

web design example homepage

For the record though we’re 99.9874% sure you already know this: the homepage is the main page of a site, the one you land on when you go to “thewebsite.com”

Every site has one, and it’s almost always the first thing most visitors see.

A few tips on designing homepages:

  • Be sure to use lots of attention-grabbing visuals.
  • If this is a lead generation or ecommerce website, be sure to include at least one “call to action” or CTA – either something like “contact us for a quote” or “shop now.”
  • If the business has some sort of testimonials or trust badges (like “BBB accredited”) stick those bad boys on there.
  • Make sure there are easy to scan and read sections that communicate what the business/organization/person does and why visitors should care.
  • Include contact information or an email list sign up form if those are part of the website’s purpose.

About page

website design example about us page

We’re also pretty sure you know this page too.

It’s where you tell the story about the business/organization/person who’s website people are reading.

Definitely include images of the people behind the site/business.

And be sure this page answers the following questions:

  • How did the business/organization get started?
  • Who is the site for?
  • What makes this site/business different?

Contact page

web design example contact us page

For lead gen sites, this is definitely one of the most important pages, though pretty much every website should have one of these as well.

Make it easy for potential customers or visitors you might want to connect with to reach out with at least a contact form.

Bonus points for including links to social media accounts, phone numbers, and physical addresses.

But only include these if they make sense (if this is a portfolio site, please don’t put your home address out there for anyone in the world to find – you will get more spam mail and maybe a visit from an overly enthusiastic fan).

Product/Services/Portfolio page(s)

website design example product page

The last of your core pages is really a type of page because it depends on the goal of your site/kind of business or organization it is.

These are portfolio pages that show examples of work, product pages where people can buy things, or services pages where people can learn more about what the business whose site your building does and can contact someone to learn more/get the service.

You’ll definitely want to include lots of relevant information about the product/service/work example, along with some super slick imagery that helps visually communicate the what, why, and how.

And if we’re talking about a product or service page, pricing info is important (though many services pages don’t have this because the cost can vary depending on the project), as is checkout functionality for product pages.

Web page layout best practices

website layouts examples

When it comes to the actual layout of your particular pages, your theme or template will help define a lot of this for you – it’ll put the headlines, images, body text, forms, buttons, etc in certain places out of the box.

But maybe you don’t quite like some of those choices.

Or your the type who just really likes to tweak things so they’re more “yours.”

Well, we like that kind of creative spark.

Just don’t screw up your site for the sake of changing things around.

A good website and web page layout keeps people on your site because it makes important information and features easy to find.

Bad layouts are frustrating and make people jump away from your site faster than your alcoholic uncle consumes a 12 pack of Bud Light (no disrespect uncle Jimmy but damn dude, chill).

Some general elements of a good layout:

  • It’s intuitive – visitors shouldn’t have to think hard to figure out what they should look at/do.
  • It’s streamlined – no fluff or clutter, just the minimum amount of text and imagery needed to get your point across.
  • It’s goal-oriented – want people to click a buy button? Make it bright and well separated from other parts of the page; want people to look at a particular image? Make it big and right smack dab in the middle of the page.
  • It’s designed for skimmers – most people just don’t want to take the time to read every word on a page (if you’ve read every word of this post so far you’re an everyday hero for sure), so use plenty of bullet points and headlines to make it easy for people to see/read the most important information fast.

Website layouts that work

There are a ton of design principles to learn if you want to master the whole “how to design a website” topic.

But to get started, you can definitely get a solid website built by just going with what already works for thousands of other sites.

There are a few standard layouts that pretty much always work, so if you apply these to your pages you’re just about guaranteed to be good to go.

The F

web page layout example f

This is the most fundamental website layout around as it’s how people have been reading books (in English at least) for centuries – start at the top left of the text, read to the right, jump back to the left of the second line of text, move to the right.

Aptly named as this makes people’s eyes look at a page in the shape of an, you guessed it, “F.”

This one won’t fail you though because it’s so standard, it’s not very exciting.

Use it as a default layout to lean on but mix up your pages with sections that use other layouts too.

The zig-zag

web page layout example zig zag

This is the old left text, right image -> right text, left image -> left text, right image trick you’ve seen on hundreds of sites.

“Zig-Zag” because your eye “zigs” then “zags” across the page in the shape of a Z.

People are so used to looking at web pages like this, it’s a real winner for creating a layout that’s a bit more interesting than the tried and true F layout but easy to understand.

The featured image

web page layout example featured image

The featured image is another web design standard – it puts an image, big and bold, towards the top of a page to really hit home on what that page is about in a super visual way, usually balanced out with some text, as opposed to…

The full-screen photo

web page layout example full screen photo

Just like it sounds, whether at the top or some section below that, this is a part of the page that lets an image take a leading role in communicating some key idea you want to get across about your site or the people it’s for.

The full-screen photo is a cool way to make a background more interesting than just using a color (be sure your text is still readable though).

Or you can put the words on hold for a bit and just let people take in the full glory of a photo that’s, simply put, freaking awesome.

Grid

web page layout example grid

Whether images, text, or both, grids are a good way to let people easily browse a lot of information in a short amount of time.

By equally distributing content, they let visitors to your site choose what they want to look at first, second, third, or not at all.

Step 6: Create, find, and add in your content

web design content tools

Alright, you’ve got your initial pages built and laid out, time to add in the content – the words, images, and maybe videos that will make this website masterpiece complete.

Some more technicalities because we like them and they’re useful for you to know:

Finding images/graphics to include on a website is a thing most “web designers” would do; actually taking photos or creating graphics is technically the job of a photographer or graphic designer, but in the website creation world a lot of web designers might do those things too (because they’re such an integral part of building a website.

Likewise, creating the words for a website is technically the job of a “copywriter” (it’s an old advertising term, where the words of an ad are called “copy” instead of just “words” because that’s not very catchy).

But, again, a lot of web designers write copy (“website words”) too.

We definitely don’t have the space to do complete guides on copywriting or graphic design or photography here.

But, for the sake of helping you get to a finished website, here are some tips on writing words for websites and finding images/graphics to include.

Writing copy for websites

web design copy advertisemnt bilboards

Know your target audience

Just as your brand colors and fonts should match who you’re trying to speak to through your site, so too should the copy.

Having an idea of who your ideal visitor, the “target audience” for your website is important for understanding what copy you should write, what words you should use, what information you need to have.

For example, we know a lot of the people who come to our site are towards the beginning of their website creation journey.

So we use the words “getting started” and “as a beginner” a good bit.

And we also aim to filter through the details and deep levels of technicality involved in completely understanding how to build and launch websites to give you information that’s going to actually help you get started.

You probably don’t know what an htaccess file is. You don’t need to when you’re getting started, so we don’t mention them when talking about hosting.

Understanding your target audience, the people who are going to read and take action on your site goes beyond demographics like age, gender, location, etc.

You want to know what problems keep them up at night, the kinds of words they use, what they dream of achieving.

This all will help you figure out what your site needs to say and when it needs to say it.

Know the features, benefits, and objections

This one’s for lead generation or ecommerce sites in particular.

You know what products or services you’re selling – you should write about those obviously?

Not quite.

The cold hard truth is that most of the people who come to the site you’re building aren’t your mom; they don’t really care about you, your company, your products and services.

They’re interested in themselves.

Their problems. Their needs. Their dreams.

The stuff you’re selling is just a means of solving those problems, meeting those needs, and achieving those dreams.

So you have to talk about the benefits – what people get out of buying your stuff or getting your services.

And you have to address the objections they’ll have about whether or not you can deliver those benefits.

The high level of figuring this out:

  1. Make a list of features of the products/services being sold through the website
  2. Translate each feature into a benefit your target audience wants
  3. Write down objections people will have about buying those products/services

Then make sure you talk about those benefits and address those objections in the copy, particularly on your home page and product/services pages.

Put the important stuff at the top

Writing website copy is kind of like fishing – you want to put the juicy bait you’re using right where you need to hook ‘em.

In the case of your website’s pages, that’s right at the top.

If you don’t get your visitor’s attention and interest in the first couple of seconds that they’re on your site/page, right at the top, they’ll leave and find one of a million other things to do on the internet (cat videos and Instagram are probably at the top of that list).

So when you’re creating copy for your web designs, be sure to put the juiciest details and benefits as close to the top (if not at the actual top) as you can.

Don’t try to sound smart or use jargon

When a prestigious, highly intellectual publication like Harvard Business Review suggests we should stop trying to sound smart, well we here at CaPW take note.

Their reasoning: instead of impressing readers, you alienate them; they feel like you’re trying to put yourself above them.

And on top of that, big words and phrases like “these pros are sophisticated and eloquent” just take more time for people to process and understand.

They can be confusing, and in the super distracting online world, people have more fun things to do than being confused reading your website.

So keep your words simple and clear.

And try to avoid using insider terms/jargon that your readers might not understand, or explain what those words mean if you have to use them.

Eg we wanted to make sure you knew WordPress was a CMS further up this post – but explained that meant “Content Management System” and those are basically a way to make websites without having to write code.

We like to use tools like Grammarly and Hemmingway app to figure out if our writing is too complicated – and you should too!

Keep it friendly

This one’s a riff on the last tip.

In a lot of cases, it’s best to write like you would speak – using “you,” contractions (words like “can’t” instead of “cannot” for those of you who don’t remember English class – we feel you), and the occasional slang.

For some business websites, this kind of language isn’t entirely appropriate (most law firm websites shouldn’t include any “sup y’alls”), but in a lot of cases it’s best to just talk to your readers like people instead of some stuffy, stick up his butt accountant for a fortune 500 firm (apologies to the corporate accountants out there that know how to get down).

Finding images and graphics for your website

Website images are powerful stuff.

Simply swapping out an image can have a huge effect on changing the look and feel of your site, and that can be done in a few seconds for little to no money, no super-advanced coding or design skills necessary.

But how do you find and choose some sweet images for your site without spending a ton on professional photography or custom graphic design?

Some tips and a list:

Tip 1: Go high quality

high quality image example mountains

This is hopefully obvious but just to be “clear” (get it, because we’re talking about images… this is why we’re not professional comedians): don’t use fuzzy or pixelated images on your site.

Image resolution is a balancing act on websites because super high res images will slow your page loading down.

But you want to make sure you use images that are at least as wide/tall as the space you’re trying to fill on your site (eg, if you created a page that has a 1020 x 870 pixel spot for an image, don’t try to stretch a 750×420 image to fit).

You can also use images that are bigger than you need, but be sure to use a tool like Optimizilla to compress your images to the smallest possible size without losing quality.

Tip 2: Go unique

When you’re starting out, stock photos are going to be your go-to because custom photography (good custom photography at least) is expensive.

But you definitely want to look for something better than the classic “man in front of a laptop, wearing a button-up shirt, looking at the camera holding a cup of coffee” photos that are the stuff of terrible websites from the ‘90s and memes.

hide the pain harold free stock image

We feel your pain, Harold, for so many reasons.

There are definitely interesting stock photos to be had out there that might not be 100% unique to your site but at least won’t leave people feeling like your mom made your website 10 years ago.

See our list below for places to find these!

Tip 3: Images should have meaning

web design image meaning example puppy in cup

There are enough people in the stock photography trenches that there are loads of well-composed, high-resolution images to be found out there.

But you shouldn’t just slap a photo on your site because it looks good. Your images should help communicate the message you’re trying to share on your page.

If you’re looking for an image for a legal services page, you could find an image of people in suits shaking hands, suggesting “we’ll help you get your legal troubles solved.”

Or for a thought-provoking blog, you could use a shot of a mountain or a sunset over a field of wheat.

Okay, those ideas are borderline cheesy, but the point is you want your images to evoke feelings and help tell the story you’re sharing on your website either directly or in an abstract way.

Random puppy photos are cute but not right for most sites.

Tip 4: Faces are good

web design image face example

People are a special thing. #deepthoughts

r/iamverysmart jokes aside, there’s a lot of psychology behind the power of eye contact and faces in marketing/web design.

People are naturally drawn to faces on a deeply animal level, so be sure to leverage that to keep people engaged with your web designs by having at least one or two friendly faces somewhere on your site.

Where to find images for your site

There are boatloads of places to get super sweet imagery for your web designs, some are free and some are paid.

Do you have to pay to get solid photos?

Not at all. The images in this post are mostly free (we made some ourselves and pay people for their help with that).

Paying for stock photos these days isn’t so much about getting quality images.

But if you pay for an image, it’ll be a bit more unique because most people stick with free thanks to all the free stock photo sites out there.

And you might find images that are better for certain business contexts, as a lot of the good free stock photos out there are either high concept/artsy/inspirational; if someone knows their taking a stock photo that’ll be great for business, they know that business can afford to pay so they’re more likely to post it on a paid service.

But you can find some businessy stock photos for free.

Where??

Awesome places to find free stock photos

Solid places to find paid stock photos

Sweet places to get custom graphics (for not too much)

The best way to learn more about how to design a website

Alright y’all, it’s been a journey but we’ve made it to the end…

For now!

We’ve got plenty of other helpful web design-related written guides here on our site.

And we’re constantly publishing a stream of super helpful Youtube videos too!

So if you’ve got more questions, if you’re hungry for more answers, we’ve got you fam.

Website Design: Top 10 Mistakes & Their Solutions
Take the Guesswork Out of Website Design

Top 10 Website Design Mistakes Thumbnail

Dale McManus

Co-Founder & Web Developer

Jun. 14, 2019

Hey, my name is Dale! My partner Alex and I have helped tens of thousands of people build beautiful websites. In this post, we’ll talk about an edge-topic on the top 10 website design mistakes and their solutions.

  • Level of Expertise
    Beginner
  • Time To Complete
    10 Minutes
  • What You Get
    Working Knowledge

For the record: It’s super important for us to keep this site 100% free for you and 100% high quality. To help us do that, we’ve partnered with some of the products we recommend and earn a commission if you buy through our links. Read our full disclosure and partners list here.

As always, here’s the video guide:

If you like the video and want more tutorials on creating a professional website you can also subscribe to our YouTube channel!

Now to the post…

If you’re reading this, then you already know the importance of building a website.

But if you’re not a professional website designer like we are, it’s really easy to make various mistakes that can wreck your site.

The mistakes covered in this post can make your website look unprofessional and make your visitors more likely to click on that X button, which we don’t want.

But before we dive into the mistakes and their solutions, we want you to get into the right mindset.

Your mindset should be this:

Whenever designing your website, your ultimate objective is to minimize the amount of brainpower the visitor needs to use while on your website.

The easier you make it for them to read, navigate, and click around on your website, the more successful your website will be.

Website design should look for any and all ways to minimize time and mental bandwidth visitors use to get what they want.

With that said, let’s get started!

Bad website design mistakes

The 10 Bad Website Design Mistakes You Should Avoid (And Their Solutions)

Mistake #10 – Buttons That Blend

A button, especially at the very top of your homepage should be your most important call-to-action.

It should lead them to read more or check out your product

A lot of people get caught up in making their whole website match that they forget that this button should stand out apart from everything else.

This is the one thing that you want them to click on the most so it’s much better for this button to be a completely opposite color that stands out.

You want your visitors’ eyes to be immediately drawn to this button.

For example, if it’s the same color as the rest of your website, they might just skip right over it because it doesn’t look important enough.

Our favorite colors to use are blue orange or green and you want to make them very saturated and bright, like in the example below.

Bright orange button

Mistake #9 – Too Many Calls-to-Action

While we’re talking about call-to-action buttons, 1 or 2 is perfect but 3 or more presents visitors with too many options and your visitor is less likely to click on any at all.

If, for some reason, your website needs more clickable call-to-actions, just leave the most important one at the top and then create a bottom header below your main section with a lot more clickable buttons.

Bottom header

That way, they’re still at the top of the page and people can find them easily but your main call-to-action is the single centered focus.

The reason you don’t want a bunch of call-to-actions right at the top is because we want to minimize the amount of time it takes for your viewer to find exactly what they need.

Giving them fewer options is actually better. It makes them more likely to click and reduces their stress in deciding what option to click.

Simplifying a website visitors options also makes it more likely that they’ll stay and actually click the link instead of having information overload, exiting your website, and going elsewhere.

Mistake #8 – Too Much or Too Little Spacing

We see lots of websites that are too crowded and that makes it really difficult to focus on one piece of information, let alone the most important piece of information.

On the other hand, we also see lines of text that are way too spaced out and it kind of just throws off the whole balance of the website.

A very helpful rule of thumb is to group lines of text together that are supposed to go together and then create space around that group like a heading and a subheading.

Mistake #7 – Poor or Overly Complicated Writing

Writing can take way too long to read and it’ll crowd up your website with a lot of unnecessary information.

The key is to simplify, simplify, simplify.

You understand your content at a level 10 but you should be writing it at a level 1.

The copy on your website should essentially read the mind of the visitor and answer their questions before they even know they want to ask them.

Here’s a helpful exercise:

Try asking a few friends to check out your website. If they have any questions at the end, then you know you have something that you need to rewrite.

One way to think about your writing is like a slippery slope.

This concept comes from legendary copywriter Joe Sugarman.

Basically, you want your readers to feel like they’re slipping down a slide when reading your copy – the words on the page.

That means grabbing their attention with a short sentence.

And another one.

Maybe one more.

Now they’re starting to slip and you keep the slide slick with simple sentences that build one on top of the other.

The key is to stay focused on one big idea (as best you can) for each section of writing.

This whole section, Mistake #7, has only been about simplifying your writing. We’re not talking about any other subject.

But when you’re ready to move on to another subject, use transitions like:

What you write is only one piece of the puzzle. The other piece is how the words look on the screen.

Mistake #6 – Poor Tracking and Leading

This is a really subtle mistake that is commonly overlooked when writing copy for your website.

“Tracking” is the amount of space between individual letters or words in your writing.

The tighter the tracking, the harder your text will be to read.

Try adding a little bit more tracking to give your words some room to be read easier.

“Leading” is the amount of space between lines of text.

This can also be referred to as line height. And once again, adding a little bit of space between lines of text can make things much easier to read.

We built a bunch of websites before realizing this one and it would have been awesome if somebody had told us this sooner.

Mistake #5 – Lacking Consistency

Having lots of different fonts and different font sizes is going to make your website look unprofessional and very inconsistent.

Try only using two different fonts and try to set definite font sizes for both H1 and H2 headings.

For example, H1 could be set at 36 points while H2 is 18 points.

Consistent header font sizes

Use these numbers throughout the rest of your website. This will ensure that everything looks clean and consistent and all you have to do is bold your text whenever you want something to stand out.

You’ll also notice in the image above that we designated one font for headers and the other font for normal text. This adds another visual layer that can enhance the look and feel of your website.

The idea is to work smarter, not harder.

Mistake #4 – Poor Image Choice

Now, there’s nothing wrong with using a stock photography website to get your images.

A few of us here at CaPW are photographers and we still don’t want to go out and shoot ourselves every time we need sweet photos for our sites.

So we use pixabay.com or pixels.com ridiculously often.

But some photos can be too busy and distracting to absorb text or other important information on your website.

To overcome this, try using images that have a bit of empty space in them. That way you can put text over the top without them conflicting.

Or you can just try adding a background overlay.

A background overlay should be 50% or more white if you have black text, or 50% black for white text. Then you could use pretty much any image and still read the text.

Mistake #3 – Long Paragraphs

Long paragraphs immediately look really daunting and viewers might just skip over them to go find shorter pieces of information.

We recommend adding a few breaks every two or three sentences to make it easier to absorb.

This is as simple as just hitting the return key twice every two or three sentences.

It doesn’t matter if somebody’s reading a book or a website, people tend to read the first sentence of every paragraph to scan for the right information, so it makes the most sense to put the most important pieces of information in the first sentence of every paragraph.

And we know all you english majors reading this aren’t going to like this advice, but the reality is, internet readers (and readers in general today) prefer shorter, punchier writing.

Proof: the average reader online has the attention span of a goldfish.

Shorter paragraphs encourage people to keep reading and it helps to keep them focused.

Placing your logo in the center of your header may feel good because you’re being different than everyone else but it does have a downside.

There is a reason most people put their logos on the left side:

Internet users have been conditioned to click on the logo to go back to the homepage since pretty much the internet was created.

So as soon as you put your logo in the center, you’ve now added an extra quarter second, maybe even a full second or so for the viewer to actually figure out how to get to your homepage.

This extra step reduces the user experience.

And like we said earlier, minimizing the amount of brain power they need to use is key for a great user experience.

It’s best to stick to conventional methods and do what people expect – minimizing confusion.

Mistake #1 – Unresponsive Website Design

We left this for number one because having an unresponsive website is a sure-fire way to lose 50 percent of your visitors.

Not at all kidding…

Over 52% of global web traffic comes from mobile devices.

Making sure that your website also looks good on mobile is extremely important.

There is nothing more frustrating as a website visitor than to go to a website and you can’t even click on the buttons or read the text.

But it’s not just users who want your website to be optimized for mobile:

Google wants it too.

In fact, on July 1st they’re rolling out mobile-first indexing.

This means that websites built to work well and look good on mobile phones will automatically start ranking higher in search engines than websites not optimized for mobile.

This is a major change and will upset a lot of website owners.

Which is why this is our #1 recommendation.

Making your website responsive to mobile is great for your readers and it’s especially great for SEO and ranking higher in Google.  

If you want to make a beautiful and fully responsive website, then check out this tutorial we made that walks you step-by-step on how to do exactly that.

Now It’s Your Turn to Fix Those Bad Website Design Mistakes

An ugly, dysfunctional, hard-to-operate website can quickly be turned into a beautiful, easy-to-use home for your blog or business.

If you follow all the steps in this guide, you’ll be well on your way.

And if you found this website design tutorial helpful be sure to check out our other written guides filled with all sorts of helpful website tips and tricks to help you launch your site in style!

10 Reasons You NEED a Website
Top Reasons You Should Create Your Own Website

10 Reasons Why You Need A Website Thumbnail
 

Dale McManus

Co-Founder & Web Developer

May. 16, 2019

 

Hey, my name is Dale! My partner Alex and I have helped tens of thousands of people build beautiful websites. In this written guide, I’ll go throuogh exactly why you should have (and create) your own website, and how to do it. Let’s dive in!

  • Level of Expertise
    Beginner
  • Time To Complete
    15 Minutes
  • What You Get
    A Working Website

For the record: It’s super important for us to keep this site 100% free for you and 100% high quality. To help us do that, we’ve partnered with some of the products we recommend and earn a commission if you buy through our links. Read our full disclosure and partners list here.

As always, here’s the video guide:

If you like the video and want more tutorials on creating a professional website you can also subscribe to our YouTube channel!

Now to the post…

Alright yall, let’s talk about the internet.

Literally everone is on the internet.

All of the time.

It doesn’t matter whether we’re looking to buy things, learn a new skill, watching TV, making new friends – we do just about everything but eat and sleep on the internet (though we know a couple of foodies and biohackers who try to do that too).

Nowadays, having an online presence is basically a must if you want to achieve your hopes and dreams (unless you’re aspiring to be a monk or pro “sanitation engineer” – if so good for you!).

If you’re reading this you almost certainly think that starts and ends with building a YouTube channel or solid Insta account.

Don’t get us wrong, those are great ideas.

But unfortunately, social media has become so noisy that it’s becoming harder and harder to actually stand out and make an impact if those are the only angles you’re working in the online presence game.

So how do we get around that to step out of the noise and make an impact beyond the 1 billion Instagram or 1.8 billion YouTube users (hard to imagine at the moment, we know, but it’s totally doable!)?

Easy: Create a website.

Not for you you say?

Sure it is!

And here’s 10 reasons why.

#1: You can make a LOT of money

make it rain

Money isn’t eveything warnings aside, we know this one’s #1 in a lot of your hearts.

I make my entire living online.

My sister Lauren makes her entire living online.

My best friend Alex makes his entire living online.

In fact, those two are millionaires now because of the websites they’ve built (like this one where they teach you how to make money online).

And that’s not a fluke – a lot of people are making a lot of money online these days (check out my Lauren and Alex’s post for a couple of other examples).

Like we affirmed earlier (in case you were feeling guilty), we do a lot of things online and buying is one of them.

When you build a website, there are a ton of ways you can make money with it!

#2: It’s a great way to express your creativity

abstract art creativity

If money isn’t your main motivation we’ve got a slow clap for you.

Clap…

…Clap…

…Clap.

Seriously, good for you!

Also, building a website provides more than just money if you want more (see how we found a way to still make you feel greedy :).

A website can be a creative space to show off your beautiful thoughts and amazing photos or illustrations.

And the process of building your website can be really creative too!

From taking your initial website idea to coming up with an awesome name, deciding what pages you want/need, adding animated buttons and sweet slideshows or color schemes through expressing yourself in every single word on every single page, creating a website is a super… creative process!

As an example, check out our Wix Tutorial to see just how much creative freedom you can exercise when building a site.

#3: It can be an amazing resume

James bond resume

Whether you’re aiming to be a high-powered entrepreneur who wears the finest suits while growing your professional network or just want to find a photography job that lets you wear that vintage J. Crew while you work from anywhere, a website can serve as an amazing resume to help you stand out from the crowd.

How many people do you know from work that have a website?

LinkedIn? Maybe.

Instagram? Probably.

But basically everyone’s got one or both of those.

And there’s only so much you can do in a short bio.

Being able to show off your work in a fun, professional, and unique way is good enough reason to build a site.

But in an increasingly technological world, showing you’ve got the savvy to build your own site means a ton (and really, it’s not even that hard – read on…).

#4: You can use it for a more professional email address

Confused nick young

Look, we’ve got nothing against gmail, we’ve all got them.

But “your_name”@“yourwebsite”.com looks a heck of a lot more impressive than the highly forgettable “your_name93”@gmail/yahoo/outlook.com (God bless you Yahoo and Outlook users).

That level of custom. That level of professionalism. That level of “woah this dude’s got his name at his website.com.”

Well, that can help you get new clients, that better job, all the way to looking like someone your bank should loan money to (ymmv on that last one).

Check out our Professional Email Address guide to learn more!

#5: You can quit your 9-5

Cubicle worker

See #1.

But just as a reminder/clarificaiton/gravy on the cake (it’s for real good when done right)…

You can definitely make enough to live on with a website.

And then some.

And then some more.

Definitley some much more than that raise you’re hoping for AND you’ll still be stuck working with Rick (“dammit Rick I’m trying to hate my job in peace!”).

With a website at the hub of your online business, you can leave that sh!t (and Rick, especially Rick) behind.

#6: It’s a great excuse for learning more about a hobby or favorite topic

knit bears hobby

Most of us have hobbies.

Or at least things we like to read/learn about.

We hope you do at least.

If not – building websites could become yours!

But if you already do, we know at least one or two other people online who’d love to hear about your experience and learn more about it from you (probably more than that but we like to play it safe with our assumptions here at CaPW).

Building a website around your hobby is a great way to share what you know and love with the world.

And it’s a great excuse to connect with other people around the world who love the same thing (“hey that’s great, i did something similar – check it out on my website!”).

#7: It can help you become an influencer

autocrosser

Yeah yeah, we know, all the “influencers” are on Insta and YT these days.

And that’s exactly the problem. They’re all there. And ONLY there.

From sharing your awesome DIY skills to showing people how to make delicious meals or cut weight from their ‘04 MX-5 (autocrossers we see you), it can all be done on a website.

And you can still do the social media – just with one central place to collect all those ravid fans outside of the aforementioned noise.

#8: It’s not that difficult anymore

84 mustang

Back in the old, dark days of the internet, building websites took some serious coding skills to make.

And they still looked like complete garbage compared to what’s possible today.

But today, well not only are we all greatful websites don’t look as hot as an ‘84 Mustang, with the right tools you can easily make a beautiful website with 0 knowledge of coding (a little bit here and there helps, but is definitely not required).

Website builders like Squarespace make website creation as easy as drag and drop.

#9: You don’t have to pay a pro to build it

Mcdonalds 90s website

Also back in the old, dark days of the internet, websites cost a lot of money.

We actually know a dude who made thousands of $$$ building websites for companies in high school back in the ‘90s.

He builds way better websites for big companies now, so he still makes $$$.

And for the kind of website you might want to build, there are plenty of pros who’ll want to charge $2-5k to make it for you.

Not. Needed.

You can do it your self on the fast and cheap.

#10: We’re gonna help you do it right!

Dale website building genius

To the last couple of points…

Reason 10 you need a website is because we’ll help you do it right!

Despite our honest and vigorous assurances, we know it’s still intimidating to do.

As easy and cheap as it is to build a website these days, there’s still a good bit to learn.

Which is why we’ll continue to help you make any kind of website, including but not limited to:

  • Personal websites
  • Blog websites
  • Ecommerce websites
  • Photography/videography websites
  • Portfolio websites
  • Affiliate websites

…The list goes on.

So if you want the BEST weekly website tips and tutorials, head over to our YouTube channel, smash that subscribe, and check out some of the videos we’ve already got there.

(Or if you’re more of a reader check out our other written guides and thanks for reading :).

How to Make a Logo for Free Online
A Simple, Step-By-Step Guide To Creating A FREE Logo

How To Make A Free Logo Thumbnail

Dale McManus

Co-Founder & Web Developer

Mar. 14, 2019

Hey, my name is Dale! My partner Alex and I have helped tens of thousands of people build beautiful websites around the world. In this simple, step-by-step guide, we’re going to show you a simple way to make a logo, for FREE. Let’s dive in!

  • Level of Expertise:
    Beginner
  • Time To Complete:
    5 Minutes
  • What You Get:
    A Customized Logo

For the record: It’s super important for us to keep this site 100% free for you and 100% high quality. To help us do that, we’ve partnered with some of the products we recommend and earn a commission if you buy through our links. Read our full disclosure and partners list here.

As always, we have a video guide for this available on our YouTube Channel and below:

If you liked the video and want more tutorials on creating a professional website you can also subscribe to our YouTube channel!

Okay, so you’ve got your online business idea figured out. After hours of word-crunching, you’ve got a pretty rad name, you’ve bought the domain name and maybe you’ve even started to build your WordPress website.

But in the back of your mind, that little spot in the top left corner of the page bugs you; there’s supposed to be a logo there. How the heck do I make a logo?

Oh and since you’re just starting the process of building your business, you definitely don’t have the resources to hire a designer to make one for you.

No worries friends, we’ve got your back.

In this guide, we’ll show you exactly how to whip up a logo for your online business. For free. In 5 minutes.

Because you’ve got a lot of great ideas to get out there and one heck of a business to build!

Let’s begin…

A logo works a lot like your name (your personal name, not your business’).

When you were born your parents gave you a name and over time, you brought a ton of personality to that noise people make with their mouths to identify you.

So when people hear your name, they think of you with a few heart eyes emojis.

Logos work in the same vein as a symbolic representation of your business, giving people something they can easily recognize and come to feel something (hopefully good) about your business.

And more than most people names (sorry “John”), they can also share information about what your business is all about and how you rock the world.

A good logo:

  • Helps you stand out from the competition.
  • Shares key information about your business.
  • And builds brand recognition for your business.

To do that can take a lot of work. And you already have a lot of work to do getting your business off the ground.

Thankfully, we have some words of wisdom to help you stay calm: your first logo doesn’t really matter that much.

That’s right. We said it.

Yes, it’s important to have a logo that says something about your company, and it shouldn’t look like complete crap.

But the reality of online business is that what really matters is the content you put out there and the value you provide for your audience and (eventually) customers.

Great content can make a “good” logo great, too.

And making a good logo isn’t that hard or expensive, as we’ll show you a little further on.

First, let’s go over the different types of logo you can create.

Types of Logos

When it comes down to logos for online businesses, really there are three basic types:

  • Text: A lot of people think logos have to have some sort of image and many do, but they don’t have to. Some really famous logos are just words (Hershey’s) and yours could be too.
  • Symbolic: In contrast, some logos are just an image that taps into the power of people’s image recognition system to build a connection and make the logo memorable (Apple. Enough said.)
  • Combined: Naturally, our third type of logo is a combination of words and text (Adidas). We find these work well for online businesses because you can connect with people visually, explain what your business is about with your name/words, and you can always make image or text only versions off of the main logo later.

Within those three main types of logo, there are a few elements you can play with to make something really awesome and unique.

Typography

This is just a fancy way of saying “font.” If your logo uses words, you’ll have a ton of font options to choose from to match your style and let people know what kind of business you are.

Imagery

Naturally, if your logo includes non-word pieces, there are nearly an infinite amount of “pictures” you can create and use. These could include symbols, icons, abstract geometric shapes, decorations like boxes or lines, shapes – whatever you think is best to help your logo look good, tell people what you do, and stand out from the competition.

Color

Whether you just use words, just imagery, or both you’ll always have options when it comes to color. Simple black and white can work for a more refined feel, a few variations of one color to really drive one feel home, or a multicolored palate that catches attention and lets people know you’re business is a ton of fun (just please make sure the colors look good together; Adobe’s color palette tool can help with that).

Whatever kind of logo you decide to make, it’s really important to not overcomplicate it.

Simple colors and shapes without a ton of little details not only makes it easier for you to create, but will make it easy to use your logo all over your website, social media, t-shirts, posters, etc without losing details or ending up with a jumbled mess when your logo scales to different sizes.

If you fancy yourself an especially creative person, you can learn even more about the types of logos in this awesome post over at 99designs.

Best Free Logo Makers

Cool, so you’ve got an idea of what kind of logo you want to create, but we hooked you on the idea that making your logo would be free and fast.

We’ve still got you on that. Tutorial’s coming up in a second but first, here are 3 of our favorite online logo makers.

Canva

canva free logo maker

Canva is an amazing free design tool with a beginner friendly interface and tons of free templates for creating anything from social media images, flyers, invitations, business cards and, of course, logos.

They make creating a logo easy by letting you start with one of their free templates, then you can use their super simple drag and drop editor to change fonts, colors, add a bit of visual flair, and even upload your own custom graphics if you have any (thank you graphic designer friends who will work for free coffee and lots of gratitude!).

Shopify’s Logo Maker (Hatchful)

shopify hatchful free logo creator

Shopify’s had a logo maker for a while now but it was so wildly popular that they recently gave it a real name, Hatchful. All grown up, #soproud.

And while Shopify’s badass ecommerce platform does cost a pretty penny, Hatchful is just as badass and you can save the penny (it’s free)!

Again, it’s super easy to use – just type in your business name, choose an icon, edit colors, sizes, etc. to your heart’s content, then get that bad boy sent to your email in seconds.

LogoMakr

logomakr free online logo maker

LogoMakr might just be the easiest to use of the bunch. They keep it so simple and to the point – there’s not even a home page to their website! Just hit up logomakr.com and you’re sent right to their free online logo maker and off to the races in seconds.

And of course, they offer tons of drag and drop shapes and icons with all the text, color, sizing, and position changing goodness you need to create a logo that just works.

LogoMakr’s our favorite for sure, so that’s what we’ll be using to show you how easy it is to make a good logo for your online business.

How to Make a Logo for Free with LogoMakr

Alright, the main course, let’s make a logo!

The first thing you’re gonna want to do is head over to logomakr.com. Go ahead and skip the tutorial (because ours is better) and you’ll see their very simple interface that gives you everything you need but isn’t daunting to look at.

logomakr canvas

From there you can browse all their logo images/icons or search for something specific. So if you wanted something to do with a tree you can type in “tree” and it’ll give you a ton of options.

logomakr tree icons

Or you can search by categories if there’s not one “thing” you know you’re looking for.

logomakr categories

For this tutorial let’s head back to the canvas and make a logo for a game company.

We’ll start by inputting some text using the little “T” on the left. Let’s call it “Oldskool Games” (yes, we know that’s not how you spell “school” but this way is way cooler).

logomakr insert text

Next, let’s go in and get a game related image by typing “game” into the search bar.

Boom, we’ve got all these game controllers to choose from, let’s go with the colorful one (because it’s poppin’).

logomakr colorful controler icon

When making a quick and easy logo like this there are two main things we should customize and that’s the font and color.

First up, focusing on the font, a gaming company should be really fun. LogMakr has a ton of font categories to choose from but for this logo Fun and Funky is the obvious choice.

logomakr font options

Then we can go through and select one of the Fun and Funky fonts, Luckiest Guy is definitely the move here.

logomakr luckiest guy font selection

And that, friends, is a logo right there.

free logo created

If we wanted to play with it some more, we could move the text off to the side to create a longer logo.

create free logo text right

We can also make the image and text smaller by just dragging and resizing.

logomakr drag to resize

And to change the colors we can select any color on the wheel in the top right corner and adjust things like saturation and brightness.

logomakr change text color

And to be sure your colors are consistent throughout all of your branding be sure to copy the color code, in this case, “ff8d00,” and save it somewhere so you can use that exact color for other things like buttons on your website.

LogoMakr also lets you add shapes like circles, triangles, and squares.

logomakr shapes options

And if you need to remove something (this blue circle was definitely a mistake), just select it and hit the trash can in the bottom right.

logomakr trash can

They also let you do lines so if you want to underline something you can. Plus you can adjust the line width depending on whether you want something super subtle or nice and phat (also not how you spell “fat”).

logomakr line width options

And if you want to have shapes/text/images overlap you can switch the order they appear in to put one thing on top of the other using the layer’s button down at the bottom. Just open that up and drag the piece to whatever level you want it at.

logomakr layers box options

So let’s just say we were right the first time but, you know, we wanted to play with it to really be sure. So now we’re really done. For real for real.

To export our new logo we just go up to the Save icon at the top right and click it.

logomakr save logo

That will bring up a pop up that gives you the option to buy which you totally can, it’s only $20 and you’ll get vector files which will let you scale this logo to any size without it getting all blurry.

But option two is free and all you have to do is credit LogoMakr.

logomakr free and paid options

Oh and before you click one of those be sure to save your logo’s URL there on the bottom so you can come back and make changes later if you need to.

logomakr re-edit link

Alright guys, that’s it for our text-based LogoMakr tutorial but in the video we covered a few more logo designs so if you want to get some ideas or just see more of the action, check them out here:

Logo Design Tips

Before we head off, we’ll leave you with a few logo design tips. Really, for your first logo there’s no need to overcomplicate things. Whatever you make will probably be fine and if your business takes off but you don’t love the logo you can always change it later.

But we also know us saying that might not be enough to help you just get after it, so here are a few things you can keep in mind to let your inner concern troll relax a bit.

Research Your Target Audience

Your logo needs to look good, sure, but it also needs to communicate effectively with your target audience.

Think about who they are, what they like, and if you know anyone who your business could help talk to them about your business and what they think and feel about businesses like yours for ideas on what your logo should “say” about it.

Research Ideas and Competitors

From looking at and talking to your target audience, along with ideas you already have, online research can be really helpful for finding inspiration too.

Look for competitor’s logos, look up keywords associated with your business, and see if you can find your target audience on Reddit or other places to get more leads on ideas and competitors.

You want to make sure your logo is unique and clearly recognizable, but starting a business is hard enough without trying to reinvent the wheel too. Find some things that work, put your own spin on them, logo = done.

Create a Mind Maps and/or Mood Board

Mind maps are a great way to get ideas out of your head for your logo or for your online research to find inspiration for your logo. Just write your business name or a word that describes it in the middle of a piece of paper, circle it, then draw out other things that come to mind to find logo idea gold.

Mood boards are another idea creation/inspiration finding technique that super fancy designers use to create logos.

You and I would call it a “collage.”

Basically, you find a bunch of images (logos, pictures, graphics, etc) that you think are interesting and related to your business, paste them all up on a poster board or a free online collage maker and keep it handy when you’re working on your logo ideas.

Keep. It. Simple.

Again, we can’t stress enough how much your first logo doesn’t need to be perfect.

But in addition to your peace of mind (that thing you’ll get when you finally just make the flipping thing), simplicity is also a really important part of good logos to make them easy to remember, recognizable, and useable everywhere. Think Nike or Apple.

Mirror Your Business’ Personality

You might come up with a logo that looks great but is totally wrong for your business. An example would be using rainbow colors and Comic Sans for a law firm. That lawyer isn’t getting you out of sh*t.

If your business is fun, use crazier fonts and colors (but don’t overdo it). If your business is health-focused, stick to blues and greens and browns. If you’re building a fashion advice blog, fit the style of your logo to the style of fashion you like talking about the most.

The Rap

That’s all we have for you today folks, time to jump to it! And yes, we know that’s not the right spelling of “wrap.”

Hopefully we’ve helped you get unstuck with this whole logo making thing; it’s important, but not worth stressing about. Really if you just fire up the free logo maker, play with a few ideas for a few minutes, you’ll probably come up with something awesome.

Then you can get back to the website building stuff.

Oh, you didn’t get started with that yet?

We’ve got you fam, check out our guide and get going with that in less than 30 minutes!

10 Online Business Ideas for Beginners in 2020
Start Things Off Right With the Perfect Business Idea

10 Online Business Ideas For Beginners Thumbnail

Dale McManus

Co-Founder & Web Developer

Jul. 24, 2018

Hey, my name is Dale! My partner Alex and I have helped tens of thousands of people build beautiful websites around the world. In this simple, step-by-step guide, we’ll compare web hosting plans so you can find the perfect host for your website. Let’s dive in!

  • Level of Expertise:
    Beginner
  • Time To Complete:
    10 Minutes
  • What You Get:
    Awesome Ideas

For the record: It’s super important for us to keep this site 100% free for you and 100% high quality. To help us do that, we’ve partnered with some of the products we recommend and earn a commission if you buy through our links. Read our full disclosure and partners list here.

Is 2020 the year you finally create your online business? It could be! If you’re like most of the entrepreneurs/future entrepreneurs we know, you’ve gone over tons of online business ideas, imagining what your life would be like if you quit your job and could make money anywhere in the world.

But as awesome as that sounds (and is!), time and time again you return to your comfort zone – steady income from a secure job, the consistent schedule, the ease of having a boss who tells you what to do.

“I’ll try doing the online business thing next year,” you say to yourself. Then next year never really comes.

It’s time to end the cycle of procrastinating on creating an amazing life of freedom and fulfillment by building an online business!

To help you finally get going, we’re laying out 10 online business ideas you can get started on ASAP.

What We Mean by “Online Business Ideas for Beginners

If you’ve been interested in creating an online business, you’ve probably come across a few “beginner” posts like this one.

In researching this article, we found a lot of websites with ‘easy online business ideas for beginners you can start today right now and make tons of money tomorrow” posts.

At Create a Pro Website we’re all about helping out beginners like you with everything you need to create and build a successful online business.

However, we’re not about selling you false ideas about how easy it is to be successful online.

You can be successful, but it will take time and hard work.

That being said, in our list of online business ideas, instead of throwing out every option under the sun, we focused on those that are reasonably easy to start; depending on which you choose some will take more work than others to get to success/profits.

Here’s how we’re breaking the ideas down:

Freelancing, Consulting and Coaching Businesses

These are businesses where you use a skill you have or learn to earn money for helping clients get things done (by hours spent or by project). This is one of the fastest ways to start earning money online, but it’s hard to scale your income with them.

Audience-Based Businesinesses

Audience-based businesses are those where you create content that people enjoy enough to keep coming back for more, then you leverage their attention to earn income in a variety of ways. They usually take a long time to get going but have a lot of long-term profit potential.

Product-Based Businesses

Product-based businesses are those where you sell digital or physical goods – either ones you make or someone else’s. Depending on what you sell and how, they can start earning income quickly or take a while, but in general they also have good long-term earning potential.

Make sense?

Let’s get into some specific ideas to get you started in the online business world.

(P.S. many of these ideas will involve creating a website, if one of those interests you be sure to check out our guide here to learn how to build yours in 30 minutes).

Freelancing, Consulting and Coaching Businesses

Freelancing, Consulting, and Coaching businesses let you leverage some sort of skill you already have (or can learn) to make money by trading your time/effort.

Compared to some of the other types of online business ideas you can start making money fast, but it can be hard to scale your income as you’ll pretty much always need to trade time for dollars.

For this list, we focused on businesses whose work is both:

  • In-demand online (personal training is great but 95% of the time people will want to meet in person)
  • You can learn/sell without needing a lot of experience or a fancy degree (believe it or not people do look for architectural consultants online and that kind of sketches us out).

And here are a few websites that make it easy to start finding clients and working on projects that pay:

Become a Copywriter

According to all around awesome site Copyblogger, “Copywriting is the art and science of strategically delivering words (whether written or spoken) that get people to take some form of action.”

This can range from pay per click ads to website copy to email marketing.

If you already have a passion for writing, copywriting might be a great option for earning some online income!

And since most of us have some ability to write, it can be a great option if you’re not really sure which online business is right for you.

Copywriting is also a great beginner online business idea because just about any online business you’ll create will need copywriting at some point.

Quick note “copywriting” traditionally refers to words used in advertisements that are meant to sell products/services.

If that’s not quite your style there are quite a few other types of writing you can make money doing too, including:

  • Blogging
  • Social Media Posts
  • Grants
  • Resumes/CVs
  • Speeches
  • Technical Writing

Become a Graphic or Web Designer

Have you ever seen a Pinterest post or website home page that looked so good it really stuck with you?

You can thank the graphic designers and web designers of the world for that.

And you could be one of them!

Graphic and web designers basically visual communicators who make the web pages, infographics, logos and fancy ebooks we love to download look great.

And with today’s tools, you don’t have to be great at drawing to be a designer (though it certainly helps)!

Here are a couple of resources to get you started:

Become a Business Consultant or Personal Coaching

Copywriting and graphic/web design are some of the most in-demand and easy to learn freelancing businesses around.

But there are a ton of other ways you can make money as a freelancer, consultant or coach!

Here’s a laundry list of other profitable skills you can make money with online in case writing/making things look awesome isn’t your style:

Audience-Based Businesinesses

Audience-based businesses involve creating lots of amazing content to build a following of people who love the work you create.

Some of the most common types of content you can do this with include:

  • Blog Posts
  • Podcasts
  • Videos
  • Photos/Artwork

These businesses take a lot of work to get to a point of making money – at least months, sometimes years.

But, once you get a good-sized audience built, there are a ton of options for monetizing the attention you get.

And many of those monetization methods can bring in the holy grail of online business money: passive income.

Here are a few audience-based business ideas.

Start a Blog

At Create a Pro Website, we’re big fans of blogging (that’s why we make posts like this).

And for good reason!

In 2018, it’s super easy to start a blog to share your thoughts, share what you’re learning, or share your life with the world.

And unlike other forms of audience-based business, you can completely own your blog and build it yourself; from your domain name to your website hosting, with a little investment, you can do whatever you want with your website.
And, there are tons of opportunities for earning income with your blog, including:

To get a better idea of what it’s like to start a blog and earn money from it, check out this amazing post from our friends at Create and Go!

Become a Social Media Influencer

If worldwide fame appeals to you, becoming a social media influencer might be the online business for you!

Thanks to the grassroots power of social media, as long as you have an engaging, authentic story to tell (and a solid work ethic), it’s possible to build a huge following!

And once you do, you can partner with sponsors and advertisers to trade your influence and attention for income (in a creative, tactful way of course; please don’t sell out yourself or your audience for the sake of a few dollars!).

While becoming and remaining a social media influencer requires constant evaluation of which platforms are gaining/losing attention (RIP Vine, nice work Snapchat), in 2018 the top social media platforms for becoming an influencer are Instagram, Snapchat, and Youtube.

Here are a few resources if this sounds like the gig for you:

Start a Podcast

In case you haven’t heard (see what we did there), podcasting has been blowing up the last few years.

And for good reason – unlike blog posts, videos, or social media, it’s possible to listen to your favorite podcast while doing the dishes, driving to work, going for a run…

Pretty much any time when you would have either been listening to music and not learning anything or just silently hating life (one of the best perks of working from anywhere: dodging rush hour traffic).

Podcasting sits in an interesting space between blogging and social media influencing.

Like blogging, you can mostly own the platform (not relying on a social network that can change their policies/algorithms and destroy your business).

But you can leverage platforms like Spotify and Soundcloud to tap into an existing platform and audience.

And like social media, most podcasters earn revenue from paid sponsorships and ads, though you can certainly create and sell your own products or services through a podcast too.

Here are a few resources to get your podcast started:

Product-Based Businesses

Product-based businesses revolve around selling digital and/or physical products to earn income.

You can either create your own product or buy and sell other people’s.

Product-based businesses can involve some audience building if you create your own e-commerce website, though opportunities to advertise through influencers or pay per click ads, or build partnerships with companies offering related products mean you can start bringing in cash without needing a lot of people’s attention.

There are also some solid platform options out there that will let you start moving products and making sales without needing to build a website!

Let’s take a look at those first.

Sell on Amazon, eBay, or Etsy

Just like the freelancing/consulting platforms we shared above make getting your first clients easier because people are already there looking to get a job done, sites like eBay, Amazon, and Etsy make it easy to start selling products.

To start selling, you could do something as simple as going to a church sale, buy some cheap stuff, and flip it on eBay.

You can also find drop ship products through Amazon to make some cash without having to keep boxes of stuff in your basement.

Or you could learn how to craft really cool handmade goods and sell them on Etsy (sweet hobby + income potential = awesome online business idea).

If you’re interested in the idea of selling physical products but aren’t sure you want to fully invest in building an entire website and business infrastructure to do that (or you just don’t have a product idea yet), selling things on some of these websites is a great place to start!

Create an eCommerce Website

If you know you have a really great product or store idea and you’re totally ready to get after it, then you should definitely look into starting an e-commerce website.

Though it can be a lot of work to do this compared to some of the other ideas here, eCommerce websites have a few advantages including:

  • You can own your website/domain – no worrying about getting shut down because of some terms of service violation you didn’t know about.
  • You can make unique products and build a brand that stands out from the competition (this can be hard to do as a consultant or content creator).
  • Scaleable income: once you figure out what products sell well and build a website and business that helps you do it, you can turn a lot more traffic into a lot more income without doing a lot more work.

If an eCommerce website seems like an interesting idea, here are some resources to learn more about getting started:

Website Selling and Domain Flipping

You’ve probably heard of people who buy and sell real estate (it’s one of the old school ways of building a business to gain financial freedom and quit the 9-5).

And you’ve probably heard about people who buy and flip houses.

Well, we think that’s a lot of work (not to mention a lot of money down).

But you can actually do something similar online!

There are two ways you can do this:

  • Selling “Real Estate” in the form of domain names.
  • Selling “Houses” in the form of websites.

With buying and selling domain names, you’re basically trying to find and buy domain names you think someone will want enough to pay you a lot of money for (you can get an unused domain name for as little as $15 bucks a year; carinsurance.com sold for $49.7 million).

With selling websites, you’ll either buy an existing site, build up its income/income potential, and re-sell it, or build a site from scratch and sell it once it’s started generating revenue.

Now that sounds like a good bit of work, why would you want to do that?

Well, maybe you don’t want to sell a website that’s earning you money; if you learn how to build a successful niche site, you could just keep it and its income.

But if you find you really like building websites and get good at it, you can make a lot of money in bigger chunks by selling your sites.

And just like with our first online business idea, Copywriting, in learning how to build websites that become valuable enough to sell, you’ll gain a ton of useful skills to earn money online in a whole bunch of ways!

If you’re ready to start building your online empire, here are a few resources to get started with domain flipping and website selling:

Bonus Business: Stock/Forex or Crypto Trading

This last online business idea didn’t quite fit into our 3 categories, but we definitely think it’s an interesting opportunity (and one that beginners can get into).

Some people consider joining the volatile stock and forex trading markets a risky business (we’re probably some of those people).

And while cryptocurrencies are definitely cool, they’re probably even riskier.

But, if you put in the work and can handle some pretty wild swings in your net worth, trading stocks, foreign currencies, and cryptocurrencies can all be learned online, done online, and very profitable.

Learn more here:

Time to Start An Online Business

There it is, no more excuses; financial and lifestyle freedom is out there, waiting for you.

And we’ve laid out a ton of ideas and resources to help you make the choice to finally start your online business.

Next year won’t come.

Tomorrow won’t come.

By picking one of the online business ideas above and putting in some good old-fashioned hard work, you could that cliche person hanging out on the beach in Honduras while having fun with your business and making money online.

We think that’d be pretty dang awesome!

And if you found this list super helpful and know someone else who’s been dragging their feet with the online business thing, share this post to help get them going too!