UI Design is important for every web developer, it's simple yet complicated enough that cannot be explained easily.

In this article, I want to cover some common mistakes made by beginners.

Can you find any problems? Yes, we can find:

1. Accessibility: Low contrast with input placeholders.
2. Messy: There are more than 1 primary buttons.
3. Spacing: The description is too far away from title. Input paddings need some optical corrections.
4. Redundant: The description feels redundant, "Create an account on Fuma Chat" is obviously unnecessary as the user definitely knows it. Also same for the input placeholders.

Look at the boxes carefully.

The padding of our first box might looks a bit off, but why? Human's brain works different from computers. While the xy paddings are actually equal, due to font height (or bounding box), it looks different to us.

In fact, it can be caused by many other factors, such as visual weight and even colors. This Article about Optical Adjustment has explained it well.

Now it looks much better. However, it looks dull.

To give it a different vibe, let's color it!

Congrats, this is a normal sign-in form you could see in every web app. UI Design is a wide topic, hope this little article is helpful to you.