Web Design Mistakes Web Designers Should Avoid

Posted in Tips, Usability, Web Design5 months ago • Written by 1 Comment

Let’s accept it. The wonderful world of web design is not a walk in the park. There are web design mistakes to avoid. You need to create eyegasmic designs that will attract people and hook them into visiting your website frequently.

However, what makes it more challenging is that web design isn’t created for the eyes’ pleasure only. User experience, including how he gets the message or the gist of the whole design, is a priority.

Despite the our constant avoidance, we, web designers, are very vulnerable to pitfalls that hamper the practicality of the design. Most web designers, especially the starting ones, tend to make mistakes that could easily jeopardize the usage of their websites.

Good thing, your 1stWebDesigner knows of these blunders. Let’s talk about them.

Poorly Placed Search Box

Looking for a tiny bit of information on the Internet is like searching for true love. It’s there, but you have to know how and where to look. That is why search boxes are important.

  • It helps users find what their looking for.
  • It gives the user easier time in looking for previous posts.
  • The user can easily type what he’s looking for rather than scan each page in the archive.

In a world where Google equals to search, having a poorly thought search box would mean no website visitors.

pitfalls-of-web-design-you-should-avoid-01

A search box becomes a necessity as you increase content, for most visitors look for your search box, believe it or not. They usually feel irate when they are not able to find it- and that, my friend, is very bad news.

Smashing Magazine identified some problems with search box designs. In its article, Designing The Holy Search Box: Examples And Best Practices, it defined the following as frequent pitfalls:

  • Search box placed at the bottom of the page, or hidden on the navigation menu
  • Too short input fields
  • Tiny submit buttons (almost microscopic)
  • Search box is hard to find
  • Search box is placed together with the Subscription box
  • Overdesigning the box
  • Giving submit buttons ambiguous names
  • Search box with multiple submit buttons

Possible solutions:

  • Search box positioning – The most convenient position of the search box is on the top corners of the page. You can place them there to make use of the navigation space without hindering the main content.
  • Submit Button names –  Use names which people might connect the Submit button to, like “Search”, “Find” instead of “Go” and “Yes” to prevent confusion. 
  • Make your submit buttons easier- make the button be the same size as the input box.
  • Avoid placing the search section with other forms. Again, used the F-shape viewing theory. Start from the top right, (where most people would look at)
  • Be simple. Don’t overdo it.

Unreadable Text

One of the reasons why your viewers opted to look at your website instead of a printed material or a letter is they don’t understand other people’s handwriting. Some are very illegible.

This is a crucial aspect of the whole page. The content is still the undisputed champion of the Most-Important-Section-in-the-Design league. As good as your interface is, if the viewers can’t even read the content, it’s still no use.

Mistakes Include:

  • Small and unreadable fonts
  • Bad font selection
  • Poor color combination
  • Ghastly background to text complement

pitfalls-of-web-design-you-should-avoid-03

Possible Solutions

  • Body fonts (or content fonts) should be the sans-serif type, minimum size is 14px.
  • Avoid using these fonts.
  • Use Adobe Kuler for your color scheming.
  • Use uniform font sizes and know when to emphasize a text.
  • Limit your design with minimal font families.
  • Your background color or image should always be in contrast with the texts.
  • Align properly.
  • Use uniform spacing.

Try to read Readability – Making Web Pages Easy to Read

Chaos Is Everywhere

Content is the life and blood of a website. Without it, it will just remain a shallow shell. The content attracts traffic to the website and allows you to monetize and share your information. This should be the driving force why you need to organize each content properly and logically.

Here’s What You Need to Do:

  • Pick out important points in the content of your website
  • Highlight them so that the reader gets what you are trying to say.

pitfalls-of-web-design-you-should-avoid-02

Some web designers tend to design a website for the sole purpose of eye entertainment, thus, sacrificing the content. This is highlighted when the client posts some content and ends up being confused himself.

Remember the design will be put to waste if you put the content to haste. (that is a pretty good rhyme, isn’t it?)

  • Use bullets
  • Use headings and subheadings
  • Use some other organizational symbols and elements. This will avoid confusion and inaccuracy with the content.

Jordan Dick of  venturi-web-design.com said it best,

