For every web designer, there will come a time during the design process when design decisions need to be made. Maybe your company doesn’t have a full-time designer and needs a new UI. Or maybe you’re working on your own personal project and you want it to be stronger than the default Bootstrap. A lot of people recoil at this point: “I’m not an artist, I can’t do it better!” However, it has been proved that in order to design a better effect, the rational use of skills is actually more important, and can produce results.

In today’s post, we’ve rounded up 7 simple and intuitive tips for improving the look and feel of a web page. It’s practical and practical. I hope you like it.

1. Use color and word weight to create hierarchies, not just size comparisons

When styling UI text, the most common mistake is to rely too much on font size differences to create contrast.

“Is this passage important? Then make it bigger.” “Is this a minor passage? Then make it smaller.”

Simple and practical font size contrast is not enough to create a contrast, try to combine color and word weight to create a better contrast effect.

“Is this passage important? Let’s make it bold.” “Is this a minor passage? Let’s make it lighter.”

You can even use two or three colors if you can:

  • Use dark colors for main content (such as headings, but not solid black)
  • Use gray for secondary content (e.g., post date)
  • Support content in light gray (such as copyright notices in footers)

Similarly, in UI design, two different word weights are often enough to create a good sense of hierarchy:

  • Most text has a normal font weight (400 to 500, depending on the font)
  • Use heavy word weights (600 to 700, depending on the font) for text that needs emphasis

You should try not to make the text less than 400 because it is already a small font and less than 400 makes it unreadable. If you still need to reduce the font weight, make the font lighter, or replace it with a more recognizable font with a smaller font weight.

2. Don’t use gray text on a colored background

Changing black text to grey on a white background is a good way to tone it down, but doing so on a color background is another matter.

In fact, turning text from black to gray on a white background actually reduces the contrast.

On a color background, however, the way to reduce the contrast is to let the text gradually approach the background color, not go gray.

To reduce the contrast with the background color, there are usually two methods:

1. Reduce the opacity of white text

Lowering the opacity allows the background color to shine through, reducing the contrast between foreground text and background in a non-conflicting way.

2. Hand-pick the text color based on the background color

When the background is an image or pattern, translucent text will affect the readability, in this case, it is best to choose the corresponding text based on the background color.

3. Shadow design

Instead of using a wide range of diffuse blur shadows, using subtle vertical offset shadows is more obvious and natural, mimicking the most common feature of light sources, the shadow created by light falling from above.

If you are interested in the Material Design Guideline, it’s very clear how these shades are made.

4. Use Borders as little as possible

The box model is the most commonly used tool in front of web pages. When you need to create a separation between two elements, try to avoid direct contact between the two elements.

While Border is a good way to separate two elements, it’s not the only way to do it, and using it too much can make the layout look bad or even confusing.

So you can try the following ways to avoid it:

1. Use Box Shadow

Box shadow can also create a sense of boundary, but it is more subtle, not obtrusive, not distracting users.

2, practical background color to distinguish

Often, the background of adjacent elements only needs to be subtly different to distinguish them. So, all you need to do is use different background colors for different blocks and try to remove the border because you don’t need it.

3. Add extra white space

Creating separations between elements does not have to be represented by wireframes, just by adding white space to separate them. Grouping elements through white space and spacing is a common technique in UI design.

5. Don’t let small ICONS zoom in gratuitously

When you’re designing a landing page that highlights the features of your product, you’ll need some big ICONS as visual anchors. You might find a few free vector ICONS from sites like Font Awesome or Zondicons and zoom them up to fit your needs.

They are vector ICONS that can be magnified without loss. But a typical 16×16 icon, magnified three or four times, is lossless but visually unprofessional: it lacks detail and feels pudgy.

However, if these little ICONS are the only material you can get hold of, try placing them in another colored shape:

This design not only allows the icon to reach the desired visual size, but also makes it look more detailed than simply enlarging. Of course, if you are on a tight budget, it is best to buy a few high-quality ICONS in large sizes, such as Heroicons or Iconic.

6. Add unilateral border with color to enhance personality

Of course, you may not be an experienced graphic designer, but you can prepare interfaces that are visually appealing.

The easiest way to do this is to add a monochrome or even gradient border to one side of the border of an interface. This can make an otherwise bland interface come alive.

For example, on the side of the warning pop-up:

Or at the bottom of the navigation bar to trigger:

Or at the top of the entire page:

This does not require any graphic design experience, but it will definitely enhance the design sense.

At the very least, if you don’t know what color to choose, simply go to Dribbble’s color search and find some pretty looking colors.

7. Not every button needs a color

Many times, the context of the button itself and the text on the button can be confusing. Frameworks like BootStrap allow designers to make contextual and semantic choices:

“Is this a positive operation? Let the button be green.” “Is this deleting data? Make the button red.”

Yes, semantics are closely related to the design of the button itself, but there is an even more important dimension that has been left out, and that is hierarchy.

Every action on a web page is located somewhere in the interaction pyramid. Most pages have only one major action, with a few minor actions that are less important, and a few tertiary actions.

When designing these interactions, it is important to show the importance of these interactions through a hierarchy.

    • The main actions should be obvious. Solid, high-contrast buttons are necessary.
    • Secondary actions should be obvious, but not prominent, and it makes sense to use ghost buttons or colors that have a low contrast with the background.
    • Tertiary operations should be visible, but not obvious; they are best designed as links.

“Shouldn’t the buttons involved in disruptive interactions be red?”

There is no need to! If the button involved in a destructive interaction is not the primary action, design it as a secondary or even tertiary action button.

Make it a large, red button with bold text if this is the main action:

[Design trends of 2018, don’t miss a single one]

      1. 10 LOGO Design Trends to Watch out for in 2018
      2. The 21 Most Popular UI Design Trends of 2017
      3. Master these 12 Mobile UX Design Trends and You control 2018
      4. This unique purple is the Pantone Color of the Year to Guide your design in 2018


This article is originally translated by youset.com, please respect the copyright and translator’s achievements, please attach the youset.com link to transfer, violators will be corrected. Thank you for your cooperation.

================ Star recommended ================

UiiiUiii.com is a high-quality Chinese tutorial website of UIII.com, sharing a large number of PS, AE, AI, C4D and other Chinese tutorials, and also preparing intimate knowledge tree columns for zero-based design enthusiasts. Start a new chapter of free self-study and follow our step-by-step guide to get up to speed and create cool visuals.

Design navigation: the most popular design website navigation, designers must: hao.uisdc.com