I would typically mark this type of question as "community wiki" but since that isn't an option I will just ask it.

I am looking for your input on the current design of this site. If you were handed this site as a web or graphic designer what are the first three things you would do with the site to improve its look and usability ?

Here are my thoughts:

1.) Improve balance by moving to a more right aligned designed with best us of the white space 2.) Improve color theme but I am not sure what to use yet 3.) Take better photos :-)

I will accept someone's answer for the best idea!

3 answers

danwellman 5600
2
points
This was chosen as the best answer

In terms of layout, I'd say it was fine as it is - the content appears first in the main container as opposed to the side bar which is good. The only truly layout problem is that the navigation menu at the top has much less spacing at the left then it does at the right, so it doesn't line up properly above the main content. Other than that:

1) Make better use of the elements at your disposal - e.g. the main headline at the top is an image, but most of the text is in a standard font; consider changing it so that the 'West Michigan Gay Men's Chrous' is in a <h1> element, with maybe just the colourful text as the image. Also look at the typography, you should differentiate between headings and body text with different fonts; so keep your heading in the serif font, but use a sans-serif font for body text.

2) Validate your code! There are 15 problems reported by the HTML validator plugin for Firefox. Mostly these are issues such as unescaped entities, tags that are not closed correctly and proprietary atributes. Clean all these issues up and use the W3C validator to ensure the code is clean.

3) The images at the right side of the page look a little clumsy; you're using PNGs which is great, but PNGs can be of much better quality without too much of an increase in size. Make sure the corners are anti-aliased, lose the shadow on the text inside the images and consider improving the choice of colours. At the moment, the colours used in the images seem a little washed-out, almost pastel. Use something like Kuler to generate a palette of complimentary colours to use as a theme.

For bonus points, consider moving as many as the <script> elements as possible to the bottom of the <body> for better performance ;)

Answered about 7 years ago by danwellman
  • Great answer! Thank you for the input! Joseph Workman about 7 years ago
  • I must say this is a superb piece of post by dan. Well covered and very detailed! o.k.w about 7 years ago
  • no worries :D danwellman about 7 years ago
Emily G 620
1
point

The header and navigation look disconnected from the content. I would

  1. get rid of the rounded corners for the content area
  2. bring the navigation down, stretch the red across the whole header, and center the navigation over the content area
  3. do some sort or background color or border to separate the right column from the main content.

alt text

Answered about 7 years ago by Emily G
  • Would you keep the lines on the sides of the main div ? Joseph Workman about 7 years ago
  • I'd try it with and without - just x-out the background statement in the css. It kind of depends on if you are going to keep the white background and drop shadow for the content area. Emily G about 7 years ago
  • I like the lines - it makes the content look like it's coming out of the page as if presented closer to me to read it. Jim Sewell about 7 years ago
0
points

Youe menu bar wraps to a second line, which is something you definitely want to avoid. The spacing between links is excessive, and it looks as though the spacing is determined by the width of the dropdown menus, which is not normal for a horizontal menu.

Serif is fine, but Times New Roman really is a horrible screen font. I would go for a font stack with the likes of Palatino or one of the new Vista serif fonts. Google font stack to learn about the importance of specifying fonts which give options on all operating systems (and a generic family). The "Join our chorus" and Donate buttons are both part of your site, so I'd group them together rather than split by the social network links. There is just too much disparity of design in those four buttons. I would also colour your headings, and your font stack may well vary from your body one.

Lastly, it seems strange to have an empty "coming events" box when the content to the left of it is a list of coming events.

Answered about 7 years ago by Richard Grevers
  • The Coming events box is written by a plug-in that is broken :-) What browser are you using I am not able to get the menu bar to wrap to a second line. I love the idea of changing the font stack thank you! Joseph Workman about 7 years ago