How can I improve these secondary pages without a radical redesign

Question

I am more of a web developer than a web designer so I would appreciate it if I can get some tips on how to improve http://tinyurl.com/7my6g6m 's design/looks and other secondary pages on this site. Always easy to see that it isn't right, but it is harder to make design changes that improve it. Client wants to keep the homepage, but wants to improve the overall look and readability. I was considering making the pages wider and us better padding, drop the top header title block and perhaps use less top navigation items. Any tips you can give the client/me ?

Answer 1

When it's hard to figure out what to change about a design, you have not actually defined what is wrong. That it is wrong my be obvious. Why it is wrong is where you find the answers to "How do I fix this?" Exactly identifying a problem (in life, as well as design) gives you its solution.

In this case, there's a great deal to fix, but the huge, glaring problem is that the layout and the information hierarchy have no connection with one another. That enormous, sickly green box is visually the most important element on the screen. It's so dominant that it rivets the attention, but the only thing in it is a headline that fills less than one quarter of the box! Two entire sidebars contain one redundant paragraph apiece. The major navigation items from the home page are squished a into tiny, unreadable, misaligned mess.

Meanwhile, get rid of the left sidebar and expand the content div. Use the right sidebar for all those topic squares, if they're in love with them, two across or single stack. No silly text paragraph. Get rid of the gruesome yellow-green box. Mock up a nice big heading for each of your secondary page main content divs, perhaps along these lines:

Align the top nav to the left. The eye doesn't catch it when it's aligned right, so it feels awkward and looks like a mistake.

Try to convince the client that enclosing every element of the page and the page itself in a set of Chinese boxes is unnecessary. The information won't break loose or run amok through the site, visiting mayhem upon innocent subheads and frightening away visitors. It will stay where it's put.

Lighten things up. The depressingly dark scheme adds to the offense of boxing everything.

Recycle (as in mulch) the stock images. They are frequently ambiguous, like the one on the testimonial page: is that supposed to represent the company or the customers? Are they the actual people -- you and I know they're not, but the average visitor won't -- or not? At the very least, use unambiguous images or (as in my example) images that don't pretend to be the real thing.

Best solution: bring in a designer you can work with. Surely they can afford one? There are lots of smaller items that also need fixed to make the whole thing look professional, which a designer will address as a matter of course. I'd suggest to your client that their clients, and the clients they're looking for, expect a high end site. It's part of being credible, and being able to charge big bucks for your services.

Answer 2

Stuffing your navigation in the upper right corner really draws attention away from what is perhaps the most important part of the site, the navigation. Make sure your navigation is consistent across all you pages. Arrange similar pages under the one general page that lists similar subpages (e.g. under business and translation services, you can have links to "modern languages" and "business training"). Work out a site map and add better navigation to indicate to the user what section of the site they are on. (e.g., are they looking at a page under "news", "business support", or "clients"...?)

Establish where you want your navigation (home, programming, training, etc) to be. I recommend along the left hand side.

Unless you have special dedicated content you want to distinguish you don't need as many columns as you do.

Stick with a 2 column layout: left column for navigation, the right column for the header/body content.

You can merge the content currently in the lower right column (e.g. We provide comprehensive training[...]) in with the header as a subheader to give context to each section.

You can take what's currently in the left column and replace it with navigation box, currently on the top right column. Make sure you lay it out so it's link per row so a visitor can easily distinguish each link. Currently, the navigation box looks like some sort of decoration. As for the content that is not in the left column you can add that to the body text, as an introduction to what you want to talk about in that section (much like for the header, but before all the body text).

Try to work with div layers instead of static tables, it gives you much more flexibility in terms of formatting.

Identify your ideal screen resolution, and then use to do see how much space you have to work with.