http://www.genlighten.com/l/hire-a-genealogist/in-maryland
Here’s the latest version of my landing page design for our Etsy-for-genealogy-research marketplace site. I’d welcome any feedback, particularly of how to visually differentiate the main three sections (the ones above the footer.) Thanks!
Dean Richardson
Genlighten.com
Edited to correct the link to the public-facing (non-admin) version.
It says I need to login, do you have a login you want me (you can email me) to use or should I sign up?
Oops… sent you the admin link instead of the non-logged-in one:
http://www.genlighten.com/l/hire-a-genealogist/in-maryland
Sorry 'bout that!
–Dean
Hey Dean,
This is coming along nicely. Here are a few problems / problem areas that I am seeing right now.
Good suggestions. And… I really like the looks of this site: nice!
Thanks… I appreciate your taking a look!
Kyle:
Link to revised version: http://www.genlighten.com/l/hire-a-genealogist/in-maryland
OK, let’s take your feedback points one by one:
boring nav in upper right
On a landing page, don’t I want pretty low-key navigation? 
How about if I associate glyphicon-type icons with the nav options?
Any other suggestions to liven things up a little?
Extra padding below the h1 headline
Done. Look ok? Do you think the users’ eyes will flow to the headline first, then the overlay copy? In other words, if they’ve just clicked on a Google ad that says “hire a genealogist in Salt Lake City” will they still feel the scent of their search here?
Brown frame around red button
I’m actually kind of fond of the frame around the button darkening instead of the button itself changing. The folks at Slice of Lime came up with that element on our homepage and I felt pretty good about modifying it to suit my needs here. 
Is there a way I could adjust the color of the frame so as to make it a better fit to the transparent overlay? Or do you just not like the frame color-changing mechanism at all? Would you suggest a traditional darker-when-rolled-over button instead?
Bottom corners of big image aren’t rounded
I’m baffled as to why this isn’t working, either in Safari or in Firefox. I’m using border bottom-left-radius: 5px; Is it a vendor-prefix issue perhaps? BTW, the whole thing falls apart in IE8. Any suggestions on good resources to help me fix those issues? Here’s the CSS for the element in question:
#main_image_as_background_for_cta {
@include span-columns(12);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
padding: 5px 0px 40px 0px;
}
Spacing above the provider username
Done. look ok?
Type for featured providers smaller than body copy
Were you referring to the italicized feedback paragraphs? I tried making their font bigger, but it felt like that forced me to increase all the other fonts as well. Does the hierarchy look ok now?
Bottom CTA button feels lost
Agreed. Should I just get rid of it? Align it with something different? [Perhaps the paragraph of text above it?]
Grey headlines are hard to read (US Genealogists, etc.)
I changed these from grey to white. Better? Was it mainly a contrast issue?
Also, the footer is supposed to have a gradient, defined using Bourbon as follows:
@include linear-gradient(to bottom, #b30e01 85%, #641207 0% );
Any idea why that only seems to work in Safari, not in Firefox? Vendor prefixes again?
Other
How do you feel about the overall background color of the page? The relationship between it and the top nav overlay? Any tweaks to that you’d suggest?
Thanks!
Dean
RE: Boring Nav
I think that just removing the borders between them and spacing them out would mostly suffice. Change the color on hover instead of throwing the ugly underline back in 
Also make them the same size as the rest of the text. If you want them to fade to the background change them from being red. Use the benefit of doubt that people will understand that the things in the top right are links. I also don’t think you need that border for the whole navigation.
RE: h1
Much better. To your point of jumping to the overlay copy, I don’t I see the photo and then jump after it. I think the overlay can use some refining to make it have some more emphasis and clearer that that text is important.
RE: button
Ok then yea I would suggest keeping the color of the border the same then and make the hover affect the button itself. I also think you should play around with the color of the border. Not sold on the tan, looks more like a shadow.
RE: Corners
It seems like the div that you are using to round the corners is stretching past the image see image. I would also just use the shorthand for border-radius since they are all the same values.
border-radius: 5px;
RE: Spacing above the provider username
Still think you need more…but that my opinion.
RE: Bottom CTA button feels lost
Don’t get rid of it. I would just try out different solutions for that.
RE: Grey headlines are hard to read (US Genealogists, etc.)
Better. I like to throw
-webkit-font-smoothing: antialiased;
on reversed type. Makes things look a little crisper
I’m not really sure of what you are trying to do with the linear gradient. Do you want it to be that quick of a change? Or should the colors blend into each other?
How do you feel about the overall background color of the page?
Personally I would desaturate it a little so that it was more tan than yellow