Do

While this is not always achievable (sometimes it needs to be pure data due to the need for sorting), it is a good idea to present your data in a variety of ways that will additionally dictate a hierarchy of the individual items.

However, be careful not to overdo it with diversity. The individual elements should be consistent with each other and not cause confusion for the user.

Do

Classic, rectangular buttons with appropriate text are simply the best solution.

Do

"Call to action" should contain precise information for the user what to expect as a result of clicking the button. Thanks to this, you will minimize the user's mental effort, who will not have to wonder what should happen next.

Do

Take a minimalist approach. The design here should be just a stage, which is supposed to allow the main actor - the content - to present itself in the best possible way.

The stage must not distract from the actors, because people do not come to the theater for the sake of the stage itself.

Do

A bit of creativity with a little help from CSS can turn a monotonous list of options into aesthetically pleasing and interesting cards.

Do

Start as clean and minimalist as possible.

Users come to your blog to read the text and will be relieved when your interface will expose text instead of a large number of options and functionalities.

Do

Always be consistent in your design and use the same style throughout the project.

Do

Choose colors carefully so that they don't attract more attention than they need to.

Remember that your most important colors are different shades of gray. However, if you feel that an element disturbs the visual hierarchy through its intense color - desaturate it and make it more grayish.

Do

Use icons to add some life to your design. Also, make sure that the icons are color consistent with the rest of the surrounding interface.

Do

So instead of forcibly increasing the visibility of a given element - lower the visibility of surrounding elements.

For example, you can gray out the buttons in the side cards so they don't compete for attention with the middle button.

Do

Important information should be visible immediately, without the need to perform any additional actions, such as hovering over the icon with the tooltip.

Do

The truth is that it is the photos that should catch our attention the most. In the era of Instagram and visual content, users scan the interface with a pattern in search of attractive graphics.

It is already standard that clicking on the photo takes the user further, so why do we need buttons at all?

Do

You can mix gray with other colors to create interesting shades of gray subtly brushed with red, blue, or any other color. Thanks to this, your design will literally take on colors, while not losing the clarity and usability that gray provides.

Use the Color scheme generator to find the perfect shades.

Do

HTML semantics should not dictate what the element should look like.

This means that, for example, the title of the card, although it will remain an h3 element (i.e. semantically with the highest weight among those present in this card), we style it so that it looks less important.

Why? Because it is only a label, which, although important, should not dominate over the most important element - the main statistic.

Then, instead of relying entirely on typography size, we'll also use font weight and color to establish hierarchy.

Do

Provide sufficient distance so that the user has no doubts about which label belongs to which input field.

Do

Of course, he doesn't. So let's take him seriously in our UI and avoid unnecessary labels.

Do

If you want to highlight an element, give it a background that contrasts with its surroundings. In the example below, we added a gradient blue background to the section, and put the logos in white circles.

Do

Adding white space is the easiest and quickest way to enhance the aesthetics. Why not take advantage of it?

Do

You can lower the visibility of decorative elements by reducing the contrast between them and their surroundings. In this case, you can make the icons brighter and more blend in with the white background.

Do

Use the magic of white space and add some slack to your design

Do

Always ask yourself - is the interface user-friendly and understandable? In a good UI, everything - from text, to a clear color, to an unequivocal icon - should help the user get the best experience possible.

Do

But you can combine 2 things - use a lighter color to reduce the contrast, while increasing the weight of the dividers by changing their thickness from 1 pixel to 2 pixels.

This will compensate for the color change, so we can enjoy the lower contrast of the secondary element without losing its usability.

Do

In left-to-right languages, text in tables should be left-aligned because that's what's most natural for the user.

Numbers, on the other hand, should be aligned to the right, as it is easier to compare them.

Do

Linear gradient masks are a great solution. Thanks to them, you can give more contrast to the part of the image where the text is located, without having to cover the entire image with a mask.

Do

Set the maximum width for the text, for example 550px. Thanks to this, the user will not lose the line and his eyes will be able to easily wander from one line to the next.

