Hey. I’ve been a programmer for a little while now, i’m mostly geared towards systems programming and pentesting, however i decided to get into front end to try and work remotely. At this point i’m fairly confident in my knowledge in CSS/HTML/JS, however i don’t feel like what i produce is professional, not even close.
I tried very hard to polish it, took me a good 6 hours, i remade it from scratch and changed to the point where i didn’t know what to do next. Yet i would be bothered to see this survey in a professional website, it does not look like the work of a professional, but i can’t pinpoint why. I know this is a very subjective area, however there must be a way to close this gap effectively, which is why i came here. I seem to lack the common sense to identify what my work as a front end developer lacks. In programming i could have specific metrics for performance or elegance, but in front end programming that’s more blurred and subjective, which is why i’m struggling to progress. Any help on how to improve what seems to be simple poor taste would be very welcome.
Coming up with a visually impressive design and being confident in front-end stack are different things, excelling in one does not guarantee excelling in other. If you are confident with front-end stack and able to distinguish good tastes from bad tastes, can’t you reverse engineer good looking forms that exists in other web sites?
Overall design doesn’t look bad at all, but form readability and use of color seems like dragging down the overall design. You can go pretty far just by experimenting with colors and fonts. There are many websites for exploring fonts and colors.
As for html,
Don’t add unnecessary attributes if you are not using them.
Use more div with class so they can be strictly used as CSS target.
label tag does not target name attribute.
div is not a label-able element
you should label each radio input instead of using span
header is not part of main and you might want to reconsider including main at all
As for css,
Prefer class based selector over attribute and tag selectors.
Apply some form of normalize.css, so native browser style won’t bother you too much.
In theory yes, but in practice, no. If it ends up to a point where i feel like i’m copying someone elses work, i don’t see the point in copying style. In programming per se it’s far easier to reverse engineer someone’s logic, but in “art” it’s more tricky, i’m not quite able to see the logic behind design choices. I’ve used quite a few forms to create this one, for example, but you need a certain taste for how everything comes together, which is what i seem to lack.
Every form of art starts from emulating other object whether they are physical or abstract. When I said copy others work, I didn’t mean to say copy and be happy with but to develop your own taste whether its intuitive or logical. I think exposure to many form UIs will definitely sprinkle valuable ideas inside you. My saying is not credible in any aspect but that’s my view when it comes to a creation of, so called, original stuff. If I have to learn how to create good UI, I would do just that. But I understand what you are saying.
Good luck with your form
Firstly my recommendation would be to look at other peoples work and “emulate them”. Focus on the things you dislike (if that’s everything then break it down piece by piece).
For example look at the font then move on to color etc… focus on the smaller things and everything else slots into place. Even simple padding and margin can improve the design greatly.
Like gunhoo said if you clean up the html and how you interact with it through style everything becomes simpler to implement.
Lastly, don’t beat yourself up. Sometimes we are our own worst critic.
The thing about front-end development is it’s still heavily based off of the aesthetic. There used to be a tremendous gap between what was considered a web designer and a web developer but with all the new front-end technologies and things browsers support you’re able to accomplish many of the things it used to take back-end coding for. Having said that, I think what you’re feeling is that your applications aren’t ‘engaging,’ that’s the loss that you’re probably feeling. This is where font styling, color and other branding elements (like logos) can make up for a lot.
I think what you are particularly struggling with here is web design. You may want to check out this short e-mail course from David Kadavy and his design blog and you need to know that there is nothing wrong with simplicity.
In addition to what everyone else is saying, here is a perhaps more actionable suggestion: contribute to someone else’s codebase. This is a useful skill in general, because as a professional developer you will very rarely get to start from scratch, make all the decisions, or work alone. (Even on the rare occasion that you have the chance, you’ll probably go looking for existing code to incorporate or emulate.) I think it can help with your particular concern too. There is nothing quite like working in someone else’s code 8 hours a day to make you develop some very strong opinions about what you would do differently. You’ll learn why you want to avoid shortcut HTML hacks when you try to update code containing some, for example. Contributing to the project will also give you experience with your code being reviewed for acceptance. You may get a pull request rejected and be told that while your code works fine, the project prefers to follow a certain pattern for specific reasons. It’s a whole different perspective.