WHY YOUR WEBSITE SUCKSWEB DESIGN MISTAKES TO AVOID

DISTRACTING BACKGROUNDS• Implementing a busy background distracts the user’s attention, hides

important information, and disrespects visual hierarchy. If your background image has a higher visual impact than everything else, users won’t catch the message of your website and will leave quickly. Below is a perfect example of what NOT to do with a background.

LACK OF WHITE SPACE• White space refers to the space between elements, and it does have

nothing to do with the color. White space defines the space/distance between your site elements, providing good readability, focus, and design flow. It also gives your website a clean and professional look. Clean layout is not the same as minimalist. Think about clean as the opposite of cluttered where content is all over the place. This is not mandatory, but helps you achieve a good balance between elements.

BAD USE OF WHITE SPACE• Just looking at the image below, gives me a headache. The

quantity of information is overwhelming, but the way it is displayed is even worse. Cluttered information makes the user feel lost and unhappy. Avoid it!

BALANCE• Balance is a basic principle in design. It is directly connected to every

element, and helps you control the design flow of your page. There are two important concepts in balance – symmetrical and asymmetrical balance. With Symmetrical Balance, elements have equal weight on both sides, leading to a formal and traditional web site, however, with asymmetrical balance, elements have a different weight which leads to a different and unique layout.

IMBALANCE• The website below fails in so many ways that I could use it as example in

the remaining topics below, but let’s stay focused on this one. Do you feel the balance? Yes, you are correct, there is no balance. The left side has plenty of images plus a video of the person standing, which results in the left side having more weight than the image on the right.

BEVEL AND EMBOSS• I had to include this one. It’s really annoying to see the misuse of this

layer style. For those who are starting, I understand that you think bevel and emboss is a nice effect and it should be everywhere on your page, but it’s not. Bevel effects should be used sparingly. There are plenty of ways to transform bevel and emboss into a powerful technique, but if you don’t know how to use it, don’t use it at all.

ATTENTION TO DETAIL• If your website sucks, it’s probably because you didn’t care about the

minor things. When you think your design is complete, you need to start from the beginning and try to apply detail on every single element. As soon as you finish with detail, you need to start again and consider where it can be improved. A single stroke, light effect, or shadow makes the difference between a good and a great design. Blackberry’s website is a good example of what you can achieve by spending time with details

AVOID FLASH INTROS• Once upon a time, having a flash intro in your website would

make you feel like a star. There are plenty of great intros out there, and plenty more of really bad attempts. Nowadays, most visitors want quick access to information and when you demand them to wait, they leave. If you want an intro in your website, make sure it has a point, it adds value and that it is well made.

AVOID MUSIC• So I have my headphones on, I open several tabs, and suddenly I jump

from the chair because irritating music starts playing. I then search for the correct tab and when I find it, I search for the mute button and guess what, there isn’t one. I don’t want to mute my speakers so I close the page and I won’t return to that loud place. Loud and boring music coming from your website is really annoying, but not having a way to shut it down, is an exit ticket from your website.

USE OF COLORS• The wrong choice of colors can ruin an entire website. Contrast, saturation,

types of colors, target audience, style, etc. There are many factors you need to consider when choosing the right colors for your website. Using too many bright colors, or a similar contrast for your background and foreground elements, or even warm colors along with cool colors, you are basically forcing your visitors to leave.

BAD USE OF COLORS• If you enter this website, please be sure to wear sunglasses

• http://www.dokimos.org/ajff/

DISTRACTING ANIMATIONS• A boring design does not bring light to your visitor’s eyes, however,

having too much animation on your website brings plenty of downsides to your business. Distracting the user from the purpose of their visit ensures he doesn’t get the message and doesn’t return. If you plan to use animations on your website, make sure they are appropriate for the product you are selling or displaying.  So the rule is simple – the user can’t be distracted while he’s reading, so make sure your animation ends quickly or has a small visual impact.

CROSS BROWSING• In a perfect world, there would be no IE, people would use the same web browser

everyday, and web developers wouldn’t have headaches while coding their websites. However, in the real world, there are hundreds of web browsers and each one renders a website differently.

• “Cross-browser refers to the ability for a website, web application, HTML construct or client-side script to support all the web browsers.”

• When you start building your website, you simply can’t forget that it will render differently in Firefox than in Chrome or Internet Explorer. So in order to get consistent results on most popular browsers, you need to write clean code and follow the W3C standards.

CONFUSING NAVIGATION• Navigation should help the user to navigate your website. If it fails in that

purpose, there is no point in calling it navigation. One thing I really hate about it is the need to search for a website’s navigation or the need to figure out how a navigation system works. If you don’t tell the user how to proceed to the next page, he leaves. Your navigation should be consistent, easy to find, and intuitive. Another thing you should always try to do is to use text instead of symbols. Remember, never ask the user to think.

LABYRINTH OF INFORMATION• Although this topic title may sound weird to you, it’s a really common mistake

which I usually call the labyrinth effect, and in part, it’s also a problem related to usability. There are great websites out there with dramatic content problems. If the user has problems finding information, he will leave and won’t return. Make sure your information is easily reachable. It is also extremely important to always provide your contact information on every page of your website, and to make sure the user can easily find it.

USING IMAGES INSTEAD OF TEXT• Typography is one of the most important elements in web design, and almost

the only element that can be used both for aesthetics and text. However, its misuse can make your website bad for both the end-user and also for programmers and web designers. Make sure you choose a font that’s readable and suitable to your target audience, but you can’t also forget about the person who is in charge of the website maintenance. Using images to replace typography can be a huge mistake, especially in big projects or projects that won’t be updated by yourself.

NO IMAGE OPTIMIZATION

• If your website takes too much time to load, you lose visits and probably profit. You already know that you simply can’t resize your image in Dreamweaver or Notepad, right? The image resolution will be smaller (or bigger) but the file size will be the same, so there is no point in resizing that way. You need to resize your image with image editing software like Photoshop or Fireworks. Resizing, however, is not enough – you also need to compress the image. Depending on the image, you should compress it as much as possible, until you start seeing image quality loss. You can compress it using JPEG, PNG or GIF format.

LACK OF A CLEAR MESSAGEThe crucial element of a website is the message that’s transmitted to the user which illustrates its purpose, telling the user what the website is all about. The message should be clear and immediately recognized by the user, as soon as he sees the site. One thing you should always have in mind is that the user simply doesn’t care about you or your website, they do care about fulfilling their desires and ambitions which is why they visit your site in the first place – to help the user with his mission. The example below fails to transmit a clear message, or any message at all. I need to click on another button to figure out what the website is about. Remember, the user doesn’t care about you, so if they find another brand with a clear message they won’t think twice to exit your website

NO UPDATES• This doesn’t really make your website suck, but it

definitely helps. No one cares about a website that is extremely outdated and whose posts are from 2008. Remember that content is more important than aesthetics, so it is very important to keep your website updated as much as possible. If you have a beautiful website with no useful content, the user will leave and won’t return.