UI Design – Basic elements in interface design

Tram Ho

UI Components UI components by Tran Mau Tri Tam

If you are a front-end developer, you will surely understand more or less the importance of UI to users, as well as the fact that an application has a beautiful, good-looking interface will help users have a good look. and will choose to use your application more. As developers, usually we will not get too deep into UI design work, but most of the time will be spent coding interfaces based on existing design patterns, or using UI frameworks like Bootstrap, Material UI. , Ant Design … to build the front-end. However, suppose you fall into one of the following situations:

  • There are a few things that the UI framework you’re using doesn’t support
  • The scale of the application is not large (eg extensions, plugins, tools), using the framework makes you feel redundant
  • Or simply, you have to arrange the elements of the UI framework to match the layout
  • Or even, you are the person doing the development of a product from A – Z (Developer and Designer cum Tester )

This is where understanding the basic elements of UI design will help you, get you a better sense of aesthetics, and build fast and beautiful UI components. So let’s see what basic elements of UI design we need to know.

This article is based on the course ” Learn UI Design Fundamentals ” by Gary Simon.

Basic factors

1. White space

The interface elements should be separated by appropriate spaces.

Check out the 2 pictures of the same card below:

White space

You can see that the picture on the right is better, right? After elements are properly whitespace separated by attributes like padding , margin , then you can see the difference.

2. Alignment (alignment)

Make sure the elements are positioned correctly so they are compatible with each other.

Let’s see the following 2 pictures:

alignment

In these 2 pictures, you can see that the elements are separated by spaces, it looks ok. But in the image on the left, the elements are indenting unevenly compared to the left margin of the frame, which makes you feel a bit uncomfortable when looking. In the right image, the elements are evenly aligned compared to the left margin.

3. Contrast (contrast)

Make sure the elements have a certain contrast, making them easy to see.

Contrast is the color difference between one element on the interface. For example the contrast between:

  • Text on a button and the background of that button
  • Button and div contain it
  • Or that div and the background of the whole website.

WCAG (a web development standard) specifies the minimum recommended contrast ratio between two elements is 4.5: 1 , or for large elements it should be 3: 1 . The larger this ratio, the easier it is to distinguish the elements, the easier it is for the user to see, especially for users with eye disabilities.

To better understand the contrast, see the following 2 pictures:

contrast

Just at a glance, you can see immediately which image is easier to see, right? The image on the left is an example of a design with poor contrast, while in the right image, the elements are colored with good contrast so each element is clearly visible.

4. Scale (size)

Consider using the appropriate size for the element as well as the intended use of the element.

A simple example is, when you see an article, the first thing you care about is the title because it generalizes what the article says. If the title is not interesting, you immediately next, save a block of time. Therefore, the title should be larger, more prominent than the text in the body .

Let’s see the following 2 pictures:

scale

Too obvious which side looks better, right? In the image on the left, the elements are almost the same font size, we don’t know what information we need to select to save in the head, and the color frames don’t cover the full width of the page, looking uneven. In the picture on the right, we can distinguish what this page is titled, each color has a clear color code that makes it easy to remember and the color frames look ok.

5. Typography

Use typeface that is consistent, suitable for its intended use, and compatible with other elements.

Often on the same interface should only use 1 or 2 fonts to ensure consistency, users look more familiar. And depending on the intended use, you should choose the right font and font style, for example, you are working on a furniture site, you are using a street-style font like graffiti, and so on. It’s not about being creative

Let’s see the following 2 pictures:

typography

The problem with the image on the left is using too many typefaces (one style header, one style content, one style footer) and the size is not good either because of the typography, or the designer’s fault. After switching back to the same typeface and tweaking something like in the image on the right, does it look a little better?

6. Color (colors)

Select colors scientifically, harmoniously and in accordance with the topic being directed.

One of the basic and extremely important factors that cannot be ignored is color. For example, when you visit a website, the first thing that catches your eye is not the layout, not the content, but the color of the page. Therefore, the choice of color is quite an important job and requires high aesthetics of the designer. We will not go too deep, but let’s take a look at the following notes:

  • It is necessary to choose the right color for the topic : each color can have a symbolic meaning, for example, green often represents nature, prosperity … or black, Therefore, should consider choosing colors depending on the target user, the product, or the type of business of the company.
  • Do not use too many colors on the same interface : too many colors can confuse the user, losing the expressive purpose of the interface element. Often for easier and safer, we should only choose 1 or 2 main colors, and then mix with different shades (shades) to create harmony.
  • Pay attention to match contrast properly : as mentioned above, good contrast makes it easier to see, and color plays an important role in contrast coordination.

Let’s see the following 2 pictures:

color

Let’s count how many colors are in the picture on the left, maybe you can count 4, if you have 5, or more broadly, give 6. From here, you can see that the important elements are not prominent. , if not difficult to see, because the use of too many colors and partly because the contrast between these colors is not good. On the right image, here I see 3 colors, the background color I calculated completely is 1 color, just different shades, the second color is the font color, the third color is the button. You can easily see where is the button you can press, where is the text you can read.

7. Visual Hierarchy (visual relationships)

Highlighting the function and purpose of the elements on the interface

The most obvious example is the slider, where when scrolling the slider, the image in the middle will be larger than the pictures on the sides, which helps you focus more on the image. It’s a way of highlighting an element using the visual hierarchy . Visual hierarchy is used to highlight elements through the above basic elements. Let’s see how to do that with 5 boxes:

5 boxesUse white space & alignmentUse contrast
Use scaleUse colorMixed many ways

We will see the following 2 pictures of the same form:

The figure on the left is an example when without applying the visual hierarchy, the elements look the same, without emphasis. In the right image, the elements are highlighted, clearly showing their functions and purposes by applying the visual hierarchy. Can you name how many basic elements have been applied in the right picture? Comment below.

Conclusion

So I have shared through the basic elements in UI design, hope the article helps you partly understand more about the UI as well as have a better and more aesthetically pleasing look when working with UI. Please end the article with a small exercise to apply the above elements, you design the interface for the HTML skeleton in the following codepen, after completion, you can compare with the sample design you put in JS. . Share the results below. Have fun!

Share the news now

Source : Viblo