9 Simple Design Rules to Make Your Website More Beautiful

“I suck at design.”

I’ve heard it many times before.

I know lots of people who run websites and create great content but insist they have no design taste.

Nonsense!

I think anyone can sharpen their eye for design, but if you could use a little help, this post is for you.

In this tutorial, you’ll find 9 basic design principles you can apply to everything you do.

I’ve written these tips to be as actionable as possible so they’re easy to implement on your website.

Consult this list whenever you need to make a design choice and I promise the result will be a little more beautiful.

Let’s start with…

1. Never use colored text

Unless you know what you’re doing, colored text tends to be ugly and hard to read.

As a rule of thumb, always make your text black or white.

If you’ve got colored text on your website, you should opt to use color nearby instead.

Here’s what I mean.

Example #1

This button has blue text and a light gray background. It looks kind of flat and the text overwhelms the shape of the button:

If I flip the colors using the blue for the background and light text, it looks much better:

And while we’re talking buttons…

If your button has a colored background, it’s almost always going to look best with white text.

Black text tends to look horrible on top of color unless that color is really pale or just a lighter gray:

If you commonly use colored text within your posts, you’ll appreciate the ideas in the next example.

Example #2

As another example, you might have some colored text in a post because you want it to stand out, like this:

This text doesn’t look great because it’s blue!

There are a more aesthetically pleasing ways to get attention with color. Not to mention, certain colors (like blue) make plain text look like a link.

Another approach to get attention with color is to make the text white and the background blue:

This is a lot of color, so use sparingly!

Or you could bring the saturation waaay down so the background is very pale and then make the text black for a more subtle look:

Black text looks nice on pale backgrounds.

Or you could leave the text black and add a touch of color as a border around the text:

This is a simpler look that still gets attention.

Or you could combine a background and border:

This is another attractive way to use color.

To summarize the rules on colored text:

You should use a colored background or a colored border around text instead of changing the color of the text. Additionally, white always looks better on colored backgrounds unless the color is very pale.

Now let’s pick out the colors you’ll be using.

Just so you know, I had to write a bit of CSS to add borders to the paragraphs above. Gutenberg doesn’t have a border option yet. You can add borders already with Elementor widgets.

2. Use a color palette

Choosing colors on-the-fly is a big rookie mistake.

Whenever you apply color to your website, you should always choose a color from your palette.

By using a palette, you can simply select from your existing colors and you know the result will look nice and “on brand” without any effort.

And here’s the thing…

I’ve been a web designer for years and I still struggle with creating nice color palettes.

And that’s why I cheat 😉

I never create my own color palettes. Instead, I find a gorgeous color palette that’s already been made and then I tweak it to meet my design needs.

My secret resource for finding color palettes is Color Hunt.

This awesome website has a community of members who create and share color palettes they design.

If you browse the homepage you’ll find an endless list of beautiful palettes to choose from. Clicking on any palette will take you to its page where related palettes are listed below.

Honestly, it’s a lot of fun browsing the palettes and getting ideas and inspiration for your site.

If you already have a shade in mind, you can choose a color to start with using the search bar.

There are also pre-defined keywords available like “warm” and “cold” for finding suitable palettes.

Once you select a palette you like and implement the colors on your site, you’re going to be amazed how much of a difference it makes.

Those first two tips should trick your visitors into thinking you’re a color-wielding design master.

Now let’s talk fonts!

3. Only use 1 or 2 fonts

Colors should be selected from your palette. Fonts are similar.

You should select one or two fonts and then reuse them for everything.

Oftentimes, when WordPress users learn how to change fonts on their site, they suddenly want to use them all!

For example, I’ve seen people change the font of one paragraph to make it stand out in a post. That’s a bad idea. If you need text to stand out in a post you can:

• Increase the font weight (bold)
• Increase the font size
• Add color

When it comes to fonts, you should pick one or two for your entire site, and if you think you need more than that, consider this…

Google designed the Roboto font (which you can use too – it’s on Google Fonts), and they use this font everywhere.

They use it for Google.com, Youtube, Gmail, Google Docs, Chrome – literally all of their products use this one font for all of the text.

So if you’re convinced you need more than one font for a beautiful website, think again!

4. Use a popular sans serif font

I’ve got another shortcut for you.

Instead of browsing hundreds of fonts, I recommend you choose from the most successful fonts on the web.

This approach basically guarantees your site will look good.

To do this, visit Google Fonts, and you’ll find the trending fonts listed on the homepage.

To refine the results, click on the Categories dropdown and deselect every option except for Sans Serif.

If you pick any of the fonts listed now, your site will look awesome.

Keep in mind, the majority of the text on your website shows up in your posts and so the most important quality of the font is that it’s easy to read.

All of the most popular sans serif fonts are popular because they are both readable and attractive. And in case you were wondering…

This is what I do too!

When designing new themes, I usually go to Google Fonts and search the trending fonts for inspiration.

When I want to add a little more character into the design, I use this next tactic.

This website also uses one popular sans serif font called Proxima Nova which is available with Adobe Typekit.

5. Use a display font for headings

If you’re happy with one font then you can skip this tactic.

But if you feel like your creativity is a bit hampered by such a simple selection, here’s what you can do…

Use a display font for your site’s headings.

The first font you selected was designed to be read at small sizes, but a display font is specifically designed for large sizes (like large displays, get it?).

