Feedback for my FCC Product Landing Project

Just finished this one. Desing is not my thing I think, so I’ve tried to keep it simple. Please be as mean as you can… is the only way to learn :sweat_smile:

FCC Product Landing Project

I like the google map feature. The colors really work together too. Nice job,.

1 Like

Looks good for the beginning. But you asked for mean people so let me be mean.

  1. Font sizes of the nav is way to big
  2. Colors are horrible… There are tools to find color pairs that fit.
  3. The grid for your content is way to wide.
  4. Your footer isn’t really meaningful

here is my tip:

  1. Your Page should have only 1

    wich defines the title.

  • Google reads the H1 of each page. Usually programmers use the tag 1 time on a website.
  1. add a shadow to your navigation and keep it small
  2. Use tools to find color pairs but i would reccomend white background lightgray navbar with a slight shadow.
  • Nothing simpler than that. Ever been bored of white websites??? i guess no because it’s clear and is always modern.
  • start adding colors to your white background… for instance blue font-color. Or a blue image. Or a blue navabr. So you would have a white/blue theme…
    -you can combine any color with white… but again, don’t combine too much. Better clear and simple
  1. try to center your content a bit more. Looks better if you have multiple lines instead of 1 huge line. Makes your website look like you have more content and it’s much better for readability if the user don’t have to stop reading because the next line starts 20 cm to the left. I hope you get what i mean.
    – I really like the part with the icons where it goes left and right. If you would make the container a bit smaller it would even look much better!
  2. The footer is your last chance to pass the website a special touch. Keep it in the color of your theme or leave it white and just pass it a light border.
    -What should be in your footer?
    Link your Git, Fb, IG. Let the world know you did this website. On more complex pages you should insert a MetaNav to your footer.
    However don’t get stuck on anybodys design and try to follow it. You can make a footer 20px height or 600px height. Depends on how much content you have. Good luck with it :wink:
1 Like

Looks good for the beginning. But you asked for mean people so let me be mean.

Please be, but don’t forget I also said “Design is not my thing” :sweat_smile:

Here’s what I’ve done:

  1. Changed the font size and family of the nav…
  2. Sorry about the colors, made a lot of awful choices starting with the photo of the product I’ve picked which has awful colors (http://colormind.io). Since I’m not a designer this gives me a hard time so I will pospone it (the color choice) until I’ve finished with some other stuff. And yeah, I know a grayscale will always work but it just looks boring to me :stuck_out_tongue: (in fact, I think now the colors are more awful than before :sweat_smile:)
  3. I’ve tried to center my content a little bit more. Not happy with the responsive reaction to that however, since as the window gets smaller it feels like I have more margin than text. I’m not happy with how it looks now… I will go back to this eventually, but don’t want to get stuck in this project forever.
  4. Yeah… I was bored at the point I got to the footer, but since you mentioned it, I added some content there.
  5. Changed most of the h1 tags to h2. Great tip! I had been looking at a web site that had lots of h1 tags, but then I started looking around in other websites and found that most of them don’t. Thanks for pointing that!
  6. Also added a shadow to my navbar.

Take a second look if you can… especially if you can get pass the awful mean colors…

The see how it works section is way to long and would turn users away. Really good otherwise.

Well it’s just a fragment of Lorem ipsum so it turns me away even no matter how short :grin:
Let’s hope that a real product would have a fantastic description for as long as it lasts…
Another option might be starting the section with the video instead of the explanation. Do you think that would be any better?

Why, YES I’ve bored of white websites. Overly white background and white background is the bane of many low vision people or those with difficulty with their vision. It does not look all that modern to me. It’s been around for the last 25 years!

I’m looking through Landing Page projects to get an idea of what to even do for a “product” let alone a video… lol- but I sure am going to try to avoid massive white (this is NOT directed towards the original author of this thread… just my own thinking process).

Well for somebody who just started coding and don’t really work with photoshop or any other program where they build their designs my suggestion is to stick with white. It’s much easier to adjust the colors after you’ve finished to write the HTML structure. You will have a better feeling for what looks good and what not.

See I’m giving review on a project. I’m sure you or me can do it with fancy colors as well. But if somebody is not that good at design and has no designer sitting at home this is my suggestion.

The problem is that people see the examples to their exercises and they start building something 1:1 with slight changes just as colors and content. It’s like reading a book after watching the movie. You will have the faces of the actors in your head while reading.