Web Design Mistakes and How to Solve Them

Posted in Tips, Web Design • Posted on 17 Comments

Web design is such a broad field that mistakes can be spotted all over the place – it is almost impossible to deliver a product without a mistake until you undergo full testing, which not everybody has the financial power or time to do. These mistakes can range from a few pixels of padding missing to using a wrong number of fonts. Today we’ll take a look at some of the problems people make so that next time you deliver or design a product you can avoid these pitfalls. This way your products will be better overall and your design skills will be appreciated even more.

Let’s begin with the typography. With content being arguably the most important element of a webpage, a designer must have knowledge of how to make it work. Reading some typography books or tutorials is recommended, because it will improve your use of fonts and typefaces and will allow you to play with them for better results. With the right font every piece of text can be made interesting and attractive in web design. Modern designers already know the importance of typography and spend lots of hours testing new typefaces and improving their designs before delivery.

Serif – Sans-serif relation


Mixing typefaces is popular nowadays and works wonders if you know how to make it work. Mixing two different styles can create results that look very good, but pay attention to mixing serif with sans-serif fonts. While you can try your skills doing it, there is a good idea to ask for a second opinion before you propose your client a design with mixed fonts. Typography always looks good to yourself and always expresses the thing you want it to express, but always ask for another opinion. Remember it is rarely about you, but about the future visitors of your webpage.

Number of fonts


There is not much to say here, but the bottom line is don’t mix too many fonts in the same design. Having a couple of fonts to play with is much better than playing with the whole Google Web Fonts suite, because this can, and will,  disrupt the readability of your text. As a rule of thumb it is good to use the same font for content all over the webpage, and only use another one for headings, big titles and other elements. Two fonts should be enough for every matter, and keep in mind: never use more than three at a time.

Gabriel Lorin integrates multiple typefaces in his portfolio.

The Gestalt Law of Similarity shows that people tend to group objects together if they look alike. If you wish your content to be part of the same visual field, then don’t use different typefaces, because this will create the opposite effect. The same font provides good continuation to the content as well, which makes it more readable for the user, improving his experience on your webpage.

On the other side, using the same font all over your webpage might be a bit too boring and might look like a beginners work. This is why I said that two is, as a general rule of thumb, the best number of typefaces you can and should combine in your designs. Now don’t get me wrong, I’m not saying this is how it should always be, but I’ve achieved success and good results with this number all the time, so it might be worth it to give it a shot.

The best way to achieve a good result is testing and playing with fonts. I wrote a small guide on how to improve your website’s typography here, take it as a short read.

Contrast is important


Because everybody wants to be different on the internet, some designers develop interfaces using lots of colors – which is not a problem, as long as you use them wisely. Some designers play with too many colors and achieve some nice results at times (at least they think so), that they forget about having a powerful contrast between background and content. This is important because it allows the user to better read the text and doesn’t make his time on your website frustrating.

As you can see in the image below, the text on the left side, written in pure black and white, is easier to read, because it has a high contrast with the background. On the right side you can see that the content is much more difficult to read, although it is the same font type and size as in the left column. Dark grey and red do not have a high contrast with blue, therefore it is not a good choice of colors. Sure, this image shows basic and obvious mistakes and I am sure not many of you thought of using the combinations on the right side, but it is just an image that illustrates what the choice of color can turn your website into.

Now that we settled typography, fonts and colors, let’s move on to spacing. With our screens becoming bigger and bigger, there is a lot of space of play with. We do not surf the web on screens with a low 640 x 800 pixels resolution; we’re doing it on 15″+ screens now and a minimum resolution of 1024 x 768, according to the W3C. Sure, there is still the mobile screen matter, but we will discuss it another time. Right now we focus on design for desktop.

It is always good to give thought to padding, margins and general spacing between elements. This is called “working with negative space”. The best designs out there use a lot of negative space and therefore have a lot of visibility, content is distinguishable from other elements and, with a simple but smart choice of color, they are sustainable and work good on long term for all types of users.