Do

Use lists, icons, and highlighted headings so that the user can quickly scan the content and find the most interesting information.

Do

Always try to make life easier for the user. Create a UI that will require as little thinking and mental energy as possible. So place the primary button to the right to be the point where the user will end up.

Do

Instead, use a component where all options are visible at once - e.g. radio buttons.

With only a few options to choose from, this is much more user-friendly as it saves the user the extra step of clicking a dropdown to expand it.

Do

Add a shadow to the drop-down menu to make it appear to be above other elements. Such an illusion of elevation makes elements with a larger (more diffused) shadow appear "higher" than the surface to the user, which attracts more attention.

Do

Use the overlapping technique to give a sense of depth. Thanks to this, we not only give a hierarchy to individual elements, but also our design simply looks more interesting.

Do

Hierarchy is fundamental. The user should always know what the main action is expected of him. Don't add more than one key action per view and make it stand out from other interface elements.

In this case, such a key action is the "pay" option, which has been changed from a simple link into a distinctive button. The remaining links have been placed in the dropdown menu ("more") as additional options.

Do

Instead, use a combination of shadows and gray backgrounds. Additionally, increase the space between the elements, thanks to which the design will be able to "breathe". You can also enrich the UI with icons.

Do

User should be able to easily identify which button is the most important (primary button), which is less important (secondary button) and which presents completely additional information (tertiary button).

Elements with strong, filled backgrounds and shadows attract attention the most, which is why button primary is built in this way.

A delicate background without shadows is less engaging, so it is well suited for button secondary.

The lack of background and shadow makes the element the least visible. These features characterize the button tertiary.

Do

Usually, it's not the labels that are most important, but the data. And in the vast majority of cases, the data does not require a label because it is clear enough on its own.

Take advantage of this trait and give up labels wherever possible. At the same time, impose a clear hierarchy so that the user can easily identify the most important information.

Do

Invert the contrast. By using a similar hue but in different shades (lighter for background and darker for text) we can achieve an effect that is both light and visually attractive, while at the same time providing a strong enough contrast.

Do

In the case of a colored background, it will be best if we choose a shade similar to the background color for the text. The more the text color is similar to the background color, the less contrast there will be between them, and thus less visibility.

So leave the most important element in white, so that it contrasts the most and attracts the most attention. On the other hand, reduce the contrast of the secondary elements so that they are still visible, but do not compete for attention with the primary element.

Thanks to this, we not only maintain a clear herarchy, but also a coherent and aesthetic composition of colors.

Do

There are plenty of ways to provide user feedback - progress bars, notifications, animations and more. Use them generously and, no matter what, always make sure that the user knows what is happening at the moment.

Do

Closeness aids users in swiftly comprehending and structuring information with greater efficiency. Objects situated nearby are interpreted as having comparable functions or characteristics.

Do

Always provide a default option in your UI whenever possible. In many cases, this will coincide with the preferences of the user who will appreciate such help.

Do

Destructive action elements should still be easy to find in the UI, but with the big red button, not even the primary button can compete. Therefore, it is definitely better to lower their visibility so that they do not compete for attention with primary actions.

Do

It's much easier with HSL colors.

        
            
  
              /* Syntax: hsl(hue, saturation, lightness) */
              background-color: hsl(120, 100%, 50%); /* Fully saturated green color */
              
  
              
        
    

HSL separates the color dimensions in a way that's more intuitive for human perception. Hue represents the color itself, Saturation controls the intensity or purity of the color, and Lightness adjusts the brightness. This makes it easier to mentally envision and control the color you want.

When you adjust the Hue value in HSL, you're changing the actual color while maintaining its brightness and saturation. This is especially useful when exploring color schemes or making small variations to find the right tone.

When you adjust the Lightness value in HSL, you can make a color lighter or darker without dramatically altering its hue or saturation. In RGB, changing brightness requires adjusting all three values, which can lead to unexpected color shifts.

HSL makes it easier to create harmonious color schemes.