10 Basic Visual Web Design Mistakes

Posted in Usability, Web Design4 years ago • Written by 48 Comments

I believe all of you has so many experiences of seeing so many web design when surfing in internet. I could guarantee that you often see bad web design layout more than good one. I feel the same way too, there are a lot of websites which has bad web design & layout, so i won’t comeback & bookmark them. I will share some of my experiences of seeing basic visual web design mistakes which makes me leave those websites forever.

1. Bad Font Usage

Do you even remember when you visit a website with fancy script font that is very hard to read? Fancy script font must not be used in body text, otherwise your reader won’t be able to read anything. Use fonts that are easy to read.

Other mistake is some people use non standard font in their websites. If their reader is only a common person who don’t have so many additional fonts, they will be confused and say, “Why is the font size in this website is very small?” I experienced this when i use non standard font for my website to enhance readability. But unfortunately, it makes people complain about my website. Just use common font like Arial, Helvetica, Verdana, Georgia, or Times New Roman, which every people has in their computer.

2. No Images, Text Only

Believe me, people will be bored if they see text only & they will leave your website once they are tired of reading your ocean of words article. This is internet, not a personal development book. If you don’t have idea about what image you should add, just use any image related with your post title. Don’t leave your body text alone without any images.

3. No Paragraph On Long Articles

Even though you have inserted images on your article, you should remember to separate some sentences with a paragraph. Imagine that you are reading more than 500 words article without any paragraph on it. It’s confusing right? With some sentences separated with paragraph, people will find it easier to read your article.

4. Very Tiny Font Size

Have you ever visit a website and you have to zoom in to read the content? This is bad, make your body text at least 12pt to make sure that your body text are readable enough. If not, people will have to provide large magnifier to read your article.

5. Heavy Flash Usage

Almost any Flash usage will bring added value to your visual perception. But unfortunately, Flash usage will only make your website slower to open & it gives more chance for new visitors to leave you quickly. Reduce usage of Flash, unless it’s needed to explain something. I personally don’t really like websites which has Flash intro. They are really annoying & wasting my time.

6. Body Text Above Colorful Background

Most of good websites use plain color background to enhance its readability. If you use colorful background to make it nicer, you are absolutely wrong. It only makes people tired of reading your articles, because the body text color are blended with background image. Make your background plain & put image somewhere else where there are no text.

7. Too Many Advertisement

Have you seen a website full of banner advertisement & google adsense inside? I’m sure that you will leave that website once you have done with it, Or worse case, you will instantly hit close and move to another website. Never prioritize advertisement over content. Good websites always place advertisement in a proper places which aren’t bothering the main content of websites.

8. Unwanted Pop Ups

I always hate websites which has unstoppable pop ups. It really annoys me. I want to look for information, but the pop up interferes & wastes my time. I don’t know why, but i really hate pop ups.

9. Too Long Articles

I don’t know about you, but i don’t like too long articles. It takes you more time to write it and also make people bored to read it. Make it at most 1000 words with some image addition to make it more attractive than just a plain text. Make your words simple & understandable. Believe me, most people doesn’t like too long articles.

10. Links Color Aren’t Visible

Make sure that link color has different color with body text color. It helps your reader to identify which links they have visited and also help them not to visit the same links unintentionally.

Don’t forget to share your thoughts about the article in comment section.

2 Written ArticlesWebsite

Albert Lie is a 24 years old graphic designer from Indonesia, and also owner & main writer of AlbertLie.com | Currently specializing in graphic design and adobe photoshop. Follow Albert Lie's twitter here

