Hello! I finished Project 1 a couple of days ago, and I’d like to get feedback from experienced web developers or UX/UI designers (since I’m focusing on both). Any input is highly appreciated.
-
I’d love to get feedback on the Display property in particular, since I think it could’ve been done more efficiently or succinctly. What do you think?
-
Concerning to design, I tried to use a structured design system, and I’d love to know how I can make it more structured so the page “makes sense” visually.
Thank you so much!
Project 1:
Hi @onlyadolfo,
First of all, your project looks fantastic. It’s the best I’ve seen for Project 1.
Here are some areas for improvement, in my opinion:
-
Make the label/question slightly bolder i.e. more font-weight to differentiate it from the input text.
-
Make the submit button have a border-radius similar to the input fields to keep the border-radius styling consistent.
-
The spacing between "Name" and "Which option best describes your current role" is slightly different from the rest, make it the same to keep spacing consistent.
-
The padding on the right of the illustration is different from the rest of the sides of the form.
-
You can run a test through PageSpeed Insights for more critique on the code.
Overall, the project was great.
1 Like
Hey @onlyadolfo, I agree with @jermybz01, this is a very nice looking project. I’m going to give you a few suggestions for improving the accessibility of your project since I’m an accessibility specialist and it’s kind of my thing. I don’t expect you to necessarily know any of this yet. I’m just pointing it out because that’s what I do and you can never start learning about this stuff too soon 
- Your main text color is very dim on that white background. Perhaps the font you are using makes it look lighter than it really is? Technically, you are failing an accessibility requirement because the contrast ratio of the text color to the background is only
4.45:1 and it needs to be a minimum of 4.5:1 to be considered accessible. Ya, I know, you’re off by just .05. Raising it just the tiniest bit to meet the minimum is not going to make a difference here and unless you are a complete stickler about accessibility then I wouldn’t worry about the missing .05. But what I would recommend is that you just make the text much darker anyway, regardless if you are basically meeting the minimum requirements. In the “real world” I’m assuming you would want as many people as possible to be able to read the content on your page. I can guarantee you there will be a lot of people who will have trouble reading the content on this page because of the low text contrast.
- Speaking of low text contrast, the placeholder text for me is nearly invisible. That’s one of the problems with placeholder text, most browsers make it very faint by default and so it doesn’t come close to meeting accessibility requirements. To be honest with you, there is almost never a need for placeholder text, and most accessibility specialists will tell you not to use it. But I understand that it is a requirement for this project. Just wanted to let you know that it usually isn’t necessary. But if you do need it, then it has to have enough contrast with the background to be accessible. You can use the
::placeholder pseudo-element to adjust the font color.
- Another contrast issue, the border and background color for the inputs don’t have enough contrast either. The easiest thing to do would be to darken the border so it is clear that there is an input below the label.
- The labels for your age input and two selects aren’t quite right. The
for attribute on the label needs to point to the value of the id attribute on the input/select. Yours are pointing to the value of the name attribute on the input.
- The fieldset/legend for you check boxes has an issue. You’ve nested a second fieldset wrapping the checkboxes inside of the outer fieldset. You’ll definitely want to get rid of that. If you need to wrap the check boxes in an element for styling then simply use a
div, that’s what they were made for.
- I’ve saved the biggest one for last. Try narrowing your browser window in as far in as it will go. It won’t take long until you start seeing the issues. Your page is not “responsive.” In other words, it can’t adjust to all the different types of view port widths that various devices will have when looking at your page. A tried and true method is to first style your page using a very narrow view port width. Make sure everything is readable, and for a page like this, there should be no horizontal scroll bar. After you have everything the way you like it, you can start widening the page and use media queries for larger widths to make adjustments to the styling as you see fit.
Again, great job on this, it really does look nice. The above tips are just to help you go beyond what the tests were expecting.
2 Likes
Hello, @jermybz01!
Thank you so much for your time.
- Great! I’ll take it into consideration.
- It’s funny because. I just checked an Instagram post today about border-radius mentioning what you said, and I was thinking about it.
- Wow, I didn’t notice it.
- I struggled a lot to position the image. I’ll read more about it.
- I’ll check it out!
Thank you so much for your response and your time.
Have a good one!
1 Like
Hello, @bbsmooth!
Thank you so much for your time!
- I’ll take into consideration and read more about the contrast ratio.
- I read somewhere recently that placeholder are not recommended, and thanks for pointing out that, and if I need to use it, I’ll adjust the colour as you mentioned.
- The inputs had way more contrast on a prototype I made on Adobe XD, and now that you mention it, I don’t know why I set it like that on code. Thanks for pointing that out.
- I’ll be more careful with linking labels and inputs.
- I struggled a lot at setting two columns on the checkboxes. With my limited knowledge (and frustration), it was what worked. I’ll try to practise and analyse that structure. To be honest, I still don’t know why “it worked” (quotation marks because I’m aware it’s not responsive so it didn’t work) how I did it
- You’re 100% right about its lack of responsiveness. I’m still studying it because I’m struggling a bit at grasping it. I think I just need more practice and check more examples.
Thank you so much for your detailed response and your valuable time. It’s extremely helpful.
Have a good one!
1 Like