Site Review: New design for college newspaper Web site

[toicontien]

These are the mock-ups for the new design for http://www.cm-life.com. It's the student newspaper for Central Michigan University (http://www.cmich.edu/). I've been busy and I'm pretty satisfied with what I've got, but I'd like someone to tear this design apart :D

Some links to start you out:

Home Page (http://www.cm-life.com/pages/newdesign/)

Section Page (http://www.cm-life.com/pages/newdesign/section.html)

Article Page (http://www.cm-life.com/pages/newdesign/story.html)

A little about the site:

* CSS layout, XHTML 1.0 Strict
* Columns sized in ems
* DHTML menu on front page is still accessble when JavaScript is disabled
* These pages are mock-ups, so bear in mind I've got a LOT more content on each page than would normally exist.
* Layout works in PC browsers. Works for the most part in IE5/Mac. Netscape 7.x has an issue with the DHTML menu.
* Layout is totally skinnable, including the logo, but care was given to those of you with images disabled :)

The front page bucks convention in that it's optimized for 1024 screen resolutions. I rationalized this because the front page has a lot of content to display, and it just lent itself better to a wider design. The section home pages and article pages are sized for 800 X 600 screens.

[PeOfEo]

is the red a school color?

[toicontien]

Not the exact shade, but yes. You can go to the CMU web site to see their colors. I'm not a fan of dark red or maroon, but our readers (i.e. anal retentive alumni and students) would be taken aback if the school colors weren't worked in somehow.

[PeOfEo]

I was wondering because it is not the most beautiful color in the world.

[Heavy]

Originally posted by toicontien
These are the mock-ups for the new design for http://www.cm-life.com. It's the student newspaper for Central Michigan University (http://www.cmich.edu/). I've been busy and I'm pretty satisfied with what I've got, but I'd like someone to tear this design apart :D

Some links to start you out:

Home Page (http://www.cm-life.com/pages/newdesign/)

Section Page (http://www.cm-life.com/pages/newdesign/section.html)

Article Page (http://www.cm-life.com/pages/newdesign/story.html)

A little about the site:

* CSS layout, XHTML 1.0 Strict
* Columns sized in ems
* DHTML menu on front page is still accessble when JavaScript is disabled
* These pages are mock-ups, so bear in mind I've got a LOT more content on each page than would normally exist.
* Layout works in PC browsers. Works for the most part in IE5/Mac. Netscape 7.x has an issue with the DHTML menu.
* Layout is totally skinnable, including the logo, but care was given to those of you with images disabled :)

The front page bucks convention in that it's optimized for 1024 screen resolutions. I rationalized this because the front page has a lot of content to display, and it just lent itself better to a wider design. The section home pages and article pages are sized for 800 X 600 screens.

1. Expand your color pallete. It's too monochrome. This makes it look really flat and really ameteur.
2. Lose the rounded corners you've got everywhere. It's getting amorphous looking like its melting.
3. Your page layout is too wide for the general public who will most likely be viewing your site on 17" monitors at 800x600.
4. Your navigation area on sub pages is never ending. Needs more room to breath and some visual organization.
5. I wouldn't suggest navigation being in a scrolling window on the home page. It's also too low on the page layout to be immediately seen. A news site needs the navigation menu to be as prominent and easy to find as possible.
6. Since the center of the screen is viewed first, the user will then read left to right from that point. They'll actually see your "secondary" story before the "primary" story. I suggest the navigation appear where your primary story is currently sitting.
7. Does your university have a logo? Is there a graphic identity? Why isn't it on this site?

[iniquity101]

Originally posted by Heavy

3. Your page layout is too wide for the general public who will most likely be viewing your site on 17" monitors at 800x600.


As a memeber of the general public browsing with a 17" monitor at 800*600, your page fits jus' nice on the screen with no horizontal scroll.

[PeOfEo]

I am posting from my mom's comp which has a 15'' (no we are not birt cheap, its a 15'' flat pannel and that was about 100 less then a 17 at the time) and it looks fine

[dera]

slow to load even with broadband 1500kb/s.
every thing is a pass on this site, but ur menu the bold text looks horrible :D

[toicontien]

Originally posted by dera
slow to load even with broadband 1500kb/s...
That's because Digital Partners' (http://www.digitalpartners.com/) servers are still running slow from the Iowa State Daily (http://www.iowastatedaily.com/) getting Drudged (http://www.drudgereport.com/) earlier this week. :(


Originally posted by dera
... every thing is a pass on this site, but ur menu the bold text looks horrible :D
The issue with the menu there is tough. We have top-level sections and sub-sections. The easiest way to differentiate between the two is bold face text and normal weight text.

Originally posted by Heavy

1. Expand your color pallete. It's too monochrome. This makes it look really flat and really ameteur.

I'm not really worried about that, in fact I want a small color pallette. This is an information site and the design should enhance the information displayed. It should also direct the viewer's eyes to the most important information (hence the gray background for "Section Guide"). People's eyes are attracted first to lighter colors.

Originally posted by Heavy

2. Lose the rounded corners you've got everywhere. It's getting amorphous looking like its melting.
I like 'em. :) I don't like boxy-looking pages if I can get away with it.

Originally posted by Heavy

3. Your page layout is too wide for the general public who will most likely be viewing your site on 17" monitors at 800x600.
As I mentioned above, the front page of the site has a LOT of content to display and it lent itself to a wider layout. For a better idea of some of the issues I was trying to design around, read Newspaper Web Design Is Seriously Flawed (http://www.editorandpublisher.com/eandp/columns/stopthepresses_display.jsp?vnu_content_id=1000464406). It was a real eye-opener at the same time the author wrote of many concerns I have for online news design.

Also, the widths of all the columns are in ems, so that the layout expands and contracts in proportion to the chane in text size. If you have your browser or OS text size settings increased, the layout should look too big. Interior pages are optimized for 800x600 screens though.

Originally posted by Heavy

4. Your navigation area on sub pages is never ending. Needs more room to breath and some visual organization.

The navigation is rarely that long. Take a look at http://www.cm-life.com/ to see a normal menu. Keep in mind that pretty much everything you see on that page is COMPLETELY dynamic, from the number of tile ads, the number of sections with live articles, etc.


Originally posted by Heavy

5. I wouldn't suggest navigation being in a scrolling window on the home page...

That problem has been remedied with a redesign of the front page. I was able to come up with a layout that just "lets it flow."

Originally posted by Heavy

(The main menu is) also too low on the page layout to be immediately seen. A news site needs the navigation menu to be as prominent and easy to find as possible.
I have to disagree. News stories have a hierarchy. The focus of the home page should not be the main menu. It should be the top story. That's why you don't see the "Secton Guide" of the print edition of a newspaper with the biggest headline. The top story has the biggest headline and the most prominent placement. Web designers could learn a lot from news print design.


Originally posted by Heavy

6. Since the center of the screen is viewed first, the user will then read left to right from that point. They'll actually see your "secondary" story before the "primary" story. I suggest the navigation appear where your primary story is currently sitting.
The visual center of an element is slightly up from the actual center. Again, look at the print edition of a newspaper and you'll notice that the lead art on a page is rarely placed at the top. Common layouts have the lead art under another lessor story, and that's because things people don't look at the top first. Studies have shown that people begin reading pages (both Web and print) starting near the visual center.

I did have the lead story on the left at first, but the story got lost by the section guide. The box for "Section Guide" has a gray background that extends below the start of the lead story box that sits next to the Section Guide. The dateline and section for the top story is centered, thus giving the top story a little white space around it to attract your eye.


Originally posted by Heavy

7. Does your university have a logo? Is there a graphic identity? Why isn't it on this site?
Yep. Yep, and that's because we aren't technically associated with the University. CMU pays for an executive secretary and the two advisors who oversee the editorial and advertising sides of the paper. CMU doesn't have control over what we print so they wouldn't like us to use their logo ;)

Besides, the rebel in me sees the university as an establishment and I don't want people to believe that we are a puppet of this establishment because we look the same. Darn college, rebelious ideals :D

Great feedback! I thought this thread was long dead.