Mastering UI: Designing Beautiful and Scalable Interfaces

Readability

Having the right amount of characters on each line is key to the readability of your text.

It shouldn’t merely be your design that dictates the width of your text, it should also be a matter of legibility.

Many tests have been done proving that the best usability principle for readability on mobile is no more than nine words per line, or 50–60 characters.

Master UI Design Elements

Typography

Dark isn’t Black

Dark shades, on the other hand, don’t need to be dull. Instead of adding black to remove the white, you can increase saturation and decrease brightness.

This will give you a much richer shade of color.

Master UI Design Elements

Colors

Soft grid vs Implicit grid

Soft grid and implicit grid are pretty similar. The main difference is that using the implicit grid gives you this clean feeling, making it easier to have your spacing on point.

You provide careful consideration to every single element of the screen.
It may sound a little overwhelming, but it's not. Used correctly, the implicit grid will become a lens you look through when observing a design.

Master UI Design Elements

Hierarchy

Make it evident and intuitive

Same as buttons, people don’t want to think twice about what links will go. From a usability point of view, having an intuitive navigation is crucial for your target audience. If you are using cards to navigate certain areas, make sure they have a clear label where they are leading.

Master UI Design Elements

Navigation

The importance of grey

Most interface projects you work on are simply going to need multiple shades of grey, usually around 4 or 5 different shades.

By definition, true grey is has 0% saturation in it, aka no color.

But when it comes to interface design, when we think of a grey color, they have a lot of saturation in them, and precisely this saturation is what makes them feel cool or warm.