Why are these two designs considered outdated and old-fashioned?

Question

I have a project where the main important part is the back-end. But of course the front-end design is important, so I have made two different designs for the demo site.

But both designs are considered absolutely equally by the visitors: "totally outdated", "old-fashioned", and "from the 90s".

I want to change this impression, but simply can't understand what the reasons are behind such considerations.

At first I thought about the color palette on the first design. That is why I have made the second. But this changed absolutely nothing in the visitors' evaluation.

So, why are the below designs considered old-fashioned?

What do I need to change in order to make them look more contemporary?

EDIT1: In the CSS I am using the following font definition:

    font-family: Arial,Helvetica,Liberation Sans,sans-serif;

Now I realized that because I don't have Arial and Helvetica installed, the above screenshots are rendered using Liberation Sans.

So, the appearance of the site is possibly slightly different for the users with other OSes/browsers.

Here is a link to the demo web site for better evaluation. On the site, you can change the different skins from the select element in the header. The yellow/gray/red skin is named "Wasp" and the white/blue is named "Light".

Answer 1

Okay.. simply looking at the first design... This is merely my opinion....

First. The logo needs to be reworked. it is the #1 factor lending things to a "dated" or "old-fashioned" impression. It's got a very "1980s 'cheap'" feel to it reminiscent of when computers and technology first started making notable viability among consumers.

Everything is competing for user attention. If you squint your eyes or reduce the image, you'll notice the primary visual fields are the search fields, the tags, and the post information on the left. These three items are, at best, secondary items. They should not be visually prominent.

A great deal can be done to better configure hierarchy in the visuals.

Be aware.. this is merely me messing around for a few minutes.

The header/logo here are more placeholders than anything. The entire left half of the header image could be spiced up quite a bit to match a given theme.

This is using a tiered system for visuals.

• Yellow: primary clickable items or containers.
• Red: active items or containers.
• Dark grey: Secondary clickable items or containers.
• Light grey: Tertiary clickable items or containers.

With these in mind, all links would turn red on hover. Active items (which would be red) would turn dark grey on hover.

when tags are expanded....

CSS could be altered to merely change colors and header image (and announcement icon here) to create new themes.

Visuals were streamlined removing the little "chat' and "edit" icons because they added nothing. Visual prominence was emphasized via color choices and size. Navigational items were reduced and streamlined.

If you really want the little chat icons they could be placed on the left slide of the thread boxes.

Answer 2

This looks exactly like a programmer trying to design something. Unfortunatelly it does not work and it is indeed, very outdated and old-fashioned by today's aesthetics:

• overall it looks like a throwback to those times when people designed entire websites inside a <table> element. you know, there is CSS now, in case you do use CSS, well sorry, it looks like a <table> design made in 1997
• not enough whitespace: everything is sticking to something else. modern design is centered around proper distribution of whitespace
• wrong spacing on pretty much everything: add padding and more padding. then, add some more padding
• think responsive and avoid designing for outdated resolutions. the whole thing looks crammed into a 15-inch screen. think about applying all this to a mobile device screen
• too many lines: forget underlines, those are out of fashion
• too many squares: not everything needs to live in a box. you've probably heard this one before but here it is again ... THINK OUTSIDE THE BOX :)
• color scheme too basic: yellow, red, black. use more shades of gray and avoid this DDR national soccer team color combo. even those guys used a ton of whitespace back in 1990 (image source: Alamy Stock Photos)
• using 2 search boxes is very confusing and creates page overload. Look at Amazon's search box and how they use a category selector inside the search box
• use icons and remove wording from logout, settings, user profile, sql console
• page by page navigation can go under the list of topics and can be less intrusive, eg. use gray boxes, and.. remember to FORGET UNDERLINES :)
• minimize date format. who cares about seconds? use a more contemporary, human readable format like "1 hour ago", "yesterday", "3 days ago"
• remove the big chat icon before topics: there is too much repetition of a single, large object. instead, use much smaller icons for number of posts and number of views in the columns on the right

There is plenty of inspiration around, just look at the Wordpress Admin, Google Analytics and even this very forum.