Top 10 Mistakes that Make your Website Look Unprofessional

  •  5 Comments

Building your own website can seem like a good idea for money-strapped entrepreneurs. You can just get a designer on board later on, when your startup gains some ground, then you’ll worry about insignificant things like that.

Right?

Actually, design can prove to be much more important for your fledgling business than you may imagine. When you run an online business, visitors’ judgements of it always depend on tiny details in your design.

Customers are distracted. They trust a few major brands already. Why should they suddenly start trusting you? Unless you catch them within the first few seconds, they’re out.

Ultimately, it’s the tiniest details that make the most difference. But these details must be carefully examined and fixed, if you are to build a trustworthy brand and build revenue. In this post, I’ll talk about common web design errors that amateur designers make. Even if you have limited design abilities, you’ll be able to recognize some of the common mistakes that may have also crept into your web design.

Note: the examples used in this post are startups that specifically asked for feedback on their respective websites.

1. Improper Use of Template

Improper Use of Template

I don’t condone using templates for large businesses, but I can see the need for them in small, bootstrapped startups. However if you end up using one, it’s a good idea to get a designer to properly customize it to your branding. You may even end up with a pretty good product.

A common problem on websites built with pre-designed templates is a weak visual connection between the logo and the rest of the website. There will be colours used in the logo that aren’t repeated anywhere on the website, or fonts that don’t fit well with ones used in the site.

If you’re saving on branding development package, at least make sure that the template is not obvious.

2. Using Default Bootstrap Look

A different, but equally horrifying error is using the default Bootstrap design for your company website.You’re not fooling anyone by using Open Sans. It’s hard to distinguish between all the website that are using the same design and it’s hurting your brand.

One giveaway that your site is built with Bootstrap is Font Awesome. It has (like Bootstrap) gained massive popularity due to its exhaustive library of basically all icons you could possibly want with a consistent visual language. And using it as a helpful addition to complex interfaces if perfectly fine.

Surely, your app’s benefits are more original than three generic icons? Why not try finding another, more detailed icon set to illustrate your main selling points or — wild idea — get an illustrator to do it for you?

3. Typography Contrast Issues

Typography Contrast Issues

Fonts are a much bigger deal than most non-designers realize. They will make or break your entire design, even though they are just “letters”.

A common problem on “home-made” web designs is that there is too little contrast between headline and body fonts. Just implementing some size variation mostly doesn’t cut it. Try using a bolder weight for your headline font, and make it very obviously more important than the rest of the text. This will help with hierarchy and gently guide the eye through the website.

4. Using Dark Backgrounds

Using Dark Backgrounds

Background color covers the largest part of your website, so better choose it carefully.

As a rule of thumb, entirely black websites almost never look good, unless they’re professionally designed. White color is a safe bet, but even more designers use very light gray. Be aware that the darker the gray, the worse is readability of black letters on this background. It’s best to stay below 15% of black in gray to keep the design light.

5. Multiple Equal Calls to Action

Multiple Equal Calls to Action

Each page on your website should only have one main call to action. Visitors are confused — if you don’t give them a single action to complete, they will likely take a longer time to make a decision and then to act on it. They may even leave because of this percieved effort required!

Make sure to eliminate as many calls to action as possible. Make it easy for people to take action without much thinking. Whether it be a sign up button or selecting a plan, make it obvious with graphical accents which is the action you want them to take, while making the rest of options more bland and unappealing.

6. Alignment and Spacing Problems

Alignment and Spacing Problems

Spacing is hard. Leaving enough, but not too much white space around elements is probably the hardest part of figuring out design. But it can be simplified with a few rules. First, make sure all elements are properly grouped together, second, leave enough white space around those groups.

7. Unprofessional Copy

Unprofessional Copy

Writing well is hard, but it’s necessary to get your point across on the internet. Especially if you’re trying to sell something, you’ll need to make sure your copy is easy to understand, and have it checked by the proofreader to fix any spelling mistakes.

I oftentimes see awkward sentences in the website copy that seems to have been stuck there as a placeholder text from the prototype stages of design. It’s a good idea to have somebody read all the text before the site goes live.

8. Readability Issues

Readability Issues

No amount of great copy will save your business if it can’t be read. Many tiny details can be detrimental to how your text is read and, consequentially, can affect the way your company is being perceived.

Be careful to fix problems like too small line height, tiny unreadable font, or too little contrast between background and text. Even though these may not cause actual reading difficulties to most people, just the fact that these problems exist on your website make the website seem much less professional. Can you imagine Facebook with readability issues?

9. Inconsistency

Inconsistency

Your branding should ideally be very consistent. Everywhere you turn up, whether it be social media, Facebook ads, or offline, your customers should be able to immediately recognize your brand.

