3

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?

The first design

The redesign

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

  • 1
    Personally I think this first page looks amazing: it indeed looks outdated and oldfashioned but it also looks incredibly honest and bold, even somehow in line with recent brutalism revival. The second version looks like you're trying to force something you don't like, don't understand and don't want. I'd embrace your perception and vision for this website and added several more 90s things like animated gifs: and it'd be just perfect. Once again, personal opinion. – Sergey Kritskiy Feb 26 at 8:42
  • 1
    The tag thing would annoy the hell out of me being at the top of the page and so large. If anything it should be hidden until requested or at the bottom of the page. -- Best advice, just because you can show something, doesn't necessarily mean you must show something. The views, timestamps, little chat icons, participates ... all just superfluous information in my opinion. – Scott Feb 26 at 8:47
  • @SergeyKritskiy: Well, you guessed right - Personally I like the first design more. The second one is an attempt to make something similar to the other forums. But the strange thing is that both are evaluated equally by the visitors - outdated :D – johnfound Feb 26 at 10:31
  • @Scott: I am agree with your opinion about the tags and I have made several attempts to make them to occupy less space, but unsuccessfully because the tags are important part of the navigation system. Can you give some more specific advise about how to make them more compact, but still to keep them easy accessible. – johnfound Feb 26 at 13:47
  • Simply a hidden div with an "expand" option to slide open and show the tags. – Scott Feb 26 at 16:58
10
+100

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.

enter image description here

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.

enter image description here

when tags are expanded....

enter image description here

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

enter image description here

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.

| improve this answer | |
  • Great answer that illustrates the problems very well! But here is one inaccuracy (and it is another fault of my UI design) - the "Public" and "Limited" are the type of the threads, not the tags. There are two domains of threads in the forum - threads that can be seen by everyone and threads that can be seen only by the invited users (kind of extended PM). The tags are always valid for the both domains. So, do you think there should be simply third button "Tags" to expand the tags list, or "Public" and "Limited" should be separated somehow because they have totally different function? – johnfound Feb 29 at 7:01
  • Yes @johnfound in that case I'd change the word "Tags:" to a third button that expands the tag area. I would probably also add some sort of identifier for the "limited" threads. Like, perhaps a colored (yellow or blue) 2-3px border on the left side of the thread boxes for "limited" threads. Assuming some users see both Pubic and Limited threads at the same time. – Scott Feb 29 at 7:21
  • And perhaps move the tags button to the right side of that line, before the SQL Console button. I am just guessing though since I don't really know the full functionality of everything or how often a user may access those specific UI items. Rearranging the "new thread" button line was intentional based upon most used buttons. – Scott Feb 29 at 7:28
  • No, the Public and Limited domains are totally separated (for privacy reasons) The user can't see both at the same time. Maybe something global should be used as indicator - for example the whole page background color. BTW, the buttons "SQL Console" and "Settings" are administrator tools. Most of the users never see them at all. – johnfound Feb 29 at 7:43
  • Clearly much more editing can be done based upon overall usage @johnfound I'm not really interested in designing your site for free :) I think I've provided a great head start though or at least a good jumping off point. – Scott Feb 29 at 20:34
7

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.

| improve this answer | |
  • Could someone tell SE that underlines are out of date ...please?? ;) – Tetsujin Feb 26 at 8:33
  • The use of Bootstrap defaults in the design scream "designed by a developer" – Zach Saucier Feb 28 at 14:12
  • @Tetsujin Given the low contrast and differentiability of links in posts across SE, I am very glad that links have underlines. It's hard to see a link in a block of text, especially when it's been visited. – Zach Saucier Feb 28 at 14:13
  • @ZachSaucier - what is "Bootstrap defaults"? – johnfound Feb 28 at 14:19
  • @johnfound getbootstrap.com – Zach Saucier Feb 28 at 14:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.