Here’s the thing: there are many web design mistakes to avoid that you are probably making on your own site. So, in this post, I want to share them with you so that you can fix them up ASAP!
When DIY-ing your own site, it’s easy to get into the habit of just “doing whatever looks good” or trying to stick too much to what your template has. It can make you lose sight of what you should actually be doing on your site, not only to make sure it converts but also to make sure you’re following basic design principles.
Keep reading to learn all about the web design mistakes to avoid.
Ignoring Type Hierarchy
The first mistake is not paying attention to type hierarchy, and this refers to the way that you would read things or the order that you would read things when they’re on a website.
So for instance, you want everyone to read the title first and then the subheading, then the paragraph, and then the button at the end. That means you really want to pay attention to your font sizes here and make sure that you use that same exact set of fonts in that same order.
This means always using the same font for your headings and always using the same font for your body copy to make it really easy for everyone who visits your site to understand what they’re supposed to read.
There are so many websites that really mess up the sizing of their fonts and then also mix up the use of their fonts throughout their site. It just makes it very messy and hard to understand.
Not Getting Branding Created First
If you haven’t already done it yet, get branding created. Your branding should always be created before you design your website. This is one of the easiest web design mistakes to avoid!
When you are just starting out, it’s even helpful just to get a mini-brand created. This mini brand, at the minimum, should include a logo, type suite (with a heading, subheading, and body copy font) as well as your brand colors. Then, get a brand guide that shows you this in one easy place.
Your branding then dictates your website’s design because you’ll use that same strategy to make sure you’re emulating the very same feeling on your site. Everything has to be cohesive.
Not Having Balanced Layouts
Another common mistake is not having your website feel balanced.
If, for instance, you have a section on your site on the home page that has this huge banner image that spans across the entire top of the site. That’s totally fine because that’s centered.
Then the next section under that, you have a photo on the left side of the page and all of your text on the right. As you keep scrolling, you have another image on the left and text on the right with nothing in between those two sections… that is called an unbalanced website.
It’s unbalanced because you have too many images on the left and too much text on the right. This will make your site feel like it’s leaning too much towards the left site because it’s very image heavy on that side.
So what you want to do instead is with that second section that has the image on the left and the text on the right, you want to flop it, so it’s the other way around. That way, it’s the complete opposite of the above section where the image is on the left and the text is on the right. This helps you keep that center of balance on your website.
I hate to say this is always one of the first things I notice when I’m on a site, and I think it’s just because I have a background in layouts and publishing, and print layout. This is one of the easiest fixes you can make on your site.
Not Having a Grid System
Another common design mistake is not using a grid! Basically, a grid is something you can set up on your site to have these ruler lines that you can use to make sure everything is lining up properly.
If you scroll around our site’s pages, you’ll see pretty much everything is within the same exact grid, and that’s just because I’m super picky about that, and I want it all to be completely perfect. But obviously, there are times when you can break the grid too.
For the most part, you want to stick to your design grid just to make sure that everything looks cohesive and clean. If you break that grid too often, it’s something that people are going to notice when they’re on your website, and it can also distract them from what you’re trying to actually get them to do.
Most website platforms out there do have a grid that you can use, or you can at least be sure to use one when you’re mocking things up in Adobe XD because you can make your own grid lines in there.
Having No White Space
Another very common design mistake, which is more common among newer designers, is having no whitespace. White space is your friend when you’re a designer, and the same is true when you design websites.
That’s because it can really help stuff feel spaced out the way that it needs to be without being very cramped. Overall it gives your site a more calming feeling if that makes sense. When everything’s jumbled and on top of each other and all of your sections are interacting too much with each other, it can feel very overwhelming for the person who’s visiting your site!
Make sure that you use white space every once in a while.
Obviously, white space doesn’t necessarily have to be like a white background or anything. It literally just means using any of your plain colors from your color palette and just having nothing on top. No images, no text, no anything, just giving everything a little bit of breathing room.
Using Right-Aligned or Center-Aligned Text Too Much
Another common issue is having too much right-aligned text or center-aligned text.
As an example, when you read books, everything is left-aligned, right? That’s because it’s easier for us to read things when all of the starts of the text are completely lined up for us. So when you think about it, if something is left aligned, all of the text is starting on that same exact grid line when it is right aligned.
However, if we read something centered, we’re reading from a very messed up rag, and a rag is just the end of a line before the line break. It ends up being a little curvy, which can make it hard for you to read.
Obviously, you can read it, but it’s going to take you a little bit longer. You really want to make sure the text is left aligned as much as possible.
Again, I’m not saying it’s impossible to read or anything, but you really just have to think about making the site as easy to navigate as possible for your clients. That includes keeping track of how readable your sections are.
Having No Testimonials On Your Homepage
One of the easiest web design mistakes to avoid is regarding testimonials. You need to have a testimonial or some sort of social proof on the homepage of your website!
This is a must-have for every single website’s homepage, even if it’s just one testimonial. I think right now, we just have one on our homepage. We used to have it so it rotated through a few different ones, but this is just to immediately show, like, yes, I have worked with clients. This is what they had to say.
Of course, since it’s your site, you can pick the one that makes it very obvious how good of a service provider you are! Definitely pick one that kind of works best for your home page.
Feel free to even go through and highlight certain things and make sure, too, that your testimonials are not very long. At maximum, I like to keep them one to two sentences, and that means that you can just pick a two-sentence section of that giant testimonial to use on your site.
This is because, again, people are not likely to sit and read something that’s a huge wall of text, especially if it’s just a testimonial. They can pretty much get the whole concept of your testimonial just by reading that short little snippet about it!
Using Too Many Nav Bar Links
One of the most common mistakes I see made on a website is having too many links in the navigation bar. Of course, you can hide things with drop-downs… but I’m not even a big fan of drop-downs.
I recommend having no more than five different navigation links in your nav bar, and that’s not including your home page links. That’s just because you really want to keep it simple for the people visiting your site to see exactly what they need to see.
Also, when you name the nav links in your navigation bar, don’t make them the same as your page titles. If you have really weird page titles, make them very simple. Instead of being like, “learn all about KP” or “KP’s Life Story,” just call it the About page. Just link the word about in your navigation.
No need to write something crazy like that or people are going to be like, “what the heck?” Then it also will take up less space, so it’ll be a little bit more visually pleasing.
Of course, if people want to learn about you, they’re going to know to look for an about page. They’re not going to necessarily know to look for KP’s Life Story. Then a good workaround is if you have too many links, you can do it in a pop-up menu.
So mine, of course, right now is just a pop-out menu. There’s a little hamburger in the corner; you click it, and then it pulls up. I think I have eight links in there, so I guess I’m actually not even following my own rules right now!
But they were all linked, and I felt like were important to have linked up there. Then, of course, we have way more pages than that on our site, so all of the other ones are linked down in our footer, which is where you can put all of your other links.
Too Little Contrast Between Text & Background
Another very common issue is there not being enough contrast between the background and text on your site. You really want to be running your stuff through like a contrast checker.
Honestly, you shouldn’t even have to run it through a contrast checker all the time. You should be able to look at it and just be like, that is near impossible to read, I should not put that on my website. Just be very careful of the amount of contrast on your site because sometimes I visit a site and I’m like, I can’t even read this, so I don’t know what I’m doing on the site anymore.
Just be very careful and mindful of that, especially just for accessibility reasons. You need to make sure everything is very readable and legible and that it’s not just kind of looking like one giant blank screen with how non-contrasting everything is.
There are definitely tools out there, too, where if you want to run it through a contrast tracker, you can see how it is looking. This goes too with just being careful of the colors that you’re even using for your fonts.
We all know that using bright red hurts your eyes. So why use that so often on your website? Obviously, it’s okay if you’re using it with a very, very thick font, and it’s your header font or something, but why would you use it for body copy font? Do you know what I mean? That’s just going to hurt somebody’s eyes. So just really think about that!
Not Having an Above-the-Fold Statement
You also want to make sure that you have a very clear statement above the fold. Literally, every website that I work on, I don’t let the project end without making sure that there is an above-the-fold statement.
That’s because when people land on your site, that’s what they’re going to see first. So the above-the-fold section is just the section that people see on your website before they even have to scroll. In that section, you want to make it very clear what you do while also being attention-grabbing and then having a call to action.
So for instance, let’s say that you are a brand photographer who works with lifestyle businesses. Maybe you could say “lifestyle brand photographer for businesses who want to stand out” or something like that.
Then underneath, you could have a subhead too if you’re very location based where you could say, “photographer located in San Diego, California” or even “San Diego photographer willing to travel” or something.
Then under that, you want to make sure you have a button too that directly links people to how they can reach out to you. If someone visits your site and automatically knows they want to reach out to you, you don’t want them to have to click around tons of times to try to figure out how the heck can even contact you.
I always like to put a button that says “get in touch,” “inquire now,” “book now,” or “learn more,” or something and just link it to the contact page.
Using Too Many Button Styles
If you style your button on the home page, let’s say that it’s red and it is a pill shape and you have the texture in with a little arrow next to it on the button, then you should style them all the same way throughout your entire site.
Now, of course, if you have sales pages, that’s a different story. So, on my sales pages, each sales page kind of has its own color theme.
On my custom web design page, the buttons are green, but that’s just because the entire page is green and blue, while the rest of my site is all yellow buttons. That’s just because that makes it very easy for people to know every time they see a yellow color that they can click on it.
You want to just really kind of keep that in mind as you’re designing. Don’t bother having a million different colored buttons. I find that it can get a little bit confusing, and it makes people have to pay a little bit more close attention while you want them to almost be not mindlessly scroll.
You want to really create that repetitiveness as somebody is on your website, going along with that whole mismatch thing.
Having Too Many Fonts
Be careful of how many fonts are using. That is such a common web design mistake to avoid. Some people have seven to eight different fonts on their site! It just looks so crazy, and it makes it so hard to scroll through the site because it’s distracting on so many levels.
So I like to say keep it to three to four maximum. This means one for a heading, subheading, and body font, and then again, usually, your subheading is the same as the button. Sometimes people also have an accent font, like some sort of scripted font that they’ll use every once in a while.
Do not use too many fonts unless you 100% know what you’re doing.
Ignoring Responsiveness
Make sure that your site is 100% responsive. This means that you want it to look good on your phone, your tablet, and also your computer, and you want to check it on different computer sizes. There are tools out there that allow you to do this, but you really want to make sure that it’s looking good everywhere.
There are so many times that a site will look so good on a desktop, and when visited on a phone, for some reason, it’ll look like a jumbled mess on the phone, which is not good!
Most people are going to visit you on your phone because, let’s be honest, so many people are searching for things more so on their phone while they’re out instead of being at home. You really just want to make sure that the mobile version of your site is looking really, really good.
Luckily most page builders out there will allow you to check in on mobile. I know on Showit, you can really click like a little phone, and it’ll pop up and show you exactly what it looks like on mobile. Squarespace kind of does the same thing.
Just make sure that you are triple checking how it looks. If you ever want to double-check that everything is looking good, you can always ask family or friends.
I like to do that! Before Jessie used to work with me, I used to have her kind of look over my stuff, and I’d be like can you scroll through this and make sure the buttons are working and that it’s like looking OK and nothing looks weird?
Use your outside sources!
Having Messed-Up Rags
Do not overlook your rags; this is one of the worst web design mistakes to avoid.
A rag is a typography term that basically refers to the end of a line break in a paragraph. So, for instance, in a paragraph, every time that it switches to the new line, that is basically making up the rag. You don’t want to have a rag that’s super distracting or one that creates a diagonal.
You also want to be careful of leaving orphans. That is basically just a single word on its own line that is a no-no, just because it’s super distracting. If you have to edit your text at all just to get rid of that, do it. It is always worth it in the end.
It’s one of the things I personally always notice, and I’m sure other designers notice too.
Utilizing Display Fonts Too Often
The next one is using display fonts. Display fonts are basically fonts that are meant to be used in your logos. They usually are very ornate and decorated and kind of over the top.
They’re the ones that will have all the interesting ligatures and little swirly effects. For the most part, just don’t even use these on your site; they are so distracting.
Also, you can’t always control how those fonts are going to show up on a website, especially if it has ligatures and stuff like that. Definitely try to pay attention to how it’s looking.
There are some display fonts that aren’t super terrible when you use them, but it’s just something you want to second guess before you follow through and use one.
Tracking Lowercase Letters
The very last one is tracking lowercase letters. Tracking is just referring to the amount of space between your letters in a paragraph or a heading or anything like that. When text is all caps, you do want to track your letters, because that just makes it a lot easier to read.
Obviously, you don’t want the letters to be in a completely different universe from one another, but you do want to give it a little bit of breathing room just because it’s easier for people to read.
However, when they’re lowercase, it just makes it harder to read. Sometimes I visit sites, and there’s so much tracking on the lowercase letters. I’m just like, why? Who told you to do this? Why did you do this? It just does not create a good reading experience.
So again, really pay attention to how readable and legible everything is on your website.
That was all of the web design mistakes to avoid on your website! Hopefully you enjoyed.
Read these next:
- 15 Lessons & Tips for New Designers
- My Entrepreneurial Journey: The Story of How Inkpot Creative Came to be
- What You Need Before Hiring a Web Designer
- What to do When Your Business is Slow
- 9 One-of-a-kind Inspiring Photography Websites
KP’s design journey began in book publishing, but she fell in love with the truly limitless possibilities that web design presents. Since then, she’s been helping photographers and creatives become the no-brainer option for their dream clients before they even get on a call.
- Brand Evolution: Clients Have Evolved—Has Your Brand? - November 20, 2024
- How to Use AI in Business Authentically with Kinsey Soderberg - November 18, 2024
- How Rebranding Helped Olivia Get More Wedding Vendor Referrals from Planners - November 15, 2024
10/11/22
Published On:
Krystianna Pietrzak
