Some websites look "modern," but when I try to make such a website without some generic tool (e.g. Bootstrap), it ends up looking like some early 2000s monstrosity. What, specifically, about these websites makes them look modern?
Consider this example (source):
this is the kind of look that I'm going for, but when I try to make my own, it looks like an early 2000s monstrosity:
While this isn't necessarily a bad thing (personally, I somewhat like this style), it isn't what most people think looks good, so it won't do.
These are the steps that I used to make it:
- Create a basic HTML form, with no styling
- Add styling to center the form in the page
- Add a nicer font
- Add a gradient to the backgrounds (inspired by the example)
- Add a colored box around the form (inspired by the example and others)
- And add styling to the form controls to make them look less generic and what I thought would be modern.
When I do something like this, I expect to get a nice looking page out of it, but instead I got an early 2000s monstrosity. As such, I suspect that there are some hidden rules of what makes a design modern that I'm missing. As such, I would like to ask: what are these rules? What, specifically (e.g. shadows on every element, a particular ratio of whitespace to non-whitespace things, a particular padding ratio), makes a website look modern? I'm primarily a programmer, so I think in a very logical orderly manner (or, at least, I try to), so I prefer specific rules that I can apply, rather than having to rely on my sense of aesthetics (which tends to always produce things that I somewhat like but that others don't).