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”.
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.