Latest project - product page

Hello guys, i’ve made a second, but nicer version for the product project. This one is missing the fixed nav bar, because i don’t like it. But will make that version as well.

What do you think?

1 Like

This looks really nice! I’ll point out a few accessibility improvements you can make, but overall this gets an ‘A’ in my book.

  • I know it may not seem like it, but some of the color combinations do not technically have enough color contrast to be accessible. For example, the white links on blue at the top of the page and the white headers on orange in the middle of the page. Because they are both regular sized text they need to have a contrast ration of at least 4.5:1. There are a ton of tools out there to help you determine contrast ratios. One of my favorites is the WebAIM Contrast Checker. If you make the <h3>s bigger (at least 20px) then you only need to have 3:1 for them
  • The textarea at the bottom needs to have a label as well.
  • The placeholder text in the Name and Email inputs is so light that a lot of people are going to have trouble reading it. You should probably make the input background lighter and the placeholder text darker. Also, placeholder text should not just repeat the label for the input. It should preferably give an example of the type of input you want from the user.
  • The video is cutoff when you narrow the window all the way in. There is definitely a way to make it responsive. I’ll let you google how to do that.
  • The social media links at the bottom need text associated with them so people who are listening to your page know where they link to. The easiest way to do this is to add text to the link as usual and then visually hide it.

Thank you very much for the tips! :slight_smile:

I’m also learning design, so will definitely look into that. For the links at the bottom, i don’t actually have them, just wanted to use them, to see how it looks like.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.