Want to learn ps basic friends can go to study”PS Web Front-end Design Basics”This is a complete set of free tutorials ~

I might assume that most of us don’t know anything about UI design to begin with, but despite our initial difficulties, we have read numerous design books and articles to understand how color, typography, layout, and so on work. It’s a process that has a “why” behind it, and every time we create a larger text, add a shadow, or change colors, there has to be a reason why things have to be the way they are.

So in this article, I’m going to share what I’ve learned from different companies, designers, designing user interfaces, and what I’ve discovered in the process!

Disclaimer: The samples provided below do not necessarily mean they are wrong. This is just the foundation of how we can go from a good design to a better one.

One, this text is important, make it bigger?

When faced with content that requires a font hierarchy, making text larger to give focus and importance usually doesn’t solve the problem, as in the following example:

Font hierarchy is not about small to large font sizes, it’s about the right font size, thickness and color mix to create contrast, the bigger the contrast the better.

So how do you create better contrast?

1. Do not use a different font size weight to create contrast and hierarchy.

2. Instead, use bold and dark styles for main content and smaller and lighter styles for secondary content.

3. Create text in three different colors (see the example below).

4. Don’t be afraid to apply large font gaps on projects (24px header, 16px body text, 10px meta, etc.). Larger gap = better contrast.

5. Remember, contrast = font size + font size + color

6. Finally, be sure to check its contrast.

Two, do not use pure black

We all know that using a black text color (# 000) can cause eyestrain, so our solution was to create a dark variant as an alternative. However, instead of choosing three or more hexadecimal color values, we could use black with a different opacity as a solution:

In the example above, I used black as my primary color and reduced its opacity based on the application hierarchy (main content, auxiliary content, etc.).

3. Use formulas to learn colors

Most of us are bad at choosing the right color combination, and every time we see an elaborate color palette design, we ask ourselves “How did they do it?” “(Like the one below) :

Until I learned that understanding color isn’t just for those with a flair for design from the start, simple addition and subtraction on Hue, Saturation, Brightness (HSB, we’ll use HSB instead of RGB for this formula) comes into play. As follows:

So where does addition and subtraction come in the HSB?

In fact, we can take two approaches, both of which, as we can see, have the same base color but differ in the folder and stripe colors. When we start, always remember that the first number corresponds to hue, then saturation, and finally brightness.

Option A

In option A, we can see that the hue value 123 remains outside of the shape (circle, folder, strip), while saturation and brightness are where the change occurs.

Now, when we focus on base saturation of 24 and brightness of 96, both values change when we create dark green for the folder. Changing saturation from 24 to 40 (increasing +16) and brightness from 96 to 82 (decreasing -14) indicates that the saturation change needs to be adjusted inversely to brightness in order to produce good contrast (and vice versa). The same thing happens on the strip. Using the saturation and brightness of the folder as the base values, we move from 40 to 44 (+04) and reduce the brightness from 82 to 75 (-07), thus obtaining the formula:

Darker value = increased saturation is a decrease in brightness

Lighter = desaturation is an increase in brightness

This formula helps me whenever I want to know what color to use in my design. I learned that the best place to start is with a base color, and from there adjust saturation and brightness while keeping the hue values constant.

Option B

In option B, the same principle still applies (our formula above), but the tonal values change.

RGB represents red, green and blue, while CMY represents cyan, magenta and yellow. These terms didn’t mean anything to me when I first started, until I discovered color combinations using RGB and CMY.

Now in option B, if we want a darker change in the color of the base color, all we need to do is move the color picker to the direction of the closest RGB in the palette, or move it to the direction of CMY for a brighter change. Such as:

Since we want to create a darker base color b9F4BC (circular background), which will be applied to our folder icon, we need to move our color picker in the direction of the nearest RGB (blue in this case). But if we want a lighter version of the folder, we’ll move the selector to the left, near CMY (yellow in this case).

* More commonly, RGB causes a darker change, while CMY causes a lighter change.

Having moved the color picker to the desired variant, we will now apply the formula in option A, which will result in us having this color combination:

Cyan, magenta, yellow (CMY) + Option A formula = lighter changes

Four, use space to separate groups

In addition to adding a line between the two groups to show separation, using a larger space between the two groups is a better and easier solution.

Objects that are close to or near each other are often grouped together

From the example above, my goal is to create a separation by using a large space gap of 24 pixels between the title and its author.

5. Use color to separate lines

In addition to using lines, adding color backgrounds to lines is very helpful for users to read and more enjoyable for our designers.

6. Use brand colors for emphasis

Try to keep our interface as clean as possible

Seven, pay attention to alignment

Finally, if you want to create a list design like the one above, highlight the list by placing bullet points, logos, or numbers in the white space. This will allow the user’s readability stream to be uninterrupted and clearer.

Finally, welcome to join our design group: 801466587, we can exchange and learn more design and content!