5 Web Design Secrets Professionals Use

Not many people can take a blank canvas and create a beautiful website. Believe me, it took me years of observation and practice to start seeing how a design could come together.

While I know that not everyone can afford to hire a professional web design agency for their first site or even an update, that doesn’t mean that you shouldn’t have a beautiful website either.

If you’re trying to DIY your website just a little bit longer and aren’t satisfied with how everything has come together (but you can’t quite put your finger on what’s wrong), I’ve got some tips for you.

These 5 web design secrets are ones that very few professionals would share with you (and they’re even issues I see in some professionally designed websites).

Ready to take your website from blah to beautiful?

Transcript

Not many people can take a blank canvas and create a beautiful website. Believe me, it took me years of observation and practice to start seeing how a design could come together.

While I know that not everyone can afford to hire a professional web design agency for their first site or even an update, that doesn’t mean that you shouldn’t have a beautiful website either.

If you’re trying to DIY your website just a little bit longer and aren’t satisfied with how everything has come together (but you can’t quite put your finger on what’s wrong), I’ve got some tips for you.

These 5 web design secrets are ones that very few professionals would share with you (and they’re even issues I see in some professionally designed websites).

Ready to take your website from blah to beautiful?

Keep reading!

1. Keep Image Styles Consistent & Point Them Towards Copy

One of the first things that can take your website from amateur to professional is the quality of the images.

I’m working with a client right now on a massive but phased redesign, and after our first phase, the client remarked how it looked nicer, and yet because a lot of the images were the same it didn’t feel all the different.

High-quality images can have a huge impact on how professional and put-together your website feels.

Make this happen and invest in a photo shoot with a local photographer. This will help you get images that are consistent in their style and are higher quality. Make sure you talk to the photographer about the style you’re looking for (bright, dark, moody, light, colorful, monochromatic, etc.) so that you can get the images that will fit your brand best.

Why Do Images Need to Feel the Same?

Consistent image styles will help your design flow throughout every page. If you’re browsing and you notice a website that has wildly different color schemes and styles, it becomes a bit jarring. The same is true for the images you use. You may not even consciously realize it, but when you use a huge variety of stock photos that all look different from each other, you can actually erode that trust just a little bit. Something will feel off.

Make the Images Work For You

Want to take those images up a notch? Point the eyeline and the body’s angle into the copy instead of away from it. When the eyeline looks towards the copy, it helps drive the browser’s eye to what you want them to read. This can help them keep reading down the page which keeps them digging into your website. If an image is pointed away from the copy, it actually can take the eye off-screen and that can become almost subconsciously disorienting.

(This is a fun game – you’ll notice this a lot more now. You’ll also notice how common it is for people to do this and distract you from that great copy they wrote.)

2. Stick to 3-5 Colors

Keep the colors to a minimum, especially if you’re not an expert in selecting colors for the screen. It’s best to stick to just 3-5 colors for your website and make sure you’re consistent in how you’re using those colors throughout.

Have you ever sat down and put together a quick brand guide for yourself? Even if it’s just using Canva’s built-in Brand feature I highly recommend you take a few minutes and decide exactly what colors you’re going to use.

If you’ve never done this, most brands have one or two main colors, a black, a white, and maybe a neutral or two. You can add one or two accent colors to round out your options. I typically tell my clients to stick with a main, an accent, and two or three neutral colors. This helps you to have the colors from your brand but without it feeling overwhelming.

Color not your thing? Use a free tool like Coolors to help you create a palette that actually works together and blends nicely.

Your Colors Need to Mean Something

You have the colors you want to use (you’ll need the hexcodes of those colors), but now you want to be consistent with how you use those colors.

Let me break this down a bit. Are the buttons on your homepage blue? Keep them blue throughout your website. Make in-text links that same blue. It teaches your browsers that that blue means they can click on it and it’s a link of some kind.

Colors and Accessibility

You also want to test any font and background color combination you’re going to use and ensure it passes web accessibility standards. We talked about this in-depth in episode 59, but you can make this easy by using WebAim’s color contrast tool.

When your colors pass these accessibility tests, you increase the legibility of your text and also make your website accessible for those with color blindness or other vision impairments.

3. Be Consistent with Headlines & Fonts

Honestly, your entire website should be consistent throughout because that will help teach your prospects how your website works and flows. But I see a lot of inconsistency with headlines sizes and font choices, so I’m highlighting it here.

What I mean is you want to ensure that your main headline of a page (this should be a Heading 1 or H1) is the largest font size you use. And that you use that same font size for all the H1’s throughout your website. Then, your section headings (Heading 2 or H2), should be smaller than the H1 and should be the same size and style throughout the website. And so on.

Consistency with your headlines helps to teach browsers what’s important on your website, but it also helps Google to understand how your content breaks down and what you’re trying to rank for.

This is an issue I see with a lot of DIY’d websites especially with builders like SquareSpace or Elementor because they don’t really encourage proper font use. Without an H1, Google doesn’t really understand what your page is about and neither does your customer.

Stick to Two Fonts

Please, please, don’t use a bunch of different fonts. When you use a whole bunch of different fonts it can feel overwhelming and messy. It’s also super easy to mess up consistency somewhere in your website because you can’t remember which of the 5 different fonts you’re using you used for that other page.

If you want to use two fonts, use one font for headlines and a complementary font for the body text and that’s it. Just two. And keep that consistent.

(Can you sense a theme here?)

4. Focus on Simplicity

I’ve heard a lot of people over the years that they felt like a website needed to be “more designed.” Or something just needs to “pop” more.

Design is great and all, but if you want your customers to actually do something on your website – simplicity rules. When a website is simple it’s far easier to use. Simplicity in the design can keep the eye moving, make it easier for your user to understand what to do next, help your website load faster, and make it far easier to make the website work on multiple device sizes.

That doesn’t mean that you can’t inject personality and design into a website. But you also don’t need all the bells and whistles. In fact, if you’re DIY’ing your website, I highly recommend sticking with simple. It’s easier to make a clean design look nice and professional versus trying to make something complex work when you don’t have graphic design skills.

5. Don’t Forget Your Mobile View

This goes with the simplicity portion honestly, but please don’t forget to check and fine-tune your mobile view. Many DIY website tools give you the ability to toggle between the mobile and desktop sizes, so don’t forget to do that. In fact, I’d even recommend you start in the mobile view and then do the desktop.

Why do I say all this? The majority of your website visits are probably going to be on mobile, but it’s more than that.

Remember that you have far less real estate to use on a mobile device. You also deal with slower load times because your prospects may be on lower data speeds. When you start with mobile, it helps you strip out the things you don’t need and keep only the components you actually need in your website. You can always add features as the website gets to larger sizes, but you don’t want it to feel like a completely different website.

The experience really needs to be the same no matter what device someone is visiting your website on.

Good Design = More Money

You can use a template from someone and think you’ve got a pretty great website, but unless you’re following these web design secrets, you’re going ot find that you actually make less money with your website.

True story.

Your copy is what is going to convert someone and convince them to buy, but your design is going to play a huge part in keeping them reading down the page.

Sure, these may feel like super simple tips, but they’ll make a huge difference in your DIY’d website, and honestly, you’ll probably look better than some of your competitors who paid a hefty price tag for theirs.

Simplicity and beauty are what sell.