48 Comments Best Comments First
  • Tom R.

    Monday, March 1st, 2010 02:18

    18

    > Just use common font like Arial, Helvetica, Verdana, Georgia, or Times New Roman, which every people has in their computer.

    Boooring. Web designers go to great pains to craft beautiful and original websites. Why would they shun one thing that can make the difference? There any many tutorials on the Web about the use of @font-face and it’s easy to create a robust font stack. “Fluid Web Typography” by Jason Cranford Teague is also a great resource for more information.

    +1
  • Sebastian Green

    Monday, March 1st, 2010 17:23

    26

    Good artical, address the basic kind of errors new designers may make or novice designer.

    Interms of custom fonts I think its fine for say headings, or areas of text that you want to draw the users attention to making them stand out from the other text on the page, however the font must be large, clear, readable and used sparingly.

    +1
    • Tom R.

      Tuesday, March 2nd, 2010 16:55

      28

      Custom doesn’t mean fancy. There are many elegant and lighly legible typefaces around, even for free.

      0
  • ebsoft

    Monday, March 1st, 2010 05:57

    21

    thank you, interesting post
    even most of them already familiar..

    0
  • Project Center

    Sunday, February 28th, 2010 19:24

    16

    Good reminders of things that most designers should be implementing in their designs.

    With so many people now accessing through mobile devices flash should def be kept off a site and fonts used should be commonly used ones.

    @ProjectCenter

    0
  • Laia

    Monday, March 1st, 2010 03:19

    15

    Great tips, but next time you should proofread it before posting! There are many spelling and grammatical errors…

    0
  • ryandc

    Monday, March 1st, 2010 03:55

    17

    I agree with Alex W.
    There’s nothing original about this post or the content, and what’s there looks rushed and scrappy.

    0
  • freshalex

    Monday, March 1st, 2010 14:36

    22

    I don’t know why flash has got such a bad reputation, I like it.

    0
    • Sridhar

      Wednesday, March 3rd, 2010 13:43

      31

      Because Flash does bad with SEO. Google can’t effectively crawl flash files as easily as htmls.

      +1
  • Jordan Walker

    Monday, March 1st, 2010 17:46

    23

    Yes, those are all very bad to see online. If only the people who create websites read more design articles. Preaching to the wrong crowd.

    0
  • Eko Setiawan

    Sunday, February 28th, 2010 13:47

    14

    Hi, this article give us a list to check before we design a theme and before we release our theme.
    Thanks…

    0
  • website ontwerp

    Sunday, February 28th, 2010 02:33

    13

    Yup you’re right on this. Flash-driven websites should be history :-)

    0
  • Ravindra

    Saturday, February 27th, 2010 12:51

    5

    good post
    I am toatally agree with Tommy’s comments

    0
  • Andrew Yates

    Saturday, February 27th, 2010 02:01

    4

    Good list of obvious things to not do.

    0
  • Paul Murray

    Saturday, February 27th, 2010 01:03

    3

    I totally agree about the Flash website section. If I open a page that uses Flash, I immediately close it if the loading is long and drawn out.

    Whilst I may be missing something useful or interesting, chances are I can find it on another site that loads instantly.

    0
  • Tommy

    Saturday, February 27th, 2010 05:48

    2

    These concepts are easily avoided by designers. The problem is getting clients to understand them too!

    0
    • Sharon

      Saturday, February 27th, 2010 13:23

      6

      Too right, clients, pah!

      0
  • Nastia

    Saturday, February 27th, 2010 05:34

    7

    Totally agree with whole list.
    I’m also can add typographic mistakes such as long text lines, short line-height, underlined words that are not links

    0
  • Michael

    Sunday, February 28th, 2010 04:00

    11

    I agree with all of these tips as well.

    With one added feature; however.

    Let’s run a spell check and proofread for grammar before publishing. This article fails that. It’s a good article, but some may doubt it because of the grammar and spelling mistakes.

    0
    • Kristi

      Monday, March 1st, 2010 03:14

      19

      Just about to say that. :)
      Grammar and spelling is the number one mistake most people make. ;)

      0
  • Jesse

    Saturday, February 27th, 2010 18:37

    10

    I hate flash. Other than that , good article for an intro

    0
  • Bobby Clark

    Saturday, February 27th, 2010 16:45

    8

    So many designers feel websites completely made up of Flash is the way to go. What they forget is that over 40% of internet users in the U.S. at least, do not have a high speed connection, and like me, they will click away after 5 seconds.

    This post lays out essentials any designer should follow.

    0
    • Albert Lie

      Saturday, February 27th, 2010 18:42

      9

      Really? I always thought that US Internet connections is one of the fastest on this world…

      0
      • Michael

        Sunday, February 28th, 2010 04:03

        12

        That’s a lie (no pun intended). We are currently ranked #12 in the world, with an average of 6 megabits down and 2 megabits up, or whatever it may be now.

        South Korea is at the top, along with Germany, Sweden (extremely fast, in my opinion), the UK.

        0
    • Kristi

      Monday, March 1st, 2010 03:15

      20

      Flash websites are up for debate. I personally steer away from it because it takes away traffic. A website should give and receive information as fast as its connection.

      0
  • Ted Goas

    Monday, March 1st, 2010 19:58

    24

    Believe me, people will be bored if they see text only & they will leave your website once they are tired of reading your ocean of words article. This is internet, not a personal development book. If you don’t have idea about what image you should add, just use any image related with your post title. Don’t leave your body text alone without any images

    Really…? Sounds like you’re advocating the use of images for decoration rather than design. And also conveniently forgetting typography design.

    0
  • sharmagee

    Saturday, February 27th, 2010 01:33

    1

    Some obvious things that we do sub-consciously, but good to see them in one place.

    0
  • Davut

    Sunday, August 7th, 2011 00:07

    42

    Hello,

    I am use it (tips on read), good post.

    Also i am share this page, my social account.

    I am following you, since today :)

    Good luck man !

    0
  • Kral

    Sunday, July 31st, 2011 23:18

    41

    Thank.
    this is very wonderful article. I agree with you. Heavy flash, Too Long Articles and Unwanted Pop Ups are very bad.

    0
  • Benten Oyunları

    Sunday, July 3rd, 2011 19:55

    40

    There are numerous grammatical errors in this article but otherwise very useful information, thank you for sharing.

    0
  • Daniel

    Friday, June 17th, 2011 03:57

    39

    My spouse and i have been absolutely thankful that Raymond managed to round up his reports because of the ideas he received out of your web site. It is now and again perplexing to just always be offering helpful hints that many many others could have been making money from. Therefore we understand we’ve got the blog owner to give thanks to for that. The type of illustrations you made, the easy blog navigation, the relationships you can help to foster – it’s got many sensational, and it is facilitating our son in addition to the family understand that subject matter is exciting, and that’s extraordinarily important. Thanks for all the pieces!

    0
  • Carroll

    Monday, September 12th, 2011 15:16

    44

    Hey there great posting , Appreciate your giving this info

    0
  • ali

    Sunday, April 22nd, 2012 10:00

    48

    Thnx. g00d 4 beginners.
    im in Iran and music and film websites have very much ads above the website. they want earn much money and it seem the they avoid users!

    0
  • Felix

    Wednesday, November 23rd, 2011 17:48

    46

    And mistake 11 is writing articles using poor English.

    Dude, take another English grammar class or two. Or have someone clean up for you. Or stick to writing in your native tongue where I’d hope you do much better.

    Just sayin’

    0
    • Rean John Uehara

      Thursday, November 24th, 2011 06:16

      47

      Grammar Nazi be hatin’. Seriously, as long as it does not impair understanding, why not give people a try at it? It’s not like you have exclusive rights for the use of the language. The world doesn’t need any more pedants. Here’s a cool video for you, Stephen Fry on language. http://www.youtube.com/watch?v=J7E-aoXLZGY

      0
  • Słownik SlovoEd - Java - Portugalski – Polski

    Wednesday, October 19th, 2011 20:27

    45

    I don’t even know how I ended up here, but I thought this post was good. I don’t know who you are but certainly you are going to a famous blogger if you aren’t already ;) Cheers!

    0
  • JoeFlash

    Friday, May 13th, 2011 20:01

    38

    RE: Very Tiny Font Size
    “make your body text at least 12pt”
    Another classic mistake with font measurements for the web, 12pt is not the same as 12px. Point sizes are generally larger than pixel sizes and correct communication of font size is very important in site design. (This site uses a default 12px font size.)

    0
  • silah oyunları

    Sunday, May 8th, 2011 21:10

    37

    Excellent site, thank you for the information, I will follow, good luck

    0
  • AlchemyCode

    Tuesday, March 2nd, 2010 09:19

    29

    Thanks for the article:) some point are really basics but some are making a point :)

    0
  • lokesh purohit

    Tuesday, March 2nd, 2010 12:15

    27

    Thank your Albertus Adrianto for sharing a helpful tips.

    Most of web developer know these tips like me but really nice article. all web developer should read this carefully before they going to start a new web project.

    i really appreciate this article and it will help us to do the best.

    Lokesh purohit

    0
  • Donny Reza

    Monday, March 1st, 2010 20:48

    25

    Yep! I almost-totally agree with you. Exception for #9. Since, sometime a writer need to write as long as possible to make it clear.

    0
  • Kyle

    Tuesday, March 9th, 2010 08:35

    32

    You really should practice your own advice, specifically #7. Terrible flashing ad at the top of the page, and a huge Adsense block BEFORE the article. C’mon, all for a few extra bucks; sellout.

    0
  • Anita E.

    Thursday, February 3rd, 2011 00:16

    36

    #7 sounds like the majority of blog sites.

    0
  • William Smith

    Monday, June 7th, 2010 06:32

    35

    There are numerous grammatical errors in this article but otherwise very useful information, thank you for sharing.

    0
  • dropship

    Monday, April 12th, 2010 08:26

    34

    Only after years of practice can you fully see the transformation of your skills. Design is a skill that takes some time to learn and experimentation only drives it forward.

    0
  • Media Dew

    Wednesday, April 7th, 2010 21:59

    33

    I think that although we see many examples of these kinds of mistakes on the web, we have to remember that we all started somewhere. Only after years of practice can you fully see the transformation of your skills. Design is a skill that takes some time to learn and experimentation only drives it forward.

    0
    • Trent

      Monday, September 5th, 2011 06:15

      43

      Hi, I also have some years experience web develop , i practiced so much , but i got some mistake above . My mistakes were:
      1. No title in web page , i didnot know web to talk about ?
      2. Broken layout in some browser , it’s very bad for me to see .
      Thanks you so much your sharing tips.

      0
  • ali

    Sunday, April 22nd, 2012 10:00

    48

    Thnx. g00d 4 beginners.
    im in Iran and music and film websites have very much ads above the website. they want earn much money and it seem the they avoid users!

    0
  • Felix

    Wednesday, November 23rd, 2011 17:48

    46

    And mistake 11 is writing articles using poor English.

    Dude, take another English grammar class or two. Or have someone clean up for you. Or stick to writing in your native tongue where I’d hope you do much better.

    Just sayin’

    0
    • Rean John Uehara

      Thursday, November 24th, 2011 06:16

      47

      Grammar Nazi be hatin’. Seriously, as long as it does not impair understanding, why not give people a try at it? It’s not like you have exclusive rights for the use of the language. The world doesn’t need any more pedants. Here’s a cool video for you, Stephen Fry on language. http://www.youtube.com/watch?v=J7E-aoXLZGY

      0
  • Słownik SlovoEd - Java - Portugalski – Polski

    Wednesday, October 19th, 2011 20:27

    45

    I don’t even know how I ended up here, but I thought this post was good. I don’t know who you are but certainly you are going to a famous blogger if you aren’t already ;) Cheers!

    0
  • Carroll

    Monday, September 12th, 2011 15:16

    44

    Hey there great posting , Appreciate your giving this info

    0
  • Davut

    Sunday, August 7th, 2011 00:07

    42

    Hello,

    I am use it (tips on read), good post.

    Also i am share this page, my social account.

    I am following you, since today :)

    Good luck man !

    0
  • Kral

    Sunday, July 31st, 2011 23:18

    41

    Thank.
    this is very wonderful article. I agree with you. Heavy flash, Too Long Articles and Unwanted Pop Ups are very bad.

    0
  • Benten Oyunları

    Sunday, July 3rd, 2011 19:55

    40

    There are numerous grammatical errors in this article but otherwise very useful information, thank you for sharing.

    0
  • Daniel

    Friday, June 17th, 2011 03:57

    39

    My spouse and i have been absolutely thankful that Raymond managed to round up his reports because of the ideas he received out of your web site. It is now and again perplexing to just always be offering helpful hints that many many others could have been making money from. Therefore we understand we’ve got the blog owner to give thanks to for that. The type of illustrations you made, the easy blog navigation, the relationships you can help to foster – it’s got many sensational, and it is facilitating our son in addition to the family understand that subject matter is exciting, and that’s extraordinarily important. Thanks for all the pieces!

    0
  • JoeFlash

    Friday, May 13th, 2011 20:01

    38

    RE: Very Tiny Font Size
    “make your body text at least 12pt”
    Another classic mistake with font measurements for the web, 12pt is not the same as 12px. Point sizes are generally larger than pixel sizes and correct communication of font size is very important in site design. (This site uses a default 12px font size.)

    0
  • silah oyunları

    Sunday, May 8th, 2011 21:10

    37

    Excellent site, thank you for the information, I will follow, good luck

    0
  • Anita E.

    Thursday, February 3rd, 2011 00:16

    36

    #7 sounds like the majority of blog sites.

    0
  • William Smith

    Monday, June 7th, 2010 06:32

    35

    There are numerous grammatical errors in this article but otherwise very useful information, thank you for sharing.

    0
  • dropship

    Monday, April 12th, 2010 08:26

    34

    Only after years of practice can you fully see the transformation of your skills. Design is a skill that takes some time to learn and experimentation only drives it forward.

    0
  • Media Dew

    Wednesday, April 7th, 2010 21:59

    33

    I think that although we see many examples of these kinds of mistakes on the web, we have to remember that we all started somewhere. Only after years of practice can you fully see the transformation of your skills. Design is a skill that takes some time to learn and experimentation only drives it forward.

    0
    • Trent

      Monday, September 5th, 2011 06:15

      43

      Hi, I also have some years experience web develop , i practiced so much , but i got some mistake above . My mistakes were:
      1. No title in web page , i didnot know web to talk about ?
      2. Broken layout in some browser , it’s very bad for me to see .
      Thanks you so much your sharing tips.

      0
  • Kyle

    Tuesday, March 9th, 2010 08:35

    32

    You really should practice your own advice, specifically #7. Terrible flashing ad at the top of the page, and a huge Adsense block BEFORE the article. C’mon, all for a few extra bucks; sellout.

    0
  • AlchemyCode

    Tuesday, March 2nd, 2010 09:19

    29

    Thanks for the article:) some point are really basics but some are making a point :)

    0
  • lokesh purohit

    Tuesday, March 2nd, 2010 12:15

    27

    Thank your Albertus Adrianto for sharing a helpful tips.

    Most of web developer know these tips like me but really nice article. all web developer should read this carefully before they going to start a new web project.

    i really appreciate this article and it will help us to do the best.

    Lokesh purohit

    0
  • Sebastian Green

    Monday, March 1st, 2010 17:23

    26

    Good artical, address the basic kind of errors new designers may make or novice designer.

    Interms of custom fonts I think its fine for say headings, or areas of text that you want to draw the users attention to making them stand out from the other text on the page, however the font must be large, clear, readable and used sparingly.

    +1
    • Tom R.

      Tuesday, March 2nd, 2010 16:55

      28

      Custom doesn’t mean fancy. There are many elegant and lighly legible typefaces around, even for free.

      0
  • Donny Reza

    Monday, March 1st, 2010 20:48

    25

    Yep! I almost-totally agree with you. Exception for #9. Since, sometime a writer need to write as long as possible to make it clear.

    0
  • Ted Goas

    Monday, March 1st, 2010 19:58

    24

    Believe me, people will be bored if they see text only & they will leave your website once they are tired of reading your ocean of words article. This is internet, not a personal development book. If you don’t have idea about what image you should add, just use any image related with your post title. Don’t leave your body text alone without any images

    Really…? Sounds like you’re advocating the use of images for decoration rather than design. And also conveniently forgetting typography design.

    0
  • Jordan Walker

    Monday, March 1st, 2010 17:46

    23

    Yes, those are all very bad to see online. If only the people who create websites read more design articles. Preaching to the wrong crowd.

    0
  • freshalex

    Monday, March 1st, 2010 14:36

    22

    I don’t know why flash has got such a bad reputation, I like it.

    0
    • Sridhar

      Wednesday, March 3rd, 2010 13:43

      31

      Because Flash does bad with SEO. Google can’t effectively crawl flash files as easily as htmls.

      +1
  • ebsoft

    Monday, March 1st, 2010 05:57

    21

    thank you, interesting post
    even most of them already familiar..

    0
  • Tom R.

    Monday, March 1st, 2010 02:18

    18

    > Just use common font like Arial, Helvetica, Verdana, Georgia, or Times New Roman, which every people has in their computer.

    Boooring. Web designers go to great pains to craft beautiful and original websites. Why would they shun one thing that can make the difference? There any many tutorials on the Web about the use of @font-face and it’s easy to create a robust font stack. “Fluid Web Typography” by Jason Cranford Teague is also a great resource for more information.

    +1
  • ryandc

    Monday, March 1st, 2010 03:55

    17

    I agree with Alex W.
    There’s nothing original about this post or the content, and what’s there looks rushed and scrappy.

    0
  • Project Center

    Sunday, February 28th, 2010 19:24

    16

    Good reminders of things that most designers should be implementing in their designs.

    With so many people now accessing through mobile devices flash should def be kept off a site and fonts used should be commonly used ones.

    @ProjectCenter

    0
  • Laia

    Monday, March 1st, 2010 03:19

    15

    Great tips, but next time you should proofread it before posting! There are many spelling and grammatical errors…

    0
  • Eko Setiawan

    Sunday, February 28th, 2010 13:47

    14

    Hi, this article give us a list to check before we design a theme and before we release our theme.
    Thanks…

    0
  • website ontwerp

    Sunday, February 28th, 2010 02:33

    13

    Yup you’re right on this. Flash-driven websites should be history :-)

    0
  • Michael

    Sunday, February 28th, 2010 04:00

    11

    I agree with all of these tips as well.

    With one added feature; however.

    Let’s run a spell check and proofread for grammar before publishing. This article fails that. It’s a good article, but some may doubt it because of the grammar and spelling mistakes.

    0
    • Kristi

      Monday, March 1st, 2010 03:14

      19

      Just about to say that. :)
      Grammar and spelling is the number one mistake most people make. ;)

      0
  • Jesse

    Saturday, February 27th, 2010 18:37

    10

    I hate flash. Other than that , good article for an intro

    0
  • Bobby Clark

    Saturday, February 27th, 2010 16:45

    8

    So many designers feel websites completely made up of Flash is the way to go. What they forget is that over 40% of internet users in the U.S. at least, do not have a high speed connection, and like me, they will click away after 5 seconds.

    This post lays out essentials any designer should follow.

    0
    • Albert Lie

      Saturday, February 27th, 2010 18:42

      9

      Really? I always thought that US Internet connections is one of the fastest on this world…

      0
      • Michael

        Sunday, February 28th, 2010 04:03

        12

        That’s a lie (no pun intended). We are currently ranked #12 in the world, with an average of 6 megabits down and 2 megabits up, or whatever it may be now.

        South Korea is at the top, along with Germany, Sweden (extremely fast, in my opinion), the UK.

        0
    • Kristi

      Monday, March 1st, 2010 03:15

      20

      Flash websites are up for debate. I personally steer away from it because it takes away traffic. A website should give and receive information as fast as its connection.

      0
  • Nastia

    Saturday, February 27th, 2010 05:34

    7

    Totally agree with whole list.
    I’m also can add typographic mistakes such as long text lines, short line-height, underlined words that are not links

    0
  • Ravindra

    Saturday, February 27th, 2010 12:51

    5

    good post
    I am toatally agree with Tommy’s comments

    0
  • Andrew Yates

    Saturday, February 27th, 2010 02:01

    4

    Good list of obvious things to not do.

    0
  • Paul Murray

    Saturday, February 27th, 2010 01:03

    3

    I totally agree about the Flash website section. If I open a page that uses Flash, I immediately close it if the loading is long and drawn out.

    Whilst I may be missing something useful or interesting, chances are I can find it on another site that loads instantly.

    0
  • Tommy

    Saturday, February 27th, 2010 05:48

    2

    These concepts are easily avoided by designers. The problem is getting clients to understand them too!

    0
    • Sharon

      Saturday, February 27th, 2010 13:23

      6

      Too right, clients, pah!

      0
  • sharmagee

    Saturday, February 27th, 2010 01:33

    1

    Some obvious things that we do sub-consciously, but good to see them in one place.

    0

Comments are closed.

54.80.185.204 - unknown - unknown - US