Use tactics to improve your design

1. Use color and bold to create hierarchies instead of font sizes

One of the most common mistakes you make when designing text styles is to rely on font size to control hierarchy.

We often hear requests like this:

“This paragraph is more important, enlarge the font!”

Remember, don’t rely too much on font size, but try to use color and font thickness to get the same job done.

Try one of three colors for your design:

  • Use black for main content, eg the title of an article
  • Use gray for secondary content (e.g. date of publication)
  • Support content in light grey (e.g. copyright notice in footer)

Also, two font weights are sufficient for most UI designs:

  • Normal weight for most text (400 or 500, depending on the font)
  • Use a bolder font (600 or 700) for the text you want to emphasize

Used for web display generally not less than 400, they are more suitable for large headings, smaller size reading will be very uncomfortable.

Of course, for text that is not important (like the company behind the movie poster), use lighter colors or use smaller fonts.

2. Don’t use gray fonts on colored backgrounds

Using light grey font on a white background is a good way to dilute text because it reduces the contrast between the font and the background. But gray font doesn’t work on a colorful background.

The correct way to do this is to find text colors that are close to the background color to help create a hierarchy.

Two ways:

  • Reduce the opacity of white text

This allows the background color to “permeate” into the font without clashing with the background

  • Pick a font color that is close to the background color

Choose a color that matches the tone of the background, and adjust the saturation and brightness to match the background. This is better when the text background contains an image or other non-color elements.

3. Use shadows correctly

Instead of using a large blur effect to simulate the shadow effect, it correctly simulates the light source in the real world.

Shadow effect Design recommended reading “Material Design Guidelines”

4. Don’t use borders too often

When you need to split, try using white space to create a sense of boundaries.

Borders are certainly a good way to distinguish between two page elements, but they’re not the only way, and using them too often can make a page look messy.

Try this next time:

  • Use box shadows

Actions that are equally effective are less likely to distract users

  • Use two different background colors

Usually the background color of adjacent elements is slightly different to make the difference

  • Add more spacing

5. Don’t use oversized ICONS

If you’re using a free icon set like Font Awesome or Zondicons, and you’re designing something that needs to use large ICONS, like the landing page feature, be careful.

While vector images don’t degrade when scaled up, there’s an undeniable lack of detail when scaled up, which can be unprofessional.

If you only have small ICONS, try placing them in another shape that contains the background color, which is more appropriate.

This not only keeps the original icon at the right size, but also fits on larger pages.

Of course, the best way to do this is to use a large, high-level set of ICONS, such as Heroicons or Iconic.

6. Use color borders to enrich your design

A neat way to enhance the aesthetic of your design is to add bright colored borders to your pages.

For example, warning messages:

For example, navigation bar tabs:

For example, the top of the entire page is ok:

7. Not every button needs a background color

In fact, pay attention to the psychological implications of semantic design actions when a page has multiple executable actions.

Frameworks like Boostrap provide semantically styled menu buttons:

Positive semantics, for example, might have a green button, while deleting data might have a red button.

Semantics are an important part of button design, but hierarchy is still an important dimension.

By analogy with a pyramid structure, most pages usually have only one main action, a few less important secondary actions, and other little-used tertiary actions.

When designing these actions, it is important to convey their position in the hierarchy.

  • The main action should be the most obvious. You can use solid, high-contrast background colors.
  • Secondary actions should be clear but not prominent. Outline styles or low contrast background colors are good choices.
  • Level 3 movements should be visible but unobtrusive. The link style is sufficient.

Should all destructive actions be red?

This score situation.

If the action is not the main action on the page, a secondary or tertiary design pattern may be more appropriate:

When this action is the main action (as in a confirmation dialog), it should be emphasized:

Hope the above points can help you!

Wish you good light : )

7 Practical Tips for Cheating at Design

My zhihu: @ Aceyclee | my weibo: @ Aceyclee