“Organizing website content like a restaurant menu”

In his article, Organizing Website Content, Jordan pointed out the following points:

  • The website content should be put in logical arrangements like a restaurant menu where each is divided into categories and sub categories.
  • Each category should group content in a panoramic sense and, then, specified in each sub category and so on.

Poor Navigation

Navigation is one of the most important parts of the web design. It should be unbroken. Your web visitors should be able to find where they are and where will they go in your web design.

Remember that the main purpose of the navigation is to act like a map and to direct and redirect the user to a particular page in the website. With it being messed up, the viewer might feel lost and opt for another link instead.

Here are the things you need to avoid:

  • Some options are not visible to the user –  If you keep on having missing links, your viewers will just assume that the link, which is actually present in your website but absent in the navigation, simply does not exist.
  • Too much flair on the navigation area – rotating nav-bars, blinking links, are unacceptable practices. Your navigation area should be consistent yet not too entertaining. The viewer should immediately identify where the navigation area is.
  • Complicated designs – your visitors should easily identify and understand your navigation area. Symbols, if used, should be treated properly to avoid confusion.

pitfalls-of-web-design-you-should-avoid-04

Possible Solutions:

  • Complete your navigation area. Put all the possible links the user will look for.
  • Place your nav-bar where the visitor will see first it. It’s very advisable to place the nav-bar on top, however, as web design trends change, this is flexible.Only one rule is absolute: place it where the visitor will clearly see it.
  • Use proper icons (for more info, read our article IconTalk)

Horizontal Scrolling

Today’s web design trends look at horizontal scrolling as an abomination. With the invention of the scroll wheel in our mouse, it has definitely solved the growing problem of vertical scrolling. However, the horizontal scrolling problem wasn’t solved- it was demolished.

Web designers should do away with this also. For developers, fit it to 1024 x 768 px.

 pitfalls-of-web-design-you-should-avoid-05

Putting a Displeasing Amount of Images 

The time when there are almost 50 GIF images in a single webpage is over. Modern web design trends discourage the use of too many images.

Why putting too many images is a no-no

  • It irritates and distracts the viewer from the main content.
  • It adds a little bit of memory in the page that you load each time a visitor views your website
  • Images make it slower to load.

Possible solution:

  •         Limit your images. That’s it.

pitfalls-of-web-design-you-should-avoid-06

Too Much Website Clutter

There are times where you just feel like you are strangled by the content. Images are placed closely to the point where you feel claustrophobic. That just means that the web designer hasn’t heard of the white space yet.

Possible solution:

  • Add some white space

Why white space is important

  • Allows the content to breathe. (Not literally, of course.)
  •  Gives the eyes some sense of relaxation and suggests cleanliness and organization of design.

pitfalls-of-web-design-you-should-avoid-07

photo by experiencing dyanamics

Conclusion

The aforementioned mistakes are very subtle and yet dangerous to fall into. It will hamper the quality of your work. Learning what these pitfalls are is just the first step. You have to apply them in your design. Yes, it will be very difficult and arduous; it takes a lot of time, but it will make you a better designer. You’ll be surprised with the results as you progress. Learn to kill these bad habits and you’ll realize that your income, your design and your view of self will totally change!

77 Written ArticlesWebsiteGoogle+

Rudolph is a geek. He loves reading: books, blogs and even nutrition facts found at the back of products. Since joining 1stwebdesigner last year, Rudolph has written several articles that concerns Typography, Wordpress, Freelance Lifehacks, Graphic Design and Showcase of Beautiful Web Designs. He also write poems, movie reviews and he puts them in his blog together with rants and some daily life updates.

One Comment
  • Jasper

    Wednesday, March 5th, 2014 06:48

    1

    Sorry, just had to say this:

    you mention in your Fonts to avoid article that using Times New Roman is lazy, and exactly in that sentence you have a double space, you lazy sod ;)

    0
  • Jasper

    Wednesday, March 5th, 2014 06:48

    1

    Sorry, just had to say this:

    you mention in your Fonts to avoid article that using Times New Roman is lazy, and exactly in that sentence you have a double space, you lazy sod ;)

    0

Comments are closed.

54.242.112.71 - unknown - unknown - US