I thought it'd be fun to redesign this school's site and convert it to a purely CSS-based layout. Before you guys start bashing the crap out of the page, I'd like to point out that:
a. This page is purely experimental.
b. I'm a volunteer, and i'm not being paid or anything.
c. This probably won't ever make it into the actual school's site. Remember, this is an *experiment*.
d. It's really plain, because there aren't any graphics yet.
From: A graveyard of dreams Insane since: Mar 2001
posted 07-08-2003 23:35
quote:b. I'm a volunteer, and i'm not being paid or anything.
That shouldn't have anything do with it. Make a site that you can be proud of later on and it doesn't mather whenever you got paid or not.
The layout looks ok, no need to add any images there imo. If you do, use simple (and small) images. One thing about the layout is that all of the colors seem kind of bland (is that a word?), none of them stand out. The "hover background color" on the menu is nice, it contrasts nicely with the rest of the page. Maybe try and use that same color as the background behind the 'Navigation' and 'Home' titles?
The menu has too many links. I think I read somewhere that the "optimal/max" amount of link to use in a menu is somewhere around 7. So you should do some work on that and at least move half of the links in under another link. There should also be some difference in the color of the 'student organization' title and the 'student organization links' in the top bar. Right now you can't see which of them are links without hovering over them first.
The footer might look better if you had the adress field intended so that it aligns with the main text area.
I think that is about it for now. Keep up the good work
_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
In point b, what I meant to say was that I wasn't working for anyone, and as such, I didn't recieve any specific direction from a "client." I hope you didn't take that the wrong way. I'm proud of any and all work that I do.
Yes, I realize that there are a lot of links. On the original page, there were over 20! I tried to cut back by grouping them together and placing them in a sort of hierarchy. I'll see if I can strip out anything else that's unnecessary.
The footer section is supposed to be seperated from the rest of page. It is not intended for the site viewer, but rather it is a requirement listed on the "School District Site Design Guidelines" or something like that.
As for the color scheme, forgive me, I'm not to good at coming up with nice balanced color schemes. I'll do my best, though ;-)
1) color scheme: I've got to admit, it bugs me. Not so much that the colors don't stand out, but that they don't jive. If you look just at the hues of the colors, you've got (from top to bottom) 120, 140, and 75--so even though they are all vaguely green, they don't really mesh. There's also very little difference in saturation between the top two colors (try desaturating a screen cap in PS to see what I mean), so neither of them stands out from the other. As it is, they are just slightly off--you'd be better off making them the same color.
I realize that you will most likely have to stick to school colors for you main colors, but you do have some leeway, right? I have a number of color utility pages in my bookmarks, and although they might not solve all your problems, you might find them helpful:
If I were you, I would start with #006600--it's your strongest and most impressive color. Plug that in to the pages above and see what you come up with. They should give you some ideas of where to go with your secondary colors. (I personally like what Easy RGB spits out for #006600--there's a nice light green shade in there that you might consider using.)
2) content text: It's a bit cramped, I think. I would find it easier to read with wider left and right margins--more whitespace is better in this case. You might also try upping the line spacing just a tad. Not too much, of course, but a little more room between lines might be nice. Don't go overboard, though.
Overall, not a bad effort. It looks clean, and your code is clean too, and that's always nice to see.
I like the colors, they are bland but very nicely blended. As a school site, if it is an Administrators page and those are the school colors..that would please me as a client..but that overlap on resize on the top and the footer information being on the far far left is a setting teeth on edge as the rest of the page flows together well..
Hmmm... I was already familiar with EasyRGB and I, too, noticed that specific shade of green that went with the 006600.
Somehow, it looks better on the palette than on the canvas. The light green shade (a8ce9b specifically) rather than harmonize, almost seemed to clash with the dark green. Either that, or I'm going colorblind.
Either way, thanks for the comments. I'll take everything you say into consideration.
Yes, I know the text gets even more unreadable at high resolutions due to line length.
Readability is only slightly improved when you up the line height.
All I can say it... curse IE for not supporting min-width and max-width!
Ah, that would be the "currently selected" state. Maybe it's just me, but that color really doesn't seem to jive. You could try it out and see what it looks like, at least, and then if you don't like it just stick with what you've got.
As for the "previous" and "next" navigation, I'll consider it, but I'm not going to implement it until I know for sure the order and arrangement of the pages.
posted 07-08-2003 22:07
