Product Landing page - please share some feedback

Hi everyone,
here’s my Product Landing page:

https://codepen.io/marco1618/full/qBNgWZZ

It has taken me considerably more time than the first two projects, and at a certain point, I decided to re-write it from scratch as I realized that I was making poor design choices, which were causing my CSS to grow out of control.
I’ve tried to make it as much responsive as I could without going into mobile territory.
I feel I’ve learned a lot, and I’m quite happy with the result now.
I’d love to hear what you think about it.

Your page looks good @Marco16168. Something to revisit;

  • User’s don’t have access to your google acc’t so they do not see the logo.
    • Search for a free image hosting site
  • Liking the colors cycling but the white on a light grey background is hard to see.

Edit: I mean the colors cycling on the word “color”. User cycling the color on the speaker is good.

Oh, I see. I will fix that.

Maybe I should stick with blue, black, and red.

Edit: even if a part of me thinks that it’s kind of obvious that when the color turns white the word is still ‘color’ :grin:

Thank you, Roma

Cheers

I must say thats a pretty good effort but you can work more on your styling.

Please do tell me what’s on your mind.
I’d also like to make it fully responsive.

You’re right. It’s just hard to see but it does cycle through quickly so it’s not a big concern. Just wanted to mention it.

Your style / design is your own. Just because someone mentions a change in styling doesn’t mean you have to incorporate it. For every person that says they don’t like your styling there will be more that do like your styling.

Your page is responsive.

Yes, but it doesn’t really look good on small mobile devices. Plus on safari iOS one image gets weirdly resized.

Hi @Marco16168

I think the design of your page is excellent.

As someone who is coming from a Python/Perl type background producing web pages that pass the tests is easy but I feel I am struggling with the design aspects (i.e. see my survey form).

Would you mind if I took a look at your code to give myself some ideas on how I could improve this area of my work?

Many thanks,
Craig.

1 Like

Hi @craig.lunney, thank you for your appreciation.

Of course, the code is there.

I think designing a website can go a long way in making it appealing, whatever the subject of the page. It can be a bit tedious, but also very rewarding in my opinion. I’m still learning myself, but along the way, I’ve discovered some resources that have proven to be very helpful.

For instance, I think the text in your survey form could be hard to read; I’ve tried to run a contrast checker on the colors you used, and they didn’t pass the tests. Maybe swapping the blue with the light-blue would help.

On the same subject, I really enjoyed the Applied Visual Design lessons about complementary and tertiary colors. There are a lot of color-scheme design tools on the web that can help you choose a well-thought and enjoyable combination of colors. I’m using Paletton at the moment. On Colorpedia, you can also find information about color theory, color perception, color psychology, and more.

One last thing that I’ve found very helpful is an article about Rem and Em best practices, which gave me a better understanding of the role of absolute and relative measure units in designing websites.

Happy coding!