It seems like everyone is playing web designer these days.
From the new WordPress site editor to website builders like Wix and Squarespace, everyone has the chance to be a web designer with little to no prior experience.
While this is good in helping business, organizations and even regular people get online with a website quickly, the challenge comes in not knowing the best web design practices.
I can’t tell you how many times I’ve gone to a self-designed website and come across a bunch of web design errors. From using fonts that are hard to read, to use incorrect color contrast to make it hard for this 20/20 user to read anything on the site to websites that just look awful, it’s a problem.
The thing is, these visual website builders aren’t going away, and they shouldn’t. For the average person, being able to create a website visually and not have to worry about HTML, CSS, PHP, JavaScript and more is great!
But if you’re going to be using one of the visual site builders, including the WordPress site editor, let’s discuss some of the best web design practices so that you can avoid the mistakes of others and create an amazing website.
Why Design Matters for Your Website
So the first thing we need to talk about is why the design of your website matters.
It plays a very crucial role in the user’s experience on your website and getting to take that next step towards becoming a customer, subscriber, client or whatever you want them to do.
It’s the first impression someone is going to get of your business, your organization or even yourself. And that first impression really matters.
A great design will draw people in and help guide them to whatever they might be looking for — whether that’s reading articles, browsing through the store, learning more about your services or converting people into customers or clients.
The design of your website really matters, which is why businesses are will to pay a lot for a great design for their site.
The Issue with Non-designers Playing Web Designer
The problem with someone playing web designer without the experience of being a web designer is that they are ultimately going to hurt their own website.
They aren’t going to know what works or doesn’t work for hte user experience. That might mean they don’t place a call to action button in the hero section (or worse, don’t have a call to action button anywhere on the page). Or they might make the wrong thing the highlight of the page instead of the thing that actually needs to be highlighted.
I’ve also seen people use color combinations that are inaccessible and make things hard to read for even a 20/20 vision person. And there are the people who bold every single thing on the page.
News flash folks: if everything is bold on the page, nothing is bold.
It just becomes way to easy for a non web designer to completely wreck the design of their website. And that’s going to hurt their website and their business.
Just a word of warning.
Best Web Design Practices for a Non-designer
Now, I’m not naive to think that the visual website builders are going away. Heck, I’m a big fan of the new site editor in WordPress. They are great tools for people to use.
So instead of completely discouraging you from using them, I want to walk you through some of the web design best practices so that you actually know what you’re doing and can make your website better instead of worse.
Remember That Functionality is Crucial
Functionality is more important the design. If people can not use your website because the design inhibits them from doing so in some way, then the design is awful and it needs to be changed.
So, make sure that your changes don’t affect the functionality of your website.
Make sure that all buttons and links are clickable and go to the page they need to go to.
Double check to make sure you’re using the right color contrast between your text and the background (we’ll dive into this deeper in a second).
And above all, just make sure that your website works. If your design changes keep people from being able to use your website, you need to revert your changes back to what they were before.
Use the Fonts and Colors That are Already Being Used on Your Website
When the web designer first designed and built your new website, they used those specific fonts and colors for a reason. So use those fonts and colors they gave you.
Don’t just go and add some random script font to your website just because you want to. It’s going to stand out way too much in a negative way on your website and make it look really amateur.
Likewise, stick to the colors the designer used on your website. If you’re colors are red, white and blue, don’t randomly use a green color on your site.
Doing any of these things will distract the readers and make your website look just plain bad.
Instead, use the colors and fonts already being used on your website for a consistent look and feel. And it will result in a better user experience.
If there’s one thing you take away from this blog post, I hope it’s that simpler is always better.
Make Sure You Have the Right Color Contrast
I mentioned this a couple of sections ago, but please make sure that you have the right color contrast between your text and your background colors.
If they don’t have the right amount of contrast, it can be really hard for users to read the text on your website.
And I don’t just mean colorblind people either. I have 20/20 vision, and I have been on websites with such poor color contrast that I had a hard time reading what they had to say and eventually bounced away from the website.
Don’t be that website.
You can use the WebAIM Color Contrast Checker to test out the contrast to make sure it’s correct. Plus, if you’re using the WordPress block and/or site editors, a warning pops up if your text and background colors don’t have the right amount of contrast.
But take that extra bit of time to make sure the color contrast is great for all users.
Don’t Bold Every Bit of Text
Another thing I mentioned earlier that I’ve seen on poorly self-designed websites is bolding every single word on the page.
I don’t understand why someone would do that.
Bolding text is used to draw attention to a certain word, phrase or single sentence that the user needs to know. For example, maybe you want to highlight that your business’ hours of operation have changed. Or maybe you want to highlight specific actions your organization takes.
Again, if you bold everything on the page, then nothing is bold.
So use the bold tool very judiciously with your text. Make sure that only the most important bits of information is bold so they will stand out more. Less is more.
Remember That the Goal is Conversions
Finally, you need to remember that the goal of your website is conversions, whatever a conversion for your site might look like.
Maybe you’re selling products, looking for subscription sign ups, getting people to fill out a lead generation form or something else.
And the design of your website needs to not impede people from making that conversion. Instead, it needs to help people take that next step.
Don’t add in a slider just because you can and you think it looks really cool when really a standard hero image, some text and a call to action button would get the job done better and quicker.
If the changes you want to make are just because you think it might make your website look better and not because it will actually help increase conversions, then those design changes aren’t going to be worth it. I promise.
How to Learn the Best Web Design Practices
Finally, I want to end by giving you some more resources if you want to learn more about web design. And if you ware going to be using a visual site editor, I highly recommend that you at least learn the basics to get a good foundation.
Take Online Courses
One of the best things you can do is to take an online course.
Most courses are paid, which can be a limiting factor. But they can really give you a great foundation for understating web design that will help your website.
LinkedIn Learning, Udemy, Bring Your Own Laptop (which is free), freeCodeCamp and OpenClassrooms are great places to start.
And Kinsta has a great, more in depth lists of where you can start to learn about web design.
Watch and Listen to Experts Online
Another thing you can do is find experts online and watch and listen to what they share.
You can just do a simple YouTube search for “beginner web design” and find a channel that interests you. Seeing how they design pages and listening to their explanations can be a great way to understand what does and doesn’t work.
And following web designers on social media can be a great way to learn as well.
Take a Look at Website Designs and Figure Out Why They Work
Another free thing you can do is to take a look at various other website designs and see why they work.
Take a look at what is really going on with those websites, and see what decisions were made to create the design. See how they built it so that you have a good user experience. Or on the flip side, see what mistakes they made so that you have a poor user experience.
But really think on why the design works or doesn’t work.
You really can learn a lot just by looking.
Trial and Error in a Sandbox
Finally, take some time to trial and error some things in a sandbox environment away from your live site.
I really think that you can learn a lot by doing and trying things out and failing. Some of my first designs were terrible, but I learned a lot with those sites. And I wouldn’t be as good as I am today without those bad sites.
Even if you’re not using WordPress, I would highly recommend using the WordPress Playground to test various design changes you can make through its site editor. Play with color contrast, see if that idea you have for a section really looks as good as you think it does and just try random things to see what works. It’s not your live website, so break things.
But really take some time to try things out, screw things up and learn in a test environment so that you find what works with web design.
Don’t Worry About the Best Web Design Practices with the Small Business Website Starter Kit
Do you want a great website for your business or organization but don’t want to have to worry about the design side of things? No problem!
The Small Business Website Starter Kit was designed for exactly what you want. We’ll work together to find a design that works perfectly for what you need. I’ll then take care of setting it up, adding in your content and adding in any extra functionality you might want, like an online store, membership setup and more!
You just get to sit back and relax while it’s all built for you. And you’ll get training and access to a knowledge base so you always know exactly what to do. And your website will come with hosting and maintenance built in.
Oh, and your new website will be over half the cost of a custom website and be built in under two weeks.
It’s the perfect way to get your business or organization online quickly and reaching a global audience.
