I have been working hard on my design this week. Yesterday I ran it through the Five Second Test site and one response was: "Honestly, it looks quite dated".

 

Is it that bad? I thought it looked good. Certainly much better than it was, IMO!

 

 

 

Web link below:

Yes it's dated, but the good news is it's a relatively easy fix.

 

Mainly what makes it look dated is what I like to call 'effects'. Things that are added to elements in an attempt to give them some depth, distance, separation etc. They need to be incredibly carefully used to work well.

 

For your site I would ;

 

Remove underline from links

Reduce header font sizes a little bit, add some spacing

Remove the border, background, drop shadow and inner shadow from various content boxes.

Give the whole sidebar a background colour.

 

Not everything needs its own box. White space can be enough of a separator. Let the content be the main attraction, don't box it in and segregate it from other bits of content. Font-sizes, bolding and placement are much better at keeping stuff apart but also keeping a flow to the site.

What he said above!

 

Plus try using a lighter more vibrant blue. Layouts good, just needs a few tweeks!

The markup too is a bit of a mess, which may make it difficult to freshen it up. You're using tables in some areas when you aren't displaying tabular data, which is bad practise Tables should be for data only, never for layout.

 

It's also a mess because there's so much of it. You don't need 4/5 different div's for one box, it's overkill and messy. One will do the job fine! You're using div tags purely to add styling, it's just not semantic and it will be a mare to work with if somebody else took this on in the future.

 

I'd also consider re-thinking the typography. The fonts look like what you'd get in an old newspaper, check out Google's webfonts for some fresher alternatives.

 

The same with the colour scheme, the colours are largely pale and bland. Pastel-style colour schemes just don't look particularly engaging and modern any more. I'd suggest keeping your primary blue but ditching those pale backgrounds, for example the box at the top and the yellow in the sidebar.

 

Yellow is a colour I'd suggest you generally avoid, it can just look cheap.

Edited September 20, 201214 yr by brightonmike

Thanks for the feedback.

 

I have made some changes, although not all what was suggested.

 

The current picture:

 

RE the markup and DIVS - I am using Wordpress, and to get those boxes I used a plugin. I guess the plugin builds up the styles by combining layers / divs. Maybe once I have chosen a style I could combine them into one?

 

Not too keen on one sidebar background at the moment. Also worried that losing the light blue background at the moment will leave it too empty. The idea is to highlight that content and separate it on the homepage.

To improve it, i think you should do the following. Aknowledging it's dated is a good start to becoming a great designer!

• The "How to lose weight" title is to big make it smaller.
  
• Remove the border and background from the reccommended reading section and then move that content to the bottom of the page on that sidebar.
  
• Make the font smaller in your navigation
  
• The banner is the first thing your visitors will see there is to much text there in my opinion, probably do one big stricking title along with a background slider image?
  
• Give a little more breathing room at the top and bottom of your banner.
  
• Put your trending articles where your social media links are but float it to the right of the screen in 1 line.
  
• PUt your social media links above your search box.
  

Then It will look more in-date.

Edited September 20, 201214 yr by TheNickyYo

Made a few more changes. The main banner and links have been updated. Font smaller on header. Not changed nav yet.

 

New:

Edited September 20, 201214 yr by Jonbey

not sure why fonts are different now! Hmmm.

Ah, see what I did!

 

Gone for font-family: arial,sans-serif; all over now.

 

That's looking better, add a margin to the top and bottom of the banner so that there is like a 20px gap inbetween that and the How to lose weight title.

 

Possibly make the header texts slightly smaller?

The text in the banner however now looks like it is advertisment or something.

Edited September 20, 201214 yr by TheNickyYo

Thanks.

 

How to make text not look like advertising? Does it really look like an advert?

 

Time for dinner!

You have quite a large amount of content on the homepage. I would lessen that. For an effective homepage you must make it clear to the visitor what you offer, how it affects them and how they can learn more.

The site is certainly heading in the right direction, it is looking far more modern. Am not sure about the blue outline round the main banner though - maybe you could try removing it to see how it looks? Also not sure if too keen on the orange bullet points, maybe look better without them, or in a less obvious colour? Font choice is now much better now its sans-serif, but perhaps you could look at google webfonts for some more ideas. just a few suggestions..

Thanks Wendersvaloo.

Re. fonts - tried to make the most of what I have at the moment - not learned about Google web fonts yet.

Re. Orange bullet points - I find the little black ones too boring! I may increase font size so that the orange squares are better proportioned.

 

Will try without the border! Brave new changes.

OK, bigger font, slight change to li button.

 

Blue border gone. Still a bit of shading (don't tell Glowbridge!).

 

My wife is complaining that I keep changing it. I think I will let it run as is for a bit now ......

 

Maybe time to look into those Google fonts.

Just happened to have another look at this site, and it looks miles better now. It's nice to see a design evolve like that.