2

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): modern website login form

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:

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

8
  • Why is this post being downvoted? Instead of simply downvoting, giving actionable feedback would be more effective at producing useful content for the website. – john01dav Nov 20 '20 at 8:57
  • With genuinely NO DISRESPECT when you say "I'm primarily a programmer" I think this might be the crux of it. We can imitate and get close, certainly, but getting a designer friend to help would get you closer. I'm a designer and my programming skills are non-existent. Again no disrespect. – Pete Nov 20 '20 at 9:26
  • 1
    You should look at the many similar questions on this site – Zach Saucier Nov 20 '20 at 12:43
  • 1
    Most likely you're receiving species because your question is quite broad and doesn't meet this community's critique requirements. – Zach Saucier Nov 20 '20 at 12:44
  • @ZachSaucier species? – Billy Kerr Nov 20 '20 at 17:07
4

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.

enter image description here

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.

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.