Advice on Site

WOW! What a beautiful yet simple website! I love the responsive design. I'm not learning much web development at the moment, but i can tell that this website is wonderful! A little advise is to do so that the text disappear when you click the "email' or "college" text box.

Keep it going!

Overall, I think you did a pretty good job.

The form on the bottom is fairly hard to read when your typing: http://u.moiz.co/Tk7A

Might want to switch the color to a dark gray instead of white.

I think its good on a broad scale, a couple things I would note tho...

1. Too much centered content, even the send button on your form is centered. Every interior pages text is centered, etc. Personally I wouldn't center any of it unless its a quote or something along those lines (like your twitter feed).

2. The donate button bothers me the way its straddling two rows. Not sure if this is a big deal or not?

3. You color palette is great. Although I don't think the mint matches the other two greens. I would suggest uniforming this a bit. Maybe ditch the mint and use the two greens with a black?

Great job though!

Not digging the centered text through out. But other then that, I think its a quality site. Bravo sir!

Hey Jeremy!

I have a few observations, just a few thoughts that may help fine tuning the site look and feel

Increase the font-size of the nav links to a 1rem, and do the same to the message inside <div id="transbox"> to help with readability.

Also in that div, try using the same font type you are using for your content to make it consistent. The serif font currently there is not too friendly.

Try to make the form validate on the same page so that your user don't loose focus.

For the images inside the <section id="sliders">, I think it would look better if you use the full color images and then you can fade them down on hover. After that, add a background color to the <h6> inside the divs with a class "desc-box"

See if a lighter color border or maybe background color works better than the borders on <a href="stake.html" class="button">Find Out More ></a>. For some reason the black border doesn't feel right.

You've created a very nice looking site, keep up the great work! :)

Overall, it's pretty decent. I like some of the animations (e.g. the buttons) and I find it impressive that you built it on Foundation.

My criticisms (shouldn't be hard to fix):

-I don't like your CTA at the top. I think the donate button should be in the navigation bar, and with a smaller [background-colored] box around it. The location is bothering me.

-"Make a difference should be more prominent (e.g. a large size with heavy weight). I'd put that and the quote in one column, with the "Email, College, and Join Us" in another column. I think the Call-to-action button ("Join Us" should be more prominent and have a background color. Email and College fields should be less transparent (or not at all).

-I really don't know how I feel about the shade of green you've chosen. Why not choose the darker shade of green to match "PGR" logo and the lighter shade of green for the hover animation? This shade is a bit too bright and seems a bit tacky.

-The "PGR in USA Today" should have a uniform button as "Hear it from Students" (as opposed to just a text link to article).

-I like the contact form in footer (something I recently added), but I don't like the form field backgrounds - they look uniform to the "send" button, and the hover/typing actions turn into a weird color that makes it hard to read (and it looks sort of pinkish- which doesn't match brand). I'd make it a bit more simple and clear from an end user perspective. Make sure the buttons look like each other and look distinctively like buttons so the user knows exactly where you intend for them to click.

Other than that, looks pretty good! My only other idea is that I like groups of three...so maybe add a third thing to "Debt and Deficit" and "Taxes." But maybe the + / - make a lot of sense for your messaging, so maybe this suggestion is OCD and inapplicable.

Overall, it's pretty decent. I like some of the animations (e.g. the buttons) and I find it impressive that you built it on Foundation.

My criticisms (shouldn't be hard to fix):

-I don't like your CTA at the top. I think the donate button should be in the navigation bar, and with a smaller [background-colored] box around it. The location is bothering me.

-"Make a difference should be more prominent (e.g. a large size with heavy weight). I'd put that and the quote in one column, with the "Email, College, and Join Us" in another column. I think the Call-to-action button ("Join Us" should be more prominent and have a background color. Email and College fields should be less transparent (or not at all).

-I really don't know how I feel about the shade of green you've chosen. Why not choose the darker shade of green to match "PGR" logo and the lighter shade of green for the hover animation? This shade is a bit too bright and seems a bit tacky.

-The "PGR in USA Today" should have a uniform button as "Hear it from Students" (as opposed to just a text link to article).

-I like the contact form in footer (something I recently added), but I don't like the form field backgrounds - they look uniform to the "send" button, and the hover/typing actions turn into a weird color that makes it hard to read (and it looks sort of pinkish- which doesn't match brand). I'd make it a bit more simple and clear from an end user perspective. Make sure the buttons look like each other and look distinctively like buttons so the user knows exactly where you intend for them to click.

Other than that, looks pretty good! My only other idea is that I like groups of three...so maybe add a third thing to "Debt and Deficit" and "Taxes." But maybe the + / - make a lot of sense for your messaging, so maybe this suggestion is OCD and inapplicable.

Nice job. Quite a big site with a lot of content to manage... Tough jobs those.

Critique:

Donation Button: The position on the home page makes it read like a box label, not a button. Place it inside the box or in the header or to the left over the image.

Also, the button with the border doesn't make it feel like a button. I get the flat design approach but you have some conflicts. You have some buttons with rounded corners, others with square. There are also two Donate button styles, the one on the homepage and the one on the contribution page. They should not be different. I'd also increase its size and font weight. This is you core call to action for viewers.

Join Form: As a key call to action, the join button should be larger. I'd also improve its presence in that space and avoid punching through to the background.

Centering of text: It's been said, but yeah, trim it back a lot.

Green Colour: A few have mentioned this. My advice is to look at the PGR logo and move closer or even use their colour values. The lighter green is closer to the yellow spectrum. Check out Colour Theory infographics if you feel like a refresher on the perception of colour.

These were my key design take-always. Thanks for sharing and it's brave of you to open up to critique.

Best, Pete

I'm loving the site so far and the advice others have given is great!! Have you tested the site in various browsers? Maybe this is a fluke on my end but when I opened it in Firefox the Name box in the form isn't rendering the right way. It works fine in Chrome and Safari, however in Firefox it's not aligned with the other form boxes and is floating sort of to the middle of the vertical white line and behind the word Washington in the paragraph next to it. Otherwise very nice design and feel!