Website design help

ryanjoachim

http://www.mcminnvillejaycees.com/

That's the website I made for a volunteer group I'm a member of. It's a pretty simple site, as you can see.

The big thing I'm having trouble with is the color scheme. I want it to be "professional", but I also want it to be easily readable and not a "black and white copy". (black text on white bg, etc).

Any ideas?

Oh, and if anyone has ideas about changing something on the site, I'd love the criticism!

ryanjoachim

Oh, and the "about" page has a different background...I forgot to update it.

kevhed72

I prefer larger fonts in my headers / subheaders, so links are easier for people to find and read. I can't understand who alot of retail sites have so many hard-to-find links with tiny font. Simple and easy to read, but logical and organized, is the way to go with page design. Also, designing your own headers/sub headers in Adobe Imagemaker or Photoshop, and saving them as a seperate file or image usually looks better than just typing the headers within the design program.

The more practice you get with web design, the more professional your site will look. My first sites for work looked like ---- compared what to what they look like now. Hope this helps...

everpress

ryanjoachim wrote: »

http://www.mcminnvillejaycees.com/

That's the website I made for a volunteer group I'm a member of. It's a pretty simple site, as you can see.

The big thing I'm having trouble with is the color scheme. I want it to be "professional", but I also want it to be easily readable and not a "black and white copy". (black text on white bg, etc).

Any ideas?

Oh, and if anyone has ideas about changing something on the site, I'd love the criticism!

It's a pretty good start, for sure!

I would suggest getting rid of the animated title header and replace it with a nice image of something the organization stands for (you know people, community, charity, etc). That will also allow you to use a logo or seal and a better typeface than what is allowed in standard HTML.

I like the color palette, for the most part. I would get rid of the red and blue dividing lines and make them the same orange as the text, or even the wite of the head/sub-head lines. Maybe lighten up the background color by about 15-20%... Maybe not.

The next biggest thing would be to move the justification of the columns you've built. I see that the navigation column, for example, is left justified, but not as far as your header goes left. Push it on over, and it'll look like you've got more room. Do the same with your content column on the right; push it over to be justified with the right side of your header pic and you'll open more visual space as well. It's a small change, but it will keep your content from looking constricted and unify the overall layout of the site.

Other than that, I'd wait and see what your content needs before changing any real large layout issues. This is a solid, solid start.

ryanjoachim

Thanks for the tips! I've been meaning to move both those columns over, just keep forgetting about it.

ryanjoachim

Alright, I put 2 of your suggestions into effect. I removed the lines altogether, just to see how I like it, and I spaced out the columns better.

Thanks again for your help! Any other suggestions would be greatly appreciated!

AsSiMiLaTeD

I agree with what everpress said.

Those normall aren't my colors, but I like the color scheme overall.

I'm not a big fan of center justified type, but that's more of a preferance than anything.

I'd get that Contact Webmaster link out of the main menu and in a less conspicuous place like the bottom of the page.

I'm also not a fan of the banner at the top, IMO it looks like cheesy 1990s dhtml or javascripting and doesn't look so professional. I'd work on an image for that area, maybe a picture at 50% opacity with the group name over it in clean font, or try playing around with one of those online text effects generators and just do an image with the group name and a clean background.

I also agree on the red and blue lines, especially the blue. The red may works, but it's hard to know seeing it up against that blue, maybe start with changing the blue and see how the red looks.

Also, on the sides of the page starting at where the banner stops on each side, as in where you've wisely built in scalability for different resolutions and don't have any content, I'd make that just a tad darker than the background color in the center, just to frame it out a bit.

Those are all really just minor tweaks, overall I like it and it has great potential.

ryanjoachim

AsSiMiLaTeD wrote: »

I agree with what everpress said.

Those normall aren't my colors, but I like the color scheme overall.

I'm not a big fan of center justified type, but that's more of a preferance than anything.

I'd get that Contact Webmaster link out of the main menu and in a less conspicuous place like the bottom of the page.

I'm also not a fan of the banner at the top, IMO it looks like cheesy 1990s dhtml or javascripting and doesn't look so professional. I'd work on an image for that area, maybe a picture at 50% opacity with the group name over it in clean font, or try playing around with one of those online text effects generators and just do an image with the group name and a clean background.

I also agree on the red and blue lines, especially the blue. The red may works, but it's hard to know seeing it up against that blue, maybe start with changing the blue and see how the red looks.

Also, on the sides of the page starting at where the banner stops on each side, as in where you've wisely built in scalability for different resolutions and don't have any content, I'd make that just a tad darker than the background color in the center, just to frame it out a bit.

Those are all really just minor tweaks, overall I like it and it has great potential.

Thanks for the opinions AsSiMiLaTeD, I really appreciate it. I'll have to figure out the best way to separate the background of the main section and the empty space, but I agree that having a separation of color would probably work out really well.

ryanjoachim