But let’s take a step back and first make sure that your website is consistent with itself. Have you got any legacy ul styles that are overwriting your body font? Are your logo’s colours exactly the same hex as those used on the website? Are you using the same shade everywhere or just “something similar enough”? Usually, just keeping your CSS files organized and deleting all unneeded code will fix these inconsistency problems.

10. Off-trend Design

Off-trend Design

Like it or not, we have bid adieu skeuomorphism for now and every website still using the gradient – and shadow- heavy web design is bound to look outdated. While you can get away with some 3D effect here and there, it’s best to explore your creative options inside the flat design guidelines.

So here you have it: 10 most common issues I have come across analysing a number of different startup homepages. Now go and review your website against the tips above!

By the way, I’m writing a book on how design can help entrepreneurs build their businesses. Want to be notified when it launches? Get on the list here.

Newsletter

5 Comments
  1. Nick Steele Aug 11, 1:48 am

    This is pretty opinionated material and doesn’t reflect real life. Google, Facebook, Uber, you name it, none of them followed probably a single thing on this guide when they bootstrapped and they are doing just fine.

    People, suprisingly, won’t leave your website if you have 3 buttons instead of 1, and certainly won’t leave if you have some sort of alignment or spacing issues… most designers themselves, including me don’t even care. Most people aren’t that pretentious and understand not everyone went to design school and that’s ok.

    If you are selling a widget that is in demand. People will even forgive comic sans… many people won’t even give a puck.

    Reply
    0
    • Heidi Pungartnik Aug 13, 1:55 pm

      Hey Nick, thanks for your input, even though it’s flawed in my opinion.

      I would argue that it’s foolish to bet all your money on the fact that your product is a unique snowflake that solves an important problem. New startups are established every day and oftentimes, the only way to stand out in the competition is to offer a better user experience (and UX starts with the website). Google, AirBnB, and plenty of other companies offered a better product by focusing on the design aspect of it.

      Saying

      > People, suprisingly, won’t leave your website if you have 3 buttons instead of 1

      is absolutely incorrect. There have been a number of conversion studies done that (to simplify) say that fewer the choices offered, more likely the customers are to proceed with the purchase. This is due what’s called “analysis paralysis” that confuses people to the point that they can’t make a choice right away — and that can hurt any company’s bottom line.

      Reply
      0
    • Daniel Barde Aug 13, 3:53 pm

      Nick, i really think you should re-read the title of the post, it says Top 10 Mistakes that Make your Website Look Unprofessional, not Top 10 Mistakes that Make your Website Unsuccessful. Not keeping to any of this principles does not guarantee that your product won’t succeed, today finesse matter and most of this principles mentioned were derived from most of these successful companies Google, Facebook, Uber, you name it.

      Also it is necessary to know that design has evolved, good design 5 yrs ago may not be good design today.

      If you ask me i think this is a really good post!

      Reply
      0
      • Ben Luoma Aug 18, 11:31 pm

        Daniel, I think you need to re-read the article. The section Nick is arguing against is “Multiple Equal Calls to Action” which is definitely less about being “professional looking” and more about “unsuccessful design.”

        I think you can cherry-pick many “professional looking” websites that conform to this article. And I think you certainly can follow these guidelines to design a website like Google, Facebook or Uber. Amazon is certainly professional looking yet manages to make some of these “unprofessional mistakes.”

        Heidi, you can’t say Nick is “absolutely incorrect” by citing studies on ecommerce. The type of site, industry and audience set very different expectations and can demand very different interfaces. Not all sites can strip there designs down to a single call-to-action.

        Design is subjective. “Professional looking” is subjective. Case studies are definitely subjective.

        I’m always fascinated by how quickly people define and/or adopt “best practices” based off of case studies. By no means am I discounting them, I just think that they too often and too quickly become “gospel.”

        I’ve been in so many meetings where people that want to sound like UX/UI experts will say “Sliders are bad according to many case studies.” Personally I don’t think many of them have read or seen said studies, but they heard it, thought it sounded smart, and regurgitated it. The whole time I sit quietly thinking “apple.com, the company you worship, has a huge slider on their homepage.”

        Anyway, I do think this is a nice article and certainly there is good advice here but I agree with Nick that some of this is opinionated.

        Reply
        0
        • Daniel Barde Sep 3, 11:00 am

          Hi Ben, i get what you are saying an i may have sounded a little too harsh at Nick in my last comment but let me quote a line from number five
          “if you don’t give them a single action to complete, they will likely take a longer time to make a decision and then to act on it. They may even leave because of this percieved effort required!”
          The principle of having less calls to action is to help guide user to your selling point.

          Reply
          0

Leave a Reply

*
* Minimum length: 20 characters

Download Web Design Freebies & Resources

psd

Please Confirm Your Email!