Not 100% sure where you're looking for feedback. Just the landing page, or is the product page yours too?
Holistically, what are you trying to do with this site? Is this more for you to learn flexbox & css gradients and web animation, or are you trying to say something that the product page doesn't? To Oleg's point, I agree it fails to sell me as is. I also feel like the brand isn't very prominent other than the logo at the top. For example, I think you can learn a lot from the quote at the bottom of the product page for inspiration:
"Crane products are designed for better living, specifically with your needs in mind. We’re focused on engineering products that you can always depend on to help you stay healthy, express your style and make your living space more comfortable."
I'd reference every bit of the page with this quote. Ask yourself if the colors help express style and health, if the quote you're using makes the user comfortable, etc. Make sure every bit is on-brand.
For small changes, figure out how to fix the margin at the bottom of the page. Also, I'd replace the underline :hover effect on your button with something a little more interesting. I think there's room to play around with the colors in the gradients. For how soft the quote screen is, they're a little harsh. Maybe a softer blue? Lastly, a sharper image of the humidifier wouldn't hurt, either!
Sorry if this is long-winded, I totally get it's scary enough to post work online. Definitely keep improving and let us know where you take it next!
Website fails to sell. Animation is too slow, I would close the tab in first 3 seconds. Product features in a carousel is pretty bad UX, nothing makes me want to click through, and users don't have time to read every sentence. Product page is actually more informational and functional than landing page.
Thank you for the honest feedback. Your totally right. I removed the carousel and decreased animation times.
Sure thing. Check this site if you need inspiration on product landing pages, some examples are pretty good. Cheers!
A few technical details:
Background gradient should just be done in CSS, no need to load a massive PNG image.
The image of the humidifier itself is not high-enough resolution, even on a non-hi-def screen I can see fuzzy edges.
Why not just put the loading quote on the splash page with the humidifier image. Also add some reasons for me to click learn more, the aesthetics of the product alone aren't enough. If Crane were a really well know brand, then I might be compelled to check it out, but they aren't so you need a bit more to sell me.
How do I do a fade effect with a css linear gradient? My understanding is that you can't.
background: rgb(41,135,202); background: -moz-linear-gradient(left, rgba(41,135,202,1) 0%, rgba(255,255,255,1) 50%, rgba(41,135,202,1) 100%); background: -webkit-linear-gradient(left, rgba(41,135,202,1) 0%,rgba(255,255,255,1) 50%,rgba(41,135,202,1) 100%); background: linear-gradient(to right, rgba(41,135,202,1) 0%,rgba(255,255,255,1) 50%,rgba(41,135,202,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2987ca', endColorstr='#2987ca',GradientType=1 );
Is that what you mean?
Since those are
rgbacolors you could even have it go from blue 100% opacity to blue 0% opacity if you wanted something to be visible in the white area "behind" the gradient.
Hi there Brandon,
One thing I noticed right off the bat is I land on the page and I'm confronted with a quote. I can see the appeal, but for most users this might be irrelevant. You're basically selling the aesthetics of the humidifier, not its actual function, which is most likely what users care about most when they're looking for such a product. In other words, there's no immediate value to them.
Secondly, hitting the learn more button doesn't really let me learn more. Rather, it forwards me straight to a product page. The sell came a bit too quickly, as a user doesn't even understand why he/she should get this particular humidifier.
These are just my two cents - hope this helps! :)
I'd love to see more about the actual product when I land into the page, I honestly didn't want to click the learn more button
Cheers man, good luck on the changes!