Well, I decided to try out a banner/logo instead of the Flash banner I had before. Take a look at the front page ( http://www.mcminnvillejaycees.com ) and let me know what you think.

AsSiMiLaTeD

Hard to tell for sure on my phone, but looks much better at first glance

ryanjoachim

On some web browsers (IE7 for instance) there is a black line between the banner and the menu items. It shows up in Opera as well, but I don't think it shows up in IE6 or Firefox. I can't figure out where it's coming from...

Any ideas?

Demiurge

The white text on there isn't working. It may not be so much that as it is the font you're using for the white text.

The other colors are good.

ryanjoachim

Demiurge wrote: »

The white text on there isn't working. It may not be so much that as it is the font you're using for the white text.

The other colors are good.

The white text isn't working? It shows up for me in IE7 and Opera...what browser are you using? It may be a compatibility issue that I can resolve on the site.

Demiurge

ryanjoachim wrote: »

The white text isn't working? It shows up for me in IE7 and Opera...what browser are you using? It may be a compatibility issue that I can resolve on the site.

By working I mean it's not flowing well. Neither is the red text.

I have a graphic design background, so I am trying to help you out. I think you'd benefit from a bigger logo, too. I whipped these up for ya, feel free to use them if you want:

seeclear

"The McMinnville Jaycees is an organization for young people 18 to 40 that develops leadership skills through community service. "

While you may all be under 40, your readers may not be. Bigger Font!!

ryanjoachim

Demiurge wrote: »

By working I mean it's not flowing well. Neither is the red text.

I have a graphic design background, so I am trying to help you out. I think you'd benefit from a bigger logo, too. I whipped these up for ya, feel free to use them if you want:

I'm glad for any help you can give. I didn't realize you meant how it flows with the site. I was already thinking about that. I kept it that way simply because the "Recent Projects" table was it's own section and I didn't want it to "bleed' into the main portion of the site.

Should I make the text match the rest of the site?

Also, thanks a lot for the logos. Unfortunately I can't see them because of my work filters, but i'll definately check them out when I get home.

Demiurge

ryanjoachim wrote: »

I'm glad for any help you can give. I didn't realize you meant how it flows with the site. I was already thinking about that. I kept it that way simply because the "Recent Projects" table was it's own section and I didn't want it to "bleed' into the main portion of the site.

Should I make the text match the rest of the site?

Also, thanks a lot for the logos. Unfortunately I can't see them because of my work filters, but i'll definately check them out when I get home.

Hah, sorry!

I think you're off to a good start. Less is more, but bold is better. I don't know that the text needs to be much bigger, maybe a couple sizes larger at most (or it starts to look bad)....but yeah, I think you should have the text match. The font you have where it says:

Welcome to electronic resting home for the McMinnville Jaycees! Take some time to browse the site, check out our projects, and learn more about who we are and what we do.

...looks really good. I'd use that one maybe a couple sizes larger.

Also put the header "Welcome," and "News" in all CAPS and make sure they're the same size. You might even bold them.

Here's the copyright logo:

©

There's more suggestions, but lets see how those changes look first.

ryanjoachim

I'm home for lunch, and I saved those pics so I could work on it some more when I go back to work.

I'll mess around with the text and such when I go back to work.

ryanjoachim wrote: »

On some web browsers (IE7 for instance) there is a black line between the banner and the menu items. It shows up in Opera as well, but I don't think it shows up in IE6 or Firefox. I can't figure out where it's coming from...

Any ideas?

^^^^

ryanjoachim

SO, i've been out of the web design game for years. How/what is the best way to get your site indexed on google/yahoo and such now? I know in the old days you just had to add a bunch of meta keywords to your page.

Is it the same now?

Demiurge

ryanjoachim wrote: »

SO, i've been out of the web design game for years. How/what is the best way to get your site indexed on google/yahoo and such now? I know in the old days you just had to add a bunch of meta keywords to your page.

Is it the same now?

Your site is already the 4th hit on a Google search for 'McMinnville Jaycees'. If it's new and already at #4, it'll be at the top in no time. Anyhow, yeah...dropping in keywords all over helps a lot.

ryanjoachim

Alright, I did some updates.

You were definately right about needing a bigger banner Demiurge...the one you made me looks great!

Demiurge

Sweet! I like it.

Can you left justify the "WELCOME" and "NEWS" and make it the same font type as the text below it? Then make sure the size of "WELCOME" and "NEWS" are the same.

ryanjoachim

Done and done. It really does look so much better than it did before!

Now I have to decide if I just want to keep this color scheme for August/Halloween and change it later, or keep it.

jwhitakr

I may be late to the party here with suggestions ... but have you thought about using one of the free CMS software packages such as Wordpress, Drupal, etc. ? There are a lot of free templates available, too, that will help keep your design work to a minimum. And the CMS is easy enough to use for regular "non-techie" users, too, in case there will be multiple contributors to the site content in the future.

Demiurge

ryanjoachim wrote: »

Done and done. It really does look so much better than it did before!

Now I have to decide if I just want to keep this color scheme for August/Halloween and change it later, or keep it.

Yep, looks great! Nice work.

Make sure you update all of the links on your page with the font/color scheme, too.

BTW, if you change color schemes it'll be easy to alter the existing logo.

ryanjoachim

Hey Demiurge, can you see if you have the generic version of my logo hanging around somewhere?

I know it's not likely, but I have 0 design skills and couldn't create a decent looking banner if my life depended on it.

Polk addict

Um... When you're done with general editing, just note that it's not valid markup... It's usually a pain, but just check through the w3c tool, as it will display different on different browsers... And it kinda does look different between opera, firefox, and ie...

Also, it loaded really fast, and the template is really light...

And um, the banner at the top is a little large compared to the content...

ryanjoachim

I got the banner changed back, so ignore that.

Also, not sure what you mean by "valid markup"? I'm a fairly novice web guy here.