How To Improve Your Site’s Design in 2 Hours

We all know that websites are hugely important in business.  A well-designed site can be the difference between a thriving business and one just getting by.  However, many sites, are losing business because of their design.  And while there are so many things a business owner can do to improve their site, it’s hard to know what’s worth it.  

 
If you’re in that boat, you’re in luck.  This is a guide to the aspects of site design that pull the most weight when it comes to the quality of your site; focus on these few key areas and you’ll be able to drastically improve your site in a few hours or less.  
 

Table of Contents

Here’s what we’re going to cover:
 

  • Color Mistakes

    • Too Many Colors

    • Clashing Colors

    • Over-usage of Saturated Colors

    • How to Select Good Colors

  • White Space

  • Presenting Text in a Cleaner Way

    • Use Headings/Subheadings

    • Shorter Paragraphs!

    • Lists

  • Images

  • Fonts

  • Conclusion

 

Colors

First up is colors!  Colors are extremely important to modern sites.  We’ve all seen sites with colors so horrible we want to claw our eyes out.  
 
 
How can you make sure THAT doesn’t happen to your site?
 
First, let’s go over common mistakes people make with colors on their sites.
 
Too many Colors
 
The first mistake is people use too many colors!  Normally, a primary color and an accent color alone should be enough. 
 
“Two colors!?  Won’t that be bland and boring?”
 
You might think so, but sticking to those two colors makes your site look cleaner.  
 
You’ll also probably have some slightly different versions of your two colors, along with some grays and white.
 
Here’s an example of a good color scheme:
 
 
 
Two main colors, a slightly different shade or two, white, and a grey.  
 
Clashing Colors
 
 
You don’t want your site to look like that!  
 
Later, when we get to picking out colors, I’ll show you a great tool I use to make sure the colors I use work well together.  
 
Another easy way to fix this is to look at your colors side-by-side to see how they work together.  
 
Over-usage of strong colors
 
Highly saturated colors, like this red: , can be a bit much sometimes.  They can still be used, but they have to be handled well: don’t use highly saturated colors to cover large, unbroken portions of the site.  Look at that image above again.
 
Now don’t do that.
 
How to select good colors
 
Now we’re at the fun part: actually getting down to it and picking out colors to use.  First, it’s useful to understand the personality you’re going for.  
 
Lighter colors tend to broadcast energy and freshness, while darker blues, for instance, tend to be more corporate, stable, and serious.  
 
 
 
Once you’ve figured out the general range you’re looking in, there’s a useful site I use all the time to start finding nice colors.  
 
 
 
Colorhunt is a public repository of color palettes. You can search for a specific color, like “red,” or browse from popular palettes in the drop down menu.  
 
 
Look through the site until you find a color you’d like to use as your main color.  The palettes tend to contain colors that work well together, so you’ll also have potential accent colors there.  
 
Other useful tools:
    • Put in your base color, press “add complimentary,” and it’ll generate a nice-looking accent color for you
    • It also provides subtly different shades/hues of both your primary and accent colors
    • Hover over a color for its hex code
  • A simple color picker
    • Google “color picker” and you’ll find a simple visual tool that lets you pick colors
    • Also very useful to make slightly different shades
    • This extension lets you grab colors from any site and gives you their hex and rgb values

White Space

Now we’re on to white space!  White space, or negative space, is the space where you don’t have content.  
 
 
It turns out that what’s not on your site is just as important as what is there.  Correct white space makes everything cleaner.
 
There are a few rules of thumb to follow for correct white space:
 
  1. Have a lot
    • Most people don’t use enough white space, so err on the side of too much.  
  2. Use white space on the edges of the page – have a middle column of content
    • A place where white space can really give your site a boost is on the edges of your pages.  It’s generally a good idea to have your content mainly be in a central column on your page.  It’s easier to consume and makes everything less confusing and chaotic for the user.  A great example of this is Target’s site.  See how their main content fits into a neat little column that leaves plenty of white space at the edges.
  2. Keep white space around content even
    • Uneven white space around content looks misaligned and ill-designed.  Here’s what I mean:
 

Make your text easier to read

Often I see sites where there are huge blocks of itty-bitty text. This is a no-no!  
 
When was the last time you read a textbook and enjoyed it?  
 
Probably never, right? And yet, that’s how many people design the text on their site.  
 
Make things easy for the user; don’t make them read a textbook.  Here are a few simple ways to be easier to read than a college textbook:
 

Break it up with headings + subheadings

Use headings and subheadings to break up your content.  Headings let viewers quickly skim over your text and skip to the section they care about.  
 
Headings give people the gist of your content, and then your paragraphs can provide more depth.  
 
Use Shorter Paragraphs
 
What’s the average size paragraph I’ve been using?  Not very long, right?
 
Shorter paragraphs simply make content easier to read.  
 

Lists

Say you have a bunch of information you’re trying to convey.  How would you go about doing that in a neat and easy way?
 
Use a list!  Lists let you convey your information in a clear and easy-to-read fashion.  
 
In summary, to avoid having your site read like a textbook: 
  1. Break up your text with headings/subheadings
  2. Make your paragraphs shorter
  3. Use lists (Like this one!)  
 
 

Images

 
Images can be fantastic at making your site captivating.  Here’re a few tenets to follow to use images well.  
 
Use Good Quality Images
 
This should go without saying, but make sure the images you use on your site are sharp and good-quality.  Grainy, dark, or pixelated images will make your site seem unprofessional and sub-par.  
 
Don’t Use Generic Stock Images
 
Using generic images will make your site, well, generic. Either spend a bit more time looking for a more unique stock image, or take a picture yourself!
 
Images/Colors
 
Sometimes, the colors in an image can clash with the colors you use on your site. If that happens, it’s probably a good idea to crop and edit the image. If that isn’t enough, find a new image.  
 
In some cases, such as if you are putting text over a picture, putting a see-through dark screen over the image can help make the text easier to read while still being able to see the image.  (An example of this is the “Hi, I’m Noah Rousell” on my homepage)
 

Fonts

There are a couple easy rules you should follow when it comes to fonts.  
 
Don’t use too many; keep it simple. Similar to colors or text, keeping the font simple makes your site look clean, and by extension, well-designed. Just two or three fonts should be plenty for your site, with one font for headings and another for bodies of text.  
 
Use font pairs that go well together.  A good site for this is fontpair.co.
 
Here are a few nice font pairs that I’ve used before:
 
 
 
When it comes to fonts, pick a nice pair that’s easy to read and looks good, then be done with it.  Fonts can be pretty easy if you stick to these rules.  
 

Conclusion

Don’t despair if your site isn’t up to snuff.  Take a few hours to apply the tips in this article, and you’ll see your site dramatically improve.  
 
If you have any questions, feel free to email me, and I’ll help you out.  
 

Drop me a line and we can talk about me implementing these tips and beyond for your site.