The thing is, display fonts are often very stylish so overusing them can make your site look garish.

Headings are the perfect place to use display fonts because:

• They’re always large
• They’re used sparingly

If you want, you can reuse the display font for your site title too (or logo).

To find a display font for your site, visit Google Fonts again, but this time, change the categories to only include display fonts, like this:

You’ll see right away from the trending fonts how much more variety there is with display fonts.

There are about 300 display fonts on Google Fonts as of now, so have fun browsing, and remember to only choose one!

Here’s another text-based design tip that will make your website more beautiful.

If you don’t know how to change the font on your website, follow this tutorial.

6. Make menu items one word

Out of all the design tips listed in this post, this one is the easiest to implement.

Take a look at the Compete Themes menu:

The menu items are proportionate and evenly spaced which makes it look nice.

When creating your menu, you should make every menu item one word. The reason comes down to spacing.

For example, look at how evenly spaced the menu items are on The New York Times.

It’s easy to browse the topics and tell each one apart.

When you add more words into a menu item, it disrupts that spacing. The menu item becomes much longer than the others and the spaces in between the words create an unevenness in the design.

In the screenshot below, I’ve added fake menu items into the NYT menu with multiple words. Look at how confusing the menu becomes:

While single-word menu items work best, it is okay to occasionally use a second word if you have to. Just make sure there is a lot more space between menu items than in between words in the menu items.

Wistia uses two words in menu items and it looks good because there is so much space between the menu items:

Shortening any long menu items will only take a few minutes and immediately make your website more attractive.

And in case you didn’t know this, you can make your menu item labels different than the page titles. This video will teach you how to create custom menus and change the menu labels:

The next few tips will help you make your content more attractive.

7. Balance text with media

If you want your site to look amazing, the content itself needs to be beautiful.

Study the content of popular websites like Buzzfeed, the Washington Post, or Bloomberg Businessweek and you’ll find the same patterns.

They constantly break up text with images, maps, videos, quotes, Tweets, and other visual elements.

I call it, the 4 paragraph rule.

When editing your posts, make sure to include a visual element about every 4 paragraphs.

The goal is to keep the content visually interesting so it doesn’t get monotonous and boring as readers scroll past plain paragraph after paragraph. Visual elements also make the content more informative and fun to read.

With practice, you’ll learn how to do this naturally while writing, but you can always skim your post after it’s done and find places to include new visuals.

To break up a long series of paragraphs, you can add:

• Images
• Blockquotes
• Videos
• Embedded Tweets
• Advertisements
• Tables
• New headings
• Lists 😉

It’s also a good idea to apply bold to important parts of your text to get attention and create more visual interest.

And just so it’s clear: you don’t have to include a visual element exactly every four paragraphs. That’s just a good approximation to use while you master this technique.

Since I’ve just told you to include lots of images in your posts, here’s a tip for doing that the right way.

8. Center-align images

Images in WordPress can have any of the following alignments:

• Right
• Left
• Center

When adding images into your posts, you should always use center alignment.

Technically, the image has “none” as its alignment before you center it and that is fine too.

Additionally, make sure the image is as wide as the post content.

This is the way I display all of my images in my posts and most publishers do it this way too.

If you choose a left or right alignment, the image “floats” to one side so the text wraps around it, like this:

The last line of text that is almost entirely below the image always looks awkward, but there’s another reason why this isn’t a popular style anymore.

It can look terrible on mobile:

Bloggers used to float images in their posts like this, but that was back when websites had one pre-defined width and were only viewed on computers.

Now your content has to adapt to screen sizes anywhere from 400px to 2,560px wide.

You’ve probably already selected a responsive theme, but your theme won’t prevent you from floating images because it’s your choice to make.

I say, center-align all your images and they’ll look great on all devices. Simple as that.

If you want a little more variety, you can use the new wide image style added in Gutenberg (requires theme support):

I’ve got one last tip to make your images and other media look great.

9. Put your media into columns

This is something I see on a lot of my theme users’ websites.

When adding multiple media items (images, audio, videos), they’ll stack them one after the next.

That works fine, but it’s not the best use of space. Users have to scroll really far to get passed the images, they can only view one image at a time, and they don’t know how many more images are left as they scroll.

If you’re inserting three or more images in a row, use a gallery.

When using a gallery instead, you can view all of the images at once without scrolling.

And I know what you’re thinking now…

“That’s nice, but I want the images to display larger than that.”

That’s what a lightbox is for. You can install a lightbox plugin and then visitors can click an image in the gallery to view a larger, fullscreen version.

Now instead of having to scroll through all of the images, visitors can see them all at once in an attractive gallery layout. Plus, when they click on an image, the lightbox displays the image larger than if it was just inserted in the post.

In other words, using a gallery gives you the best of both worlds.

The Gallery block make it easy to include image galleries, and you can use the Column block for listing columns of audio and video embeds (and any other kind of content).

The Column block just got even easier to use in WP 5.3, and you can follow this guide on adding columns to posts for the step-by-step instructions.

Whenever you find a long list of media embedded in your post, you’ll know it’s the perfect time to make use of columns.

Make a more beautiful website

With these 9 design rules, you’re ready to create a more beautiful website.

The best part is that it doesn’t take long to implement any of these principles. Simply knowing what to do is half the battle.

If you want to start off on the right foot, make sure to choose a theme that will make your content look great, and you’ll be well on your way to better aesthetics.