As a front-end engineer, if you have a basic understanding of HTML and CSS and want to create beautiful user interfaces in your browser, don’t look around! In this article, you will improve your UI design skills by understanding the following seven basics:

  • White space

  • alignment

  • contrast

  • The proportion

  • plate

  • color

  • Visual hierarchy

Let’s get started!

White space

The first design foundation we’ll examine is space whitespace, also known as negative space. As the name suggests, it is the space between elements on a page.

Elements compressed on a page with no white space not only look unattractive, they are also hard to navigate and read.

White space can be adjusted in a number of ways, including padding, margins, and line height. Take a look at the following figure to see how effective white space makes a difference.

Adjust the white space before and after

alignment

Next up is alignment. This is the process of ensuring that each element is properly placed relative to others, for example by keeping its columns aligned downward on the page.

As you can see from the figure below, the elements on page 1 are far less attractive and readable in many different columns (weakly aligned) than page 2, which has strong alignment:

Bad page alignment

Page height alignment

contrast

It is also important to consider contrast when building a page or application. Contrast is the difference between adjacent colors displayed on a page.

As you can see from this example, pages with poor contrast are hard to read and elements don’t stand out.

Pages with poor contrast

Pages with good contrast (as shown below) not only look better, but are also more user-friendly and highly accessible.

High contrast example

To help you get the contrast right, WCAG (Web Content Accessibility Guidelines) recommends a minimum (AA) contrast ratio of at least 4.5:1, 3:1 for large text, or enhanced (AAA) contrast ratio of 7:1 or 4.5:1 (large text). There are many plug-ins or websites that can help you do this.

The proportion

Scale is also an important part of the user interface, so think carefully about the size of each element. For example, elements should be large relative to the page (and therefore not have large gaps). Similarly, elements with higher importance, such as headings, should be greater than elements with lower importance.

Take a look at the before and after images below, and notice how the page looks when adjusted correctly.

Poor page proportions

Good example

format

Typography also has a big impact on the UI. There are many ways to adjust this setting, including font selection, font size, alignment, letter spacing, line height, font style, color, and contrast.

In general, use no more than two font families on a page, and make sure that different aspects can work together to establish an order of importance. This is known as visual hierarchy, which we will discuss in more detail below.

If you follow these tips, the page will look like this:

Good typography examples

Instead of confusing and hard to understand, like this:

Poorly formatted pages

color

The first UI design that affects the user experience is color. Color psychology holds that every color has a meaning for someone — red, for example, can mean danger, while white can mean cleanliness or serenity.

But watch out for color. Meaning can change from culture to culture, so be sure to do your research and consider your target audience when choosing a color.

Also keep in mind that too many colors can make for bad UI, and the colors you choose to use should complement each other. As a rule of thumb, it is generally safe to place lighter or darker variants of the same hue next to each other. Just take a look at the comparison of the two images below and see if the first one is eye-popping!

Page with poor color selection

Make good use of color

Visual hierarchy

The last item on our list is the visual hierarchy. Some elements of the UI are more important than others. Visual hierarchies allow us to establish this importance.

You can do this using position, contrast, color, scale, style, or a combination of the above, as shown in the second image below, which has a better visual hierarchy than the first.

Pages with poor visual hierarchy

Use fonts and colors to create visual layers

conclusion

In this article, we have introduced seven main design foundations: white space, color, contrast, proportion, alignment, typography and visual hierarchy. They are all equally important to the UI — the absence of any of these elements can damage the overall user experience.


Welcome to pay attention to the front end public number: front end pioneer, free front-end engineering utility kit.