If you’ve ever tried to put together a website without a designer, you know it can be tricky, and can bring up a ton of unknowns. But it shouldn’t be so hard! I love the idea of supporting entrepreneurs using my knowledge of web design, and empowering them to “DIY!”
That’s why I wanted to address the most common design mistakes I see in websites.
PLUS, I want to offer easy fixes that YOU can do yourself to take a huge leap forward. Let’s get into ‘em!
Don’t go on a Font Frenzy.
Use two typefaces: One for headings and one for body text.
One of the most common mistakes we see on sites is using wayyy too many fonts. We get it, fonts are fun!! But it can be really hard to know where to look when there are too many typefaces competing for attention.
Use fonts to tell your viewers what’s what, and where to go next.
How do you make sure your fonts make a good pair? Be sure they have lots of contrast. A good rule of thumb is to use one Serif font and one Sans Serif font. One bold font and one regular or light font. Check out some of our favorite [& free!] Google font pairings in this previous article for ideas.
White space is your BFF.
This means both horizontal AND vertical white space.
Once you think you’ve spaced it out enough, space it out a little more.
Seriously, I know you’ve probably heard this before, but white space is your BFF when it comes to your website design. Give your readers room to breathe. Again, it’s an issue of “where do I look?” If you overwhelm your viewers with a cluttered page, they’re just going to get frustrated and leave.
Margins aren’t just for middle-school book reports.
This is literally the worst mistake you could make because if you leave margins out of your web page, it looks like your site was designed by a robot… a robot with no sense of design. We’d recommend a nice and easy 100px margin on each side for desktop, and at least a 15px margin on each side for mobile.
(Note: It’s okay to ignore margins in your full-width header photos.)
Don’t let color cramp your style.
It’s easy to go overboard with color on your website. So here’s a good guideline to stick close to:
One dark neutral. One light neutral. One pop of color.
Of course, there are killer websites that don’t only use three colors, but if you’re stuck, it’s a good place to start! Once you start to exceed 4 or 5 colors… it’ll start to get distracting to viewers. Again, use color to show viewers where to go next!
Use your pop of color for all buttons and links (aka CTAs/’Calls To Action’ if you wanna get down with the lingo).
Get nitty gritty for optimum readability.
Especially if you have a text-heavy website with lots of written content, readability makes a huge difference. Best practice is to have a line-length of around 65 characters on desktop for optimum readability. They probably won’t even know why, but readers will notice that your writing is comfortable and easy to read when it’s configured this way.
Be intentional about imagery.
Something that I find makes a site look very unprofessional is random visuals.
Imagery and patterns are a great way to add interest to your site, but when they’re off-brand or have nothing to do with what the page is about… it’s definitely a turn-off. So the tip here is to think about what the VIEWER will think when they see these visuals.
For example, some clients will tell us something along the lines of “Well, I really like hiking and nature, so I wanted to put some nature-inspired patterns and photos on my site.” This is great, but their site is an e-commerce platform for selling tech equipment.
So while THEY look at their webpage and see two things they’re passionate about, a viewer will open their site and be very, very confused.
Put yourself in your audience’s shoes when choosing visuals for your site. Imagery should close the gap, not create more questions for viewers.
If you can’t read the text on the image, don’t put the text on the image.
…Yeah that’s really it. Just don’t do that. If the text doesn’t read comfortably on the image, just put it below. No biggie!
Size matters.
Let’s talk about text size. When you’re designing, it can be hard to know what’s too big and too small when it comes to typography. You may have heard 12 px is the smallest you should go… but that’s olddd news. Here are our recommendations:
Headers: 24–32px
Body Text: 14px
Bigger body text, for shorter paragraphs or callouts: 16–18px
Be consistent with your buttons.
We touched on this above but it’s arguably the most important tip for web design. If someone wants to take action on your site, it should be very easy for them to do so.
Make all of your buttons the same, stand-out color.
If it’s simply a link to the next page, or something fairly insignificant, then you may use a secondary, less stand-out color and size. But, especially for things like SIGN UP, CONTACT ME, ADD TO CART, and CHECK OUT buttons, keep them noticeable and consistent.
In terms of button size, best practice is a minimum of 44px tall. Definitely don’t go below that, or people using mobile will not be able to tap the button comfortably.
To wrap up…
As you were reading these 9 points, you may have noticed a theme.
Your web design should do 99% of the work for your visitors, making it easy and comfortable for them to navigate your site.
Your web design should eliminate any friction points that would hinder a visitor from doing what you want them to do on your site, whether that be reading through your content, getting an understanding of your services, or buying your product. Spend a little time on web design and you will most definitely see positive results and increased engagement.
