You have the niggling feeling you need to spruce up the look of your small business WordPress website—and by spruce up I mean overhaul. But where do you start? This is all so… subjective.

Let’s start with some inspiration. Let’s look at some collections of top designs. We’ll do this for two reasons. One, to get your creative juices flowing—give you some ideas you can riff off. Two, to make a point about how there really are some objective rules when it comes to web design.

Take a few minutes and check out the designs at these sites. Make note of your favorites. Take your time. I’ll be here when you get back. 

The Best Designs

WebDesign-Inspiration

Okay, you’re back from your design excursion. I’m assuming you found several designs that really struck you. You’re not too sure why. They just struck you. This is where I tell you why you liked those designs. You see, there are certain broad rules when it comes to web design. There are objective reasons one website “works” when another doesn’t.

Use a grid

Many web designers start a project by choosing a grid, a series of vertical lines across the page. These lines create Units and Gutters. Units are where you line up your content—words or pictures. Gutters are the spaces between units where you should put, well, nothing—white space (more on white space below). A common grid is a 12-unit grid. It’s handy because 12 is an even number and you can break it into three, four or six columns. When you use a grid, your website automatically lines up—and that’s pleasing to the eye. Take a look at the website we built for Rick’s Flowers and you’ll see how columns help bring order to content.

When you impose a grid on your layout you impose an order or a structure that the site visitor isn’t necessarily aware of. But they’d certainly feel something was amiss if that undergirding order/structure were not there. When you use a grid, your web page will appear thoughtful, organized, and structurally sound. Pleasing to eye eye. It will express cohesion. It will say, “we have this all under control.”

Choose your colors wisely

The most effective websites only use four or five colors—including a couple neutral colors such as white and dark grey. Where do you start? Pick a base color. First off, don’t use the base color used by your competitors. With that out of the way, the base color you choose depends a lot of the feeling you’re trying to create. There is a psychology of color:

(All this said, I often find I use a base color that is the primary color in the client’s logo, as the logo is going to displayed prominently on the home page. If you don’t have a logo, you should.)

With your base color chosen, you then create a color palette—a limited number of colors you’ll use, five at the most—implementing something known as Color Theory. You’ve probably heard of music theory: how the notes of the scale relate to and interact with one another. For example, the 12 intervals—melodic or harmonic—of the polyphonic scale. Perfect intervals become augmented when enlarged by a half-step (also known as a semi-tone) and diminished when reduced by a half-step. And so on. Color theory’s the same thing except with color—and it’s just as complicated. Hue refers to what color you’ve selected. Saturation refers to the intensity of the color—from 100 percent to grey. You can use the Color Wheel to create six different color harmonies by choosing different spots on the wheel: complimentary, split complimentary, analogous, triadic, tetradic, and monochromatic.

And so on.

There’s a reason students spend a full semester on color theory in design school! The good news is you don’t have to crack a single textbook to create a color palette. There are plenty of websites that will do it for you—for example, Adobe Color. There you can create a palette of colors that will be in keeping with your brand (or you can find a web designer who sat through all those Color Theory lectures!).

Make effective use of white space

A design that is pleasing to the eye makes effective use of white space—also known as negative space. Said differently, an effective web design—that is, one that draws readers in rather than scaring them away in mere milliseconds—will have substantial real estate on the screen where nothing is happening. No words. No pictures. Nothing. 

Negative space. 

You need to give your web design breathing room. A crowded website will communicate less effectively—even though it contains a lot of information. In the case of web design, saying less is actually saying more. 

So… make sure your web page contains enough… nothing. How much nothing? There’s no hard and fast rule, but put it this way: Whatever the amount of nothing on your page your instincts tell you to create—double that. Go outside your comfort zone. Go grab a cup of coffee and then come back and look at the page again. What perhaps seemed like too much white space at first actually gives the page a sense of balance. It will invite in readers. To see what I mean, look at the website we created for EthTech. 

Note how much negative space I used above the fold. (“Above the fold” is a term stolen from newspapers. It refers to the top half of the front page, the part of the paper that is visible in a newspaper vending machine.) Note how the headline floats in a sea of blue. Note also how the Call to Action—Attend a Training—really pops because of the ample negative space. As you scroll down the page, you’ll see all elements are given plenty of room to “breathe.” You can really see the power of white space in the section where the background is white, the section on “healthcare consumers in cyberspace.” Note how the illustrations and headlines command attention.

So now you know broad objective guidelines of web design. Now it’s time to make sure your mindset’s correct.

Other articles in this series:

Part 2.2

Website Design Starts With Your Customers In Mind

Read More

Part 2.3

The Right Image Can WOW Your Website Visitors

Read More

Part 2.4

Typography in Web Design: Different Decorative Strokes for Different Folks

Read More