Some websites look “modern,” but why?

Question

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:

1. Create a basic HTML form, with no styling
2. Add styling to center the form in the page
3. Add a nicer font
4. Add a gradient to the backgrounds (inspired by the example)
5. Add a colored box around the form (inspired by the example and others)
6. 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).

Answer 1

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:

1. 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.

2. The box is white.

3. Use of rounded corners. Look at the entry fields - the corners are semi-circles, same for the button.

4. Use of a coloured background gradient.

5. 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.

Answer 2

This is exceptionally broad and opinion-based.
Every designer will have their own opinion.

---

There are no "rules" for what looks good.

None. Simply put, you can't quantify "taste" or "beauty" as a set of rules. There's a psychology to every single aspect of a design that will alter perceptions.

For example, purely looking at your sample broken down in text as a description...

• black (or near black) background
• roughly 40% centered grey box
• lime green button
• royal blue type

Just that is pretty hideous.

---

Grey on black, with sharp corners, almost always lends to an "institutional" feeling.

Rounded corners help "soften" things, bright gradients help "lift" the impression making things "feel" more open and airy.....

You merely need to consciously acknowledge the items you find appealing and try to mimic those to a degree. I don't see anything mimicked in your sample when compared to the Sony log in. While there are no real "rules", paying attention to what's around you that you like will help if you can't trust your own aesthetic eye.

You may find this helpful: How can I improve my color selection skill?

---

And lastly.. there's a reason it's called "art"... there are few, if any "rules". It takes an eye capable of noticing what makes something appealing. If everything could be broken down to a set of "rules" for anyone to follow there would be no need for designers and all artists would be out of work.

Theres a very valid reason being a "designer" is a profession.

While I completely understand your sentiment and I recognize there's zero malice in your thought process, you are, essentially asking to do what a designer can do by following a recipe - as if a designer is superfluous and of no value.

It's a tad insulting when programmers simply assume they can do what designers do without any education or even knowledge of the design process or psychology behind design choices. Now, I realize design is not by any means "rocket science" and some developers/programmers have an artistic eye and can be better at design than others, just as some designers have a technical mind and are entirely capable of developing a full web site without issue. Abilities aren't "black and white" in this area much of the time. But to simply assume all you need is a set of rules to follow is exceptionally diminishing to design as a profession. This may be why there was a down vote.. you've walked into a design community and, well, inadvertently insulted the profession and someone may have taken offense. I didn't down vote. Thought about it, but didn't and chose to express my thoughts in an answer.

You don't honestly think Sony let their programmers design that log in page do you? Do you think Sony let their programmers design the PS5? Of course not, Sony has designers design things and programmers program things.