Spacing needs to be kept consistent for it to work well, so always pay attention to the small details when designing or coding – this is a matter of pixels for both internal padding and external margins. The grid layout you decide to build upon in the beginning will help you stick with exact margins, and if you don’t use a grid system, then go and get one from here.

Now I am not saying you should waste a lot of space only because you have it, but having a cluttered design will not help either. If you don’t know where to start from, go out there and visit some webpages you like, I am pretty sure some of them work on a grid system and use a lot of negative space. Take Apple’s website for example (image below). They tend to maximize the use of white space and keep the content on the low side, but without minimizing its importance. There are never problems with hierarchy, everybody knows what is important and what’s less important and all looks organized.

Apple's webpage is a very good example on how to use negative space.

There are more sources out there where you can get a good grid system for every webpage you work on. It’s a very good idea to always build on a framework and keep building on it until you deliver the final product. By using some preset style and elements of margin, padding and spacing, you will make the work easier for you and the final website better in terms of design.

Using old tech


This should be punishable by law. Designers who still use tables (like in the beginning of the 2000’s) and still develop using Microsoft Frontpage should be banned for life. Also, old elements like animated GIFs, background music or frames should be avoided at any cost. All these things are not only out of style, but are not up to the standards of the web anymore. This will make the webpage load slower, get indexed worse or not at all and the new browsers might not even interpret your code accordingly. Technologies appear on the web all the time and it is important for every designer or developer to keep up with them. If you still have old webpages built with these elements, go back now and update them, because otherwise they will only make a bad name for yourself. Although you might aim for their past success, you don’t want to have a website like the one below, do you?

AOL's old website from the 90s shows what you should avoid using today.

Size, placing and proportion


Because now you know what a framework is and you’ve probably already tried it, I will go a bit more in depth. Size and proportion are important elements of a grid system because they tend to show the user what is important and what is not very important. The navigation bar should be placed at the top or in worst case in the sidebar, but it always has to be over the fold, because the user needs to surf around your website. It is also important to make the most important elements bigger without making the others too small. When the user loads your webpage for the first time, he shouldn’t use more than three seconds to find out what’s important there, where the navigation is, if there is a grid system, where is the content, is the content easy to read, does he know where he is in that moment and so on. There are, as you can see, many things a user needs to find out by himself in the first few seconds after he lands on a webpage, therefore aid this process by making these elements clearly stand out from each other.

The items and elements on a webpage should be easy to access. The user should not zoom, squint or attempt to work too much for finding the information he needs. He should only take a brief look and already know what and where to do.

Applied Divine Proportion

If you also heard of Golden Ration or Divine Proportion, you know that most standard designs adhere to it. Although designers deserve some credit for it, the Golden Ratio of 1 to 1.62 in a rounded form is widely used out there in the world. The Divine Proportion helps balance web design in a natural way while keeping everything in balance and make the design feel just right.

Set goals


Before starting on a design, it is always a good idea to decide what your goals are, what you want to achieve and why. Don’t ever forget this afterwards, because setting goals is important for the development process. Forgetting what your goals are will make your design hectic and less friendly. Therefore, if you need to, occasionally go back to your original goals while developing and try to see if everything still matches your ideas, otherwise change what needs to be changed. This way you will ensure your designs will always stay clean and you will always focus on the main goal.

Let’s start discussing!


With so many things to look out for in the design world, I know it is not an easy task to deliver good products, but making an effort will always pay off in the end. Sure, solving these issues might not be that easy in the beginning if you are inexperienced, but if you work on them they will come with time, trust me.
Have you ever made these mistakes, or at least some of them? Did you ever think of a smart way of solving them? Share your thoughts with us and let’s make the design world better for the more inexperienced of us.

69 Written ArticlesWebsite

Christian Vasile is an enthuziastic Romanian web designer currently living in Denmark. He is passionate for the industry and writes about design, usability, coding and freelancing and is a regular publisher here at 1WD. You can follow him on Twitter at @christianvasile or visit his web portfolio by clicking on the link above.

