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).
You say you tried to use the example as inspiration, but to be honest, I don’t think you have implemented that “inspiration”, and certainly not enough to achieve a similar look. Perhaps it’s because you aren’t seeing things as a designer does. This isn’t really about following any rules, it’s about developing an ability to see what makes something look the way it does.
Here are some of the things I see that make it look the way it does:
Use of space. Note the large amount of space around the box and the large amount of padding within it. The box is centred on the screen.
The box is white.
Use of rounded corners. Look at the entry fields – the corners are semi-circles, same for the button.
Use of a coloured background gradient.
Choice of complimentary colours. In my opinion the green button of the example image is not particularly pleasant. I’d choose not to be inspired by that particular feature. If you are not confident about choosing colours or colour schemes, there are sites such as Adobe Color to help you.
If I was going to create something “inspired” by the example image, it would be something like this shown below. It’s not an exact copy. I didn’t follow any rules for this. I experimented a little until I had something that was pleasant and to my liking.
Note that most of this is just my own opinion, and most designers have their own thoughts and ideas on what works and what doesn’t, and why, because ultimately there are no “rules” in art.
Also, another thing that might help you is not to start with coding. I know this will probably go against your coding instincts. Maybe start with a design using some graphics software such as Adobe XD or Sketch app, or even make some hand drawn sketches. Mess about with it as you please until you have something you like. Then implement it in code.