Survey form - looking for design suggestions!

Code Feedback
1

Hi!

Here is my second project:

I’m not happy with the current design of the page but couldn’t come up with something better. Therefore, I would appreciate your ideas on how it’s possible to make the page look better!

Thank you! Have a great day!

2 Likes
2

Hey @Dmitriifs. Your project is good and meets all the requirements, but as you had said, I will give some design suggestions:

  • Give a background color for your form element. This helps users distinguish between the form and background.
  • I think the background image is not necessary at all. Your background image makes it very hard to read the text. So, remove it.
  • If you still need the background image, give the opacity property and set it to lower value.
  • The background image in the footer is too much decorative and the text is too hard to read. Give a solid background instead.
  • Center all the form elements.

These are what I can give you right now. There are more things to be improved, but typing it here is difficult. So, I thought about forking your pen and making it better. After it’s done, I will give you the link.

If you find it difficult when designing web pages, do the following on your next projects:

  • Draw a rough sketch of your dream project (wireframe). This will be your reference when coding.
  • If needed, design your dream website in any prototyping tools such as Figma (this is the way I do).

If you think that designing is not meant for you, watch this video and your design skills will level up:

Hope this helps.

2 Likes
3

Hi @paulsonstech! Thank you so much! I’m going to implement all your suggestions and I think it will make my page look better! I don’t want to get rid of the background image though because I find it quite cute but…I’ll try my best. Also, I’m looking forward to seeing what you’ll do with the page!

2 Likes
4

Hey @Dmitriifs. I completed making your project better. So, please check it and notice that the major changes are the opacity of the background image, the background color of the form and the alignment of the form elements. Also, I have added much whitespace between the text. If you watch the video I provided, he says that the whitespace, contrast, and readability are the major factors of a good design. I have added those to your project. Right now, it is not responsive. I will leave that challenge to you. Feel free to fork the pen and check the major code changes. Thanks.

Link:

2 Likes
5

Wow, it looks much better, thank you! It wouldn’t fair to copy your work but I’m going to make something similar to this!

Speaking of the video, yeah, I’ve watched it, thanks for the recommendation! The channel is so interesting that it’s difficult to stop binge watching all the videos :+1:

All the best to you man!

2 Likes
6

Hi @Dmitriifs!

I see that you implemented some suggestions made by @paulsonstech and I enjoyed the result.

Because your project isn’t ready and you are just asking for some suggestions, here is mine ones:

  1. Insert some:
body {
  margin-left: xx%;
  margin-right: xx%;
}

It avoids the user to turn the neck to look at your page and centers the content in the center of the page. :grin:

  1. And take a look again in Use a media query to change a variable lesson.
    Using @media is very important to create a responsive design.

When you finish your project and want a complete analyze from it made by me, just let me know.

Good look! :facepunch: :facepunch:

2 Likes
7

Thank you for your advice! I rewrote the layout and applied css grid this time to make it more responsive.

@paulsonstech, @paulsonstech I think I’ve reached the point when I’m ok with the design of my page. I would greatly appreciate it if you, as well as other guests of this topic, take a look one more time and leave your feedback, thanks!

1 Like
8

Wow! This is a huge improvement! Now the form is more readable and the page looks pleasing. But, I can’t see the background image! It’s showing as a broken link. Perhaps you might want to look into that. Anyway, wonderful and now you learned the fundamentals of a good design!

1 Like
9

Thanks! I believe I’ve fixed the link to background image.

1 Like
10

Very good. Now I can see the background image and it’s good!

1 Like
11

I like your survey form but I think you have to make some changes so it can look better

  1. Make every heading in the bold letter so it should be properly visible to the user
  2. Set Proper opacity of the background image
  3. Background image is not needed
  4. Align form elements in the center
1 Like
12

Thank you for your feedback! I’ve made these changes and the page looks definitely better now !

13

You page looks good @Dmitriifs. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it. Be wary of duplicate selectors.
    • (The one for HTML misses things which is why I recommend W3C)
1 Like
14