17 Comments Best Comments First
  • Tim

    Saturday, December 31st, 2011 07:26

    1

    “Designers who still use tables (like in the beginning of the 2000′s) … should be banned for life”

    Unfortunately, this is still a necessity when building email newsletters, which also need to be viewed on the web. We cannot throw this method out altogether.

    0
  • xpapad

    Sunday, January 1st, 2012 21:47

    8

    Writing your own “fully customizable and secure” CMS should be number one…

    0
  • Varindia

    Saturday, December 31st, 2011 13:27

    6

    Thanks for sharing the information. With the upcoming new version of each technology we need to update ourselves. I think mixing of font faces is not applicable in every cases but as per our target visitors.

    0
  • Andrew

    Saturday, December 31st, 2011 07:42

    2

    Great article, but I don’t understand the elitist attitude toward using tables. While divs should be used wherever possible, there are still some layouts that are difficult or impossible to do with the weirdness of CSS. Tables should be used sparingly, but their use is not the mark of a bad web designer.

    0
  • Bojan Živković

    Saturday, December 31st, 2011 08:02

    3

    I see some criticism for animated GIF without explanation. Whats wrong with animated GIF and why not to use them. Every browser displays animated GIF properly without any problem what we can not say for swf files.

    0
    • Rean John Uehara

      Saturday, December 31st, 2011 09:38

      5

      I’m pretty sure that a 1 minute YouTube video loads faster than a 10-framed GIF. Just my observation, or is it my internet acting up? :)

      0
      • Bojan Živković

        Saturday, December 31st, 2011 14:53

        7

        I have animated gifs on 2 of my blogs, one have more then 10 frames and loads as charm in Firefox, Chrome and IE. I really do not see any problem till now.

        0
        • Rob

          Monday, January 2nd, 2012 08:12

          11

          I have an animated gif on my website which shows the different animated baseball pin add-ons. I thought it would load faster than the swf and be compatible with tablets and iphones. It is also loaded from an Content Delivery System. I thought I was being state-of-the-art, so why not use gif? Do I seriously have to design with SWF and include redundancy for browsers and devices that cannot use flash? What about HTML 5 options?

          0
  • Pal Singh

    Saturday, December 31st, 2011 08:53

    4

    very nice and helpful article for web designer
    would surely help to improve work

    0
  • steven k

    Monday, January 2nd, 2012 02:20

    9

    Nice and concise article with some very good tips, thanks for sharing

    0
  • Farooq Siddiquee

    Monday, January 2nd, 2012 08:05

    10

    This site is really very good an d also very much convenient for us.

    0
  • Courtney

    Friday, January 6th, 2012 05:29

    16

    Great article, great tips.. tables should be used sparingly within a website. When designing for a client, websites should be clear and concise.

    0
  • Odell

    Friday, January 6th, 2012 06:17

    17

    Thanks ! It’s really a nice article.
    How’s actually the consideration for Web Application ? As I’ve heard so far, applying the web design for web site and web application is almost different.

    0
  • Christian Vasile

    Wednesday, January 4th, 2012 20:23

    15

    I totally understand all of you saying that tables are still good for e-mail newsletters, but not for the web. There is a difference between these two channels and sure, if you need to design newsletters with tables, then do it, just don’t use them for web design.

    0
  • Joe Smith

    Tuesday, January 3rd, 2012 05:10

    12

    Tables are ok. What evidence do you have that they don’t get indexed, etc …?

    0
    • Laurentiu Buica

      Wednesday, January 4th, 2012 11:14

      13

      Tables are ok when you’re creating a newsletter because div’s have a certain way to jump out of place in web browsers or email clients. Tables assures compatibility with every web browser/email client outthere.

      0
    • Claudio

      Wednesday, January 4th, 2012 13:10

      14

      Tables are ok? Well, it depends…
      If you’re talking about data tables it sure is ok, as tables main scope is to present data.
      But layout tables are generally not ok. It’s not that your tables won’t get indexed, but it will lead to accessibility issues.
      HTML 5 now allows the use of layout tables but doesn’t recommend it. And if you really can’t avoid using them, as some of you talked about newsletters, you can now indicate that you are using a layout table thanks to the “role” attribute.

      0
  • Odell

    Friday, January 6th, 2012 06:17

    17

    Thanks ! It’s really a nice article.
    How’s actually the consideration for Web Application ? As I’ve heard so far, applying the web design for web site and web application is almost different.

    0
  • Courtney

    Friday, January 6th, 2012 05:29

    16

    Great article, great tips.. tables should be used sparingly within a website. When designing for a client, websites should be clear and concise.

    0
  • Christian Vasile

    Wednesday, January 4th, 2012 20:23

    15

    I totally understand all of you saying that tables are still good for e-mail newsletters, but not for the web. There is a difference between these two channels and sure, if you need to design newsletters with tables, then do it, just don’t use them for web design.

    0
  • Joe Smith

    Tuesday, January 3rd, 2012 05:10

    12

    Tables are ok. What evidence do you have that they don’t get indexed, etc …?

    0
    • Laurentiu Buica

      Wednesday, January 4th, 2012 11:14

      13

      Tables are ok when you’re creating a newsletter because div’s have a certain way to jump out of place in web browsers or email clients. Tables assures compatibility with every web browser/email client outthere.

      0
    • Claudio

      Wednesday, January 4th, 2012 13:10

      14

      Tables are ok? Well, it depends…
      If you’re talking about data tables it sure is ok, as tables main scope is to present data.
      But layout tables are generally not ok. It’s not that your tables won’t get indexed, but it will lead to accessibility issues.
      HTML 5 now allows the use of layout tables but doesn’t recommend it. And if you really can’t avoid using them, as some of you talked about newsletters, you can now indicate that you are using a layout table thanks to the “role” attribute.

      0
  • Farooq Siddiquee

    Monday, January 2nd, 2012 08:05

    10

    This site is really very good an d also very much convenient for us.

    0
  • steven k

    Monday, January 2nd, 2012 02:20

    9

    Nice and concise article with some very good tips, thanks for sharing

    0
  • xpapad

    Sunday, January 1st, 2012 21:47

    8

    Writing your own “fully customizable and secure” CMS should be number one…

    0
  • Varindia

    Saturday, December 31st, 2011 13:27

    6

    Thanks for sharing the information. With the upcoming new version of each technology we need to update ourselves. I think mixing of font faces is not applicable in every cases but as per our target visitors.

    0
  • Pal Singh

    Saturday, December 31st, 2011 08:53

    4

    very nice and helpful article for web designer
    would surely help to improve work

    0
  • Bojan Živković

    Saturday, December 31st, 2011 08:02

    3

    I see some criticism for animated GIF without explanation. Whats wrong with animated GIF and why not to use them. Every browser displays animated GIF properly without any problem what we can not say for swf files.

    0
    • Rean John Uehara

      Saturday, December 31st, 2011 09:38

      5

      I’m pretty sure that a 1 minute YouTube video loads faster than a 10-framed GIF. Just my observation, or is it my internet acting up? :)

      0
      • Bojan Živković

        Saturday, December 31st, 2011 14:53

        7

        I have animated gifs on 2 of my blogs, one have more then 10 frames and loads as charm in Firefox, Chrome and IE. I really do not see any problem till now.

        0
        • Rob

          Monday, January 2nd, 2012 08:12

          11

          I have an animated gif on my website which shows the different animated baseball pin add-ons. I thought it would load faster than the swf and be compatible with tablets and iphones. It is also loaded from an Content Delivery System. I thought I was being state-of-the-art, so why not use gif? Do I seriously have to design with SWF and include redundancy for browsers and devices that cannot use flash? What about HTML 5 options?

          0
  • Andrew

    Saturday, December 31st, 2011 07:42

    2

    Great article, but I don’t understand the elitist attitude toward using tables. While divs should be used wherever possible, there are still some layouts that are difficult or impossible to do with the weirdness of CSS. Tables should be used sparingly, but their use is not the mark of a bad web designer.

    0
  • Tim

    Saturday, December 31st, 2011 07:26

    1

    “Designers who still use tables (like in the beginning of the 2000′s) … should be banned for life”

    Unfortunately, this is still a necessity when building email newsletters, which also need to be viewed on the web. We cannot throw this method out altogether.

    0

Comments are closed.

54.196.225.45 - unknown - unknown - US