Bad Website Design: How Many of These Mistakes Are You Making?

Studies have shown that you have less than a second of time to persuade a new visitor to stay on your website.

In online businesses and blogging, building credibility is much harder than in real life because your readers can’t see your face. All that they can judge you by in that first second is your website design.

Large, authoritative companies have a budget to invest into sleek web design. People trust these companies not because of the design itself, but because of what these companies represent (delivering the value, consistency, tradition).

These companies have helped sleek, beautiful design become the norm for authoritative companies. If you manage to fit inside the “beautiful aesthetics club”, you will be perceived as a part of the group. It’s the ultimate growth hack.

Many entrepreneurs and bloggers try to DIY their own designs despite not doing a very good job at it. And I’m not saying that this is wrong — heck, the website you’re on right now talks about exactly that.

But after reviewing hundreds of “home-made” websites, I discovered that only a handful of mistakes create the majority of problems on a website.

These problems break down into two categories:

• Aesthetic, affecting your perceived credibility and reliability
• Usability, directly affecting your metrics like conversions and bounce rate

To help you overcome these problems on your website, I decided to analyse a bunch of amateur websites and compile a list of the most common design mistakes.

On top of that, I wrote a short handbook that will help you fix these mistakes. I first released it to my email list and the people on it were stoked. Here’s a screenshot of comments on Dropbox:

1. Boring Call to Action Button

You wrote your copy, you found the perfect photo to add to your call to action. Good.

Now take the most important step. Optimize your CTA button.

Most of the landing pages don’t actually have a call to action, which if you really think about it, doesn’t make any sense at all. But those that do, sometimes make the call to action hard to find or unnoticeable.

Stop the madness! (Kevin O’Leary, anyone? Anyone?)

I realise flat design is oh so in these days, but applying it blindly to buttons is hurting your conversions. I mean, do you really expect people to click on a transparent outlined boring ‘SIGN UP’?

2. No “Logo – Website” Connection

Bootstrapping their startups, founders often try to save money by getting their logo designed by a friend, buy it from a marketplace, or (whispers) a crowdsourcing platform.

But then they just slap it on a HTML template and are done with it. Boo.

Here’s the truth: especially as a brand new startup or blog, you don’t really need a logo. What you do need, however, is a consistent branding.

Stop treating logo design as piece of swag to stick onto your page, but rather as a part of a bigger picture (that is, your brand). Start by setting guidelines that come with the logo. Apply these guidelines to your landing page and elsewhere to make everything look consistent.

Here’s a free template to get you started on your brand’s style guidelines.

3. Inconsistency

Your customers don’t really care if you’re bootstrapping from coffee shops — that is, as long as you’re  delivering the value.

This is where small details are extremely important. Use your brand’s colours wherever you are online. Use the same fonts, if possible.

Here are a couple of ideas:

Banner ads: your banners should always have the same visual feel as the landing page. Use the same photo, colours, copy, and fonts.

Social media: Follow your branding guidelines to create cover images, profile images, and post share images.

4. Too Many Fonts

Amateur and beginner designers often like to go crazy with fonts. This is one of the biggest tells that the website wasn’t made by a professional designer.

Decide on 2 main fonts that work well together and stick to them on all branding materials — one for headlines and the other one for text blocks. Make sure they’re web-friendly and work well with the one used in your logo.

Here is a value-packed guide to pairing fonts in your designs.

One more thing: if you’re working with a high-quality WordPress template, don’t play around with the fonts too much. Typically, well-designed, professional templates include great font combinations. Stick with them.

5. Random Colours

You can often see too many different colours on sloppily made landing pages. Sometimes, logos will have one colour shade, and the rest of the website a different shade.

Set a colour scale and stick to it.

Here’s a guide to picking and pairing colours.

6. Spacing Fails

Probably the hardest of all design principles to learn is spacing and mastering whitespace. Many bad website design candidates have copy and pictures just scattered all over the place — that makes them look dodgy and much harder to scan.

Make sure to implement design principle of proximity: group related content together to create smaller “content islands”. If you use boxes to outline some stuff, make sure there’s enough room left between content and border on all sides.

I talk about spacing, colour, fonts, branding, and many other things at lengths in my book, Design for Founders. Download the free sample to get some useful tips!

7. Cheesy Stock Photos

Business owners like to show images of people shaking hands and pointing at their presentations thinking that people will perceive their companies as more reliable. The problem with this “business porn”, as Brian Massey calls stock photos, is that these photos are irrelevant and unspecific.

Nobody actually believes your team of people in business attires smiles as they hack away at the computer. All these photos do is take up the real estate of your landing page that would be much better used featuring an early interface design mock-up or photos of your team (even if taken with a smartphone). Home-made amateur stock photos can be helpful, too.

The solution is to include photos of your actual product and show actual people behind your company. Remember, people buy from people! If you can’t afford to hire a professional photographer, take the pictures yourself. That’s even easier if your product is digital — take a few screenshots to help your visitors imagine what it’s like owning your product.

8. Default Photoshop Effects

Amateur designers like to overdo their designs by playing around with CSS3 and Photoshop effects. This results in making their page look like it was made in the 90’s.

We’re lucky that this new flat design trend came around since now it’s become easier than ever to design your own website. You don’t need to know all the fancy gradients, drop shadows, and other Photoshop tools. Focus on spacing, colour, and alignment instead and leave the cheesy Photoshop effects in the past.

9. Icons From Everywhere

Grab an icon pack from here, and another one from there, and we’re all set.

Right?

Well, not really. Icons from different icon sets are in actually vastly different from one another — almost like different fonts. And you wouldn’t use different fonts in the same sentence, would you? (Correct answer is: No. You wouldn’t.)

If you can’t get or create custom illustrations, invest in a large icon/illustration pack that includes every icon you could ever want. Make sure that they match your overall graphic style.

A great resource to get high quality icon packs and fonts is MightyDeals.

10. Readability Issues

You can usually quickly assess the trustworthiness of a page is just by looking at its typography. In bad website design, you’ll normally see any (or all) of the following:

• too small or too big letters
• long lines of text
• large text blocks
• lack of hierarchy
• bad line-height

All of this makes your content a lot harder to read and you can be sure your visitors aren’t even a little bit patient.

Here’s how you fix it:

• Emphasise important information with bold
• Keep in mind that under-image captions are one of the most read parts of any page
• Use font size 16px or more
• The formula for line height is 1.6 * the font size
• Write shorter sentences
• Align text to left, not center
• Design narrow text blocks (~58 characters per line)

In the free ebook How to Fix Any Design in 10 Steps, you’ll find examples and many more tips on how to improve readability of your website.

11. Navigation

Here’s a case study where the company increased conversion rate by 100% by just removing navigation.

Landing pages is a place to convert people into becoming your customers or joining your list. It’s not meant to direct people to other parts of the site. There should be just two options: buy or leave.

Unnecessary buttons and links will confuse people and lower your conversion rates.

1. No Hierarchy

See what I did there? Implementing hierarchy lets you emphasise certain content (like call to action, or lead headline) and effectively lead visitors’ view through the page.

It’s a shame amateur web designers so often ignore this principle. Lack of structure on your page can make it harder for your visitors to scan your content — and if they don’t get their answers fast, they will leave.

First, create an ordered list of elements on your page and sort them by their importance. Then use size, color, and contrast to enforce the hierarchy. If the headline is the most important part, make it the largest and use high-contrasting black text on white background.

13. UX Issues

Say what you will about popups, they are very effective in grabbing the visitors’ emails.

However, there is one thing that I. Can’t. Stand. And that is scroll hijacking.

You know, when you try to focus on the website’s content, but instead of scrolling nicely like a normal website, it scrolls waaaay past what you were reading? It feels like a stupid trick, and you know what I will do? I will close the site.

Here’s an uber-popular post I’ve written on best practices in user interface design. Go read it!

I hope you have gotten a couple of ideas on what to fix on your home-designed landing page to take it a step further. If you’re still hesitant of taking the plunge of DIY design, be sure to grab the new short handbook on improving your designs by leaving your info here: